:root{
  --cream:#FBF6EE;
  --ink:#221A14;
  --orange:#FF6A1A;
  --orange-deep:#E0530B;
  --gold:#D9A441;
  --line: rgba(34,26,20,0.12);
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit;}
html{scroll-padding-top: env(safe-area-inset-top,0px);}
html,body{height:auto; overflow-x:hidden;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
}
a, button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1B1611;
    --ink:#F4ECE0;
    --line: rgba(244,236,224,0.14);
  }
}
:root[data-theme="dark"]{
  --cream:#1B1611;
  --ink:#F4ECE0;
  --line: rgba(244,236,224,0.14);
}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.bubble{
  font-family:'Baloo 2', cursive;
  color:var(--orange);
  -webkit-text-stroke: 1.5px var(--orange-deep);
}

header.topband{
  position:sticky; top:0;
  top: env(safe-area-inset-top,0px);
  z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:22px 6vw 18px;
  display:flex; align-items:baseline; justify-content:center;
}
.wordmark-link{ display:inline-flex; text-decoration:none; }
.wordmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.wordmark-logo{
  width:clamp(150px, 24vw, 230px);
  aspect-ratio:2023 / 1977;
  background-color:var(--orange);
  -webkit-mask-image:url("img/logo.png");
  mask-image:url("img/logo.png");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}

main{max-width:1100px; margin:0 auto; padding:0 6vw;}

.hero{
  padding:70px 0 50px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
@media (max-width:760px){ .hero{grid-template-columns:1fr;} }

.hero h1{
  font-family:'Baloo 2', cursive;
  font-weight:700;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  line-height:1.05;
  margin:0 0 18px;
}
.hero h1 .pop{color:var(--orange);}
.hero p.lead{
  font-size:1.08rem;
  line-height:1.6;
  max-width:46ch;
  opacity:0.85;
  margin:0 0 28px;
}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  font-size:0.95rem;
  border:2px solid transparent;
  display:inline-block;
}
.btn-solid{background:var(--orange); color:#1B1611;}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

.hero-badge{
  justify-self:center;
  width:min(440px, 90vw);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-badge img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 18px 34px rgba(34,26,20,0.22));
}

section{padding:56px 0; border-top:1px solid var(--line);}
main > section:first-child, main > .hero{ border-top:none; }

.stitches{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px;}
.stitches li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.98rem; line-height:1.5;
}
.stitches .dot{
  width:8px; height:8px; border-radius:50%; background:var(--orange);
  margin-top:8px; flex:none;
}

.drops h2{
  font-family:'Baloo 2', cursive;
  font-size:1.9rem;
  margin:0 0 6px;
}
.drops .sub{opacity:0.7; margin:0 0 34px; font-size:0.98rem;}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:760px){ .grid3{grid-template-columns:1fr;} }

.piece{
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  background: color-mix(in srgb, var(--cream) 92%, var(--orange) 8%);
}
.swatch{
  height:150px; border-radius:12px; margin-bottom:16px;
  background: linear-gradient(145deg, var(--orange) 0%, var(--gold) 100%);
  opacity:0.9;
}
.swatch.alt2{background:linear-gradient(145deg, var(--ink) 0%, var(--orange-deep) 120%);}
.swatch.alt3{background:linear-gradient(145deg, var(--gold) 0%, var(--orange) 130%);}
.piece h3{margin:0 0 6px; font-size:1.1rem;}
.piece p{margin:0 0 10px; font-size:0.92rem; opacity:0.75;}
.piece .price{font-weight:600; color:var(--orange-deep);}

