/*
Theme Name: Supreme Touch
Theme URI: https://supremetouchleatherworks.co.za
Description: Custom store theme for Supreme Touch Leatherworks. Handmade leather, since 2005.
Author: Supreme Touch Leatherworks
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: supreme-touch
*/

/* ============================================================
   1. FONTS  (self-hosted — no third-party requests)
   ============================================================ */
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root{
  --st-cream:#F7F3EC;
  --st-tile:#F1EFEA;
  --st-espresso:#1A120D;
  --st-espresso-80:rgba(26,18,13,.80);
  --st-espresso-55:rgba(26,18,13,.55);
  --st-line:rgba(26,18,13,.14);
  --st-blue:#2E7BFF;
  --st-sokoto:#8C2F2A;
  --st-white:#FFFFFF;

  --st-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --st-sans:'Inter',ui-sans-serif,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --st-header-h:72px;
  --st-band:120px;
  --st-max:1440px;
  --st-ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:781px){ :root{ --st-header-h:56px; --st-band:64px; } }

/* ============================================================
   3. BASE
   ============================================================ */
body{
  background:var(--st-cream);
  color:var(--st-espresso);
  font-family:var(--st-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3,h4,.st-serif{ font-family:var(--st-serif); font-weight:400; line-height:1.15; letter-spacing:.005em; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--st-blue); outline-offset:3px; border-radius:2px; }

.st-eyebrow{ font-family:var(--st-sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.st-band{ padding:var(--st-band) 24px; }
.st-inner{ max-width:var(--st-max); margin:0 auto; }
.st-center{ text-align:center; }

.st-btn{
  display:inline-block; padding:15px 34px; border:1px solid var(--st-espresso);
  background:var(--st-espresso); color:var(--st-cream); text-decoration:none;
  font-family:var(--st-sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s var(--st-ease), color .2s var(--st-ease);
}
.st-btn:hover{ background:transparent; color:var(--st-espresso); }
.st-btn--light{ border-color:var(--st-cream); background:transparent; color:var(--st-cream); }
.st-btn--light:hover{ background:var(--st-cream); color:var(--st-espresso); }

.st-link{
  display:inline-block; font-family:var(--st-sans); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid currentColor;
}

/* ============================================================
   4. HEADER
   ============================================================ */
.st-announce{
  background:var(--st-espresso); color:var(--st-cream);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; padding:9px 44px 9px 16px; position:relative; z-index:120;
}
.st-announce button{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:inherit; font-size:17px; line-height:1; cursor:pointer; padding:4px 8px;
}

.st-header{
  position:sticky; top:0; z-index:100;
  height:var(--st-header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 24px;
  background:var(--st-cream);
  border-bottom:1px solid var(--st-line);
  transition:background .25s var(--st-ease), color .25s var(--st-ease), border-color .25s var(--st-ease);
}
/* transparent while over the hero */
.st-header.is-over-hero{ background:transparent; color:var(--st-white); border-bottom-color:transparent; }
.st-header.is-over-hero .st-burger span{ background:var(--st-white); }
.st-header.is-over-hero .st-wordmark{ color:var(--st-white); }

.st-header__left{ display:flex; align-items:center; gap:14px; }
.st-header__right{ display:flex; align-items:center; justify-content:flex-end; gap:22px; }

.st-burger{ background:none; border:0; cursor:pointer; padding:10px 6px; display:flex; flex-direction:column; gap:5px; width:34px; }
.st-burger span{ display:block; height:1.5px; width:22px; background:var(--st-espresso); transition:transform .3s var(--st-ease), opacity .2s; }
.st-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.st-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.st-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.st-wordmark{
  font-family:var(--st-serif); font-size:19px; letter-spacing:.20em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; color:var(--st-espresso);
}
.st-wordmark img{ height:26px; width:auto; vertical-align:middle; }

.st-util{ background:none; border:0; cursor:pointer; padding:6px; color:inherit; text-decoration:none;
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.st-util svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.st-util__count{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--st-blue); color:#fff; font-size:10.5px; letter-spacing:0; font-weight:500;
}
@media (max-width:781px){ .st-util__label{ display:none; } .st-header__right{ gap:14px; } .st-wordmark{ font-size:14px; letter-spacing:.16em; } }

/* --- menu panel --- */
.st-menu{
  position:fixed; left:0; right:0; top:0; z-index:99;
  background:var(--st-cream); border-bottom:1px solid var(--st-line);
  padding:calc(var(--st-header-h) + 56px) 24px 64px;
  transform:translateY(-101%); transition:transform .5s var(--st-ease);
  max-height:100vh; overflow-y:auto;
}
.st-menu.is-open{ transform:translateY(0); }
.st-menu__inner{ max-width:var(--st-max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:48px; }
.st-menu__col ul{ list-style:none; margin:0; padding:0; }
.st-menu__col li{ margin:0 0 26px; }
.st-menu__col a{
  font-family:var(--st-sans); font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; position:relative;
}
.st-menu__col a::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:currentColor; transition:width .3s var(--st-ease); }
.st-menu__col a:hover::after{ width:100%; }
.st-menu__col--sub a{ font-size:12px; opacity:.72; }
.st-menu__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.st-menu__media figcaption{ margin-top:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.st-menu__social{ margin-top:36px; display:flex; gap:18px; }
.st-menu__social a{ display:inline-flex; }
.st-menu__social svg{ width:19px; height:19px; fill:currentColor; opacity:.72; transition:opacity .2s; }
.st-menu__social a:hover svg{ opacity:1; }
@media (max-width:900px){
  .st-menu__inner{ grid-template-columns:1fr; gap:28px; }
  .st-menu__media{ display:none; }
  .st-menu{ padding-top:calc(var(--st-header-h) + 32px); padding-bottom:40px; }
  .st-menu__col li{ margin-bottom:20px; }
}
.st-scrim{ position:fixed; inset:0; background:rgba(26,18,13,.35); opacity:0; pointer-events:none; transition:opacity .4s; z-index:98; }
.st-scrim.is-open{ opacity:1; pointer-events:auto; }

/* ============================================================
   5. HERO
   ============================================================ */
.st-hero{ position:relative; min-height:100svh; overflow:hidden; background:var(--st-espresso); }
/* pull the hero under the sticky header — beat the block-layout margin rules */
.st-hero,
.wp-block-group.is-layout-flow > .st-hero,
.is-layout-flow > .st-hero:first-child{ margin-block-start:calc(var(--st-header-h) * -1) !important; margin-top:calc(var(--st-header-h) * -1) !important; }
.st-header.is-over-hero .st-util{ color:var(--st-white); }
/* full-bleed sections must escape the block layout's content width */
.st-hero,.st-band,.st-collections,.st-split,.st-footer,.st-toolbar{ max-width:none !important; }
.st-hero__media,.st-hero__media img,.st-hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.st-hero__media video{ opacity:0; transition:opacity .9s ease; }
.st-hero__media video.is-ready{ opacity:1; }
.st-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,18,13,.42) 0%,rgba(26,18,13,.12) 38%,rgba(26,18,13,.62) 100%); }
.st-hero__content{ position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 40px 88px; color:var(--st-cream); max-width:760px; }
.st-hero__content h1{ font-size:clamp(2.4rem,6vw,4.4rem); margin:0 0 18px; }
.st-hero__content p{ font-size:clamp(1rem,2.2vw,1.15rem); max-width:44ch; margin:0 0 32px; color:rgba(247,243,236,.86); }
.st-hero__play{
  position:absolute; right:40px; bottom:88px; z-index:3;
  width:62px; height:62px; border-radius:999px; border:1px solid rgba(247,243,236,.7);
  background:rgba(26,18,13,.35); color:var(--st-cream); cursor:pointer; display:none; place-items:center;
}
.st-hero__play svg{ width:20px; height:20px; fill:currentColor; margin-left:3px; }
body.st-no-autoplay .st-hero__play{ display:grid; }
.st-scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; color:rgba(247,243,236,.7); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width:781px){ .st-hero__content{ padding:0 24px 64px; } .st-hero__play{ right:24px; bottom:64px; } }

/* ============================================================
   6. HOMEPAGE BANDS
   ============================================================ */
.st-promise{ background:var(--st-cream); }
.st-promise__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; text-align:center; }
.st-promise h3{ font-size:1.6rem; margin:0 0 10px; }
.st-promise p{ margin:0; color:var(--st-espresso-55); font-size:15px; }
@media (max-width:781px){ .st-promise__grid{ grid-template-columns:1fr; gap:40px; } }

.st-collections{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.st-collection{ position:relative; display:block; overflow:hidden; text-decoration:none; background:var(--st-tile); aspect-ratio:3/4; }
.st-collection img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--st-ease); }
.st-collection:hover img{ transform:scale(1.05); }
.st-collection__label{ position:absolute; inset:auto 0 0 0; padding:32px; color:#fff; background:linear-gradient(180deg,transparent,rgba(26,18,13,.72)); }
.st-collection__label h3{ font-size:1.9rem; margin:0 0 10px; }
@media (max-width:781px){ .st-collections{ grid-template-columns:1fr; } }

.st-split{ display:grid; grid-template-columns:1fr 1fr; }
.st-split__media{ position:relative; aspect-ratio:4/3; background:var(--st-tile); overflow:hidden; }
.st-split__media img,.st-split__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.st-split__text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,6vw,88px); }
.st-split__text h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); margin:0 0 18px; }
.st-split__text p{ color:var(--st-espresso-55); margin:0 0 28px; max-width:46ch; }
@media (max-width:781px){ .st-split{ grid-template-columns:1fr; } }

