/* ==========================================================================
   Sacoor Brothers PT — folha de estilos única, mobile-first.
   Cores, tamanhos de texto e tipo de letra retirados do tema real
   (pt.sacoorbrothers.com): header e rodapé escuros, corpo quase branco,
   botões escuros em maiúsculas, etiqueta de desconto vermelho-tijolo.
   ========================================================================== */

/* ----------------------------------------------------------------- fontes */
@font-face{
  font-family:'Funnel Display';font-style:normal;font-weight:300 800;
  font-display:swap;src:url("../fonts/funnel-display-2.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Funnel Display';font-style:normal;font-weight:300 800;
  font-display:swap;src:url("../fonts/funnel-display-1.woff2") format("woff2");
}

/* ----------------------------------------------------------------- tokens */
:root{
  --bg:#fbfbfb;
  --surface:#fff;
  --dark:#242424;
  --dark-2:#4c4c4c;
  --text:#333;
  --heading:#4c4c4c;
  --muted:#a3a3a3;
  --muted-2:#8d8d8d;
  --line:#e7e7e7;
  --line-2:#c9c9c9;
  --sale:#ac393b;
  --new:#c16452;
  --ok:#108043;
  --on-dark:#fbfbfb;

  --usp-h:2rem;
  --header-h:3.5rem;

  --font:'Funnel Display',system-ui,-apple-system,'Segoe UI',Roboto,
         'Helvetica Neue',Arial,sans-serif;

  --t-base:.8125rem;    /* 13px — 12px do original é pequeno demais em mobile */
  --t-small:.75rem;
  --t-tiny:.6875rem;
  --t-btn:.6875rem;
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none !important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--t-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:500;color:var(--heading);letter-spacing:.01em}
input,select,textarea{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;display:block}
.container{width:100%;margin:0 auto;padding:0 1rem}
.no-scroll{overflow:hidden}

/* botões — escuros, maiúsculas, cantos rectos, como no original */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.875rem 1.75rem;background:var(--dark);color:#f0f0f0;
  font-size:var(--t-btn);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--dark);
  transition:background .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--dark-2);border-color:var(--dark-2)}
