/* ==========================================================================
   Zeest v2 — elements.css: header, footer, buttons, homepage sections,
   page content, journal. All values from the spec's 8pt scale and type
   scale. Loaded after grid.css, before shop.css.
   ========================================================================== */

/* ================= Announcement bar ================= */
.z-announce{position:relative;background:var(--z-dark);color:#fff;padding:10px var(--pad);padding-right:44px;text-align:center;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.z-announce-msg{display:none}
.z-announce-msg.is-active{display:block}
.z-announce a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.z-announce-close{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:#fff;font-size:18px;line-height:1;cursor:pointer}
/* The visible × is 32px; its hit area is extended to the 44px touch
   minimum without changing the bar's layout. */
.z-announce-close::after{content:"";position:absolute;inset:-6px}

/* ================= Service strip (under the homepage hero) =================
   A slim, quiet, control-free rotator carrying the store's real
   policies. Without JS the first message stays (it is the only one
   shown); core.js adds the .is-rotating state and cycles messages
   with the announcement bar's pause rules. */
.z-service{margin:24px var(--pad) 0;border:1px solid var(--z-line);border-radius:var(--r-pill);background:var(--z-card);padding:12px 24px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--z-ink2)}
/* .z-rotator is the JS rotation hook (core.js); in CSS it simply
   clips the swapping messages to the pill's shape. */
.z-rotator{overflow:hidden}
.z-service-msg{display:none}
.z-service-msg:first-child{display:block}
.z-service.is-rotating .z-service-msg{display:none}
.z-service.is-rotating .z-service-msg.is-active{display:block}
@media (max-width:767px){
	.z-service{margin:16px var(--padm) 0;letter-spacing:.06em;padding:12px 16px}
}

/* ================= Header (floating rounded bar) ================= */
.z-header{position:sticky;top:16px;z-index:60;margin:16px var(--pad) 0}
.z-header-bar{display:flex;align-items:center;gap:16px;background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-page);padding:12px 24px}
.z-nav{flex:1}
.z-menu{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.z-menu a{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--z-ink);text-decoration:none}
.z-menu a:hover{color:var(--z-slate)}
.z-logo,.custom-logo-link{font-family:var(--fh);font-size:25px;font-weight:700;letter-spacing:.28em;color:var(--z-ink);text-decoration:none;line-height:1}
.custom-logo-link img{height:40px;width:auto}
.z-header-icons{display:flex;align-items:center;gap:16px;flex:1;justify-content:flex-end}
.z-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;color:var(--z-ink);cursor:pointer;text-decoration:none;border-radius:50%}
.z-icon-btn:hover{background:var(--z-bg)}
.z-icon-btn svg{width:21px;height:21px;display:block}
.z-cart-count{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--z-dark);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.z-cart-link{text-decoration:none}
.z-burger{display:none}
.z-search-panel,.z-mobile-menu{display:none;background:var(--z-card);border:1px solid var(--z-line);border-radius:16px;padding:16px;margin-top:8px}
.z-search-panel.is-open,.z-mobile-menu.is-open{display:block}
.z-search-panel form{display:flex;gap:12px}
/* The Woo/WordPress search submit inside the theme's search
   surfaces gets the theme's dark pill treatment (it otherwise
   renders as an unstyled browser button). */
.z-search-panel form button,.z-404 form button,.z-head-search form button{min-height:52px;padding:12px 20px;border:1px solid var(--z-dark);border-radius:var(--r-img);background:var(--z-dark);color:#fff;font-family:var(--fh);font-size:14px;font-weight:600;cursor:pointer;flex:none}
.z-search-panel input[type="search"],.z-search-panel input[type="text"]{flex:1;min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink)}
.z-mobile-menu ul{list-style:none;margin:0;padding:0}
.z-mobile-menu li{margin-bottom:8px}
.z-mobile-menu a{display:block;padding:12px 8px;font-size:17px;font-weight:600;color:var(--z-ink);text-decoration:none}
/* Search form inside the mobile menu (the header icon is hidden on
   small phones, so this keeps search discoverable there). */