.signup{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  background: color-mix(in srgb, var(--cream) 90%, var(--orange) 10%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 30px;
}
.signup h2{
  font-family:'Baloo 2', cursive;
  margin:0; font-size:1.5rem; flex:1 1 260px;
  color:var(--orange);
}
form{display:flex; gap:10px; flex:1 1 320px; flex-wrap:wrap;}
input[type=email]{
  flex:1 1 200px;
  padding:13px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  font-size:0.95rem;
}
input[type=email]:focus-visible{outline:3px solid var(--gold);}

footer{
  padding:36px 6vw 40px;
  text-align:center;
  font-size:0.85rem;
  opacity:0.6;
  border-top:1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference){
  .hero-badge{ animation: float 5s ease-in-out infinite; }
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* Clothing marketing upgrades */
.announcement{
  background:var(--ink); color:var(--cream); text-align:center;
  padding:10px 6vw; font-size:.82rem; font-weight:600; letter-spacing:.3px;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 0 0;
}
.nav-links{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end;}
.nav-links a{color:var(--ink); text-decoration:none; font-size:.88rem; font-weight:600;}
.nav-links a:hover{text-decoration:underline;}
.nav-links a.is-active{color:var(--orange-deep);}
.eyebrow{
  text-transform:uppercase; letter-spacing:2px; font-size:.75rem;
  font-weight:700; color:var(--orange-deep); margin-bottom:12px;
}
.hero .eyebrow{
  display:inline-block;
}
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow{
    animation: sideToSide 4s ease-in-out infinite;
  }
}
@keyframes sideToSide{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(26px); }
}
.believe-word{
  display:inline-block;
  color:var(--orange);
  transition: opacity .35s ease;
}
.believe-word.fade{ opacity:0; }
.hero .lead{max-width:52ch;}
.trust-row{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:24px;
  font-size:.82rem; font-weight:600; opacity:.78;
}
.trust-row span::before{content:"✓"; color:var(--orange); margin-right:7px;}
.marketing-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.marketing-strip > div{
  background:var(--cream); padding:22px 18px; text-align:center;
}
.marketing-strip strong{display:block; margin-bottom:5px;}
.marketing-strip span{font-size:.84rem; opacity:.72;}
.product-image{
  height:210px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#e9e0d4;
}
.product-image img{width:100%; height:100%; object-fit:cover; display:block;}
.piece .buy{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px;
}
.mini-btn{
  background:var(--ink); color:var(--cream); border:0; border-radius:999px;
  padding:9px 14px; font-weight:600; cursor:pointer; font-family:inherit;
}
.story-card{
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
.story-visual{
  min-height:280px; border-radius:18px;
  background:radial-gradient(circle at 30% 25%, var(--orange), var(--orange-deep) 55%, #7e2c08);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:35px; color:var(--cream);
}
.story-visual strong{font-family:'Baloo 2',cursive; font-size:2.2rem; line-height:1;}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.review{
  border:1px solid var(--line); border-radius:16px; padding:20px;
  background:color-mix(in srgb, var(--cream) 94%, var(--orange) 6%);
}
.review p{margin:0 0 12px; line-height:1.55; font-size:.92rem;}
.review strong{font-size:.82rem;}
.offer{
  background:var(--orange); color:#1B1611; border-radius:18px;
  padding:30px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.offer h2{font-family:'Baloo 2',cursive; margin:0 0 4px; font-size:1.8rem;}
.offer p{margin:0; opacity:.82;}
.offer .btn{background:#1B1611; color:var(--cream);}

.current-selection .sub{opacity:.7; margin:0 0 30px; font-size:.98rem; max-width:56ch;}
.current-selection h2{
  font-family:'Baloo 2', cursive;
  font-size:1.9rem;
  margin:0 0 6px;
}
.current-selection .grid3{grid-template-columns:repeat(2,1fr); max-width:680px;}
@media (max-width:760px){ .current-selection .grid3{grid-template-columns:1fr;} }
.stock-note{
  font-size:.78rem; font-weight:700; letter-spacing:.2px;
  color:var(--orange-deep);
}

.faq-teaser{
  text-align:center;
  padding:46px 40px;
  border:1px solid var(--line);
  border-radius:18px;
  background: color-mix(in srgb, var(--cream) 96%, var(--orange) 4%);
}
.faq-teaser h2{
  font-family:'Baloo 2', cursive;
  font-size:1.8rem;
  margin:0 0 10px;
}
.faq-teaser p{
  opacity:.78;
  max-width:52ch;
  margin:0 auto 24px;
  line-height:1.6;
}

/* FAQ */
.faq-list{display:grid; gap:34px; max-width:74ch;}
.faq-item{border-top:1px solid var(--line); padding-top:28px;}
.faq-item:first-child{border-top:none; padding-top:0;}
.faq-item h2{
  font-family:'Baloo 2', cursive;
  font-size:1.28rem;
  line-height:1.3;
  margin:0 0 12px;
}
.faq-item p{line-height:1.68; opacity:.9; margin:0 0 14px;}
.faq-verse{
  border-left:3px solid var(--orange);
  margin:16px 0 0;
  padding:2px 0 2px 18px;
  font-style:italic;
  opacity:.85;
  font-size:.95rem;
  line-height:1.65;
}
.faq-verse cite{
  display:block;
  font-style:normal;
  font-size:.78rem;
  opacity:.7;
  margin-top:8px;
}

/* Simple page headers for interior pages */
.page-head{ padding:44px 0 8px; }
.page-head .eyebrow{ margin-bottom:10px; }
.page-head h1{
  font-family:'Baloo 2', cursive;
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  margin:0 0 10px;
}
.page-head p{ opacity:.8; max-width:56ch; line-height:1.6; margin:0; }

@media (max-width:760px){
  .nav{align-items:flex-start; flex-direction:column;}
  .nav-links{justify-content:flex-start;}
  .marketing-strip,.story-card,.review-grid{grid-template-columns:1fr;}
  .marketing-strip > div{padding:18px;}
}


/* Email capture popup */
.email-popup{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(5px);
}
.email-popup.is-open{display:flex;}
.email-popup-card{
  width:min(520px,100%);
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:22px;
  padding:34px;
  position:relative;
  box-shadow:0 25px 80px rgba(0,0,0,.25);
}
.email-popup-close{
  position:absolute;
  top:12px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.email-popup-close:hover{background:color-mix(in srgb,var(--cream) 80%,var(--ink) 20%);}
.email-popup-badge{
  display:inline-block;
  padding:6px 11px;
  border-radius:999px;
  background:var(--orange);
  color:#1B1611;
  text-transform:uppercase;
  letter-spacing:1.3px;
  font-size:.7rem;
  font-weight:800;
  margin-bottom:14px;
}
.email-popup-card h2{
  font-family:'Baloo 2',cursive;
  font-size:2.2rem;
  line-height:1;
  margin:0 0 10px;
}
.email-popup-card p{
  margin:0 0 20px;
  line-height:1.55;
  opacity:.78;
}
.email-popup-form{display:flex;gap:10px;flex-wrap:wrap;}
.email-popup-form input{
  flex:1 1 220px;
  min-width:0;
  padding:14px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;
}
.email-popup-form input:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}
.email-popup-form button{
  border:0;
  cursor:pointer;
  flex:0 0 auto;
}
.email-popup-note{
  margin-top:12px !important;
  margin-bottom:0 !important;
  font-size:.76rem;
  opacity:.58 !important;
}
.email-popup-success{
  display:none;
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  background:color-mix(in srgb,var(--orange) 16%,var(--cream) 84%);
  font-size:.9rem;
  font-weight:600;
}
.email-popup-success.show{display:block;}
@media (max-width:600px){
  .email-popup{padding:14px;}
  .email-popup-card{padding:28px 22px;}
  .email-popup-card h2{font-size:1.9rem;}
  .email-popup-form .btn{width:100%;}
}


/* Page-load artwork loader */
#artLoader{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
  background:var(--cream);
}
#artLoader.is-open{display:flex;}
.art-loader-frame{
  position:relative;
  width:min(220px, 55vw);
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
}
.art-loader-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
.art-loader-base{
  filter:grayscale(1) opacity(0.28);
}
.art-loader-fill{
  clip-path: inset(100% 0 0 0);
  filter:drop-shadow(0 6px 18px rgba(224,83,11,0.25));
  transition: clip-path 1.5s cubic-bezier(.32,.72,.28,1);
}
#artLoader.is-filling .art-loader-fill{
  clip-path: inset(0% 0 0 0);
}
.art-loader-label{
  font-family:'Baloo 2', cursive;
  color:var(--orange-deep);
  font-size:1.15rem;
  letter-spacing:.3px;
}
@media (prefers-reduced-motion: reduce){
  .art-loader-fill{ transition:none; }
}

/* Mobile refinements */
@media (max-width:640px){
  .announcement{
    font-size:.72rem; letter-spacing:.15px; padding:9px 5vw;
  }
  header.topband{ padding:16px 5vw 14px; }
  .wordmark-logo{ width:clamp(120px, 40vw, 170px); }
  .nav{ gap:12px; }
  .nav-links{ gap:12px 16px; width:100%; }
  .nav-links a{ font-size:.84rem; }

  main{ padding:0 5vw; }
  section{ padding:40px 0; }
  .page-head{ padding:28px 0 6px; }

  .hero{ padding:36px 0 34px; gap:30px; }
  .hero .eyebrow{ font-size:.68rem; letter-spacing:1.5px; }
  .hero h1{ font-size:clamp(1.7rem, 7.5vw, 2.3rem); }
  .hero p.lead{ font-size:.98rem; max-width:none; }
  .cta-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .cta-row .btn{ text-align:center; width:100%; }
  .trust-row{ flex-direction:column; gap:9px; margin-top:20px; }
  .hero-badge{ width:min(280px, 78vw); margin-top:6px; }

  .drops h2{ font-size:1.6rem; }
  .story-visual{ min-height:200px; padding:26px; }
  .story-visual strong{ font-size:1.7rem; }

  .offer{ flex-direction:column; align-items:stretch; text-align:center; padding:26px 22px; }
  .offer .btn{ width:100%; text-align:center; }

  .signup{ flex-direction:column; align-items:stretch; text-align:center; padding:26px 22px; }
  .signup h2{ font-size:1.3rem; }
  form{ width:100%; }
  input[type=email]{ width:100%; }
  .signup .btn{ width:100%; }

  .art-loader-label{ font-size:1rem; text-align:center; padding:0 8vw; }

  .current-selection h2{ font-size:1.6rem; }
  .faq-teaser{ padding:32px 24px; }
  .faq-teaser h2{ font-size:1.5rem; }
  .faq-item h2{ font-size:1.14rem; }

  footer{ padding:28px 6vw 32px; font-size:.8rem; }
}

/* ================= Cart & checkout ================= */
.nav{position:relative;}
.cart-button{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line); border-radius:999px;
  padding:7px 12px; font:600 .88rem 'Space Grotesk',sans-serif; cursor:pointer;
}
.cart-button:hover{border-color:var(--ink);}
.cart-button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.cart-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--line); font-size:.75rem;
}
.cart-count.has-items{background:var(--orange); color:#1B1611;}
@media (max-width:760px){
  .cart-button{position:absolute; top:0; right:0;}
}

.cart-overlay{position:fixed; inset:0; background:rgba(20,14,10,.45); z-index:90;}
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(420px,100vw);
  background:var(--cream); color:var(--ink);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s ease, visibility 0s linear .28s;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.cart-drawer.is-open{transform:none; visibility:visible; transition:transform .28s ease;}
@media (prefers-reduced-motion: reduce){ .cart-drawer{transition:none;} }
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line);}
.cart-head h2{font-family:'Baloo 2',cursive; margin:0; font-size:1.5rem; color:var(--orange);}
.cart-close{background:none; border:0; color:var(--ink); font-size:1.8rem; line-height:1; cursor:pointer; padding:4px 8px;}
.cart-lines{flex:1; overflow-y:auto; padding:8px 22px;}
.cart-empty{opacity:.7; padding:24px 0;}
.cart-line{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-thumb{width:56px; height:56px; margin:0; border-radius:10px; position:relative;}
.cart-info{display:flex; flex-direction:column; gap:3px; font-size:.9rem;}
.cart-info span{opacity:.7; font-size:.84rem;}
.cart-line-total{font-weight:600;}
.qty{display:flex; align-items:center; gap:8px; margin-top:6px;}
.qty button{
  width:28px; height:28px; border-radius:999px; border:1.5px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; font:600 1rem 'Space Grotesk',sans-serif;
}
.qty .cart-remove{width:auto; border:0; font-size:.8rem; text-decoration:underline; opacity:.7; padding:0 4px;}
.cart-foot{padding:18px 22px 22px; border-top:1px solid var(--line);}
.ship-note{margin:0 0 12px; font-size:.85rem; color:var(--orange-deep); font-weight:600;}
.sum-row{display:flex; justify-content:space-between; padding:5px 0; font-size:.92rem;}
.sum-total{font-weight:700; font-size:1.05rem; border-top:1px solid var(--line); margin-top:6px; padding-top:10px;}
.cart-checkout{display:block; text-align:center; margin-top:14px;}

/* Shop cards: size picker */
.piece .buy{flex-wrap:wrap;}
.size-select{
  margin-left:auto;
  padding:8px 10px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--cream); color:var(--ink); font:500 .88rem 'Space Grotesk',sans-serif;
}
.size-select:focus-visible, .mini-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.add-msg{min-height:1.2em; margin:8px 0 0 !important; font-size:.82rem !important; opacity:.85 !important;}