.st-dudu{ background:#EFE6DA; }
.st-corium{ background:var(--st-espresso); color:var(--st-cream); }
.st-corium h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin:0 0 18px; }
.st-corium p{ color:rgba(247,243,236,.7); max-width:52ch; margin:0 auto 30px; }

.st-sectionhead{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:0 24px 34px; max-width:var(--st-max); margin:0 auto; }
.st-sectionhead h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin:0; }

/* ============================================================
   7. PRODUCT GRID  (Duke + Dexter mechanic)
   Covers classic Woo loop markup AND the block product template.
   ============================================================ */
.woocommerce ul.products,
.wc-block-product-template,
.wp-block-woocommerce-product-template{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:1px !important;
  background:var(--st-line);
  margin:0 !important; padding:0 !important; list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{ content:none !important; }

.woocommerce ul.products li.product,
.wc-block-product-template li,
.wp-block-woocommerce-product-template li{
  background:var(--st-tile);
  margin:0 !important; padding:26px 20px 30px !important; width:auto !important; float:none !important;
  text-align:center; position:relative;
  transition:background .3s var(--st-ease);
}
.woocommerce ul.products li.product:hover{ background:#EDEAE3; }

.woocommerce ul.products li.product a img,
.wc-block-product-template img{
  aspect-ratio:4/5; object-fit:contain; width:100%; margin:0 0 18px; display:block; mix-blend-mode:multiply;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template .wp-block-post-title{
  font-family:var(--st-serif) !important; font-size:1.22rem !important; font-weight:400 !important;
  padding:0 !important; margin:0 0 6px !important; line-height:1.3;
}
.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-components-product-price{
  font-family:var(--st-sans) !important; font-size:13.5px !important; color:var(--st-espresso-55) !important;
  letter-spacing:.04em; margin:0 !important;
}
.woocommerce ul.products li.product .price del{ opacity:.5; margin-right:6px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--st-sokoto) !important; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top:14px !important; font-size:11px !important; letter-spacing:.13em; text-transform:uppercase;
  background:none !important; color:var(--st-espresso) !important; border-bottom:1px solid var(--st-espresso);
  border-radius:0 !important; padding:2px 0 4px !important; display:inline-block;
}
.woocommerce ul.products li.product .onsale{ display:none; }

/* hover image swap */
.st-card__media{ position:relative; }
.st-card__media img.st-card__alt{ position:absolute; inset:0; opacity:0; margin:0; transition:opacity .45s var(--st-ease); }
.st-card__media:hover img.st-card__alt{ opacity:1; }

/* availability badge */
.st-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--st-sans); font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--st-espresso-55);
}
.st-badge--corium{ color:var(--st-sokoto); }
.st-badge--low{ color:var(--st-sokoto); }
.st-badge--stock{ color:#3E6F42; }

@media (max-width:1024px){
  .woocommerce ul.products,.wc-block-product-template,.wp-block-woocommerce-product-template{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:781px){
  .woocommerce ul.products,.wc-block-product-template,.wp-block-woocommerce-product-template{ grid-template-columns:repeat(2,1fr); }
  .woocommerce ul.products li.product{ padding:16px 12px 22px !important; }
}

/* sort / filter bar */
.st-toolbar{ position:sticky; top:var(--st-header-h); z-index:60; background:var(--st-cream); border-bottom:1px solid var(--st-line);
  display:flex; gap:36px; align-items:center; padding:14px 24px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.woocommerce .woocommerce-result-count{ display:none; }
.woocommerce .woocommerce-ordering select{
  border:0; background:transparent; font-family:var(--st-sans); font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; padding:6px 0; cursor:pointer;
}

/* ============================================================
   8. PRODUCT PAGE
   ============================================================ */
.woocommerce div.product{
  max-width:var(--st-max); margin:0 auto; padding:48px 24px 0;
  display:flex; flex-wrap:wrap; gap:0 56px; align-items:flex-start;
}
.woocommerce div.product > *{ flex:0 0 100%; }
.woocommerce div.product div.images{
  flex:0 0 calc(56% - 56px); width:calc(56% - 56px) !important; float:none !important; margin:0 !important;
}
.woocommerce div.product div.summary{
  flex:1 1 300px; width:auto !important; float:none !important; margin:0 !important; clear:none !important;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{ clear:both; }
@media (min-width:1024px){
  .woocommerce div.product div.images{ position:sticky; top:calc(var(--st-header-h) + 24px); }
}
@media (max-width:900px){
  .woocommerce div.product{ gap:0; }
  .woocommerce div.product div.images{ flex:0 0 100%; width:100% !important; margin-bottom:32px !important; position:static; }
}
.woocommerce div.product div.images .flex-control-thumbs{ display:flex; gap:8px; padding:10px 0 0; margin:0; }
.woocommerce div.product div.images .flex-control-thumbs li{ width:80px !important; margin:0 !important; float:none !important; }
.woocommerce div.product .product_title{ font-family:var(--st-serif); font-size:clamp(2rem,4vw,2.9rem); margin:0 0 6px; }
.st-subtitle{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--st-espresso-55); margin:0 0 22px; }
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--st-sans); font-size:1.25rem; color:var(--st-espresso); margin:0 0 14px;
}

.st-avail{ border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); padding:16px 0; margin:0 0 26px; }
.st-avail__state{ font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; margin:0 0 5px; }
.st-avail__note{ font-size:14px; color:var(--st-espresso-55); margin:0; }
.st-avail--stock .st-avail__state{ color:#3E6F42; }
.st-avail--mto .st-avail__state{ color:var(--st-espresso); }
.st-avail--archive .st-avail__state{ color:var(--st-sokoto); }

.woocommerce div.product form.cart .button{
  width:100%; background:var(--st-espresso) !important; color:var(--st-cream) !important;
  border-radius:0 !important; padding:17px 24px !important; font-size:12px !important;
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:opacity .2s;
}
.woocommerce div.product form.cart .button:hover{ opacity:.86; }
.woocommerce div.product form.cart table.variations{ margin-bottom:18px; }
.woocommerce div.product form.cart table.variations label{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; }
.woocommerce div.product form.cart .reset_variations{ font-size:11px; letter-spacing:.1em; }

.woocommerce div.product .woocommerce-tabs ul.tabs{ display:none; }
.st-acc{ border-top:1px solid var(--st-line); }
.st-acc details{ border-bottom:1px solid var(--st-line); }
.st-acc summary{ cursor:pointer; padding:17px 0; font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.st-acc summary::-webkit-details-marker{ display:none; }
.st-acc summary::after{ content:'+'; font-size:16px; }
.st-acc details[open] summary::after{ content:'–'; }
.st-acc .st-acc__body{ padding:0 0 22px; color:var(--st-espresso-55); font-size:15px; }

.st-story{ background:var(--st-tile); clear:both; max-width:none !important; margin-top:72px; }
.st-story__inner{ max-width:720px; margin:0 auto; text-align:center; }
.st-story__inner p{ font-family:var(--st-serif); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.6; color:var(--st-espresso); }
.st-madein{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--st-espresso-55); margin-top:26px; }

.woocommerce .related > h2,.woocommerce .upsells > h2{ font-family:var(--st-serif); font-size:1.9rem; text-align:center; margin:0 0 34px; }
.woocommerce span.onsale{ background:var(--st-sokoto); border-radius:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* notify-me (archive pieces) */
.st-notify{ border:1px solid var(--st-line); padding:22px; }
.st-notify h4{ font-family:var(--st-serif); font-size:1.3rem; margin:0 0 8px; }
.st-notify p{ font-size:14px; color:var(--st-espresso-55); margin:0 0 14px; }
.st-notify input[type=email]{ width:100%; padding:13px 14px; border:1px solid var(--st-line); background:var(--st-white); font-family:var(--st-sans); font-size:14px; margin-bottom:10px; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.st-footer{ background:var(--st-espresso); color:var(--st-cream); padding:88px 24px 34px; }
.st-footer__inner{ max-width:var(--st-max); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.st-footer h4{ font-family:var(--st-sans); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin:0 0 20px; color:rgba(247,243,236,.55); }
.st-footer ul{ list-style:none; margin:0; padding:0; }
.st-footer li{ margin-bottom:11px; }
.st-footer a{ text-decoration:none; font-size:14.5px; color:rgba(247,243,236,.86); transition:color .2s; }
.st-footer a:hover{ color:var(--st-cream); }
.st-footer__brand p{ color:rgba(247,243,236,.6); font-size:14.5px; max-width:34ch; }
.st-footer__social{ display:flex; gap:16px; margin-top:22px; }
.st-footer__social svg{ width:20px; height:20px; fill:currentColor; opacity:.72; transition:opacity .2s; }
.st-footer__social a:hover svg{ opacity:1; }
.st-footer__bottom{ max-width:var(--st-max); margin:56px auto 0; padding-top:24px; border-top:1px solid rgba(247,243,236,.16);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; color:rgba(247,243,236,.5); letter-spacing:.06em; }
.st-newsletter{ display:flex; gap:0; margin-top:18px; max-width:340px; }
.st-newsletter input{ flex:1; padding:13px 14px; border:1px solid rgba(247,243,236,.28); background:transparent; color:var(--st-cream); font-family:var(--st-sans); font-size:14px; }
.st-newsletter input::placeholder{ color:rgba(247,243,236,.45); }
.st-newsletter button{ padding:13px 20px; border:1px solid var(--st-cream); background:var(--st-cream); color:var(--st-espresso); font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
@media (max-width:900px){ .st-footer__inner{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:560px){ .st-footer__inner{ grid-template-columns:1fr; } }

/* ============================================================
   10. MOTION
   ============================================================ */
.st-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--st-ease), transform .7s var(--st-ease); will-change:opacity,transform; }
.st-reveal.is-in{ opacity:1; transform:none; }
.st-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--st-ease), transform .7s var(--st-ease); }
.st-stagger.is-in > *{ opacity:1; transform:none; }
.st-stagger.is-in > *:nth-child(1){ transition-delay:0ms }
.st-stagger.is-in > *:nth-child(2){ transition-delay:80ms }
.st-stagger.is-in > *:nth-child(3){ transition-delay:160ms }
.st-stagger.is-in > *:nth-child(4){ transition-delay:240ms }
.st-stagger.is-in > *:nth-child(5){ transition-delay:320ms }
.st-stagger.is-in > *:nth-child(6){ transition-delay:400ms }

@media (prefers-reduced-motion:reduce){
  .st-reveal,.st-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .st-collection img{ transition:none; }
  .st-hero__media video{ display:none; }
}

/* ============================================================
   11. WOOCOMMERCE CHROME
   ============================================================ */
.woocommerce-store-notice,p.demo_store{ background:var(--st-espresso); color:var(--st-cream); font-size:12px; letter-spacing:.1em; }
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border-top-color:var(--st-espresso); background:var(--st-tile); font-size:14px;
}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{ color:var(--st-espresso); }
.woocommerce-breadcrumb{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--st-espresso-55); max-width:var(--st-max); margin:24px auto 0 !important; padding:0 24px; }
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--st-espresso); color:var(--st-cream); border-radius:0; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; padding:14px 28px;
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  background:#2C2019; color:var(--st-cream);
}
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{ max-width:var(--st-max); margin:0 auto; padding:48px 24px; }