.z-mobile-search{margin-bottom:16px}
.z-mobile-search form{display:flex;gap:12px}
.z-mobile-search input[type="search"],.z-mobile-search input[type="text"]{flex:1;min-width:0;min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink)}
.z-mobile-search button{flex:none;min-height:52px;padding:12px 20px;border:1px solid var(--z-dark);border-radius:var(--r-img);background:var(--z-dark);color:#fff;font-family:var(--fh);font-size:14px;font-weight:600;cursor:pointer}
@media (max-width:1199px){
	.z-nav{display:none}
	.z-menu{gap:24px}
	.z-burger{display:inline-flex}
	.z-logo,.custom-logo-link{margin:0 auto}
}
@media (max-width:767px){
	.z-header-bar{padding:10px 16px}
	.z-header-icons{gap:8px}
	.z-header-icons .z-icon-btn:first-child{display:none} /* search icon hidden here — the search form lives inside the mobile menu panel instead */
	.z-header-icons a[href$="/my-account/"]{display:none}
	.z-announce{letter-spacing:.08em}
	.z-announce-msg{max-width:480px;margin-left:auto;margin-right:auto}
}

/* ================= Buttons ================= */
/* Button padding is em-based (v2.4 relative sizing): the padding is
   a ratio of the button's own font size — .8em × 2.13em at 15px =
   the approved 12px × 32px — so any context that sets a different
   button font size scales its padding proportionally. Heights stay
   in px: they are touch-target guarantees, not decoration. */
.z-btn,.button,button.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,input[type="submit"],.wp-element-button{
	/* v2.5: border-box, always — a width:100% button (mobile
	   newsletter form, card CTAs) must include its padding, never
	   add it on top and bleed past its container. */
	box-sizing:border-box;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:52px;padding:.8em 2.13em;border-radius:var(--r-pill);
	background:var(--z-dark);color:#fff;border:1px solid var(--z-dark);
	font-family:var(--fh);font-size:15px;font-weight:600;line-height:1.3;
	text-decoration:none;cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.z-btn:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,input[type="submit"]:hover{background:var(--z-ink-hover);color:#fff}
.z-btn--light,.z-btn--white{background:#fff;color:var(--z-dark);border-color:#fff}
.z-btn--light:hover,.z-btn--white:hover{background:var(--z-oat);color:var(--z-dark)}
.z-btn--outline{background:transparent;color:var(--z-ink);border-color:var(--z-dark)}
.z-btn--outline:hover{background:var(--z-dark);color:#fff}
.z-btn--outline-w{background:transparent;color:#fff;border-color:#fff}
.z-btn--outline-w:hover{background:#fff;color:var(--z-dark)}
.z-btn--sale{background:var(--z-error);border-color:var(--z-error);color:#fff}
.z-btn--sale:hover{background:var(--z-error);color:#fff}
.z-btn--sm{min-height:44px;padding:.77em 1.85em;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.add_to_cart_button.added::after{content:"✓";margin-left:8px;font-weight:700}

/* ================= Section head ================= */
/* v2.4 reconciliation: the head is a flex row — title block left,
   the optional "view all" arrow link right-aligned and bottom-aligned
   on desktop/tablet (spec §2.5.4), stacking under the lead on mobile.
   Sizes are fluid between the approved anchors (see style.css):
   section title 26 / 22 / 20px = 1.63× / 1.38× / 1.25× base. */
.z-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.z-sec-head>div{flex:1;min-width:0}
.z-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--z-ink2);margin-bottom:12px}
.z-eyebrow--sand{color:var(--z-sand)} /* eyebrow on dark bands */
.z-sec-head h2,.z-sec-title{font-size:clamp(20px,calc(16.67px + .694vw),22px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid var(--z-ink)}
@media (min-width:768px){
	.z-sec-head h2,.z-sec-title{font-size:clamp(22px,calc(14.89px + .926vw),26px)}
}
.z-sec-head p{color:var(--z-ink2);margin:12px 0 0;max-width:600px}
.z-lead{font-size:16px;line-height:1.6;color:var(--z-ink2);max-width:600px;margin:12px 0 0}
.z-link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--z-ink);text-decoration:none;white-space:nowrap}
.z-link-arrow::after{content:"\2192";transition:transform .18s ease}
.z-link-arrow:hover{color:var(--z-ink-hover)}
.z-link-arrow:hover::after{transform:translateX(4px)}
@media (max-width:1199px){.z-sec-head{margin-bottom:32px}}
@media (max-width:767px){
	.z-sec-head{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:28px}
	.z-sec-head .z-link-arrow{margin-top:16px}
}

/* ================= Hero ================= */
/* v2.4 reconciliation: the markup is .z-hero > .z-hero-media (the
   photo layer) + .z-hero-inner (the content layer). The media fills
   the hero absolutely and carries the legibility gradient; the inner
   is a bottom-left content column on the spec's inner padding.
   Headline is fluid between anchors 61 / 49 / 39px
   = 3.81× / 3.06× / 2.44× base. */
.z-hero{position:relative;margin:24px var(--pad) 0;border-radius:var(--r-page);overflow:hidden;background:var(--z-dark)}
.z-hero-media{position:absolute;inset:0}
.z-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.z-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,35,35,0) 40%,rgba(35,35,35,.55))}
.z-hero-inner{position:relative;z-index:2;min-height:min(82vh,720px);display:flex;flex-direction:column;justify-content:flex-end;padding:56px;color:#fff}
.z-hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 16px}
.z-hero-inner h1{font-size:clamp(39px,calc(22.33px + 3.472vw),49px);line-height:1.05;color:#fff;font-weight:700;margin:0}
@media (min-width:768px){
	.z-hero-inner h1{font-size:clamp(49px,calc(27.67px + 2.778vw),61px)}
}
.z-hero-sub{color:rgba(255,255,255,.92);font-size:17px;line-height:1.6;max-width:520px;margin:16px 0 0}
.z-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* No photo uploaded: the hero is a designed dark stage, not an
   82vh void — it shrinks to a content-sized editorial block. */
.z-hero--noimg .z-hero-inner{min-height:480px}
@media (max-width:1199px){
	.z-hero-inner{min-height:min(68vh,560px);padding:40px}
	.z-hero--noimg .z-hero-inner{min-height:400px}
}
@media (max-width:767px){
	.z-hero{margin:16px var(--padm) 0}
	.z-hero-inner{min-height:min(78svh,520px);padding:32px 24px}
	.z-hero--noimg .z-hero-inner{min-height:360px}
}

/* ================= Category tiles ================= */
.z-tile{position:relative;border-radius:var(--r-page);overflow:hidden;display:flex;flex-direction:column}
.z-tile-media{aspect-ratio:4/3;overflow:hidden}
.z-tile-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.z-tile:hover .z-tile-media img{transform:scale(1.04)}
.z-tile--slate{background:var(--z-slate)}
.z-tile--tbrown{background:var(--z-tbrown)}
.z-tile--oat{background:var(--z-oat)}
.z-tile--sage{background:var(--z-sage)}
.z-tile-body{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:0;color:#fff;flex:1}
.z-tile--oat .z-tile-body{color:var(--z-ink)}
.z-tile-name{font-size:20px;font-weight:600;margin-bottom:8px}
/* The tile's action is a span styled as the spec's tile button
   (44px tall, 13px uppercase pill); padding is em-based like the
   other buttons (.77em × 1.69em at 13px = 10px × 22px). */
.z-tile-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;height:44px;min-height:44px;padding:.77em 1.69em;border-radius:var(--r-pill);background:var(--z-dark);color:#fff;border:1px solid var(--z-dark);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.z-tile:hover .z-tile-btn{background:var(--z-ink-hover)}
@media (max-width:767px){
	.z-tile-media{aspect-ratio:16/9} /* single-column mobile tiles go cinematic */
}

/* ================= Collection banner ================= */
/* v2.4 reconciliation: markup is .z-banner > .z-banner-media (photo
   layer + cream wash) + .z-banner-inner (centred content column).
   Headline is fluid between anchors 56 / 44 / 38px
   = 3.50× / 2.75× / 2.38× base (Cormorant display). */
.z-banner{margin:0 var(--pad);border-radius:var(--r-page);overflow:hidden;position:relative;background:var(--z-oat)}
.z-banner-media{position:absolute;inset:0}
.z-banner-media img{width:100%;height:100%;object-fit:cover;display:block}
.z-banner-media::after{content:"";position:absolute;inset:0;background:rgba(244,240,230,.78)}
.z-banner-inner{position:relative;z-index:2;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px}
.z-banner-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--z-ink2);margin:0 0 16px}
.z-banner-inner h2{font-family:var(--fd);font-size:clamp(38px,calc(28px + 2.083vw),44px);line-height:1.05;font-weight:600;margin:0}
@media (min-width:768px){
	.z-banner-inner h2{font-size:clamp(44px,calc(22.67px + 2.778vw),56px)}
}
.z-banner-inner>p{margin:16px auto 32px;max-width:480px;color:var(--z-ink2)}
.z-banner-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:1199px){
	.z-banner-inner{min-height:440px;padding:64px 24px}
}
@media (max-width:767px){
	.z-banner{margin:0 var(--padm)}
	.z-banner-inner{min-height:420px;padding:32px 24px}
}

/* ================= Story + fabric cards ================= */
.z-tcard{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-panel);padding:48px;display:flex;flex-direction:column}
/* Story headline fluid between anchors 36 / 32 / 28px
   = 2.25× / 2.00× / 1.75× base (Cormorant display). */
.z-tcard h2{font-family:var(--fd);font-size:clamp(28px,calc(21.33px + 1.389vw),32px);line-height:1.15;font-weight:600;margin-bottom:16px}
@media (min-width:768px){
	.z-tcard h2{font-size:clamp(32px,calc(24.89px + .926vw),36px)}
}
.z-tcard p{color:var(--z-ink2);margin:0 0 16px}
.z-tcard p:last-of-type{margin-bottom:0}
.z-tcard .z-btn{align-self:flex-start;margin-top:24px}
.z-facts{list-style:none;margin:0;padding:0}
.z-facts li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--z-line);font-size:15px}
.z-facts li:first-child{padding-top:0}
.z-facts li:last-child{border-bottom:0;padding-bottom:0}
.z-facts b{font-weight:600;white-space:nowrap}
.z-facts span{color:var(--z-ink2);text-align:right}
.z-note{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--r-img);padding:16px 20px;font-size:14px;line-height:1.55;color:var(--z-ink2);margin-top:24px}
.z-more-row{margin-top:var(--s4)} /* trailing "read more" row inside cards */
.z-note b{color:var(--z-ink)}
@media (max-width:1199px){.z-tcard{padding:32px}}
@media (max-width:767px){.z-tcard{padding:28px 24px}}

