/*
Theme Name:kind-recards
Theme URI: 
Description: Custom functionaliteiten
Author: JUNNECT
Author URI: www.junnect.nl
Version: 1.0.0
Template: Divi
*/

/* wrapper shrinks to the art box */
.cc-mockup{
  position: relative;
  display: inline-block;      /* shrink-wrap */
  z-index: 0;
  overflow: visible;

  /* knobs */
  --mock-offset-x: .7rem;
  --mock-offset-y: -.9rem;
  --mock-rotate: -3deg;
  --mock-radius: 12px;
  --mock-back: url('https://kind-recards.com/wp-content/themes/kind-recards/app/product-config/assets/img/mockup-bg.svg');
  --mock-stroke: #d2d2e9;
  transition: transform 0.3s ease;
}

.cc-mockup:hover {
  transform: translateX(var(--mock-offset-x)) translateY(var(--mock-offset-y)) rotate(var(--mock-rotate));
}

/* back card: exactly the same width/height as the art */
.cc-mockup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 93%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: var(--mock-back);
    background-size: cover;
    transform: translateY(-4.6%);
}

/* front art — use its intrinsic size so wrapper can match it */
.cc-mockup > canvas,
.cc-mockup > img{
  display: block;
  width: auto !important;      /* override any global responsive rules */
  height: auto !important;     /* keeps intrinsic pixel height */
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}