.product-detail{max-width:1160px;margin:0 auto;padding:38px 28px 84px}.back-products{display:inline-block;color:#754936;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:28px}.product-layout{display:grid;grid-template-columns:minmax(320px,.84fr) minmax(420px,1.16fr);gap:72px;align-items:start}.product-media{min-width:0}.preview-panel{position:sticky;top:24px;min-height:660px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#b78b70;padding:42px;isolation:isolate}.preview-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 45%,rgba(61,30,20,.16));pointer-events:none}.preview-note{position:absolute;top:20px;left:22px;color:#fff;opacity:.9;text-transform:uppercase;letter-spacing:.12em;font-size:10px;z-index:4}.live-keyring{--leather:#e5b6c1;width:355px;height:355px;position:relative;display:grid;place-items:center;background:var(--leather);box-shadow:0 18px 32px rgba(44,22,15,.38),inset 0 0 0 5px rgba(56,31,23,.58);transition:background .25s,border-radius .25s;z-index:2}.live-keyring:before{content:"";position:absolute;width:76px;height:76px;border:10px solid #d8a952;border-radius:50%;left:50%;top:-58px;transform:translateX(-50%);z-index:5;box-shadow:0 2px 2px rgba(0,0,0,.18)}.live-keyring:after{content:"";position:absolute;inset:17px;border:2px dashed rgba(255,250,240,.78);pointer-events:none;z-index:3}.shape-portrait{border-radius:50%}.shape-portrait:after{border-radius:50%}.shape-portrait .pet-preview{border-radius:50%;inset:27px;width:calc(100% - 54px);height:calc(100% - 54px)}.shape-scalloped{width:350px;height:360px;border-radius:43% 43% 40% 40% / 35% 35% 45% 45%;clip-path:polygon(22% 2%,38% 5%,50% 0,62% 5%,78% 2%,88% 12%,98% 25%,95% 39%,100% 50%,95% 61%,98% 75%,88% 88%,78% 98%,62% 95%,50% 100%,38% 95%,22% 98%,12% 88%,2% 75%,5% 61%,0 50%,5% 39%,2% 25%,12% 12%)}.shape-scalloped:after{clip-path:inherit;inset:22px;border-radius:43% 43% 40% 40% / 35% 35% 45% 45%}.shape-scalloped .pet-preview{border-radius:48%;inset:51px 42px 40px;width:calc(100% - 84px);height:calc(100% - 91px)}.shape-two{width:390px;height:280px;border-radius:48%;margin-top:24px}.shape-two:before{width:68px;height:68px;top:-50px}.shape-two:after{border-radius:48%;inset:19px}.shape-two .pet-preview{display:none;top:49px;width:45%;height:180px;border-radius:46%;object-fit:cover}.shape-two .preview-one{left:18px}.shape-two .preview-two{right:18px}.shape-body{width:310px;height:370px;clip-path:polygon(47% 1%,58% 4%,66% 12%,75% 10%,82% 19%,88% 30%,98% 36%,94% 47%,100% 57%,94% 66%,96% 77%,84% 82%,76% 93%,64% 98%,53% 94%,42% 100%,30% 93%,21% 84%,10% 79%,13% 67%,3% 58%,9% 47%,2% 38%,12% 30%,18% 18%,28% 13%,36% 4%)}.shape-body:before{top:-48px;width:65px;height:65px}.shape-body:after{inset:18px;clip-path:inherit}.shape-body .pet-preview{inset:32px 30px 24px;width:calc(100% - 60px);height:calc(100% - 56px);border-radius:42% 42% 39% 39% / 32% 32% 47% 47%;object-fit:contain;background:rgba(255,253,247,.2)}.pet-preview{display:none;position:absolute;z-index:2;object-fit:cover;filter:contrast(.98) saturate(.88);box-shadow:inset 0 0 0 2px rgba(69,38,25,.55)}.preview-empty{position:absolute;inset:0;display:grid;place-items:center;color:#fff8ef;text-align:center;font-size:17px;line-height:1.45;padding:58px;z-index:2}.preview-name{position:absolute;bottom:30px;left:20px;right:20px;text-align:center;color:#fff8ef;text-shadow:0 1px 4px rgba(41,23,16,.7);letter-spacing:.22em;font-size:18px;z-index:4}.shape-two .preview-name{bottom:19px}.live-keyring.is-mini{transform:scale(.65)}.detail-eyebrow{font-size:11px;letter-spacing:.18em;color:#a64f2e;text-transform:uppercase}.product-info h1{font-size:42px;line-height:1.03;margin:4px 0 14px}.product-meta{font-size:12px;text-transform:uppercase;letter-spacing:.11em;margin-bottom:28px}.product-description{font-size:17px;line-height:1.45;max-width:600px}.product-promise{border-block:1px solid #d6c2b3;margin:27px 0;padding:20px 0;color:#6d5143;line-height:1.45}.product-form label,.control-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.13em;margin:18px 0 8px}.product-form input,.product-form select,.product-form textarea{box-sizing:border-box;width:100%;font:inherit;background:#fffdfa;border:1px solid #c9b8aa;padding:12px 15px;border-radius:0}.product-form textarea{min-height:84px;resize:vertical}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.swatch{padding:10px 8px;border:1px solid #c9b8aa;background:#fffdfa;font-size:12px;cursor:pointer}.swatch.selected{outline:2px solid #2d201b;outline-offset:-2px}.dot{display:inline-block;width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:middle;margin-right:5px}.upload-box{padding:18px;border:1px dashed #b99e8c;background:#fffaf6;color:#6d5143;line-height:1.5}.upload-box input{margin-top:10px;border:0;padding:0;background:transparent}.preview-local{font-size:12px;color:#795c4b;margin-top:8px}.order-summary{background:#f0e4d9;margin-top:25px;padding:18px 20px}.order-summary div{display:flex;justify-content:space-between;gap:20px}.order-summary strong{font-size:19px}.checkout-button{width:100%;margin-top:20px;border:0;background:#251b17;color:#fffaf4;padding:16px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}.approval-note{font-size:13px;line-height:1.5;color:#6d5143;margin:15px 0 0}.checkout-status{min-height:20px;margin:10px 0 0;color:#8a432d;font-size:13px;line-height:1.4}.checkout-button:disabled{cursor:wait;opacity:.68}@media(max-width:800px){.product-detail{padding:26px 18px 60px}.product-layout{grid-template-columns:1fr;gap:34px}.preview-panel{position:relative;top:auto;min-height:450px}.live-keyring{width:280px;height:280px}.shape-scalloped{width:280px;height:290px}.shape-two{width:310px;height:225px}.shape-two .pet-preview{height:144px;top:39px}.shape-body{width:250px;height:300px}.product-info h1{font-size:36px}.swatches{grid-template-columns:repeat(2,1fr)}}

/* Product-specific preview refinements: keep the stage neutral and match each keyring style. */
.preview-panel {
  background: linear-gradient(145deg, #c79f82 0%, #ad8266 58%, #946a53 100%);
}
.live-keyring {
  overflow: visible;
  isolation: isolate;
}
.live-keyring::after {
  border-color: rgba(255, 249, 241, 0.8);
}

/* Mini: compact pet-head charm instead of a square card. */
.shape-mini.is-mini {
  width: 232px;
  height: 250px;
  margin-top: 38px;
  transform: none;
  border-radius: 44% 44% 46% 46% / 34% 34% 49% 49%;
  clip-path: polygon(10% 23%, 27% 4%, 42% 12%, 50% 9%, 58% 12%, 73% 4%, 90% 23%, 92% 43%, 87% 62%, 78% 80%, 64% 93%, 50% 99%, 36% 93%, 22% 80%, 13% 62%, 8% 43%);
  box-shadow: 0 18px 28px rgba(44, 22, 15, 0.38), inset 0 0 0 5px rgba(56, 31, 23, 0.58);
}
.shape-mini.is-mini::before {
  width: 54px;
  height: 54px;
  top: -40px;
  border-width: 7px;
}
.shape-mini.is-mini::after {
  inset: 13px;
  border-radius: inherit;
  clip-path: inherit;
}
.shape-mini.is-mini .pet-preview {
  top: 31px;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 52px);
  border-radius: 47% 47% 43% 43% / 37% 37% 52% 52%;
  object-fit: cover;
}
.shape-mini.is-mini .preview-empty {
  padding: 42px 28px 12px;
  font-size: 13px;
}
.shape-mini.is-mini .preview-name {
  bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* Scalloped: a regular oval leather frame with gentle rounded scallops. */
.shape-scalloped {
  width: 306px;
  height: 372px;
  margin-top: 20px;
  border-radius: 46%;
  clip-path: polygon(50% 0%, 61% 4%, 71% 1%, 80% 8%, 90% 10%, 95% 20%, 99% 30%, 96% 40%, 100% 50%, 96% 60%, 99% 70%, 95% 80%, 90% 90%, 80% 92%, 71% 99%, 61% 96%, 50% 100%, 39% 96%, 29% 99%, 20% 92%, 10% 90%, 5% 80%, 1% 70%, 4% 60%, 0% 50%, 4% 40%, 1% 30%, 5% 20%, 10% 10%, 20% 8%, 29% 1%, 39% 4%);
  box-shadow: 0 18px 30px rgba(44, 22, 15, 0.4), inset 0 0 0 5px rgba(56, 31, 23, 0.58);
}
.shape-scalloped::before {
  width: 64px;
  height: 64px;
  top: -47px;
  border-width: 8px;
}
.shape-scalloped::after {
  inset: 19px;
  border: 2px dashed rgba(255, 249, 241, 0.78);
  border-radius: 46%;
  clip-path: inherit;
}
.shape-scalloped .pet-preview {
  top: 47px;
  left: 40px;
  width: calc(100% - 80px);
  height: calc(100% - 85px);
  border-radius: 49% / 48%;
  object-fit: cover;
}
.shape-scalloped .preview-empty {
  padding: 80px 38px 24px;
}

/* Full/Half body: a soft die-cut silhouette, not a sharp star shape. */
.shape-body {
  width: 274px;
  height: 370px;
  margin-top: 40px;
  border-radius: 44% 44% 47% 47% / 36% 36% 52% 52%;
  clip-path: polygon(50% 2%, 63% 7%, 75% 18%, 84% 34%, 91% 49%, 84% 63%, 86% 76%, 77% 88%, 63% 97%, 50% 92%, 37% 100%, 23% 89%, 14% 76%, 16% 63%, 8% 49%, 15% 35%, 22% 19%, 35% 8%);
  box-shadow: 0 18px 30px rgba(44, 22, 15, 0.4), inset 0 0 0 5px rgba(56, 31, 23, 0.58);
}
.shape-body::before {
  width: 66px;
  height: 66px;
  top: -49px;
  border-width: 8px;
}
.shape-body::after {
  inset: 16px;
  border: 2px dashed rgba(255, 249, 241, 0.78);
  border-radius: inherit;
  clip-path: inherit;
}
.shape-body .pet-preview {
  top: 38px;
  left: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 66px);
  border-radius: 46% 46% 42% 42% / 34% 34% 53% 53%;
  object-fit: contain;
  background: rgba(255, 250, 244, 0.16);
}
.shape-body .preview-empty {
  padding: 82px 28px 24px;
}

@media (max-width: 800px) {
  .shape-mini.is-mini { transform: scale(0.9); }
  .shape-scalloped { transform: scale(0.82); }
  .shape-body { transform: scale(0.82); }
}

/* Mini Keyring: use the real Furloom example as the starting preview. */
.shape-mini.is-mini:not(.has-upload) {
  width: 280px;
  height: 330px;
  margin-top: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
}
.shape-mini.is-mini:not(.has-upload)::before,
.shape-mini.is-mini:not(.has-upload)::after { display: none; }
.shape-mini.is-mini .mini-reference-model {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(47, 26, 17, 0.34));
}
.shape-mini.is-mini:not(.has-upload) .preview-empty {
  position: absolute;
  z-index: 2;
  top: 67%;
  left: 50%;
  width: 144px;
  padding: 8px 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 250, 244, 0.75);
  border-radius: 3px;
  background: rgba(52, 29, 19, 0.72);
  color: #fffaf4;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.shape-mini.is-mini:not(.has-upload) .preview-name { z-index: 3; color: #fffaf4; }