/* ================= Values strip ================= */
.z-value{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);padding:24px}
.z-ficon{margin-bottom:16px;line-height:0}
.z-value svg{width:32px;height:32px;display:block}
.z-value h3{font-size:15px;font-weight:600;margin-bottom:8px}
.z-value p{font-size:14px;line-height:1.55;color:var(--z-ink2);margin:0}

/* ================= Reviews panel ================= */
/* v2.4 reconciliation: the templates emit .z-reviews-empty (the
   honest no-reviews-yet state, also reused as the generic empty
   panel in search and content-none); it carries the panel treatment
   the old markup revision called .z-reviews-panel — both names now
   share one rule set. The --plain / --end modifiers are the
   left-aligned in-flow variants (search results, empty archives),
   replacing the inline styles those templates used to carry.
   Reviews line is fluid between anchors 25 / 25 / 22px. */
.z-reviews-panel,.z-reviews-empty{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-panel);padding:56px 24px;text-align:center}
.z-reviews-line{font-size:clamp(22px,calc(17px + 1.042vw),25px);font-weight:600;margin-bottom:16px}
.z-reviews-panel p,.z-reviews-empty p{color:var(--z-ink2);max-width:620px;margin:0 auto 32px}
.z-reviews-empty .z-eyebrow{margin-bottom:12px}
.z-reviews-empty--plain{text-align:left;margin:24px 0 40px}
.z-reviews-empty--plain p,.z-reviews-empty--end p{margin-left:0;margin-right:0}
.z-reviews-empty--end{text-align:left;margin:0 0 64px}
@media (max-width:1199px){.z-reviews-panel,.z-reviews-empty{padding:48px 24px}}
@media (max-width:767px){.z-reviews-panel,.z-reviews-empty{padding:40px 24px}}

