/* ============================================================
   Skin Space — shop archive styles
   Enqueued on the WooCommerce product archive only (see inc/skin-space-shop.php).
   Fonts: Cormorant Garamond 600, Mulish 500/600/700 — enqueued separately.
   Class names follow the mockup; WooCommerce's own classes are kept
   where WooCommerce outputs them (.products, .product, .price, etc.).
   ============================================================ */

/* ============================================================
   SKIN SPACE / WooCommerce single product
   Tokens match the Venus Versa service page.
   WooCommerce core classes are used where WooCommerce outputs
   them; custom sections use the ss- prefix.
   ============================================================ */
:root{
  --cream:#FAF8F4; --white:#FFFFFF;
  --forest:#2F4B3E; --forest-hover:#23493A; --forest-deep:#26392F;
  --sage:#5C8A74; --sage-ink:#3C5A4C;
  --mint:#EAF1EC; --mint-line:#D4E2D8; --mint-border:#C9D6CD;
  --mint-soft:#9BC0AC; --mist:#C4D2C8;
  --ink:#232320; --body:#5A5852; --muted:#6B6B66; --quiet:#75726B; --faint:#9B978E;
  --line:#E6E1D8; --line-soft:#ECE8E0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-0.01em;text-wrap:balance}
a[href^="tel:"]{white-space:nowrap}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
[hidden]{display:none!important}
.ss-reg{font-size:.5em;vertical-align:.9em;margin-left:.04em;letter-spacing:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ss-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.ss-eyebrow{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--sage)}

/* striped image placeholder, same as the service page */
.ph{background-image:repeating-linear-gradient(45deg,#EFEAE1 0,#EFEAE1 11px,#F5F1EA 11px,#F5F1EA 22px);display:flex;align-items:center;justify-content:center;color:#A8A399;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:12px;line-height:1.5}

/* ---------- buttons ---------- */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:999px;border:1.5px solid transparent;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:16px 34px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.ss-btn--primary{background:var(--forest);color:var(--cream)}
.ss-btn--primary:hover{background:var(--forest-hover)}
.ss-btn--ghost{background:transparent;color:var(--forest);border-color:var(--mint-border)}
.ss-btn--ghost:hover{background:var(--mint)}
.ss-btn--light{background:var(--cream);color:var(--forest)}
.ss-btn--light:hover{background:#fff}
.ss-btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ss-btn--outline-light:hover{background:rgba(255,255,255,.08)}
.ss-btn--sm{padding:11px 18px;font-size:11px;letter-spacing:.08em}
.ss-btn.added{background:var(--mint);color:var(--forest);border-color:var(--mint-line)}
.added_to_cart{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--forest);text-decoration:none;border-bottom:1.5px solid var(--mint-border);padding-bottom:2px}

/* ---------- header ---------- */
.ss-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line-soft)}
.ss-header__inner{max-width:1320px;margin:0 auto;padding:14px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ss-logo img{height:62px;width:auto}
.ss-nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--forest)}
.ss-nav a{text-decoration:none;display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:2px solid transparent}
.ss-nav a[aria-current="page"]{border-bottom-color:var(--mint-soft)}
.ss-nav .caret{font-size:9px;color:var(--sage)}
.ss-header__actions{display:flex;align-items:center;gap:16px}
.ss-cart{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--mint-border);color:var(--forest);text-decoration:none;transition:background .2s}
.ss-cart:hover{background:var(--mint)}
.ss-cart svg{width:20px;height:20px}
.ss-cart__count{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--forest);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.ss-cart__count[data-count="0"]{background:var(--faint)}
.ss-cart.is-bumped .ss-cart__count{animation:ss-bump .45s ease}
@keyframes ss-bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- breadcrumb ---------- */
.woocommerce-breadcrumb{padding-top:22px;font-size:12px;letter-spacing:.04em;color:var(--faint);font-weight:500}
.woocommerce-breadcrumb a{text-decoration:none;color:var(--faint)}
.woocommerce-breadcrumb a:hover{color:var(--forest)}
.woocommerce-breadcrumb .sep{margin:0 8px}
.woocommerce-breadcrumb [aria-current]{color:var(--forest)}