/* When a customer uploads a photo, keep the real keyring model visible.
   The portrait is placed inside the tiny cat charm rather than replacing the
   product with the generic pink silhouette. */
.shape-mini.is-mini.has-upload {
  width: 280px;
  height: 330px;
  margin-top: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.shape-mini.is-mini.has-upload::before,
.shape-mini.is-mini.has-upload::after { display: none; }
.shape-mini.is-mini.has-upload .mini-reference-model { display: block; }
.shape-mini.is-mini.has-upload .preview-empty { display: none !important; }
.shape-mini.is-mini.has-upload .preview-one {
  display: block;
  position: absolute;
  z-index: 2;
  left: 35%;
  top: 56%;
  width: 31%;
  height: 23%;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(15% 14%, 31% 3%, 48% 12%, 65% 3%, 86% 16%, 100% 48%, 90% 79%, 66% 96%, 50% 100%, 34% 96%, 10% 79%, 0 48%);
  filter: saturate(.94) contrast(1.03);
  transform: rotate(-2deg);
  box-shadow: none;
}
.shape-mini.is-mini.has-upload .preview-two { display: none !important; }

/* Final live-preview system.
   The first five products keep their own leather silhouette; the framed
   portrait uses a separate fixed frame without a keyring. */

/* Mini: use the cat-head leather silhouette both before and after upload. */
.shape-mini.is-mini:not(.has-upload),
.shape-mini.is-mini.has-upload {
  width: 232px;
  height: 250px;
  margin-top: 38px;
  transform: none;
  overflow: visible;
  border: 0;
  border-radius: 44% 44% 46% 46% / 34% 34% 49% 49%;
  background: var(--leather);
  clip-path: polygon(10% 23%,27% 4%,42% 12%,50% 9%,58% 12%,73% 4%,90% 23%,92% 43%,87% 62%,78% 80%,64% 93%,50% 99%,36% 93%,22% 80%,13% 62%,8% 43%);
  box-shadow: 0 18px 28px rgba(44,22,15,.38),inset 0 0 0 5px rgba(56,31,23,.58);
}
.shape-mini.is-mini .mini-reference-model { display: none !important; }
.shape-mini.is-mini:not(.has-upload)::before,
.shape-mini.is-mini.has-upload::before {
  display: block;
  width: 54px;
  height: 54px;
  top: -40px;
  border-width: 7px;
}
.shape-mini.is-mini:not(.has-upload)::after,
.shape-mini.is-mini.has-upload::after {
  display: block;
  inset: 13px;
  border-radius: inherit;
  clip-path: inherit;
}
.shape-mini.is-mini.has-upload .preview-one {
  display: block;
  top: 31px;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 52px);
  transform: none;
  border-radius: 47% 47% 43% 43% / 37% 37% 52% 52%;
  clip-path: polygon(10% 18%,28% 3%,43% 12%,50% 9%,57% 12%,72% 3%,90% 18%,94% 44%,87% 68%,72% 88%,50% 100%,28% 88%,13% 68%,6% 44%);
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}
.shape-mini.is-mini .preview-empty {
  inset: 0;
  top: auto;
  left: auto;
  width: auto;
  padding: 48px 30px 18px;
  transform: none;
  border: 0;
  background: transparent;
  font-size: 13px;
}
.shape-mini.is-mini .preview-name {
  bottom: 18px;
  color: #fff8ef;
  font-size: 13px;
  letter-spacing: .14em;
}