/* ================= Newsletter band ================= */
.z-newsletter{margin:0 var(--pad);border-radius:var(--r-page);background:var(--z-dark);color:#fff;padding:64px 24px;text-align:center}
.z-newsletter h2{margin-bottom:8px;color:#fff}
.z-newsletter>p{color:rgba(255,255,255,.75);max-width:520px;margin:0 auto 32px}
.z-news-fallback{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.z-news-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:560px;margin:0 auto}
.z-news-form input[type="email"]{flex:1 1 260px;height:56px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;padding:0 24px;font-size:16px}
.z-news-form input[type="email"]::placeholder{color:rgba(255,255,255,.6)}
.z-news-form .z-btn,.z-news-form button{height:56px}
.z-news-consent{margin-top:16px;font-size:12px;color:rgba(255,255,255,.65)}
.z-news-consent a,.z-newsletter a{color:#fff}
.z-news-form--footer{justify-content:flex-start;max-width:none}
.z-news-form--footer input[type="email"]{background:rgba(255,255,255,.06);color:#fff}
@media (max-width:1199px){.z-newsletter{padding:56px 24px}}
@media (max-width:767px){
	.z-newsletter{margin:0 var(--padm);padding:44px 24px}
	.z-news-form{flex-direction:column}
	.z-news-form input[type="email"],.z-news-form .z-btn,.z-news-form button{width:100%}
	.z-news-form--footer{flex-direction:column}
}

/* ================= Footer (theme fallback — Elementor location wins when set) ================= */
.z-footer{background:var(--z-dark);color:#fff;margin-top:0}
.z-footer a{color:rgba(255,255,255,.85);text-decoration:none}
.z-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.z-footer-main{padding:72px var(--pad) 48px;display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(0,1fr));gap:40px}
.z-fwordmark{font-size:25px;font-weight:700;letter-spacing:.28em;margin:0 0 16px}
.z-fbrand p{color:rgba(255,255,255,.75);font-size:15px;line-height:1.6;margin:0 0 16px}
.z-fbrand a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.z-fsocial{display:flex;gap:12px;margin-top:24px}
.z-fsocial a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.z-fsocial svg{width:20px;height:20px}
.z-footer-news{margin-top:32px}
.z-footer h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.z-footer ul{list-style:none;margin:0;padding:0}
.z-footer li{margin-bottom:12px}
.z-footer li a{font-size:15px}
.z-footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:24px var(--pad)}
.z-footer-bottom-inner{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.65)}
.z-footer-policies{display:inline-flex;gap:24px;flex-wrap:wrap}
.z-pay-strong{color:#fff}
@media (max-width:1199px){
	.z-footer-main{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:56px var(--pad) 40px}
}
@media (max-width:767px){
	.z-footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:48px var(--pad) 32px}
	.z-fbrand{grid-column:1/-1}
	.z-footer-bottom-inner{gap:8px 16px}
	.z-footer-policies{gap:16px;justify-content:flex-start}
}

/* ================= Prefooter merchandising band =================
   Dark band directly above the footer: two compact product lists
   beside the newsletter/social column. Shares the footer's tokens so
   the two read as one unit; a hairline separates the band from the
   footer proper, and the theme footer's top padding steps down when
   the band precedes it. */
.z-prefooter{background:var(--z-dark);color:#fff;padding:48px var(--pad) 40px;border-bottom:1px solid rgba(255,255,255,.16)}
/* v2.4: the band is a flex row, not a fixed 3-track grid — when one
   product list resolves empty and its column drops out, the
   remaining columns share the full width instead of leaving an
   empty grid track standing on the right. */
.z-pf-grid{display:flex;gap:40px}
.z-pf-col{flex:1 1 0;min-width:0}
.z-pf-news{flex:1.2 1 0}
.z-prefooter h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.z-pf-list{list-style:none;margin:0;padding:0}
.z-pf-list li{margin-bottom:12px}
.z-pf-list li:last-child{margin-bottom:0}
.z-pf-item{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.z-pf-item img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-img);flex:none}
.z-pf-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.z-pf-name{font-size:14px;font-weight:500;line-height:1.4}
.z-pf-price{font-size:13px;color:rgba(255,255,255,.65)}
.z-pf-price del{color:rgba(255,255,255,.45)}
.z-pf-price ins{text-decoration:none}
.z-pf-news p{color:rgba(255,255,255,.75);font-size:15px;line-height:1.6;margin:0 0 16px}
.z-pf-news a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.z-prefooter + .z-footer .z-footer-main{padding-top:48px}
@media (max-width:1199px){
	.z-pf-grid{flex-wrap:wrap;gap:32px}
	.z-pf-col{flex:1 1 40%}
	.z-pf-news{flex:1 1 100%}
}
@media (max-width:767px){
	.z-prefooter{padding:40px var(--pad) 32px}
	.z-pf-grid{flex-direction:column}
	.z-pf-col,.z-pf-news{flex:1 1 auto}
}

/* ================= Lookbook (split looks with product rows) ================= */
.z-looks{padding-bottom:16px}
.z-look{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding:40px 0;border-top:1px solid var(--z-line)}
.z-look:first-child{border-top:0;padding-top:8px}
.z-look-media{grid-column:span 5}
.z-look-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-page);display:block}
.z-look-body{grid-column:span 7;min-width:0}
.z-look--flip .z-look-media{order:2}
/* Look headline fluid between anchors 28 / 26 / 24px. */
.z-look-body h2{font-size:clamp(24px,calc(20.67px + .694vw),26px);line-height:1.2;margin-bottom:12px}
@media (min-width:768px){
	.z-look-body h2{font-size:clamp(26px,calc(22.44px + .463vw),28px)}
}
.z-look-body>p{color:var(--z-ink2);max-width:560px;margin:0}
.z-look-shop{margin-top:24px}
.z-look-shop>h3{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
/* The look rows' product spans live in shop.css (after the generic
   grid rules, so they win at equal specificity) — v2.4 moved them
   there; the copies that used to sit here silently lost to the
   generic span-3 rule and left a quarter of every row empty. */
@media (max-width:1199px){
	.z-look{gap:20px}
}
@media (max-width:767px){
	.z-look{grid-template-columns:1fr;gap:16px;padding:32px 0}
	.z-look-media,.z-look-body{grid-column:auto}
	.z-look--flip .z-look-media{order:0}
}

/* ================= Page head ================= */
.z-page-head{padding:56px 0 32px;text-align:center}
.z-page-head h1{margin-bottom:0}
/* Search form seated inside a page head (search results page):
   a centred measure, left-aligned form — replaces an inline style. */
.z-head-search{max-width:520px;margin:24px auto 0;text-align:left}
.z-head-search form{display:flex;gap:12px}
.z-head-search input[type="search"],.z-head-search input[type="text"]{flex:1;min-width:0;min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink)}
/* Standalone reuse blocks on the search page (named rhythm values,
   replacing inline styles). */