/* ---------- final CTA + footer ---------- */
.ss-cta{background:var(--forest)}
.ss-cta__inner{max-width:900px;margin:0 auto;padding:100px 28px;text-align:center}
.ss-cta .ss-eyebrow{color:var(--mint-soft)}
.ss-cta h2{font-size:52px;line-height:1.05;color:#fff;margin:18px 0 22px}
.ss-cta p{font-size:19px;line-height:1.6;color:var(--mist);max-width:600px;margin:0 auto 38px}
.ss-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:40px}
.ss-cta__address{font-size:14px;color:var(--mint-soft)}
.ss-footer{background:var(--forest-deep);color:#B6C5BB}
.ss-footer__inner{max-width:1200px;margin:0 auto;padding:40px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.ss-footer strong{font-family:var(--serif);font-size:22px;font-weight:600;color:#fff;letter-spacing:.02em}
.ss-footer span{font-size:12px;letter-spacing:.04em}



/* ============================================================
   SHOP ARCHIVE — browse-first layout
   ============================================================ */
.ss-shop-wrap{max-width:1300px;margin:0 auto;padding:0 32px}
.ss-section{padding:76px 0 0}
.ss-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.ss-section__head h2{font-size:42px;line-height:1.06;color:var(--ink);margin-top:12px}
.ss-section__head p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:520px}
.ss-textlink{text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--forest);border-bottom:1.5px solid var(--mint-border);padding-bottom:3px;white-space:nowrap}
.ss-textlink:hover{border-bottom-color:var(--forest)}

/* hero */
.ss-shop-head{padding:34px 0 8px}
.ss-shop-head__grid{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.ss-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;background:var(--mint);border:1px solid var(--mint-line);border-radius:999px;margin-bottom:20px}
.ss-pill i{width:6px;height:6px;border-radius:50%;background:var(--sage)}
.ss-pill span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sage-ink)}
.ss-shop-head h1{font-size:60px;line-height:1.02;color:var(--ink)}
.ss-shop-head p{font-size:17px;line-height:1.65;color:var(--body);max-width:560px;margin-top:16px}
.ss-shop-head__help{font-size:14px;color:var(--muted);line-height:1.6;text-align:right}
.ss-shop-head__help a{color:var(--forest);font-weight:700;text-decoration:none}
.ss-shop-head__help a:hover{text-decoration:underline}

/* jump nav */
.ss-jump{display:flex;flex-wrap:wrap;gap:8px;padding:26px 0 0}
.ss-jump a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--forest);text-decoration:none;transition:background .2s,border-color .2s}
.ss-jump a:hover{background:var(--mint);border-color:var(--mint-line)}