/* page titles */
.st-pagehead{ padding:72px 24px 40px; text-align:center; }
.st-pagehead h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); margin:0 0 10px; }
.st-pagehead p{ color:var(--st-espresso-55); max-width:52ch; margin:0 auto; }

/* skip link */
.st-skip{ position:absolute; left:-9999px; top:0; background:var(--st-espresso); color:var(--st-cream); padding:12px 20px; z-index:200; }
.st-skip:focus{ left:8px; top:8px; }


/* ============================================================
   12. CLASSIC-TEMPLATE PAGES (WooCommerce)
   ============================================================ */
.st-page{ min-height:40vh; }
.woocommerce-page .st-page > .woocommerce,
.st-page #primary,
.st-page .content-area{ max-width:none; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary{ margin-bottom:40px; }
.woocommerce-page .woocommerce-notices-wrapper{ max-width:var(--st-max); margin:0 auto; padding:0 24px; }
.woocommerce-products-header{ padding:64px 24px 8px; text-align:center; max-width:var(--st-max); margin:0 auto; }
.woocommerce-products-header__title{ font-family:var(--st-serif); font-size:clamp(2rem,4.4vw,3rem); margin:0; }
.term-description{ text-align:center; color:var(--st-espresso-55); max-width:56ch; margin:12px auto 0; padding:0 24px; }
.woocommerce .woocommerce-ordering{ padding:16px 24px; max-width:var(--st-max); margin:0 auto; display:flex; justify-content:flex-end; }
.woocommerce nav.woocommerce-pagination{ padding:48px 24px; }
.woocommerce nav.woocommerce-pagination ul{ border:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{ font-size:13px; letter-spacing:.08em; padding:8px 14px; }
.woocommerce .related.products,.woocommerce .up-sells{ max-width:var(--st-max); margin:0 auto; padding:80px 0 40px; }

/* gallery renders as a plain stack — WooCommerce hides it until its slider JS
   runs, and we deliberately don't load that. */
.woocommerce div.product .woocommerce-product-gallery{ opacity:1 !important; }
.woocommerce div.product .woocommerce-product-gallery__wrapper{
  display:grid; gap:2px; margin:0; padding:0; transform:none !important; width:auto !important;
}
.woocommerce div.product .woocommerce-product-gallery__image{ width:100% !important; margin:0 !important; }
.woocommerce div.product .woocommerce-product-gallery__image a{ display:block; }
.woocommerce div.product .woocommerce-product-gallery__image img{ width:100%; height:auto; display:block; }
.woocommerce div.product .woocommerce-product-gallery__trigger{ display:none; }
.woocommerce div.product div.images .flex-control-thumbs{ display:none; }

/* stock line under the availability block */
.woocommerce div.product p.stock{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--st-espresso-55); margin:0 0 14px; }
.woocommerce div.product form.cart{ margin-bottom:26px; }
.woocommerce div.product form.cart div.quantity{ margin-bottom:14px; }
.woocommerce div.product form.cart div.quantity input{ padding:12px; border:1px solid var(--st-line); background:var(--st-white); width:80px; text-align:center; }
.woocommerce div.product .product_meta{ font-size:12px; letter-spacing:.06em; color:var(--st-espresso-55); border-top:1px solid var(--st-line); padding-top:16px; margin-top:8px; }