.z-cats--solo{margin-bottom:56px}
.z-search-more{padding-bottom:56px}
.z-search-more h2{margin-bottom:16px}
.z-search-more ul{margin:0;padding-left:24px}
.z-search-more li{margin-bottom:8px}
@media (max-width:1199px){.z-page-head{padding:48px 0 28px}}
@media (max-width:767px){.z-page-head{padding:40px 0 24px}}

/* ==========================================================================
   Page + post content — PLAIN SEMANTIC HTML, no theme classes required.
   The pages WXR ships un-classed content (h2/h3, p, ul, tables, shortcodes)
   and Elementor pages keep their own layout; everything below styles the
   document the words themselves form. This is also the class-compat layer:
   z-eyebrow / z-acc / z-tcard / z-trustrow / z-note etc. remain styled in
   the theme for templates and functions that still emit them.
   ========================================================================== */
.z-entry{max-width:820px;margin:0 auto;padding-bottom:64px}
/* Mid-page entry blocks (e.g. the Lookbook intro, which is followed
   by the looks list) drop the page-end bottom padding — there it is
   not page air, just a void stacked before the next component. */
.z-entry--flush{padding-bottom:0}
.z-entry-full{max-width:none}
.z-entry-content{font-size:16px;line-height:1.6}
.z-entry-content>h2{margin:48px 0 16px;font-size:28px}
.z-entry-content>h2:first-child{margin-top:0}
.z-entry-content>h3{margin:32px 0 8px;font-size:22px}
.z-entry-content>h4{margin:24px 0 8px;font-size:18px}
.z-entry-content p{margin:0 0 16px}
.z-entry-content ul,.z-entry-content ol{margin:0 0 16px;padding-left:24px}
.z-entry-content li{margin-bottom:8px}
.z-entry-content li:last-child{margin-bottom:0}
.z-entry-content a{font-weight:500}
.z-entry-content blockquote{background:var(--z-oat);border:0;border-radius:var(--r-panel);padding:32px;margin:32px 0;font-size:20px;line-height:1.5;color:var(--z-ink)}
.z-entry-content blockquote p:last-child{margin-bottom:0}
.z-entry-content hr{border:0;border-top:2px solid var(--z-line);margin:48px 0}
.z-entry-content table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 32px;background:var(--z-card)}
.z-entry-content th{background:var(--z-oat);font-weight:600;text-align:left;padding:16px;border:1px solid var(--z-line)}
.z-entry-content td{padding:16px;border:1px solid var(--z-line);vertical-align:top}
.z-entry-content tbody tr:nth-child(even) td{background:var(--z-bg)}
.z-entry-content img{border-radius:var(--r-img)}
.z-entry-content strong{font-weight:600}
.z-entry-content input[type="text"],.z-entry-content input[type="email"],.z-entry-content input[type="tel"],.z-entry-content input[type="number"],.z-entry-content textarea,.z-entry-content select{min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink)}
/* FAQ pattern: pages arrive as h3 question + answer elements. Ruled as
   stacked cards with semantic selectors only — fully readable with no JS.
   The card body covers the WHOLE answer: the element right after the h3
   plus up to four following p/ul/ol siblings, via bounded sibling chains
   (CSS has no "until the next h3" selector, so the chain is anchored at
   the h3 and cannot leak into ordinary content). The answer's last
   element — the one NOT followed by another p/ul/ol — closes the card
   with the bottom border, radius and padding. A one-paragraph answer
   renders exactly as the original single-paragraph card did. */