/* ---------- concern tiles ---------- */
.ss-concerns{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ss-concern{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:270px;padding:24px;border-radius:20px;border:1px solid var(--mint-line);background:var(--mint);color:var(--forest);text-align:left;cursor:pointer;overflow:hidden;font-family:var(--sans);transition:transform .25s ease,box-shadow .25s ease}
.ss-concern:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(47,75,62,.5)}
.ss-concern__art{position:absolute;top:-42px;right:-42px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.55)}
.ss-concern__art::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid var(--mint-border)}
.ss-concern h3{position:relative;font-size:27px;line-height:1.1;color:var(--ink);margin-bottom:8px}
.ss-concern p{position:relative;font-size:13px;line-height:1.55;color:var(--sage-ink);margin-bottom:16px}
.ss-concern__go{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--forest)}
.ss-concern__go b{font-weight:700}
.ss-concern__go svg{width:14px;height:14px;transition:transform .2s}
.ss-concern:hover .ss-concern__go svg{transform:translateX(4px)}
.ss-concern:nth-child(2){background:#F3EFE7;border-color:#E6DFD1}
.ss-concern:nth-child(2) .ss-concern__art{background:rgba(255,255,255,.6)}
.ss-concern:nth-child(2) .ss-concern__art::after{border-color:#DFD6C4}
.ss-concern:nth-child(2) p{color:#7A6F5B}
.ss-concern:nth-child(4){background:#EDEEE9;border-color:#DEE0D8}
.ss-concern:nth-child(4) .ss-concern__art::after{border-color:#CDD0C6}
.ss-concern:nth-child(4) p{color:#6B7065}

/* ---------- brand tiles ---------- */
.ss-brands{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ss-brand{display:flex;flex-direction:column;padding:26px 24px;border-radius:20px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-family:var(--sans);transition:transform .25s ease,box-shadow .25s ease,border-color .2s}
.ss-brand:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(47,75,62,.4);border-color:var(--mint-border)}
.ss-brand__mark{width:44px;height:44px;border-radius:50%;background:var(--mint);border:1px solid var(--mint-line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--sage-ink);margin-bottom:16px}
.ss-brand h3{font-size:25px;line-height:1.1;color:var(--ink);margin-bottom:8px}
.ss-brand p{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.ss-brand__go{margin-top:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--forest)}

/* ---------- horizontal product rails ---------- */
.ss-rail{position:relative}
.ss-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:272px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:4px 2px 16px;scrollbar-width:none}
.ss-rail__track::-webkit-scrollbar{display:none}
.ss-rail__track > li{scroll-snap-align:start}
.ss-rail__nav{display:flex;gap:8px}
.ss-rail__nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--mint-border);background:#fff;color:var(--forest);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
.ss-rail__nav button:hover{background:var(--mint)}
.ss-rail__nav button[disabled]{opacity:.35;cursor:default;background:#fff}
.ss-rail__nav svg{width:17px;height:17px}

/* staff pick note */
.ss-note{display:flex;gap:11px;align-items:flex-start;margin:0 20px 18px;padding:14px 16px;border-radius:14px;background:var(--mint);border:1px solid var(--mint-line)}
.ss-note__who{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--mint-line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;font-weight:600;color:var(--sage-ink)}
.ss-note p{font-size:13px;line-height:1.55;color:var(--sage-ink)}

/* under $50 band */
.ss-band{background:var(--forest);margin-top:76px}
.ss-band .ss-section{padding:76px 0 4px}
.ss-band .ss-section__head h2{color:#fff}
.ss-band .ss-section__head p{color:var(--mist)}
.ss-band .ss-eyebrow{color:var(--mint-soft)}
.ss-band .ss-textlink{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.ss-band .ss-textlink:hover{border-bottom-color:#fff}
.ss-band .ss-rail__nav button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.ss-band .ss-rail__nav button:hover{background:rgba(255,255,255,.1)}
.ss-band .ss-rail__track{padding-bottom:76px}
.ss-band li.product{border-color:transparent}

/* ---------- catalog (filters + grid) ---------- */
.ss-catalog{scroll-margin-top:96px}
.ss-shop{display:grid;grid-template-columns:284px 1fr;gap:44px;align-items:start;padding-bottom:96px}

.ss-sidebar{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 18px 18px}
.ss-sidebar__head{display:none}
.ss-sidebar__foot{display:none}

.ss-search{position:relative;margin:0 4px 8px}
.ss-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.ss-search input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--line);border-radius:999px;background:var(--cream);font-family:var(--sans);font-size:14px;color:var(--ink);transition:border-color .2s,background .2s}
.ss-search input::placeholder{color:var(--faint)}
.ss-search input:focus{outline:none;border-color:var(--sage);background:#fff}

.ss-filter{border-top:1px solid var(--line-soft);margin-top:10px}
.ss-filter summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 6px 12px;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.ss-filter summary::-webkit-details-marker{display:none}
.ss-filter summary .plus{font-family:var(--sans);font-size:20px;color:var(--sage);transition:transform .25s}
.ss-filter[open] summary .plus{transform:rotate(45deg)}
.ss-filter__body{padding:0 0 8px}

.ss-types{display:flex;flex-direction:column;gap:3px}
.ss-row input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ss-row label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid transparent;color:var(--forest);cursor:pointer;user-select:none;transition:background .2s,color .2s,box-shadow .2s}
.ss-row label:hover{background:#F1F5F2}
.ss-row__name{font-size:14px;font-weight:600}
.ss-row__count{font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--faint)}
.ss-row input:checked + label{background:var(--forest);color:#fff;box-shadow:0 14px 30px -20px rgba(47,75,62,.6)}
.ss-row input:checked + label .ss-row__count{color:var(--mint-soft)}
.ss-row input:focus-visible + label{outline:2px solid var(--sage);outline-offset:2px}
.ss-row input:disabled + label{opacity:.38;cursor:default}
.ss-row input:disabled + label:hover{background:transparent}

.ss-check input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ss-check label{display:flex;align-items:center;gap:12px;padding:8px 6px;cursor:pointer;font-size:14px;font-weight:600;color:var(--forest);user-select:none}
.ss-check__box{flex:none;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--mint-border);background:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.ss-check__box svg{width:12px;height:12px;color:#fff;opacity:0}
.ss-check input:checked + label .ss-check__box{background:var(--forest);border-color:var(--forest)}
.ss-check input:checked + label .ss-check__box svg{opacity:1}
.ss-check input:focus-visible + label .ss-check__box{outline:2px solid var(--sage);outline-offset:2px}
.ss-check__count{margin-left:auto;font-size:11px;letter-spacing:.06em;font-weight:700;color:var(--faint)}
.ss-check input:disabled + label{opacity:.38;cursor:default}

.ss-price{padding:4px 6px 0}
.ss-price__out{display:flex;justify-content:space-between;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--forest);margin-bottom:14px}
.ss-range{position:relative;height:22px}
.ss-range__track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--mint-line)}
.ss-range__fill{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--forest)}
.ss-range input{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.ss-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--forest);box-shadow:0 4px 10px -4px rgba(47,75,62,.5);cursor:grab}
.ss-range input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--forest);cursor:grab}
.ss-range input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sage);outline-offset:2px}
.ss-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ss-preset{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:var(--forest);cursor:pointer;transition:background .2s,border-color .2s}
.ss-preset:hover{background:#F1F5F2}
.ss-preset[aria-pressed="true"]{background:var(--mint);border-color:var(--mint-line)}

.ss-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:16px 6px 6px;border-top:1px solid var(--line-soft);cursor:pointer}
.ss-switch span{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.ss-switch small{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--faint);margin-top:2px}
.ss-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ss-switch__ui{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--mint-line);transition:background .2s}
.ss-switch__ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(47,75,62,.3);transition:transform .2s}
.ss-switch input:checked + .ss-switch__ui{background:var(--forest)}
.ss-switch input:checked + .ss-switch__ui::after{transform:translateX(18px)}
.ss-switch input:focus-visible + .ss-switch__ui{outline:2px solid var(--sage);outline-offset:2px}