/* Full/Half body: fill the die-cut silhouette like the portrait preview. */
.shape-body .pet-preview {
  object-fit: cover;
  object-position: center;
  background: transparent;
}

/* Framed portrait: fixed ornamental frame, no keyring hardware. */
.shape-framed {
  width: 310px;
  height: 390px;
  margin-top: 10px;
  overflow: visible;
  border: 18px ridge #b98a3d;
  border-radius: 48% 48% 45% 45% / 43% 43% 48% 48%;
  background: #6f4935;
  clip-path: none;
  box-shadow: 0 22px 34px rgba(42,22,13,.42),0 0 0 7px #4a2c1c,0 0 0 11px #d1a453,inset 0 0 0 7px #3e2418;
}
.shape-framed::before { display: none; }
.shape-framed::after {
  display: block;
  inset: 13px;
  z-index: 3;
  border: 3px double #efd18b;
  border-radius: 48% 48% 45% 45% / 43% 43% 48% 48%;
  pointer-events: none;
}
.shape-framed .pet-preview {
  display: none;
  top: 28px;
  left: 25px;
  width: calc(100% - 50px);
  height: calc(100% - 56px);
  border-radius: 48% 48% 45% 45% / 43% 43% 48% 48%;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}
.shape-framed.has-upload .preview-one { display: block; }
.shape-framed .preview-empty {
  inset: 28px 25px;
  padding: 54px 34px;
  border-radius: 48% 48% 45% 45% / 43% 43% 48% 48%;
  background: var(--leather);
}
.shape-framed .preview-name { bottom: 40px; }