.z-entry-content>h3:has(+p),.z-entry-content>h3:has(+ul),.z-entry-content>h3:has(+ol){background:var(--z-card);border:1px solid var(--z-line);border-bottom:0;border-radius:var(--r-card) var(--r-card) 0 0;padding:24px 24px 8px;margin:40px 0 0;font-size:20px}
.z-entry-content>h3:has(+p):first-of-type,.z-entry-content>h3:has(+ul):first-of-type,.z-entry-content>h3:has(+ol):first-of-type{margin-top:0}
/* Card body — every answer element in the chain */
.z-entry-content>h3+:is(p,ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol){background:var(--z-card);border-left:1px solid var(--z-line);border-right:1px solid var(--z-line);margin:0;padding:0 24px 16px;color:var(--z-ink2)}
/* Lists inside a card keep their marker indent clear of the card edge */
.z-entry-content>h3+:is(ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(ul,ol),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(ul,ol){padding-left:48px}
/* Card close — the answer's last element */
.z-entry-content>h3+:is(p,ul,ol):not(:has(+p)):not(:has(+ul)):not(:has(+ol)),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol):not(:has(+p)):not(:has(+ul)):not(:has(+ol)),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol):not(:has(+p)):not(:has(+ul)):not(:has(+ol)),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol):not(:has(+p)):not(:has(+ul)):not(:has(+ol)),
.z-entry-content>h3+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol)+:is(p,ul,ol):not(:has(+p)):not(:has(+ul)):not(:has(+ol)){border-bottom:1px solid var(--z-line);border-radius:0 0 var(--r-card) var(--r-card);padding-bottom:24px}
@media (max-width:767px){
	.z-entry-content>h2{margin:40px 0 16px}
	.z-entry-content blockquote{padding:24px}
	.z-entry-content th,.z-entry-content td{padding:12px}
}