.btn--ghost{background:none;color:var(--dark)}
.btn--ghost:hover{background:var(--dark);color:#f0f0f0}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------ barra topo */
.usp{
  background:var(--dark);color:var(--on-dark);height:var(--usp-h);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:var(--t-tiny);letter-spacing:.06em;text-transform:uppercase;
  position:relative;z-index:120;padding:0 1rem;text-align:center;
}
.usp a{text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------- cabeçalho */
.site-head{position:sticky;top:0;z-index:110}
.header{
  background:var(--dark);color:var(--on-dark);height:var(--header-h);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  height:var(--header-h);display:flex;align-items:center;gap:.75rem;
  padding:0 1rem;
}
.header-left,.header-right{display:flex;align-items:center;gap:.75rem;
  flex:1 1 0;min-width:0}
.header-right{justify-content:flex-end}
.logo{display:block;height:1.75rem;margin:0 auto}
.logo img,.logo svg{height:1.75rem;width:auto}
.header-search{display:none}
.fake-input{
  display:block;width:100%;text-align:left;color:var(--on-dark);
  background:rgba(255,255,255,.08);border:0;padding:.5rem .75rem;
  font-size:var(--t-small);letter-spacing:.02em;
}
.icon-btn{display:flex;align-items:center;gap:.375rem;position:relative;
  color:var(--on-dark)}
.header-label{display:none}
.only-mobile{display:flex}
.cart-count{
  position:absolute;top:-.3rem;right:-.5rem;min-width:1rem;height:1rem;
  padding:0 .25rem;border-radius:.5rem;background:var(--on-dark);
  color:var(--dark);font-size:.5625rem;font-weight:600;line-height:1rem;
  text-align:center;
}
@media(min-width:992px){
  :root{--header-h:4.25rem}
  .header-inner{padding:0 2rem;gap:1.5rem}
  .header-search{display:block;flex:0 1 22rem}
  .only-mobile{display:none}
  .header-label{display:inline;font-size:var(--t-small)}
  .logo{margin:0}
  .header-right{gap:1.5rem}
}

/* ------------------------------------------------------- barra de pesquisa */
.searchbar{display:none}
.searchbar.is-open{
  display:block;position:fixed;top:0;left:0;right:0;z-index:130;
  background:var(--surface);padding:1rem;border-bottom:1px solid var(--line);
  max-height:100vh;overflow:hidden;
}
.searchbar form,.searchbar .search-results{max-width:44rem;margin:0 auto}
.searchbar form{display:flex;align-items:center;gap:.75rem}
.searchbar input{
  flex:1;border:0;border-bottom:1px solid var(--dark);padding:.5rem 0;
  font-size:1rem;outline:0;background:none;
}
.search-results{max-height:min(60vh,26rem);overflow-y:auto;margin-top:.75rem}
.search-hit{
  display:grid;grid-template-columns:2.75rem 1fr auto;gap:.75rem;
  align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line);
}
.search-hit img{width:2.75rem;aspect-ratio:3/4;object-fit:cover;background:var(--line)}
.search-hit-name{font-size:var(--t-small);line-height:1.3}
.search-hit-price{font-size:var(--t-small);white-space:nowrap}
.search-hit.is-active{background:var(--bg)}
.search-empty,.search-all{
  display:block;padding:.875rem 0;font-size:var(--t-small);
  color:var(--muted-2);text-align:center;
}
.search-all{text-decoration:underline;text-underline-offset:3px;color:var(--dark)}

/* ----------------------------------------------------------------- painéis */
.panel{
  position:fixed;top:0;bottom:0;left:0;width:min(88vw,22rem);
  background:var(--surface);z-index:140;transform:translateX(-100%);
  transition:transform .3s ease;display:flex;flex-direction:column;
}
.panel.is-open{transform:none}
.panel--right{left:auto;right:0;transform:translateX(100%)}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.panel-title{font-size:var(--t-small);font-weight:500;text-transform:uppercase;
  letter-spacing:.08em}
.panel-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel-foot{border-top:1px solid var(--line);padding:1rem}
.overlay{
  position:fixed;inset:0;background:rgba(36,36,36,.5);z-index:135;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.overlay.is-open{opacity:1;visibility:visible}

/* menu em acordeão */
.menu-item{border-bottom:1px solid var(--line)}
.menu-link{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem;font-size:var(--t-base);font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;text-align:left;
}
.menu-link .chev{transition:transform .25s ease}
.menu-item.is-open .chev{transform:rotate(180deg)}
.submenu{display:none;padding:0 1rem 1rem}
.menu-item.is-open .submenu{display:block}
.submenu-group{margin-bottom:.875rem}
.submenu-group-title{
  font-size:var(--t-tiny);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:.5rem 0 .25rem;
}
.submenu a{display:block;padding:.4375rem 0;font-size:var(--t-small);color:var(--text)}
.panel-foot a{display:flex;align-items:center;gap:.625rem;padding:.5rem 0;
  font-size:var(--t-small)}

/* cesta lateral */
.cart-lines{margin:0;padding:1rem;display:grid;gap:1rem}
.cart-line{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.75rem;
  align-items:start}
.cart-line img,.cart-noimg{width:3.5rem;aspect-ratio:3/4;object-fit:cover;
  background:var(--line);display:block}
.cart-line-name{margin:0;font-size:var(--t-small);line-height:1.35}
.cart-line-meta{margin:.1875rem 0 0;font-size:var(--t-tiny);color:var(--muted-2)}
.cart-line-price{margin:0;font-size:var(--t-small);white-space:nowrap}
.cart-rm{margin-top:.375rem;font-size:var(--t-tiny);color:var(--muted-2);
  text-decoration:underline;text-underline-offset:2px}
.cart-line.is-new{outline:1px solid var(--line-2);outline-offset:.4375rem;
  animation:cart-flash 1.6s ease-out}
@keyframes cart-flash{0%{outline-color:var(--dark)}100%{outline-color:var(--line-2)}}
@media(prefers-reduced-motion:reduce){.cart-line.is-new{animation:none}}
.cart-foot .btn{margin-top:.5rem}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;
  margin:0;font-size:var(--t-base)}
.cart-ship{margin:.375rem 0 .75rem;font-size:var(--t-tiny);color:var(--muted-2)}

/* ---------------------------------------------------------------- produtos */
/* A grelha é o centro da loja: 2 colunas em telemóvel, sem banners a roubar
   espaço. Proporção 3/4, igual à das imagens do catálogo. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
@media(min-width:769px){.grid{grid-template-columns:repeat(3,1fr);gap:.5rem}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid--1{grid-template-columns:1fr}
@media(min-width:769px){.grid--1{grid-template-columns:repeat(2,1fr)}}

.tile{position:relative;background:var(--surface)}
.tile-media{position:relative;display:block;overflow:hidden;background:var(--line)}
.tile-media img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:opacity .35s ease}
.tile-media .alt{position:absolute;inset:0;opacity:0}
@media(hover:hover){
  .tile:hover .tile-media .alt{opacity:1}
  .tile:hover .tile-media .main{opacity:0}
}
.tile-body{padding:.625rem .5rem 1rem}
.tile-name{
  margin:0 0 .3125rem;font-size:var(--t-small);line-height:1.35;
  color:var(--text);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.tile-price{display:flex;align-items:baseline;gap:.4375rem;flex-wrap:wrap;
  font-size:var(--t-small)}
.tile-price .was{color:var(--muted);text-decoration:line-through}
.tile-price .now{font-weight:600;color:var(--dark)}
.tile-price .pct{color:var(--sale);font-weight:600;font-size:var(--t-tiny)}
.tile-colors{display:flex;gap:.25rem;margin-top:.4375rem;flex-wrap:wrap}
.tile-colors a{width:1.25rem;height:1.5rem;overflow:hidden;border:1px solid transparent}
.tile-colors a.is-active{border-color:var(--dark)}
.tile-colors img{width:100%;height:100%;object-fit:cover}
.tile-colors .more{font-size:var(--t-tiny);color:var(--muted-2);align-self:center}
.badge{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-size:.5625rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:.1875rem .375rem;
}
.badge--sale{background:var(--sale);color:#fff}
.badge--new{background:var(--new);color:#fff}
.badge--out{background:rgba(36,36,36,.75);color:#fff}

/* --------------------------------------------------------------- listagem */
.plp-head{padding:1.5rem 1rem 1rem;text-align:center}
.plp-head h1{font-size:1.125rem;text-transform:uppercase;letter-spacing:.1em}
.plp-count{margin:.375rem 0 0;font-size:var(--t-tiny);color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.06em}
.plp-bar{
  display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:sticky;top:var(--header-h);background:var(--bg);z-index:60;
}
.plp-bar select{
  border:1px solid var(--line-2);background:var(--surface);padding:.4375rem .5rem;
  font-size:var(--t-tiny);text-transform:uppercase;letter-spacing:.04em;
}
.plp-cols{margin-left:auto;display:flex;gap:.25rem}
.plp-cols button{width:1.75rem;height:1.75rem;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted-2)}
.plp-cols button.is-active{border-color:var(--dark);color:var(--dark)}
.plp-more{display:block;margin:2rem auto 3rem}
.plp-empty{padding:4rem 1rem;text-align:center;color:var(--muted-2)}