.ss-sidebar__help{margin-top:18px;padding:20px;border-radius:16px;background:var(--forest);color:var(--mist)}
.ss-sidebar__help h2{font-size:22px;color:#fff;margin-bottom:6px}
.ss-sidebar__help p{font-size:13px;line-height:1.6;margin-bottom:14px}
.ss-sidebar__help .ss-btn{width:100%}

.ss-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.woocommerce-result-count{font-size:14px;color:var(--quiet);font-weight:500;margin:0}
.ss-toolbar__right{display:flex;align-items:center;gap:10px}
.ss-filter-toggle{display:none}
.woocommerce-ordering select{-webkit-appearance:none;appearance:none;padding:11px 42px 11px 18px;border-radius:999px;border:1.5px solid var(--mint-border);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232F4B3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--forest);cursor:pointer}
.woocommerce-ordering select:hover{background-color:var(--mint)}

.ss-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
.ss-chips:empty{display:none}
.ss-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 14px;border-radius:999px;background:var(--mint);border:1px solid var(--mint-line);font-size:12px;font-weight:700;color:var(--forest)}
.ss-chip button{width:22px;height:22px;border-radius:50%;border:0;background:transparent;color:var(--sage);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ss-chip button:hover{background:#fff;color:var(--forest)}
.ss-clear{border:0;background:none;padding:4px 2px;font-size:12px;font-weight:700;color:var(--forest);cursor:pointer;border-bottom:1.5px solid var(--mint-border)}
.ss-clear:hover{border-bottom-color:var(--forest)}

/* ---------- product cards (shared by rails + grid) ---------- */
ul.products{list-style:none;margin:0;padding:0}
ul.products.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
li.product{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
li.product:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(47,75,62,.35)}
.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.woocommerce-LoopProduct-link:focus-visible{outline-offset:-3px}
.ss-loop__img{position:relative;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--line-soft)}
.ss-loop__img .ph{position:absolute;inset:0}
.ss-loop__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px}
.ss-badge{position:absolute;top:14px;left:14px;z-index:1;padding:5px 11px;border-radius:999px;background:var(--mint);border:1px solid var(--mint-line);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sage-ink)}
.ss-badge--best{background:var(--forest);border-color:var(--forest);color:#fff}
.ss-loop__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 0}
.ss-loop__brand{font-size:12px;font-weight:600;color:var(--faint)}
.woocommerce-loop-product__title{font-size:22px;line-height:1.15;color:var(--ink);margin:5px 0 4px}
.ss-loop__meta{font-size:13px;line-height:1.45;color:var(--quiet)}
li.product .price{margin-top:auto;padding-top:12px;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--forest)}
.ss-loop__actions{padding:14px 20px 20px}
.ss-loop__actions .ss-btn{width:100%}
.ss-loop__actions .added_to_cart{display:block;text-align:center;border:0;margin-top:8px;text-decoration:underline;text-underline-offset:3px}