/* In-page class components kept for templates/functions (accordions,
   trust rows, generic cards) — the pages no longer depend on them. */
.z-accordions{margin-top:48px}
.z-acc{border:1px solid var(--z-line);border-radius:var(--r-card);background:var(--z-card);margin-bottom:12px;overflow:hidden}
.z-acc summary{padding:20px 24px;font-family:var(--fh);font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.z-acc summary::-webkit-details-marker{display:none}
.z-acc summary::after{content:"+";font-size:20px;font-weight:400;color:var(--z-ink2)}
.z-acc[open ] summary::after{content:"–"}
.z-acc-body{padding:0 24px 24px;color:var(--z-ink2)}
.z-acc-body p{margin:0 0 8px}
.z-acc-body p:last-child{margin-bottom:0}
.z-trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.z-trust{display:flex;gap:12px;background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);padding:20px}
.z-trust svg{width:24px;height:24px;flex:none}
.z-trust b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.z-trust span{font-size:14px;line-height:1.55;color:var(--z-ink2)}
@media (max-width:767px){.z-trustrow{grid-template-columns:1fr}}

/* ================= Journal / archive cards ================= */
.z-post-card{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.z-post-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--z-oat)}
.z-post-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.z-post-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.z-post-meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--z-ink2);margin-bottom:8px}
.z-post-card h2{font-size:20px;line-height:1.35;margin-bottom:8px}
.z-post-card h2 a{color:var(--z-ink);text-decoration:none}
.z-post-card p{color:var(--z-ink2);margin:0 0 16px}
.z-post-card .z-btn{margin-top:auto;align-self:flex-start}

