/* ============ SHOP PAGE ============ */
.page-hero{
  padding:160px clamp(18px,4vw,46px) 60px;
  border-bottom:1px solid var(--line);
}
.page-hero__inner{display:flex;flex-direction:column;gap:16px;max-width:760px}
.page-hero__index{font:600 11px/1 "Archivo";letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.page-hero__title{font-family:"Archivo Black";font-size:clamp(48px,9vw,120px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.page-hero__title em{font-family:"Fraunces";font-style:italic;font-weight:300;color:var(--accent);text-transform:lowercase}
.page-hero__sub{font-family:"Fraunces";font-weight:300;font-size:clamp(16px,2vw,22px);color:var(--muted);max-width:50ch;line-height:1.4}

/* ============ FILTERS ============ */
.shop-filters{
  position:relative;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:32px clamp(18px,4vw,46px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:background .7s var(--easing);
}

.filter-fx{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .6s;
}
.shop-filters.has-theme .filter-fx{ opacity:1; }

/* ---- base button ---- */
.filter-btn{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:3px;
  padding:14px 20px 12px;
  border:1px solid var(--line);border-radius:3px;
  background:rgba(18,14,10,.6);
  color:var(--muted);cursor:none;
  transition:
    background .4s var(--easing),
    color .4s var(--easing),
    border-color .4s var(--easing),
    box-shadow .4s var(--easing),
    transform .3s var(--easing);
  overflow:hidden;
  min-width:72px;
  backdrop-filter:blur(4px);
}
/* sweep overlay */
.filter-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(246,236,224,.04) 0%,transparent 60%);
  opacity:0;transition:opacity .4s var(--easing);
}
/* bottom progress line */
.filter-btn::after{
  content:"";position:absolute;bottom:0;left:0;
  height:2px;width:0%;background:currentColor;
  transition:width .4s var(--easing);
  opacity:.6;
}
.filter-btn:hover::before{ opacity:1; }
.filter-btn:hover::after{ width:100%; }
.filter-btn:hover{ color:var(--ink);border-color:rgba(246,236,224,.3);transform:translateY(-2px); }
.filter-btn.is-active::after{ width:100%;opacity:1; }
@media (hover:none){.filter-btn{cursor:pointer}}

/* glyph */
.filter-btn__glyph{
  display:block;
  font-size:20px;line-height:1;
  transition:transform .4s var(--easing),filter .4s;
  will-change:transform;
}
.filter-btn:hover .filter-btn__glyph{ transform:scale(1.25) translateY(-1px); }

/* label */
.filter-btn__label{
  font:700 10px/1 "Archivo";letter-spacing:.18em;text-transform:uppercase;
}

/* sub-label — hidden until active */
.filter-btn__sub{
  font:500 8px/1 "Fraunces";font-style:italic;letter-spacing:.1em;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s var(--easing),max-height .35s var(--easing);
  color:currentColor;
}
.filter-btn.is-active .filter-btn__sub{
  opacity:.7;max-height:14px;
}

/* ---- ALL ---- */
.filter-btn[data-theme="all"].is-active{
  background:var(--ink);border-color:var(--ink);color:var(--bg);
  box-shadow:0 4px 24px rgba(246,236,224,.15);
}
.filter-btn[data-theme="all"].is-active .filter-btn__glyph{
  animation:allSpin 4s linear infinite;
}
@keyframes allSpin{ to{transform:rotate(360deg) scale(1.1)} }

/* ---- MOON ---- silver-blue, slow pulse glow */
.filter-btn[data-theme="moon"].is-active{
  background:#1a1f2e;border-color:#8ab4d4;color:#d0e8f5;
  box-shadow:0 0 18px rgba(138,180,212,.35), inset 0 0 12px rgba(138,180,212,.1);
  animation:moonPulse 2s ease-in-out infinite;
}
.filter-btn[data-theme="moon"].is-active::before{
  background:radial-gradient(circle at 50% 0%,rgba(138,180,212,.25),transparent 70%);
  opacity:1;
}
.filter-btn[data-theme="moon"].is-active .filter-btn__glyph{
  animation:moonOrbit 6s ease-in-out infinite;
  filter:drop-shadow(0 0 8px #8ab4d4);
}
@keyframes moonOrbit{
  0%,100%{ transform:scale(1.1) rotate(-8deg); }
  50%    { transform:scale(1.3) rotate(8deg) translateY(-3px); }
}
@keyframes moonPulse{
  0%  { box-shadow:0 0 12px rgba(138,180,212,.3),inset 0 0 8px rgba(138,180,212,.08); transform:scale(1); }
  40% { box-shadow:0 0 40px rgba(138,180,212,.75),0 0 80px rgba(138,180,212,.25),inset 0 0 20px rgba(138,180,212,.2); transform:scale(1.03); }
  100%{ box-shadow:0 0 12px rgba(138,180,212,.3),inset 0 0 8px rgba(138,180,212,.08); transform:scale(1); }
}

/* ---- EARTH ---- warm terracotta, textured shimmer */
.filter-btn[data-theme="earth"].is-active{
  background:#2a1508;border-color:#c17f4a;color:#f0c99a;
  box-shadow:0 0 18px rgba(193,127,74,.35);
  animation:earthShimmer 2.5s ease-in-out infinite;
}
.filter-btn[data-theme="earth"].is-active::before{
  background:linear-gradient(135deg,rgba(193,127,74,.2) 0%,transparent 50%,rgba(193,127,74,.1) 100%);
  opacity:1;
}
.filter-btn[data-theme="earth"].is-active .filter-btn__glyph{
  animation:earthPulse 3s ease-in-out infinite;
  filter:drop-shadow(0 0 6px #c17f4a);
}
@keyframes earthPulse{
  0%,100%{ transform:scale(1) rotate(0deg); }
  33%    { transform:scale(1.2) rotate(45deg); }
  66%    { transform:scale(1.1) rotate(90deg); }
}
@keyframes earthShimmer{
  0%  { box-shadow:0 0 10px rgba(193,127,74,.2); transform:translateY(0) scale(1); }
  25% { box-shadow:0 0 30px rgba(193,127,74,.55),0 4px 0 rgba(193,127,74,.35); transform:translateY(-1px) scale(1.02); }
  60% { box-shadow:0 0 20px rgba(193,127,74,.4); transform:translateY(1px) scale(1); }
  100%{ box-shadow:0 0 10px rgba(193,127,74,.2); transform:translateY(0) scale(1); }
}

/* ---- WATER ---- cyan ripple animation */
.filter-btn[data-theme="water"].is-active{
  background:#04141e;border-color:#22b8cf;color:#a8eeff;
  box-shadow:0 0 20px rgba(34,184,207,.4);
  animation:waterRipple 1.6s ease-in-out infinite;
}
.filter-btn[data-theme="water"].is-active::before{
  background:radial-gradient(ellipse 120% 60% at 50% 100%,rgba(34,184,207,.25),transparent 70%);
  opacity:1;animation:waterShift 2.5s ease-in-out infinite;
}
.filter-btn[data-theme="water"].is-active .filter-btn__glyph{
  animation:waterWave 1.2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px #22b8cf);
}
@keyframes waterWave{
  0%,100%{ transform:scaleX(1) translateY(0); }
  25%    { transform:scaleX(1.15) translateY(-2px); }
  75%    { transform:scaleX(0.9) translateY(2px); }
}
@keyframes waterRipple{
  0%  { box-shadow:0 0 14px rgba(34,184,207,.3),0 0 0 0 rgba(34,184,207,0); transform:translateY(0) scaleX(1); }
  30% { box-shadow:0 0 36px rgba(34,184,207,.75),0 0 60px rgba(34,184,207,.2); transform:translateY(-3px) scaleX(1.04); }
  65% { box-shadow:0 0 20px rgba(34,184,207,.5); transform:translateY(1px) scaleX(0.98); }
  100%{ box-shadow:0 0 14px rgba(34,184,207,.3); transform:translateY(0) scaleX(1); }
}
@keyframes waterShift{
  0%,100%{ background-position:50% 100%; }
  50%    { background-position:50% 60%; }
}

/* ---- SUN ---- radiant gold burst */
.filter-btn[data-theme="sun"].is-active{
  background:#1e1000;border-color:#ffcc00;color:#fff7cc;
  box-shadow:0 0 22px rgba(255,204,0,.5), 0 0 50px rgba(255,204,0,.2);
  animation:sunBurst 1.1s ease-in-out infinite;
}
.filter-btn[data-theme="sun"].is-active::before{
  background:radial-gradient(circle at 50% 50%,rgba(255,204,0,.3),transparent 65%);
  opacity:1;animation:sunRotate 8s linear infinite;
}
.filter-btn[data-theme="sun"].is-active .filter-btn__glyph{
  animation:sunSpin 2s linear infinite;
  filter:drop-shadow(0 0 10px #ffcc00) drop-shadow(0 0 20px rgba(255,204,0,.5));
}
@keyframes sunSpin{ to{ transform:rotate(360deg) scale(1.2); } }
@keyframes sunBurst{
  0%  { box-shadow:0 0 16px rgba(255,204,0,.4),0 0 40px rgba(255,204,0,.15); transform:scale(1); }
  20% { box-shadow:0 0 50px rgba(255,204,0,.9),0 0 100px rgba(255,204,0,.4),0 0 160px rgba(255,150,0,.2); transform:scale(1.06); }
  55% { box-shadow:0 0 28px rgba(255,204,0,.6),0 0 60px rgba(255,204,0,.2); transform:scale(1.02); }
  100%{ box-shadow:0 0 16px rgba(255,204,0,.4),0 0 40px rgba(255,204,0,.15); transform:scale(1); }
}
@keyframes sunRotate{
  to{ transform:rotate(360deg); }
}

/* ---- FIRE ---- ember flicker */
.filter-btn[data-theme="fire"].is-active{
  background:#1a0400;border-color:#ff5a1f;color:#ffcfb8;
  box-shadow:0 0 20px rgba(255,90,31,.5), 0 0 50px rgba(255,90,31,.2);
  animation:fireFlicker 0.55s ease-in-out infinite;
}
.filter-btn[data-theme="fire"].is-active::before{
  background:linear-gradient(to top,rgba(255,90,31,.35) 0%,rgba(255,182,39,.1) 60%,transparent 100%);
  opacity:1;
}
.filter-btn[data-theme="fire"].is-active .filter-btn__glyph{
  animation:fireGlyph 0.45s ease-in-out infinite;
  filter:drop-shadow(0 0 8px #ff5a1f) drop-shadow(0 0 16px rgba(255,90,31,.6));
}
@keyframes fireGlyph{
  0%  { transform:scale(1) rotate(0deg) translateY(0); }
  20% { transform:scale(1.3) rotate(-4deg) translateY(-3px); }
  45% { transform:scale(1.1) rotate(3deg) translateY(-1px); }
  70% { transform:scale(1.25) rotate(-2deg) translateY(-4px); }
  100%{ transform:scale(1) rotate(0deg) translateY(0); }
}
@keyframes fireFlicker{
  0%  { box-shadow:0 0 18px rgba(255,90,31,.5),0 0 45px rgba(255,90,31,.2); transform:skewX(0deg) scale(1); }
  15% { box-shadow:0 0 42px rgba(255,90,31,.9),0 0 80px rgba(196,30,42,.45),0 0 120px rgba(255,90,31,.15); transform:skewX(-1deg) scale(1.05); }
  32% { box-shadow:0 0 22px rgba(255,182,39,.7),0 0 55px rgba(255,90,31,.3); transform:skewX(1.5deg) scale(1.02); }
  48% { box-shadow:0 0 52px rgba(196,30,42,.8),0 0 90px rgba(255,90,31,.35); transform:skewX(-0.5deg) scale(1.06); }
  68% { box-shadow:0 0 28px rgba(255,182,39,.6),0 0 60px rgba(255,90,31,.25); transform:skewX(1deg) scale(1.01); }
  85% { box-shadow:0 0 38px rgba(255,90,31,.75),0 0 70px rgba(196,30,42,.3); transform:skewX(-1.5deg) scale(1.04); }
  100%{ box-shadow:0 0 18px rgba(255,90,31,.5),0 0 45px rgba(255,90,31,.2); transform:skewX(0deg) scale(1); }
}

/* ---- WIND ---- fast sweep shimmer */
.filter-btn[data-theme="wind"].is-active{
  background:#060d0a;border-color:#76e0a0;color:#c8f7de;
  box-shadow:0 0 18px rgba(118,224,160,.35);
  animation:windSweep 0.8s ease-in-out infinite;
}
.filter-btn[data-theme="wind"].is-active::before{
  background:linear-gradient(105deg,transparent 0%,rgba(118,224,160,.25) 50%,transparent 100%);
  opacity:1;background-size:200% 100%;
  animation:windSlide 1.4s ease-in-out infinite;
}
.filter-btn[data-theme="wind"].is-active .filter-btn__glyph{
  animation:windGlyph 0.7s ease-in-out infinite;
  filter:drop-shadow(0 0 6px #76e0a0);
}
@keyframes windGlyph{
  0%  { transform:translateX(0) scaleX(1); opacity:1; }
  40% { transform:translateX(5px) scaleX(1.2); opacity:.7; }
  41% { transform:translateX(-6px) scaleX(0.8); opacity:.4; }
  100%{ transform:translateX(0) scaleX(1); opacity:1; }
}
@keyframes windSweep{
  0%  { box-shadow:0 0 10px rgba(118,224,160,.2); transform:translateX(0) skewX(0deg); }
  20% { box-shadow:0 0 30px rgba(118,224,160,.65),0 0 60px rgba(118,224,160,.2); transform:translateX(4px) skewX(-2deg); }
  50% { box-shadow:0 0 18px rgba(118,224,160,.4); transform:translateX(6px) skewX(-3.5deg); }
  80% { box-shadow:0 0 28px rgba(118,224,160,.6),0 0 55px rgba(118,224,160,.18); transform:translateX(3px) skewX(-1.5deg); }
  100%{ box-shadow:0 0 10px rgba(118,224,160,.2); transform:translateX(0) skewX(0deg); }
}
@keyframes windSlide{
  0%  { background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* ---- theme ambient background on the filter bar ---- */
.shop-filters.theme-moon  { background:rgba(18,22,38,.6); }
.shop-filters.theme-earth { background:rgba(28,14,6,.6); }
.shop-filters.theme-water { background:rgba(4,16,22,.6); }
.shop-filters.theme-sun   { background:rgba(20,12,0,.6); }
.shop-filters.theme-fire  { background:rgba(22,4,0,.6); }
.shop-filters.theme-wind  { background:rgba(4,14,10,.6); }

/* product grid */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(12px,1.6vw,24px);
  padding:clamp(24px,4vw,48px) clamp(18px,4vw,46px);
}
.product-card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;
  opacity:0;transform:translateY(30px);
  transition:opacity .7s var(--easing),transform .7s var(--easing),border-color .3s;
  transition-delay:calc(var(--ci,0) * .07s);
}
.product-card.in{opacity:1;transform:none}
.product-card:hover{border-color:rgba(246,236,224,.3)}

.product-card__img{
  aspect-ratio:3/4;background-size:cover;background-position:center;
  position:relative;overflow:hidden;
}
.product-card__img-inner{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1s var(--easing);
  filter:saturate(.9) contrast(1.05);
}
.product-card:hover .product-card__img-inner{transform:scale(1.06)}
.product-card__badge{
  position:absolute;top:12px;left:12px;
  font:700 9px/1 "Archivo";letter-spacing:.2em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 8px;border-radius:2px;
}
.product-card__edition{
  position:absolute;bottom:12px;right:12px;
  font:600 10px/1 "Archivo";letter-spacing:.15em;color:rgba(246,236,224,.6);
}

.product-card__body{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}
.product-card__title{font-family:"Archivo Black";font-size:18px;letter-spacing:-.01em;line-height:1.1}
.product-card__meta{font:500 11px/1 "Archivo";letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.product-card__price{font-family:"Fraunces";font-size:22px;font-weight:400;color:var(--accent-2)}

.product-card__sizes{display:flex;gap:6px;flex-wrap:wrap}
.size-btn{
  font:600 10px/1 "Archivo";letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:2px;
  background:none;color:var(--muted);cursor:none;
  transition:background .25s,color .25s,border-color .25s;
}
.size-btn:hover{border-color:var(--ink);color:var(--ink)}
.size-btn.is-selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.size-btn.sold-out{opacity:.35;pointer-events:none;text-decoration:line-through}
@media (hover:none){.size-btn{cursor:pointer}}

.product-card__add{
  font:700 12px/1 "Archivo";letter-spacing:.1em;text-transform:uppercase;
  padding:13px;border:1px solid var(--accent);border-radius:2px;
  background:none;color:var(--accent);cursor:none;
  transition:background .3s var(--easing),color .3s;margin-top:auto;
}
.product-card__add:hover{background:var(--accent);color:#fff}
.product-card__add:disabled{opacity:.4;pointer-events:none}
@media (hover:none){.product-card__add{cursor:pointer}}

.shop-empty{
  text-align:center;padding:80px 20px;
  font-family:"Fraunces";font-style:italic;font-size:22px;color:var(--muted);
}

/* ============ CART DRAWER ============ */
.cart-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(2px);
}
.cart-overlay.is-open{opacity:1;pointer-events:auto}

.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:1001;
  background:var(--paper);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .5s var(--easing);
  display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:none}
.cart-drawer__inner{display:flex;flex-direction:column;height:100%;overflow:hidden}

.cart-drawer__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.cart-drawer__title{font-family:"Archivo Black";font-size:20px;letter-spacing:-.01em}
.cart-drawer__close{
  background:none;border:0;color:var(--ink);font-size:16px;cursor:none;
  padding:4px;transition:color .3s;
}
.cart-drawer__close:hover{color:var(--accent)}
@media (hover:none){.cart-drawer__close{cursor:pointer}}

.cart-drawer__items{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.cart-drawer__empty{font-family:"Fraunces";font-style:italic;font-size:16px;color:var(--muted);margin:auto;text-align:center}

.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.cart-item:last-child{border-bottom:0}
.cart-item__img{width:64px;height:80px;background-size:cover;background-position:center;border-radius:2px;flex-shrink:0}
.cart-item__info{display:flex;flex-direction:column;gap:4px}
.cart-item__name{font:700 13px/1.2 "Archivo";letter-spacing:-.01em}
.cart-item__size{font:500 10px/1 "Archivo";letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.cart-item__price{font-family:"Fraunces";font-size:15px;color:var(--accent-2)}
.cart-item__qty{display:flex;align-items:center;gap:8px}
.qty-btn{
  width:24px;height:24px;border:1px solid var(--line);border-radius:2px;
  background:none;color:var(--ink);font-size:14px;cursor:none;
  display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s;
}
.qty-btn:hover{border-color:var(--ink);background:rgba(246,236,224,.08)}
@media (hover:none){.qty-btn{cursor:pointer}}
.cart-item__remove{font:500 10px/1 "Archivo";letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:none;padding:4px;transition:color .3s}
.cart-item__remove:hover{color:var(--crimson)}
@media (hover:none){.cart-item__remove{cursor:pointer}}

.cart-drawer__foot{
  padding:20px 24px;border-top:1px solid var(--line);flex-shrink:0;
  display:flex;flex-direction:column;gap:14px;
}
.cart-drawer__total{display:flex;justify-content:space-between;font-family:"Archivo Black";font-size:18px}
.cart-drawer__note{font:400 11px/1.5 "Archivo";color:var(--muted);letter-spacing:.04em}

/* shared buttons */
.btn-primary{
  font:700 12px/1 "Archivo";letter-spacing:.1em;text-transform:uppercase;
  padding:16px;border:0;border-radius:2px;
  background:var(--accent);color:#fff;cursor:none;
  transition:background .3s var(--easing),transform .2s;
}
.btn-primary:hover{background:#e04a10}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{
  font:700 12px/1 "Archivo";letter-spacing:.1em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--line);border-radius:2px;
  background:none;color:var(--ink);cursor:none;
  transition:border-color .3s,color .3s;
}
.btn-ghost:hover{border-color:var(--ink)}
.btn-full{width:100%}
@media (hover:none){.btn-primary,.btn-ghost{cursor:pointer}}

/* ============ CHECKOUT MODAL ============ */
.modal-wrap{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(3px);
  padding:16px;
}
.modal-wrap.is-open{opacity:1;pointer-events:auto}

.modal{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  padding:36px 32px;position:relative;
  transform:translateY(20px);transition:transform .4s var(--easing);
}
.modal-wrap.is-open .modal{transform:none}
.modal__close{
  position:absolute;top:16px;right:18px;
  background:none;border:0;color:var(--muted);font-size:16px;cursor:none;transition:color .3s;
}
.modal__close:hover{color:var(--ink)}
@media (hover:none){.modal__close{cursor:pointer}}
.modal__title{font-family:"Archivo Black";font-size:28px;letter-spacing:-.02em;margin-bottom:24px}

.checkout-form{display:flex;flex-direction:column;gap:14px}
.checkout-form label{display:flex;flex-direction:column;gap:6px;font:600 10px/1 "Archivo";letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.checkout-form input{
  background:rgba(246,236,224,.04);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;color:var(--ink);font:500 14px/1 "Archivo";
  transition:border-color .3s;outline:none;
}
.checkout-form input:focus{border-color:var(--accent)}
.checkout-form input::placeholder{color:rgba(246,236,224,.25)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-divider{display:flex;align-items:center;gap:12px;margin:6px 0}
.form-divider::before,.form-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.form-divider span{font:600 10px/1 "Archivo";letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.checkout-summary{
  background:rgba(246,236,224,.04);border:1px solid var(--line);border-radius:2px;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
.checkout-summary-item{display:flex;justify-content:space-between;font:500 12px/1.3 "Archivo";color:var(--muted)}
.checkout-summary-item.total{color:var(--ink);font-weight:700;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}

/* success state */
.checkout-success{
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:20px 0;
}
.success-icon{font-size:48px;color:var(--accent);animation:pulse 1.5s var(--easing) infinite}
@keyframes pulse{0%,100%{text-shadow:0 0 0 rgba(255,90,31,0)}50%{text-shadow:0 0 20px rgba(255,90,31,.6)}}
.checkout-success h3{font-family:"Archivo Black";font-size:26px}
.checkout-success p{font-family:"Fraunces";font-size:16px;color:var(--muted);max-width:36ch;line-height:1.5}

@media (max-width:560px){
  .modal{padding:24px 18px}
  .form-row{grid-template-columns:1fr}
}