@media (max-width:800px) {
  .shape-mini.is-mini:not(.has-upload),
  .shape-mini.is-mini.has-upload { transform: scale(.9); }
  .shape-framed { width: 250px;height: 315px;border-width: 14px; }
  .shape-framed .pet-preview { top: 22px;left: 20px;width:calc(100% - 40px);height:calc(100% - 44px); }
  .shape-framed .preview-empty { inset:22px 20px;padding:42px 26px; }
}

/* Framed portrait final overlay: the customer photo sits behind the real frame PNG. */
.shape-framed {
  width: 330px;
  height: 396px;
  margin-top: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  box-shadow: none;
}
.shape-framed::before { display:none; }
.shape-framed::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  border:0;
  border-radius:0;
  background:url('assets/products/framed-pet-portrait-overlay.png') center/contain no-repeat;
  pointer-events:none;
}
.shape-framed .pet-preview {
  top:20.4%;
  left:21.7%;
  width:58.6%;
  height:61.2%;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  box-shadow:none;
  z-index:2;
}
.shape-framed.has-upload .preview-one { display:block; }
.shape-framed .preview-empty {
  inset:auto;
  top:20.4%;
  left:21.7%;
  width:58.6%;
  height:61.2%;
  box-sizing:border-box;
  padding:44px 24px;
  border-radius:50%;
  background:var(--leather);
  z-index:1;
}
.shape-framed .preview-name {
  right:24%;
  bottom:23%;
  left:24%;
  z-index:3;
}
@media(max-width:800px) {
  .shape-framed { width:270px;height:325px;border:0; }
  .shape-framed .pet-preview,
  .shape-framed .preview-empty {
    top:20.4%;left:21.7%;width:58.6%;height:61.2%;
  }
}