/* ------------------------------------------------------------------ ficha */
.pdp{padding-bottom:3rem}
.pdp-gallery{position:relative}
.pdp-slides{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pdp-slides::-webkit-scrollbar{display:none}
.pdp-slides img{
  flex:0 0 100%;width:100%;aspect-ratio:3/4;object-fit:cover;
  scroll-snap-align:start;background:var(--line);
}
.pdp-dots{display:flex;justify-content:center;gap:.3125rem;padding:.75rem 0}
.pdp-dots button{width:.375rem;height:.375rem;border-radius:50%;
  background:var(--line-2)}
.pdp-dots button.is-active{background:var(--dark)}
.pdp-info{padding:0 1rem}
.pdp-cat{font-size:var(--t-tiny);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin:0 0 .375rem}
.pdp-name{font-size:1.0625rem;line-height:1.3;margin:0 0 .625rem}
.pdp-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.25rem;font-size:1rem}
.pdp-price .was{color:var(--muted);text-decoration:line-through;font-size:var(--t-base)}
.pdp-price .now{font-weight:600;color:var(--dark)}
.pdp-price .pct{color:var(--sale);font-weight:600;font-size:var(--t-small)}
.pdp-sku{font-size:var(--t-tiny);color:var(--muted);margin:0 0 1.25rem}
.pdp-block{margin-bottom:1.25rem}
.pdp-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-tiny);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-2);margin-bottom:.5rem;
}
.pdp-colors{display:flex;gap:.375rem;flex-wrap:wrap}
.pdp-colors a{width:3rem;height:4rem;overflow:hidden;border:1px solid var(--line);
  background:var(--line)}