/* Checkout page */
.checkout{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:start; padding-top:16px;}
.checkout-empty{grid-column:1/-1; text-align:center; padding:30px 0;}
.checkout-form{grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:22px;}
.checkout-form fieldset{border:0; margin:0; padding:0;}
.checkout-form legend{font-family:'Baloo 2',cursive; font-weight:700; font-size:1.3rem; margin-bottom:10px; padding:0;}
.stripe-slot{min-height:44px;}
.order-summary{
  grid-column:2; grid-row:1; position:sticky; top:120px;
  border:1px solid var(--line); border-radius:18px; padding:22px;
  background:color-mix(in srgb, var(--cream) 92%, var(--orange) 8%);
}
.order-summary h2{font-family:'Baloo 2',cursive; margin:0 0 8px; font-size:1.3rem;}
.sum-line{display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem;}
.sum-line .cart-thumb{width:48px; height:48px;}
.sum-line-info{display:flex; flex-direction:column;}
.sum-line-info span{opacity:.7; font-size:.82rem;}
.thumb-qty{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:999px;
  background:var(--ink); color:var(--cream); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 5px; opacity:1;
}
.edit-cart{display:inline-block; margin-top:14px; color:var(--ink); font-size:.88rem; font-weight:600;}
.checkout-error{margin:0; padding:12px 14px; border-radius:12px; background:rgba(192,57,43,.1); color:#A93226; font-weight:600; font-size:.9rem;}
.pay-button{width:100%; font-size:1.05rem; padding:16px 26px; cursor:pointer; position:relative;}
.pay-button:disabled{opacity:.55; cursor:not-allowed;}
.pay-spinner{display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(27,22,17,.3); border-top-color:#1B1611; animation:spin .8s linear infinite; margin:0 auto;}
.pay-button.is-loading .pay-label{display:none;}
.pay-button.is-loading .pay-spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}
.secure-note{margin:0; font-size:.8rem; opacity:.65; text-align:center;}
@media (max-width:860px){
  .checkout{grid-template-columns:1fr; gap:26px;}
  .order-summary{grid-column:1; grid-row:1; position:static;}
  .checkout-form{grid-row:2;}
}

.thank-you{padding:70px 0 90px; text-align:center;}
.thank-you h1{font-size:clamp(2rem,5vw,3rem); margin:0 0 14px;}
.thank-you p{max-width:48ch; margin:0 auto 26px; line-height:1.6; opacity:.85;}
.thank-you .cta-row{justify-content:center;}

/* Live products from Stripe */
.cart-thumb{overflow:hidden; flex-shrink:0;}
.cart-thumb:not(.swatch){background:#e9e0d4;}
.cart-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb-wrap{position:relative; width:48px; height:48px;}
.sum-line .thumb-wrap .cart-thumb{width:48px; height:48px;}
.grid-note{grid-column:1/-1; opacity:.7; margin:0; padding:20px 0;}
.sold-out-tag{margin-left:auto; font-weight:600; font-size:.85rem; opacity:.65; text-transform:uppercase; letter-spacing:.4px;}
a.piece-link{display:block; color:inherit; text-decoration:none; transition:transform .15s ease;}
a.piece-link:hover{transform:translateY(-2px);}
a.piece-link:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

.size-select{width:5.6em; max-width:5.6em;}

/* "Added to cart" yoyo animation */
.yoyo-pop{
  position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom,0px));
  z-index:95; pointer-events:none;
  transform:translate(-50%, 130%); opacity:0;
  transition:transform .22s cubic-bezier(.2,1.4,.4,1), opacity .15s ease;
}
.yoyo-pop.is-showing{transform:translate(-50%, 0); opacity:1;}
.yoyo-pop.is-leaving{transform:translate(-50%, 130%); opacity:0; transition:transform .24s ease-in, opacity .24s ease-in;}
.yoyo-card{
  background:#FBF6EE; border:2px solid #221A14; border-radius:22px;
  box-shadow:0 16px 40px rgba(20,14,10,.28);
  padding:10px 14px 12px; display:flex; flex-direction:column; align-items:center;
}
.yoyo-stage{position:relative; width:200px; aspect-ratio:200/330;}
.yoyo-stage img{position:absolute; top:0; left:0; width:100%; height:auto;}
.yoyo-stage svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
#yyString{stroke:#3a302a; stroke-width:1.1; stroke-linecap:round;}
.yy-body{fill:#111;}
.yy-shine{fill:none; stroke:#FF6A1A; stroke-width:1.6; stroke-linecap:round;}
.yoyo-label{
  font-family:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',sans-serif; font-weight:800;
  font-size:1.7rem; line-height:1; letter-spacing:-.2px;
  color:#FF6A1A; -webkit-text-stroke:1px #E0530B; margin-top:2px;
}
@keyframes cartBump{0%{transform:scale(1);}40%{transform:scale(1.45);}100%{transform:scale(1);}}
.cart-count.bump{animation:cartBump .35s ease-out;}
@media (max-width:760px){ .yoyo-stage{width:160px;} }