/* ===== Homepage / chrome / shared components ===== */

/* ============ FONTS (injected as data URIs by build.js) ============ */


/* ============ DESIGN TOKENS (pulled live from urbwellness.com) ============ */
:root{
  --warning-bg:#000; --announce-bg:#403620; --header-bg:#efefef;
  --body-bg:#ffffff; --text:#000000; --muted:#5b5b5b;
  --olive:#6b6e3d; --olive-dark:#403620; --taupe:#8f826b;
  --sale:#efb34c; --sold:#E22120; --footer-bg:#403620;
  --card-radius:20px; --btn-radius:6px; --prod-radius:10px;
  --container:1300px;
  --font-body:"Nunito Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:"Poppins",-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text);background:var(--body-bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1;text-transform:capitalize}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--olive);color:#fff;border:1px solid var(--olive);
  border-radius:var(--btn-radius);padding:11px 26px;min-height:44px;font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .3s ease}
.btn:hover{background:#585b31}
.btn-sm{padding:8px 18px;min-height:36px;font-size:11px}

/* ===== Generic content pages (About, FAQs, legal/policy pages) =====
   Rendered via index.php (no dedicated page.php) inside <div class="entry">.
   These previously had zero styling beyond the bare h1-h4 tag rule — readable
   but unpolished (full-width text, default list/accordion markers, no spacing
   rhythm). This brings them to the same visual bar as the rest of the site. */
.entry{max-width:760px;margin:0 auto}
.entry > *{margin-bottom:20px}
.entry > *:last-child{margin-bottom:0}
.entry-title{text-transform:none}
.entry h2{font-size:24px;text-transform:none;margin-top:8px}
.entry h3{font-size:18px;text-transform:none}
.entry h4{font-size:15px;text-transform:none;color:var(--muted)}
.entry p,.entry li{line-height:1.7;color:var(--text)}
.entry ul,.entry ol{padding-left:22px}
.entry li{margin-bottom:6px}
.entry a{color:var(--olive);text-decoration:underline;text-underline-offset:2px}
.entry a:hover{color:var(--olive-dark)}
.entry em{color:var(--muted);font-style:normal;font-size:13.5px}

/* Native <details>/<summary> FAQ accordion — zero JS, matches the site's
   olive/chevron interaction language used elsewhere (mega-menu caret, etc). */
.entry details{border-bottom:1px solid #ececec;padding:16px 0}
.entry details:first-of-type{border-top:1px solid #ececec}
.entry details[open] summary{color:var(--olive);margin-bottom:12px}
.entry summary{cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:15px;list-style:none;transition:color .15s ease}
.entry summary::-webkit-details-marker{display:none}
.entry summary:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px}
.entry summary::before{content:"+";display:inline-block;width:18px;text-align:center;color:var(--olive);font-weight:700}
.entry details[open] summary::before{content:"\2212"}
.entry details > *:not(summary){margin-left:18px}

/* ============ WARNING BAR ============ */
.warning{background:var(--warning-bg);color:#fff;text-align:center;font-weight:700;font-size:12.5px;padding:9px 14px;letter-spacing:.01em}

/* ============ ANNOUNCEMENT BAR ============ */
.announce{background:var(--announce-bg);color:#fff;font-size:12.5px}
.announce .wrap,.announce .row{display:flex;align-items:center;justify-content:space-between;height:38px;max-width:1500px;position:relative}
.announce .loc{display:flex;gap:16px;opacity:.9}
.announce .loc span{display:inline-flex;align-items:center;gap:5px}
.announce .ship{display:inline-flex;align-items:center;gap:8px;font-weight:600;position:absolute;left:50%;transform:translateX(-50%)}

/* ============ HEADER ============ */
.header{background:var(--header-bg);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.06)}
/* WordPress's #wpadminbar is position:fixed at the true viewport top, which a
   plain "sticky;top:0" header (or any other fixed/sticky element) doesn't
   account for — once scrolled, the header pins UNDER the admin bar instead of
   flush beneath it, visually clipped for 32px (46px on WP's own <=782px admin
   bar breakpoint, where the toolbar becomes two rows). Standard WP convention. */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){body.admin-bar .header{top:46px}}
.header .wrap{display:flex;align-items:center;height:78px;gap:24px}
.header .logo img{height:44px;width:auto}
.nav{display:flex;gap:30px;margin:0 auto;font-size:14px;font-weight:700;align-self:stretch}
.nav a{display:inline-flex;align-items:center;gap:5px;padding:6px 0;letter-spacing:.01em}
.nav a:hover{color:var(--olive)}
.caret{width:9px;height:9px}
.hicons{display:flex;gap:20px;align-items:center}
.hicons svg{width:21px;height:21px}
.cartwrap{position:relative}
.cartdot{position:absolute;top:-6px;right:-8px;background:var(--sale);color:#000;font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger svg{width:26px;height:26px}
.mobile-menu{display:none}
.mobile-menu.open{display:block;background:var(--header-bg);border-top:1px solid rgba(0,0,0,.08)}
.mobile-menu a{display:block;padding:15px 24px;font-family:var(--font-head);font-weight:600;font-size:15px;border-bottom:1px solid rgba(0,0,0,.06)}

/* Mobile nav rows that own an expandable subcategory list (parts/mobile-nav.php).
   The category name is its own full <a> (tap = navigate, matching desktop's
   click behavior); the chevron button is an independent tap target that only
   expands/collapses — so neither action steals the other. */
.mmenu-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(0,0,0,.06)}
.mmenu-row__link{display:block;flex:1;padding:15px 24px;font-family:var(--font-head);font-weight:600;font-size:15px;border-bottom:none}
.mmenu-row__toggle{display:flex;align-items:center;justify-content:center;width:52px;background:none;border:none;border-left:1px solid rgba(0,0,0,.06);color:#555;cursor:pointer}
.mmenu-row__toggle svg{width:11px;height:11px;transition:transform .2s ease}
.mmenu-row__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mmenu-sub{list-style:none;background:#faf9f6;border-bottom:1px solid rgba(0,0,0,.06)}
.mmenu-sub[hidden]{display:none}
.mmenu-sub a{display:block;padding:13px 24px 13px 40px;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--muted);border-bottom:1px solid rgba(0,0,0,.05)}
.mmenu-sub li:last-child a{border-bottom:none}

/* ============ HERO COLLAGE (6 / 3+3) ============ */
.hero{padding:24px 0 8px}
.hero .grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.hero .col-right{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.hcard{position:relative;border-radius:16px;overflow:hidden;background:#ddd;min-height:180px}
.hcard.big{min-height:392px}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 45%)}
.hcard .txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:34px}
.hcard.big .txt{padding:44px}
.hcard h1{color:#fff;font-size:46px;margin-bottom:14px;max-width:90%;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hcard.big p{color:#fff;font-size:15px;max-width:52%;margin-bottom:22px;line-height:1.4;font-weight:600;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.hcard.small h2{color:#fff;font-size:26px;line-height:1.15;margin-bottom:14px;max-width:75%;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hcard.small .ov{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 70%),linear-gradient(0deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 45%)}

/* ============ TRUST STRIP ============ */
.trust{background:var(--header-bg);padding:44px 0;margin-top:16px}
.trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.trust .item svg{width:40px;height:40px;margin:0 auto 14px;stroke:var(--olive-dark)}
.trust .item h4{font-size:17px;margin-bottom:6px}
.trust .item p{font-size:12.5px;color:var(--muted)}

/* ============ SECTION HEADS ============ */
.sec{padding:56px 0}
.sec .eyebrow{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.sec h2.center{text-align:center;font-size:34px;margin-bottom:36px}
.sec .head-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.sec .head-row h2{font-size:34px}
.arrows{display:flex;gap:10px}
.arrows button{width:38px;height:38px;border-radius:50%;border:1px solid #cfcfcf;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.arrows svg{width:15px;height:15px}

/* ============ CATEGORY GRID ============ */
.cats{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.cat{width:150px;text-align:center}
.cat .thumb{width:150px;height:150px;border-radius:var(--card-radius);background:#f4f2ee;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px}
.cat .thumb img{max-width:78%;max-height:78%;object-fit:contain}
.cat h4{font-size:17px}

/* ============ PRODUCT ROW ============ */
.prow{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.pcard .pimg{background:#fff;border-radius:var(--prod-radius);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px}
.pcard .pimg img{max-width:92%;max-height:92%;object-fit:contain}
.pcard .pt{font-size:13px;line-height:1.35;margin-bottom:6px}
.pcard .pp{font-size:14px;font-weight:700}

/* ============ COA PAGE — brand sections + product-tile grid ============ */
.uw-coa-filter{max-width:var(--container);margin:8px auto 0;padding:0 24px;display:flex;align-items:center;gap:10px}
.uw-coa-filter label{font-size:13px;font-weight:600;color:var(--muted)}
.uw-coa-filter select{padding:9px 14px;border:1px solid #ddd;border-radius:var(--radius,6px);font:inherit;font-size:13px;background:#fff;min-width:200px}
.uw-coa-brand{max-width:var(--container);margin:0 auto;padding:36px 24px}
.uw-coa-brand + .uw-coa-brand{border-top:1px solid #eee}
.uw-coa-brand__title{font-size:22px;margin-bottom:22px}
.uw-coa-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.uw-coa-card{display:flex;flex-direction:column;align-items:flex-start}
.uw-coa-card .pt{display:block}
.uw-coa-card__btn{margin-top:4px}
@media (max-width:900px){.uw-coa-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.uw-coa-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ BRAND PROMISE ============ */
.promise{background:linear-gradient(262deg,#ffebe7,#eeeeee);padding:60px 0}
.promise h2.center{margin-bottom:6px}
.promise .sub{text-align:center;color:var(--muted);margin-bottom:40px}
.promise .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.promise .card{background:#fff;border-radius:var(--card-radius);padding:34px 28px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.promise .card svg{width:44px;height:44px;stroke:var(--olive);margin:0 auto 16px}
.promise .card h4{font-size:19px;margin-bottom:10px}
.promise .card p{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ============ FAQ ============ */
.faq{background:var(--header-bg)}
.faq .list{max-width:820px;margin:0 auto}
.faq details{background:#fff;border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-head);font-weight:600;font-size:15px;
  display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{color:var(--olive);font-size:22px;font-weight:400}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.6}

/* ============ NEWSLETTER ============ */
.news{background:var(--olive-dark);color:#fff;text-align:center;padding:60px 0}
.news h2{color:#fff;font-size:30px;margin-bottom:10px}
.news p{opacity:.9;margin-bottom:26px;max-width:520px;margin-left:auto;margin-right:auto}
.news form{display:flex;gap:0;max-width:460px;margin:0 auto}
.news input{flex:1;border:none;border-radius:var(--btn-radius) 0 0 var(--btn-radius);padding:14px 18px;font-size:14px;font-family:var(--font-body)}
.news button{border-radius:0 var(--btn-radius) var(--btn-radius) 0;background:var(--olive);border:1px solid var(--olive);color:#fff;
  padding:0 26px;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}

/* ============ FOOTER ============ */
.foot{background:var(--footer-bg);color:#e9e6df;font-size:13.5px}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding:46px 0}
.foot .top .flogo{height:40px;filter:brightness(0) invert(1);margin-bottom:16px}
.foot .disc{font-size:11.5px;opacity:.7;line-height:1.6}
.foot h5{font-family:var(--font-head);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;color:#fff}
.foot ul{list-style:none}
.foot ul li{margin-bottom:9px;opacity:.85}
.foot ul li a:hover{color:#fff}
.foot .bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12px;opacity:.8;flex-wrap:wrap;gap:12px}
.foot .pays{display:flex;gap:8px}
.foot .pays span{background:rgba(255,255,255,.9);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:800;color:#333;letter-spacing:.03em}

@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hcard.big{min-height:320px}
  .trust .row{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .prow{grid-template-columns:repeat(3,1fr)}
  .promise .row{grid-template-columns:1fr}
  .foot .top{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .hamburger{display:flex;align-items:center}
  .header .wrap{gap:10px;height:64px}
  .header .logo{margin-right:auto}
  .header .logo img{height:36px}
  .header{position:static}
  /* .mobile-menu.open's base rule assumes a sticky header pinned at the top
     (top:64px offset). The header is static at this breakpoint (line above),
     so that offset floated the open menu 64px below the viewport top once
     the page scrolled, detached from the header. It already sits directly
     under the header in normal flow, so let it scroll with the page instead. */
  .mobile-menu.open{position:static;top:auto}
  .hcard h1{max-width:80%;font-size:34px}
  .hcard.big p{max-width:80%}
}
@media(max-width:560px){
  .prow{grid-template-columns:repeat(2,1fr)}
  .foot .top{grid-template-columns:1fr}
  .news form{flex-direction:column;gap:10px}
  .news input,.news button{border-radius:var(--btn-radius)}
}

/* ===== Product page (PDP) ===== */

:root{
  --warning-bg:#000; --announce-bg:#403620; --header-bg:#efefef;
  --body-bg:#ffffff; --text:#000000; --muted:#5b5b5b;
  --olive:#6b6e3d; --olive-dark:#403620; --footer-bg:#403620;
  --btn-radius:6px; --card-radius:20px; --container:1300px;
  --font-body:"Nunito Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:"Poppins",-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text);background:var(--body-bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--olive);color:#fff;border:1px solid var(--olive);
  border-radius:var(--btn-radius);padding:11px 26px;min-height:44px;font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.btn:hover{background:#585b31}

/* chrome */
.warning{background:var(--warning-bg);color:#fff;text-align:center;font-weight:700;font-size:12.5px;padding:9px 14px}
.announce{background:var(--announce-bg);color:#fff;font-size:12.5px}
.announce .row{display:flex;align-items:center;justify-content:space-between;height:38px}
.announce .loc{display:flex;gap:16px;opacity:.9}.announce .loc span{display:inline-flex;align-items:center;gap:5px}
.announce .ship{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.header{background:var(--header-bg);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.header .row{display:flex;align-items:center;height:78px;gap:24px}
.header .logo img{height:44px}
.nav{display:flex;gap:30px;margin:0 auto;font-size:14px;font-weight:700;align-self:stretch}
.nav a{display:inline-flex;align-items:center;gap:5px;padding:6px 0}.nav a:hover{color:var(--olive)}
.caret{width:9px;height:9px}
.hicons{display:flex;gap:20px;align-items:center}.hicons svg{width:21px;height:21px}
.cartwrap{position:relative}
.cartdot{position:absolute;top:-6px;right:-8px;background:#efb34c;color:#000;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger svg{width:26px;height:26px}
.mobile-menu{display:none}
.mobile-menu.open{display:block;background:var(--header-bg);border-top:1px solid rgba(0,0,0,.08)}
.mobile-menu a{display:block;padding:15px 24px;font-family:var(--font-head);font-weight:600;font-size:15px;border-bottom:1px solid rgba(0,0,0,.06)}

/* Breadcrumbs — shared across shop/category, PDP, and static content pages */
.crumb{font-size:12.5px;color:var(--muted);padding:18px 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumb li{display:flex;align-items:center;gap:6px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--olive)}
.crumb [aria-current="page"]{color:var(--text);font-weight:600}
.crumb .crumb-sep{color:#c4c4c4}
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding-bottom:20px}
.gallery .main{background:#f7f6f3;border-radius:var(--card-radius);aspect-ratio:1/.92;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery .main img{max-width:82%;max-height:82%;object-fit:contain}
.info h1{font-size:33px;margin-bottom:16px}
.price{font-family:var(--font-head);font-weight:600;font-size:38px;margin-bottom:8px}
.ship-note{font-size:13px;color:var(--muted);margin-bottom:20px}
.ship-note a{color:var(--olive);text-decoration:underline}
.sku{font-size:13px;color:var(--muted);letter-spacing:.02em;padding-bottom:22px;border-bottom:1px solid #ececec;margin-bottom:22px}
.opt-label{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.swatches{display:flex;gap:10px;margin-bottom:26px}
.swatch{min-width:64px;padding:11px 16px;border:1px solid #cfcfcf;border-radius:var(--btn-radius);background:#fff;font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:.15s}
.swatch.on{background:#000;color:#fff;border-color:#000}
.swatch:not(.on):hover{border-color:#000}
.qtyrow{margin-bottom:24px}
.stepper{display:inline-flex;align-items:center;border:1px solid #cfcfcf;border-radius:var(--btn-radius);overflow:hidden}
.stepper button{width:44px;height:46px;border:none;background:#fff;font-size:18px;cursor:pointer;color:#333}
.stepper input{width:52px;height:46px;border:none;text-align:center;font-size:15px;font-family:var(--font-body);font-weight:700}
.atc{width:100%;font-size:13px}
.badges{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:20px;background:#efefef;color:#4d473f}
.tabs{border-top:1px solid #ececec;margin-top:14px}
.tabbar{display:flex;gap:28px;padding:22px 0 0}
.tabbar button{background:none;border:none;font-family:var(--font-head);font-weight:600;font-size:14px;padding:0 0 14px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.tabbar button.on{color:#000;border-bottom-color:var(--olive)}
.desc{padding:34px 0 60px}
.desc h2{font-size:30px;margin-bottom:16px}
.desc p{max-width:760px;color:#333;margin-bottom:12px}
.desc .warn{font-size:13px}.desc .warn b{color:#000}

/* footer */
.foot{background:var(--footer-bg);color:#e9e6df;font-size:13.5px}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding:46px 0}
.foot .flogo{height:40px;filter:brightness(0) invert(1);margin-bottom:16px}
.foot .disc{font-size:11.5px;opacity:.7;line-height:1.6}
.foot h5{font-family:var(--font-head);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;color:#fff}
.foot ul{list-style:none}.foot ul li{margin-bottom:9px;opacity:.85}
.foot .bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12px;opacity:.8}
.foot .pays{display:flex;gap:8px}.foot .pays span{background:rgba(255,255,255,.9);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:800;color:#333}

@media(max-width:900px){
  .pdp{grid-template-columns:1fr;gap:26px}
  .nav{display:none}
  .hamburger{display:flex;align-items:center}
  .header{position:static}
  .header .row{gap:10px;height:64px}
  .header .logo{margin-right:auto}
  .header .logo img{height:36px}
  .foot .top{grid-template-columns:1fr 1fr}
  .info h1{font-size:27px}
  .price{font-size:32px}
}
@media(max-width:560px){.foot .top{grid-template-columns:1fr}}

/* ===== Collection / archive ===== */

:root{
  --warning-bg:#000; --announce-bg:#403620; --header-bg:#efefef;
  --body-bg:#ffffff; --text:#000000; --muted:#5b5b5b;
  --olive:#6b6e3d; --olive-dark:#403620; --footer-bg:#403620;
  --btn-radius:6px; --card-radius:20px; --container:1300px;
  --font-body:"Nunito Sans",-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:"Poppins",-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text);background:var(--body-bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}

/* chrome */
.warning{background:var(--warning-bg);color:#fff;text-align:center;font-weight:700;font-size:12.5px;padding:9px 14px}
.announce{background:var(--announce-bg);color:#fff;font-size:12.5px}
.announce .row{display:flex;align-items:center;justify-content:space-between;height:38px}
.announce .loc{display:flex;gap:16px;opacity:.9}.announce .loc span{display:inline-flex;align-items:center;gap:5px}
.announce .ship{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.header{background:var(--header-bg);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.header .row{display:flex;align-items:center;height:78px;gap:24px}
.header .logo img{height:44px}
.nav{display:flex;gap:30px;margin:0 auto;font-size:14px;font-weight:700;align-self:stretch}
.nav a{display:inline-flex;align-items:center;gap:5px;padding:6px 0}.nav a:hover{color:var(--olive)}
.caret{width:9px;height:9px}
.hicons{display:flex;gap:20px;align-items:center}.hicons svg{width:21px;height:21px}
.cartwrap{position:relative}
.cartdot{position:absolute;top:-6px;right:-8px;background:#efb34c;color:#000;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger svg{width:26px;height:26px}
.mobile-menu{display:none}
.mobile-menu.open{display:block;background:var(--header-bg);border-top:1px solid rgba(0,0,0,.08)}
.mobile-menu a{display:block;padding:15px 24px;font-family:var(--font-head);font-weight:600;font-size:15px;border-bottom:1px solid rgba(0,0,0,.06)}

/* collection toolbar */
.coll{padding:22px 0 60px}
.coll-title{font-size:30px;margin-bottom:8px}
.coll-head{display:flex;align-items:center;gap:18px;padding:6px 0 18px}
.filter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfcfcf;border-radius:var(--btn-radius);padding:9px 16px;background:#fff;font-family:var(--font-head);font-weight:600;font-size:13px;cursor:pointer}
.filter-btn svg{width:15px;height:15px}
.coll-head .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.count{font-size:13px;font-weight:600}
.views{display:flex;gap:4px}
.views button{width:28px;height:28px;border:none;background:none;cursor:pointer;color:#c4c4c4;display:flex;align-items:center;justify-content:center}
.views button.on{color:#111}
.sort{border:1px solid #cfcfcf;border-radius:var(--btn-radius);padding:9px 30px 9px 14px;font-family:var(--font-head);font-weight:600;font-size:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;cursor:pointer}

/* body layout */
.coll-body{display:grid;grid-template-columns:230px 1fr;gap:40px}
.filters .fgroup{padding:18px 0;border-bottom:1px solid #ececec}
.filters .fgroup:first-child{padding-top:0}
.filters h4{font-size:14px;margin-bottom:12px}
.filters label{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#333;padding:6px 0;cursor:pointer}
.filters label .ct{margin-left:auto;color:#a3a3a3;font-size:12px}
.filters input{width:15px;height:15px;accent-color:var(--olive);cursor:pointer}
.price-slider{height:4px;background:#e2e0da;border-radius:3px;position:relative;margin:20px 8px}
.price-slider .fill{position:absolute;left:0;height:100%;width:96%;background:var(--olive);border-radius:3px}
.price-slider .knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--olive);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translate(-50%,-50%);cursor:pointer}
.price-slider .k1{left:0}.price-slider .k2{left:96%}
.price-inputs{display:flex;gap:12px}
.price-inputs .pi{flex:1}
.price-inputs .pi label{display:block;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.price-inputs .box{display:flex;align-items:center;border:1px solid #cfcfcf;border-radius:var(--btn-radius);padding:8px 10px}
.price-inputs .box span{color:#999;margin-right:4px}
.price-inputs input{border:none;width:100%;font-size:14px;font-family:var(--font-body);outline:none}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.card .cimg{background:#fff;border:1px solid #f0eee9;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px;position:relative}
.card .cimg img{max-width:98%;max-height:98%;object-fit:contain}
.card .ct2{font-size:14px;line-height:1.35;margin-bottom:6px}
.card .cp{font-size:14px;font-weight:700}
.card.is-soldout .cimg img{opacity:.45}
.card.is-soldout .ct2,.card.is-soldout .cp{opacity:.6}
.card.is-comingsoon .cimg img{opacity:.7}
.card.is-comingsoon .ct2,.card.is-comingsoon .cp{opacity:.75}
.comingsoon-note{font-size:14px;color:var(--muted);margin:4px 0}

/* badges (stackable: coming-soon / sold-out / sale can combine on one product) */
.badges{position:absolute;top:10px;left:10px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.badges--pdp{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.soldout-badge,.comingsoon-badge,.sale-badge{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:4px;color:#fff}
.soldout-badge{background:var(--olive-dark)}
.comingsoon-badge{background:var(--olive)}
.sale-badge{background:#a3312c}

/* WPForms — match site button styling instead of the plugin's default blue */
.wpforms-container .wpforms-field-label{font-family:var(--font-head);font-weight:600;font-size:14px}
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container textarea{border:1px solid #cfcfcf;border-radius:var(--btn-radius);font-family:var(--font-body);padding:10px 12px}
.wpforms-container button[type=submit].wpforms-submit{background:var(--olive)!important;border-color:var(--olive)!important;border-radius:var(--btn-radius)!important;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.wpforms-container button[type=submit].wpforms-submit:hover{background:var(--olive-dark)!important;border-color:var(--olive-dark)!important}
.wpforms-confirmation-container{border-radius:var(--btn-radius);font-family:var(--font-body)}

/* regular/sale price display (del = crossed-out "was" price, ins = current price) */
.price del,.cp del,.pp del{color:var(--muted);font-weight:400;text-decoration:line-through;margin-right:8px}
.price ins,.cp ins,.pp ins{text-decoration:none}
.cp del,.pp del{font-size:13px}

/* no-results (search) */
.no-results p{color:#666;font-size:15px}
.no-results__links{display:flex;gap:18px;margin-top:6px}
.no-results__links a{color:var(--olive);font-weight:600;text-decoration:underline}

/* footer */
.foot{background:var(--footer-bg);color:#e9e6df;font-size:13.5px}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding:46px 0}
.foot .flogo{height:40px;filter:brightness(0) invert(1);margin-bottom:16px}
.foot .disc{font-size:11.5px;opacity:.7;line-height:1.6}
.foot h5{font-family:var(--font-head);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;color:#fff}
.foot ul{list-style:none}.foot ul li{margin-bottom:9px;opacity:.85}
.foot .bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);font-size:12px;opacity:.8}
.foot .pays{display:flex;gap:8px}.foot .pays span{background:rgba(255,255,255,.9);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:800;color:#333}

@media(max-width:900px){
  .nav{display:none}
  .hamburger{display:flex;align-items:center}
  .header{position:static}
  .header .row{gap:10px;height:64px}
  .header .logo{margin-right:auto}
  .header .logo img{height:36px}
  .coll-body{grid-template-columns:1fr;gap:0}
  .filters{display:none;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid #ececec}
  .filters.open{display:block}
  .grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .views{display:none}
  .foot .top{grid-template-columns:1fr 1fr}
}

/* ============ PRINT ============ */
@media print{
  .announce,.header,.mobile-menu,.foot,
  .uw-drawer,.uw-drawer-overlay,.uw-search-overlay,
  .coll-head .filter-btn,.filters,.coll-loadmore,
  .arrows,.uw-carousel~.arrows{display:none!important}
  body{background:#fff}
  .wrap{max-width:100%;padding:0}
  a{color:inherit;text-decoration:none}
}
@media(max-width:560px){.foot .top{grid-template-columns:1fr}.coll-head{flex-wrap:wrap;gap:12px}}