/* Preview polish: hardware lives outside the clipped leather silhouette. */
.preview-object {
  position:relative;
  display:grid;
  width:max-content;
  height:max-content;
  place-items:center;
}
.preview-hardware {
  position:absolute;
  top:-58px;
  left:50%;
  z-index:7;
  display:block;
  width:76px;
  height:76px;
  transform:translateX(-50%);
  border:10px solid #d8a952;
  border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,.2);
  pointer-events:none;
}
.preview-object-body .preview-hardware { top:-49px;width:65px;height:65px;border-width:8px; }
.preview-object-mini .preview-hardware { top:-40px;width:54px;height:54px;border-width:7px; }
.preview-object-two .preview-hardware { top:-50px;width:68px;height:68px;border-width:8px; }
.preview-object-scalloped .preview-hardware { top:-47px;width:64px;height:64px;border-width:8px; }
.live-keyring::before { display:none !important; }

/* Mini: remove the old dark rectangular placeholder. */
.shape-mini.is-mini:not(.has-upload) .preview-empty {
  inset:0;
  top:auto;
  left:auto;
  width:auto;
  height:auto;
  padding:48px 30px 18px;
  transform:none;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff8ef;
  font-size:13px;
  line-height:1.35;
}

/* Full/Half-Body: replace the sharp polygon with a soft die-cut silhouette. */
.shape-body {
  clip-path:none;
  border-radius:44% 44% 40% 40% / 34% 34% 50% 50%;
}
.shape-body::after {
  clip-path:none;
  border-radius:44% 44% 40% 40% / 34% 34% 50% 50%;
}
.shape-body .pet-preview {
  border-radius:45% 45% 40% 40% / 34% 34% 52% 52%;
}

/* Scalloped: use a smooth layered oval instead of jagged polygon points. */
.shape-scalloped {
  clip-path:none;
  border-radius:48% 48% 46% 46% / 43% 43% 49% 49%;
  box-shadow:0 18px 30px rgba(44,22,15,.4),0 0 0 7px rgba(72,42,30,.4),0 0 0 14px var(--leather),inset 0 0 0 5px rgba(56,31,23,.58);
}
.shape-scalloped::after {
  clip-path:none;
  border-radius:48% 48% 46% 46% / 43% 43% 49% 49%;
}
.shape-scalloped .pet-preview {
  border-radius:50% / 48%;
}
/* Keep the product preview and commission photographs in normal page order */
@media (min-width:801px){
  .preview-panel{
    position:relative;
    top:auto;
  }
}
/* Keep every product placement preview completely text-free */
.preview-panel .preview-note,
.preview-panel .preview-empty,
.preview-panel .preview-name{
  display:none !important;
}

.preview-panel .pet-preview:not([src]),
.preview-panel .pet-preview[src=""]{
  display:none !important;
}

/* Mini Keyring and Mini Brooch: use the same smaller round 3 cm preview. */
.shape-mini.is-mini:not(.has-upload),
.shape-mini.is-mini.has-upload {
  width: 190px;
  height: 190px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 50%;
  clip-path: none;
}

.shape-mini.is-mini:not(.has-upload)::after,
.shape-mini.is-mini.has-upload::after {
  inset: 12px;
  border-radius: 50%;
  clip-path: none;
}

.shape-mini.is-mini.has-upload .preview-one {
  top: 18px;
  left: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  border-radius: 50%;
  clip-path: none;
  object-fit: cover;
  object-position: center;
}

.preview-object-mini .preview-hardware {
  top: -38px;
}

@media (max-width: 800px) {
  .shape-mini.is-mini:not(.has-upload),
  .shape-mini.is-mini.has-upload {
    width: 170px;
    height: 170px;
  }
}