/* Pagination */
.z-pagination{display:flex;gap:8px;justify-content:center;margin:0 0 64px}
.z-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border:1px solid var(--z-line);border-radius:var(--r-pill);background:var(--z-card);color:var(--z-ink);text-decoration:none;font-size:14px;font-weight:600}
.z-pagination .page-numbers.current{background:var(--z-dark);border-color:var(--z-dark);color:#fff}

/* ================= Single post ================= */
.z-single-hero{text-align:center;padding:56px 0 0}
.z-single-hero .z-post-meta{margin-bottom:16px}
.z-single-hero h1{margin-bottom:16px}
.z-single-hero img{margin-top:32px;border-radius:var(--r-page);width:100%}
/* v2.4: no top padding here — the gap above the post nav is owned
   once, by .z-entry's bottom padding (64px); the old 32px top
   padding stacked on it into a 96px void. The 64px below the nav
   remains the page-end air. */
.z-post-nav{display:flex;justify-content:space-between;gap:24px;padding:0 0 64px;font-weight:600}
.z-comments{max-width:820px;margin:0 auto;padding-bottom:64px}
.z-comments h2,.z-comments h3{margin-bottom:24px}
.comment-list{list-style:none;margin:0 0 32px;padding:0}
.comment-body{background:var(--z-card);border:1px solid var(--z-line);border-radius:var(--r-card);padding:24px;margin-bottom:16px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;background:var(--z-card);color:var(--z-ink);margin-bottom:16px}
.comment-form textarea{min-height:120px}
.comment-form label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}

/* ================= 404 ================= */
.z-404{text-align:center;padding:80px 0 96px}
/* Display numeral fluid between anchors 96 / 96 / 72px (6× base). */
.z-404 .z-big{font-family:var(--fd);font-size:clamp(72px,calc(32px + 8.333vw),96px);line-height:1;color:var(--z-taupe);margin-bottom:16px}
.z-404 h1{margin-bottom:16px}
.z-404 p{color:var(--z-ink2);max-width:520px;margin:0 auto}
.z-404-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.z-404-links{margin-top:32px}
.z-404 form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.z-404 input[type="search"]{min-height:52px;border:1px solid var(--z-line2);border-radius:var(--r-img);padding:12px 16px;font-size:16px;min-width:260px}
@media (max-width:767px){.z-404{padding:48px 0 64px}}