.ss-empty{grid-column:1/-1;padding:64px 28px;text-align:center;background:#fff;border:1px dashed var(--mint-border);border-radius:20px}
.ss-empty h2{font-size:30px;color:var(--ink);margin-bottom:10px}
.ss-empty p{font-size:15px;color:var(--muted);margin-bottom:22px}

.ss-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:44px}
.ss-more p{font-size:13px;color:var(--faint);font-weight:500}
.ss-more__bar{width:200px;height:3px;border-radius:3px;background:var(--mint-line);overflow:hidden}
.ss-more__bar i{display:block;height:100%;background:var(--forest);transition:width .3s}

.ss-overlay{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .ss-nav{display:none}
  .ss-concerns{grid-template-columns:repeat(3,1fr)}
  .ss-brands{grid-template-columns:repeat(3,1fr)}
  ul.products.ss-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .ss-shop{grid-template-columns:1fr}
  .ss-shop-head__help{text-align:left}
  .ss-filter-toggle{display:inline-flex}
  .ss-sidebar{position:fixed;z-index:100;top:0;bottom:0;left:0;width:min(380px,90vw);border-radius:0 20px 20px 0;padding:0;display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .3s ease;box-shadow:0 30px 80px -20px rgba(35,35,32,.35)}
  .ss-sidebar__scroll{flex:1;overflow-y:auto;padding:8px 18px 18px}
  .ss-sidebar__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px;border-bottom:1px solid var(--line-soft)}
  .ss-sidebar__head h2{font-size:28px;color:var(--ink)}
  .ss-sidebar__close{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--mint-border);background:#fff;color:var(--forest);font-size:22px;cursor:pointer}
  .ss-sidebar__foot{display:flex;gap:10px;padding:14px 18px 18px;border-top:1px solid var(--line-soft);background:#fff}
  .ss-sidebar__foot .ss-btn{flex:1}
  .ss-sidebar__help{display:none}
  body.ss-filters-open .ss-sidebar{transform:none}
  .ss-overlay{display:block;position:fixed;inset:0;z-index:90;background:rgba(35,35,32,.4);opacity:0;pointer-events:none;transition:opacity .3s}
  body.ss-filters-open .ss-overlay{opacity:1;pointer-events:auto}
  body.ss-filters-open{overflow:hidden}
  .ss-concerns{grid-template-columns:repeat(2,1fr)}
  .ss-brands{grid-template-columns:repeat(2,1fr)}
  .ss-rail__nav{display:none}
}
@media (max-width:640px){
  .ss-header__inner{padding:12px 18px;gap:12px}
  .ss-logo img{height:46px}
  .ss-header .ss-btn{padding:12px 18px;font-size:11px}
  .ss-shop-wrap{padding:0 16px}
  .ss-shop-head{padding:26px 0 4px}
  .ss-shop-head h1{font-size:44px}
  .ss-shop-head p{font-size:16px}
  .ss-section{padding-top:52px}
  .ss-section__head h2{font-size:32px}
  .ss-band{margin-top:52px}
  .ss-band .ss-section{padding-top:52px}
  .ss-band .ss-rail__track{padding-bottom:52px}
  .ss-concerns{grid-template-columns:1fr;gap:12px}
  .ss-concern{min-height:0;padding:22px}
  .ss-brands{grid-template-columns:1fr;gap:12px}
  .ss-rail__track{grid-auto-columns:230px;gap:12px}
  ul.products.ss-grid{gap:12px}
  .ss-loop__img img{padding:14px}
  .ss-loop__body{padding:14px 14px 0}
  .woocommerce-loop-product__title{font-size:18px}
  .ss-loop__meta{font-size:12px}
  li.product .price{font-size:18px}
  .ss-loop__actions{padding:12px 14px 14px}
  .ss-loop__actions .ss-btn{padding:10px 8px;font-size:10px}
  .ss-note{margin:0 14px 14px}
  .ss-badge{top:10px;left:10px;font-size:9px;padding:4px 9px}
  .ss-toolbar{gap:10px}
  .woocommerce-result-count{order:3;width:100%}
  .ss-toolbar__right{width:100%}
  .ss-toolbar__right > *{flex:1}
  .woocommerce-ordering select{width:100%;padding:11px 32px 11px 14px;font-size:12px;background-position:right 12px center}
  .ss-cta h2{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   WooCommerce overrides
   The mockup drew its own buttons and placeholders. These rules
   map WooCommerce's real output onto the same design.
   ============================================================ */

/* Hide the defaults the archive template replaces */
.ss-shop-page .woocommerce-ordering select { margin: 0; }
.ss-shop-page .woocommerce-notices-wrapper { max-width: 1300px; margin: 0 auto; padding: 0 32px; }

/* Loop add-to-cart buttons: WooCommerce prints .button, we want the pill */
.ss-loop__actions .button,
.ss-loop__actions a.button,
.ss-loop__actions button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 0; text-decoration: none;
  border-radius: 999px; border: 1.5px solid var(--mint-border);
  background: transparent; color: var(--forest);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 18px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.ss-loop__actions .button:hover { background: var(--mint); color: var(--forest); }
.ss-loop__actions .button.loading { opacity: .6; }
.ss-loop__actions .button.added { background: var(--mint); border-color: var(--mint-line); }
.ss-loop__actions .added_to_cart {
  display: block; margin-top: 8px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--forest);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Product images come from WooCommerce, not a placeholder div */
.ss-loop__img { background: #fff; }
.ss-loop__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; }

/* Out of stock */
.ss-badge--out { background: #fff; border-color: var(--line); color: var(--quiet); top: auto; bottom: 14px; }
li.product.outofstock .ss-loop__img img { opacity: .55; }

/* Staff pick attribution */
.ss-note__name { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: var(--forest); }

/* Price ranges from variable products wrap awkwardly without this */
li.product .price del { opacity: .5; margin-right: 6px; }
li.product .price ins { text-decoration: none; }

/* Empty state now sits outside the grid */
.ss-empty { padding: 64px 28px; text-align: center; background: #fff; border: 1px dashed var(--mint-border); border-radius: 20px; }

[hidden] { display: none !important; }

/* Muse fix (2026-11-05): WooCommerce's layout CSS gives
   ul.products li.product a percentage width, a float and side margins
   (its float-based column system). Inside this template's CSS grid and
   rails those rules collapse each card to ~22% of its grid cell
   (~85px wide, word-by-word wrapping). The grid and rails own the
   sizing here, so neutralize the float-column rules on template lists. */
ul.products.ss-grid > li.product,
.ss-rail__track > li.product { width: auto !important; float: none !important; clear: none !important; margin: 0 !important; }