/* LOCKEDIN3D: "A card in every order" section on product pages (thank-you card / gift card). Carlos, 28 Oct */
.cards{position:relative;padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.cards::before{content:"";position:absolute;z-index:-1;right:-10%;top:10%;width:70%;height:80%;background:radial-gradient(50% 50% at 50% 55%,rgba(196,154,98,.13),transparent 70%);pointer-events:none}
.cards-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(40px,6vw,96px);align-items:center}
.cards .h-xl{margin-top:18px}
.cards .lead{margin-top:18px;max-width:44ch}

/* segmented switch, same liquid glass as the Gota menu */
.cd-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:34px;padding:5px;border-radius:999px;
  background:rgba(13,11,9,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.07),0 14px 30px -16px rgba(0,0,0,.8)}
.cd-switch button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap;transition:color .45s var(--ease)}
.cd-switch button svg{width:16px;height:16px;flex:none}
.cd-switch button[aria-selected="true"]{color:var(--on-bronze)}
.cd-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(180deg,var(--bronze-hi),var(--bronze));
  box-shadow:0 6px 18px -6px rgba(196,154,98,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .6s var(--ease)}
.cd-switch[data-on="thanks"] .cd-pill{transform:translateX(100%)}

.cd-info{margin-top:30px;max-width:46ch}
.cd-info[hidden]{display:none}
.cd-info h3{font:600 clamp(18px,1.5vw,22px)/1.2 var(--display);font-stretch:112%;letter-spacing:-.005em}
.cd-info p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--fg-2,var(--mute))}
.cd-info ul{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.cd-info li{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;color:var(--fg-2,var(--mute))}
.cd-info li svg{width:18px;height:18px;flex:none;color:var(--bronze-hi)}
.cd-info.in{animation:cdIn .7s var(--ease) both}
@keyframes cdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the card stage: the chosen card in front, the other one resting behind it */
.cd-stage{position:relative;perspective:1600px}
.cd-deck{position:relative;aspect-ratio:1400/660;margin:6% 9% 9% 0;container-type:inline-size}
.cd-card{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;
  transition:transform 1s var(--ease),opacity .8s var(--ease),filter .8s var(--ease)}
.cd-card:not(.is-on){transform:translate3d(10%,-12%,-120px) rotate(5deg);opacity:.5;filter:brightness(.55) saturate(.8);z-index:0}
.cd-card:not(.is-on):hover{opacity:.75;filter:brightness(.75)}
.cd-card.is-on{z-index:2;cursor:default;transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-8deg))}
/* the card face is outlined by box-shadow; flip removed on 28 Oct (fronts only) */
.cd-flip{position:absolute;inset:0}
.cd-face{position:absolute;inset:0;display:block;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 70px -30px rgba(0,0,0,.95),0 18px 30px -18px rgba(0,0,0,.8)}
.cd-face img{width:100%;height:100%;object-fit:cover}
.cd-face::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);background-size:250% 100%;background-position:100% 0;transition:background-position 1.4s var(--ease);pointer-events:none}
.cd-card.is-on:hover .cd-face::after{background-position:0 0}
.cd-shadow{position:absolute;left:6%;right:6%;bottom:-11%;height:12%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent 70%);filter:blur(6px);z-index:-1}

/* the line in the buy box that points to the section */
.perks li.perk-card a{color:inherit;text-decoration:none;border-bottom:1px solid var(--bronze-line,rgba(196,154,98,.4))}
.perks li.perk-card a:hover{color:var(--fg);border-color:var(--bronze)}

@media (max-width:1000px){
  .cards-in{grid-template-columns:1fr}
  .cd-stage{order:-1;max-width:640px}
}
@media (max-width:560px){
  .cd-switch{display:grid;width:100%}
  .cd-switch button{padding:0 10px;letter-spacing:.12em}
  .cd-deck{margin:9% 7% 10% 0}
  .cd-face{border-radius:9px}
  }