.pdp-colors a.is-active{border-color:var(--dark)}
.pdp-colors img{width:100%;height:100%;object-fit:cover}
.pdp-sizes{display:flex;gap:.375rem;flex-wrap:wrap}
.pdp-sizes button{
  min-width:2.875rem;padding:.625rem .5rem;border:1px solid var(--line-2);
  background:var(--surface);font-size:var(--t-small);
}
.pdp-sizes button.is-active{border-color:var(--dark);background:var(--dark);color:#f0f0f0}
.pdp-sizes button[disabled]{
  color:var(--muted);cursor:not-allowed;
  background:linear-gradient(to top left,transparent 47%,var(--line-2) 47%,
    var(--line-2) 53%,transparent 53%);
}
.pdp-actions{display:grid;gap:.5rem;margin-bottom:1.5rem}
.pdp-msg{min-height:1.25rem;font-size:var(--t-tiny);color:var(--sale);margin:0}
.pdp-desc{font-size:var(--t-small);line-height:1.6;color:var(--text)}
.pdp-desc p{margin:0 0 .75rem}
.accordion-item{border-top:1px solid var(--line)}
.accordion-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0;font-size:var(--t-small);text-transform:uppercase;
  letter-spacing:.06em;text-align:left;
}
.accordion-head .chev{transition:transform .25s ease}
.accordion-item.is-open .chev{transform:rotate(180deg)}
.accordion-body{display:none;padding:0 0 1rem;font-size:var(--t-small);
  line-height:1.6;color:var(--muted-2)}
.accordion-item.is-open .accordion-body{display:block}
@media(min-width:769px){
  .pdp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr);
    gap:2.5rem;padding:1.5rem 2rem 4rem;align-items:start}
  .pdp-slides{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;overflow:visible}
  .pdp-slides img{flex:none}
  .pdp-dots{display:none}
  .pdp-info{padding:0;position:sticky;top:calc(var(--header-h) + 1.5rem)}
}

/* --------------------------------------------------------------- homepage */
/* Um só banner, curto. O resto é produto. */
.hero{position:relative;background:var(--dark)}
.hero img{width:100%;height:52vh;object-fit:cover;opacity:.85}
.hero-body{
  position:absolute;inset:auto 0 0 0;padding:1.5rem 1rem 2rem;color:#fff;
  background:linear-gradient(to top,rgba(36,36,36,.75),transparent);
}
.hero-body h1{color:#fff;font-size:1.375rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.75rem}
.hero .btn{background:#fbfbfb;color:var(--dark);border-color:#fbfbfb}
.hero .btn:hover{background:#fff;border-color:#fff}
@media(min-width:769px){.hero img{height:64vh}.hero-body{padding:2.5rem 2rem 3rem}}

.section{padding:2.5rem 0 .5rem}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:0 1rem 1rem;
}
.section-head h2{font-size:.9375rem;text-transform:uppercase;letter-spacing:.1em}
.section-head a{font-size:var(--t-tiny);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted-2);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
@media(min-width:769px){.section-head{padding:0 2rem 1rem}}

/* faixa de categorias: rola na horizontal em telemóvel */
.cats{display:flex;gap:.5rem;overflow-x:auto;padding:0 1rem 1rem;
  scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 42%;position:relative}
.cat img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--line)}
.cat span{
  position:absolute;inset:auto 0 0 0;padding:.75rem .5rem;color:#fff;
  font-size:var(--t-tiny);text-transform:uppercase;letter-spacing:.08em;
  text-align:center;background:linear-gradient(to top,rgba(36,36,36,.8),transparent);
}
@media(min-width:769px){.cats{padding:0 2rem 1rem}.cat{flex:0 0 22%}}

/* ------------------------------------------------------------ páginas base */
.page{max-width:48rem;margin:0 auto;padding:2rem 1rem 4rem}
.page h1{font-size:1.25rem;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:1.25rem}
.page h2{font-size:1rem;margin:2rem 0 .75rem}
.page p,.page li{font-size:var(--t-small);line-height:1.7;color:var(--text)}
.page ul{list-style:disc;padding-left:1.25rem;margin:0 0 1rem}
.page a{text-decoration:underline;text-underline-offset:3px}
.page table{width:100%;border-collapse:collapse;font-size:var(--t-small);
  margin:0 0 1rem}
.page td,.page th{border:1px solid var(--line);padding:.5rem .625rem;text-align:left}
.page-lead{color:var(--muted-2);font-size:var(--t-base);margin-bottom:1.5rem}

.form-field{margin:0 0 .875rem}
.form-field label{display:block;font-size:var(--t-tiny);color:var(--muted-2);
  margin-bottom:.3125rem;text-transform:uppercase;letter-spacing:.06em}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:.75rem;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);
}
.form-field input:focus,.form-field select:focus{outline:0;border-color:var(--dark)}

/* --------------------------------------------------------------- favoritos */
.empty-state{padding:4rem 1rem;text-align:center}
.empty-state p{color:var(--muted-2);font-size:var(--t-small);margin:0 0 1.25rem}

/* ----------------------------------------------------------------- rodapé */
.footer{background:var(--dark);color:#fff;margin-top:3rem}
.newsletter{padding:2.5rem 1rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
.newsletter .t{margin:0 0 .375rem;font-size:.9375rem;text-transform:uppercase;
  letter-spacing:.1em;color:#fff}
.newsletter .s{margin:0 0 1.25rem;font-size:var(--t-small);color:var(--muted)}
.newsletter form{display:flex;gap:.5rem;max-width:24rem;margin:0 auto}
.newsletter input{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:.75rem;font-size:var(--t-small);
}
.newsletter input::placeholder{color:var(--muted)}
.newsletter button{
  background:#fbfbfb;color:var(--dark);border:0;padding:0 1rem;
  display:grid;place-items:center;
}
.footer-cols{padding:.5rem 1rem 1rem}
.footer-col{border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0;font-size:var(--t-small);text-transform:uppercase;
  letter-spacing:.08em;color:#fff;text-align:left;
}
.footer-col-head .chev{transition:transform .25s ease}
.footer-col.is-open .chev{transform:rotate(180deg)}
.footer-col ul{display:none;padding:0 0 1rem}
.footer-col.is-open ul{display:block}
.footer-col a{display:block;padding:.375rem 0;font-size:var(--t-small);
  color:var(--muted)}
.footer-extra{padding:1.5rem 1rem;display:grid;gap:1.5rem;
  border-top:1px solid rgba(255,255,255,.1)}
.footer-block-title{margin:0 0 .625rem;font-size:var(--t-tiny);
  text-transform:uppercase;letter-spacing:.08em;color:#fff}
.socials{display:flex;gap:1rem}
.socials a{color:var(--muted)}
.socials a:hover{color:#fff}
.payments{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.payments span{
  font-size:.5625rem;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);color:var(--muted);
  padding:.25rem .4375rem;
}
.copyright{margin:0;padding:1.25rem 1rem 2rem;font-size:var(--t-tiny);
  color:var(--muted-2);text-align:center;border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:769px){
  .footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
    padding:2.5rem 2rem}
  .footer-col{border:0}
  .footer-col-head{pointer-events:none;padding:0 0 .75rem}
  .footer-col-head .chev{display:none}
  .footer-col ul{display:block !important;padding:0}
  .footer-extra{grid-template-columns:repeat(3,1fr);padding:2rem}
}

/* ---------------------------------------------------------------- checkout */
.co-body{background:var(--surface)}
.co-shell{max-width:70rem;margin:0 auto;padding:0 1rem 4rem}
.co-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 0;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.co-head .logo{height:1.5rem;margin:0}
.co-head .logo img{height:1.5rem}
.co-secure{display:flex;align-items:center;gap:.5rem;margin:0;
  font-size:var(--t-tiny);color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.06em}
.co-empty{padding:4rem 0;text-align:center;color:var(--muted-2)}
.co-empty a{text-decoration:underline;text-underline-offset:3px}
.co-grid{display:grid;gap:2rem}
.co-step{margin-bottom:2rem}
.co-step h2{font-size:var(--t-small);text-transform:uppercase;
  letter-spacing:.08em;padding-bottom:.75rem;margin-bottom:1rem;
  border-bottom:1px solid var(--line)}
.co-field{margin:0 0 .875rem}
.co-field label{display:block;font-size:var(--t-tiny);color:var(--muted-2);
  margin-bottom:.3125rem;text-transform:uppercase;letter-spacing:.06em}
.co-field input,.co-field select{
  width:100%;padding:.75rem;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);
}
.co-field input:focus,.co-field select:focus{outline:0;border-color:var(--dark)}
.co-form.was-validated input:invalid,.co-form.was-validated select:invalid{
  border-color:var(--sale)}
.co-half{display:inline-block;width:calc(50% - .3125rem)}
.co-half + .co-half{margin-left:.625rem}
.co-ship,.co-pay{
  display:flex;align-items:center;gap:.875rem;border:1px solid var(--line-2);
  padding:.875rem;cursor:pointer;margin-bottom:.5rem;
}
.co-ship:has(input:checked),.co-pay:has(input:checked){border-color:var(--dark)}
.co-ship span,.co-pay span{display:block}
.co-ship strong,.co-pay-name{display:block;font-size:var(--t-small);font-weight:500}
.co-ship small,.co-pay small{display:block;font-size:var(--t-tiny);
  color:var(--muted-2);margin-top:.125rem}
.co-ship-price{margin-left:auto;font-size:var(--t-small);white-space:nowrap}
.co-pays{display:grid;gap:.5rem;margin-bottom:1rem}
.co-note{font-size:var(--t-tiny);color:var(--muted);margin:.75rem 0 0}
.co-hint{display:block;font-size:var(--t-tiny);color:var(--muted);margin-top:.3125rem}
.co-field-error{display:block;font-size:var(--t-tiny);color:var(--sale);
  margin-top:.3125rem}
.co-field input[aria-invalid="true"],.co-field select[aria-invalid="true"]{
  border-color:var(--sale)}
.co-pay--soon{background:var(--bg)}
.co-pay--soon .co-pay-name,.co-pay--soon small{color:var(--muted-2)}
.co-pay--soon input{cursor:not-allowed}
.co-soon{
  margin-left:auto;align-self:center;flex:0 0 auto;font-size:.5625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line-2);padding:.125rem .375rem;white-space:nowrap;
}
.co-unavailable{margin:0 0 1rem;padding:.75rem .875rem;font-size:var(--t-small);
  background:#fef3c7;border:1px solid #fcd34d;color:#854d0e}
.co-check{display:flex;gap:.625rem;align-items:flex-start;font-size:var(--t-tiny);
  color:var(--muted-2);margin-bottom:1.25rem}
.co-check a{text-decoration:underline;text-underline-offset:2px}
.co-error{margin:0 0 1rem;padding:.75rem .875rem;font-size:var(--t-small);
  border:1px solid var(--sale);color:var(--sale);background:#fff5f5}
.co-submit{margin-bottom:1rem}
.co-submit[disabled]{opacity:.55;pointer-events:none}
.co-summary{border:1px solid var(--line);padding:1rem;align-self:start;
  background:var(--bg)}
.co-summary-head{width:100%;display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-small);text-transform:uppercase;letter-spacing:.08em}
.co-summary-head span:nth-child(2){margin-left:auto;font-weight:400;
  font-size:var(--t-tiny);color:var(--muted-2);text-transform:none;
  letter-spacing:0}
.co-lines{margin:1rem 0 0;display:grid;gap:1rem}
.co-line{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.75rem;
  align-items:start}
.co-line img,.co-noimg{width:3.5rem;aspect-ratio:3/4;object-fit:cover;
  background:var(--line);display:block}
.co-line-name{margin:0;font-size:var(--t-small);line-height:1.35}
.co-line-meta{margin:.1875rem 0 0;font-size:var(--t-tiny);color:var(--muted-2)}
.co-line-price{margin:0;font-size:var(--t-small);white-space:nowrap}
.co-qty{display:flex;align-items:center;gap:.5rem;margin-top:.375rem;
  font-size:var(--t-small)}
.co-qty button{width:1.375rem;height:1.375rem;border:1px solid var(--line-2);
  line-height:1}
.co-remove{width:auto !important;border:0 !important;color:var(--muted-2);
  text-decoration:underline;margin-left:.25rem}
.co-totals{margin:1.25rem 0 0;padding-top:.875rem;
  border-top:1px solid var(--line);font-size:var(--t-small)}
.co-totals div{display:flex;justify-content:space-between;padding:.25rem 0}
.co-totals dt,.co-totals dd{margin:0}
.co-grand{font-weight:600;font-size:1rem;padding-top:.625rem !important;
  margin-top:.375rem;border-top:1px solid var(--line)}
.co-done,.co-wait{padding:4rem 0;text-align:center;max-width:32rem;margin:0 auto}
.co-done h1,.co-wait h1{font-size:1.25rem;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:1rem}
.co-wait h1{margin-top:1.5rem}
.co-done p,.co-wait p{font-size:var(--t-small);color:var(--muted-2);margin:0 0 .5rem}
.co-done .btn{margin-top:1.5rem}
.co-countdown{margin-top:1.25rem !important;font-variant-numeric:tabular-nums}
.co-spinner{
  width:2.25rem;height:2.25rem;margin:0 auto;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--dark);
  animation:co-spin .9s linear infinite;
}
@keyframes co-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.co-spinner{animation-duration:2.5s}}
.co-ref{padding:3rem 0;max-width:32rem;margin:0 auto;text-align:center}
.co-ref h1{font-size:1.25rem;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:.75rem}
.co-ref-intro{font-size:var(--t-small);color:var(--muted-2);margin:0 0 1.5rem}
.co-ref-box{margin:0;border:1px solid var(--line-2);text-align:left}
.co-ref-box div{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.875rem 1rem;border-top:1px solid var(--line)}
.co-ref-box div:first-child{border-top:0}
.co-ref-box dt{margin:0;font-size:var(--t-tiny);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted-2)}
.co-ref-box dd{margin:0;font-size:1.125rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.co-ref-amount{color:var(--ok)}
.co-ref-warn{margin:1rem 0 0;padding:.75rem .875rem;font-size:var(--t-small);
  text-align:left;background:#fef3c7;border:1px solid #fcd34d;color:#854d0e}
.co-ref .btn{margin-top:1.5rem}
@media(min-width:769px){
  .co-shell{padding:0 2rem 5rem}
  .co-grid{grid-template-columns:minmax(0,1.4fr) minmax(19rem,1fr);gap:3rem;
    align-items:start}
  .co-summary{position:sticky;top:1.5rem;padding:1.5rem}
  .co-summary-head{pointer-events:none}
  .co-summary-head .chev{display:none}
  #coSummaryBody{display:block !important}
}