/* ==========================================================================
   KidzNCrew — Homepage Stylesheet
   Brand: KidzNCrew (a brand of KidzNCrew Ventures)
   ========================================================================== */

@font-face{
	font-family:"Inter";
	src:url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
	    url("../fonts/Inter-Variable.woff2") format("woff2");
	font-weight:100 950;
	font-style:normal;
	font-display:swap;
}

:root{
	--navy:#0d2b4e;
	--navy-2:#123a67;
	--ink:#12233d;
	--muted:#647186;
	--pink:#ff3c5a;
	--pink-dark:#d9334d;
	--gold:#ffc300;
	--orange:#ff9110;
	--green:#53b637;
	--blue:#0088e1;
	--teal:#2bb5ad;
	--cream:#fff3df;
	--cream-2:#fff0de;
	--line:#e9edf3;
	--white:#fff;
	--radius-lg:26px;
	--radius-md:20px;
	--shadow-sm:0 8px 24px rgba(13,42,78,.07);
	--shadow-md:0 16px 40px rgba(13,42,78,.11);
	--shadow-lg:0 24px 60px rgba(13,42,78,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden}
body{
	margin:0;
	overflow-x:hidden;
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
	color:var(--ink);
	background:#fff;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.1}
h1{font-size:clamp(2.4rem,4.6vw,3.6rem);letter-spacing:-.03em;font-weight:900}
h2{font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.025em;font-weight:900}
h3{font-size:1.15rem;font-weight:800;margin-bottom:.5rem}
.muted{color:var(--muted)}
.eyebrow{color:var(--pink);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:.8rem;margin-bottom:.6rem}
.bar{display:block;width:52px;height:4px;border-radius:3px;background:linear-gradient(135deg,var(--orange),var(--gold));margin:0 0 22px}
.bar.center{margin-inline:auto}
.icon-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-solid{fill:currentColor;stroke:none}
.deco{position:absolute;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip-to-content link (WordPress-port addition, no static-site equivalent
   -- Phase 13 accessibility pass). Hidden like .visually-hidden until it
   receives keyboard focus, then pinned to the top-left corner above the
   sticky header (z-index higher than .header's 200). */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;z-index:9999}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;overflow:visible;clip:auto;padding:12px 20px;background:var(--navy);color:var(--white);border-radius:10px;font-weight:800;text-decoration:none}
.shop-toolbar{margin-bottom: 40px;}
.article-body h2.wp-block-heading {padding-top: 60px;}
.terms-section ul {list-style: inherit;}
/* Wordmark (logo image) --------------------------------------------------*/
.wordmark{display:inline-block;line-height:0}
.logo-img{display:block;height:50px;width:auto}
footer .logo-img{height:80px}
.brand-panel .logo-img{height:clamp(34px,3.6vw,46px)}

ul.wp-block-list, ol.wp-block-list{list-style: inside;padding-bottom: 20px;padding-left: 40px;}

/* Buttons ---------------------------------------------------------------*/
.button{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:50px;padding:13px 24px;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;font-weight:800;font-size:.95rem;box-shadow:0 12px 26px rgba(255,60,90,.28);border:0;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;}
.button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,60,90,.36)}
.button.outline{background:#fff;color:var(--navy);box-shadow:none;border:1px solid var(--line)}

/* Header ------------------------------------------------------------------*/
.header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(8,40,75,.07)}
.nav-top{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand-block{display:inline-flex;flex-direction:column;align-items:flex-start}
.nav-actions{display:flex;align-items:center;gap:28px}
.menu-toggle{display:none;border:0;background:none;font-size:1.7rem;color:var(--navy);cursor:pointer;line-height:1}

/* Utility row (top): support / account / cart -----------------------------*/
.utility-links{display:flex;align-items:center;gap:22px;font-size:.85rem;font-weight:650;color:var(--muted)}
.utility-links li+li{padding-left:22px;border-left:1px solid var(--line)}
.utility-links a{color:inherit}
.utility-links a:hover{color:var(--pink)}
.cart-link{display:inline-flex;align-items:center;gap:0;position:relative;color:var(--navy)}
.cart-link svg{width:20px;height:20px}
.cart-link:hover{color:var(--pink)}
.cart-count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--pink);color:#fff;font-size:.64rem;font-weight:800;line-height:16px;text-align:center}

/* Main navigation (bottom row) ----------------------------------------------*/
.nav-bottom{border-top:1px solid rgba(8,40,75,.06)}
.nav-bottom .container{position:relative;height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.links{display:flex;align-items:center;gap:34px;font-size:.92rem;font-weight:700}
.links>li{position:relative}
.links>li.has-mega{position:static}
.links a.nav-link{display:inline-flex;align-items:center;gap:5px;padding:6px 0;position:relative}
.links a.nav-link:hover{color:var(--pink)}
.links a.nav-link.active{color:var(--pink)}
.links a.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;border-radius:2px;background:var(--pink)}
.links .caret{width:11px;height:11px;transition:transform .25s ease}
.has-mega:hover .caret,.has-mega.open .caret{transform:rotate(180deg)}

/* Mega menu: centered under the whole nav bar so wide 3/4-col panels never
   overflow the viewport regardless of which trigger (left vs right) opened them */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:min(760px,86vw);background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:30px 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:50}
.has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pink);font-weight:800;margin:0 0 14px}
.mega ul{display:flex;flex-direction:column;gap:11px}
.mega a{font-size:.92rem;font-weight:650;color:var(--ink)}
.mega a:hover{color:var(--pink)}

/* Mega menu variants: 2 link cols + promo / 3 link cols + promo ------------*/
.mega-3{width:min(760px,90vw);grid-template-columns:1fr 1fr 220px}
.mega-4{width:min(960px,92vw);grid-template-columns:repeat(3,1fr) 240px}

.mega-promo{position:relative;display:block;border-radius:16px;overflow:hidden;background:#f5f7fa;min-height:100%}
.mega-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mega-promo:hover img{transform:scale(1.05)}
.mega-promo-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;justify-content:flex-end;height:100%;min-height:180px;padding:16px;background:linear-gradient(to top,rgba(13,43,78,.86),rgba(13,43,78,.08) 65%)}
.mega-promo-copy strong{color:#fff;font-size:.92rem;font-weight:800}
.mega-promo-copy span{display:inline-flex;align-items:center;gap:4px;color:#e2e9f2;font-size:.76rem;font-weight:650}
.mega-promo-copy svg{width:12px;height:12px}

/* Search bar (nav-bottom, right side) ---------------------------------------*/
.nav-search{position:relative;display:flex;align-items:center;background:#f5f7fa;border:1px solid var(--line);border-radius:12px;height:42px;padding:0 4px 0 14px;max-width:340px;flex:1;min-width:0}
.nav-search input{border:0;background:transparent;font-family:inherit;font-size:.85rem;color:var(--ink);padding:0 10px;flex:1;min-width:0}
.nav-search input:focus{outline:none}
.nav-search input::placeholder{color:var(--muted)}
.nav-search button{border:0;background:var(--navy);color:#fff;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s ease}
.nav-search button svg{width:15px;height:15px}

/* Header search autosuggest (assets/js/header-search.js) ----------------*/
.search-suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;max-height:min(70vh,480px);overflow-y:auto}
.search-suggestions-heading{padding:10px 12px 6px;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.search-suggestions-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.search-suggestions-item:hover,.search-suggestions-item.is-active{background:#f5f7fa}
.search-suggestions-item img{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;background:#f5f7fa}
.search-suggestions-item .body{display:flex;flex-direction:column;gap:2px;min-width:0}
.search-suggestions-item .title{font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggestions-item .price{font-size:.8rem;color:var(--pink-dark);font-weight:700}
.search-suggestions-empty{padding:16px 12px;font-size:.88rem;color:var(--muted);text-align:center}
.search-suggestions-viewall{display:block;margin-top:4px;padding:12px;border-top:1px solid var(--line);text-align:center;font-size:.85rem;font-weight:700;color:var(--pink-dark);text-decoration:none;border-radius:0 0 12px 12px}
.search-suggestions-viewall:hover{background:#f5f7fa}
.nav-search button:hover{background:var(--navy-2)}

@media (min-width:1281px){
	.links{position:static}
	html{scroll-padding-top:160px}
}

/* Header v2: search moved inline next to logo, parent nav in caps (site-wide) ---*/
.hdr-inline-search .links > li > a.nav-link{text-transform:uppercase}

.hdr-inline-search .nav-top{justify-content:flex-start}
.hdr-inline-search .nav-top .nav-actions{margin-left:auto}
.hdr-inline-search .nav-top .nav-search{flex:1;max-width:420px;min-width:0;max-height:42px;position:relative;padding:0;background:#f5f7fa}
.hdr-inline-search .nav-top .nav-search input{width:100%;height:42px;padding:0 42px 0 16px}
.hdr-inline-search .nav-top .nav-search button{position:absolute;top:50%;right:4px;transform:translateY(-50%);background:none;color:var(--muted)}
.hdr-inline-search .nav-top .nav-search button:hover{background:var(--line);color:var(--navy)}

@media (max-width:1280px){
	.hdr-inline-search .nav-top .nav-search{display:flex;max-width:260px}
}
@media (max-width:900px){
	.hdr-inline-search .nav-top{gap:14px}
	.hdr-inline-search .nav-top .nav-search{max-width:180px}
}
@media (max-width:560px){
	.hdr-inline-search .nav-top{gap:8px}
	.hdr-inline-search .nav-top .nav-search{max-width:120px;min-width:64px}
	.hdr-inline-search .nav-top .nav-search input{padding:0 34px 0 12px;font-size:.8rem}
}

/* Header v2: navy nav band + full-width mega menu (site-wide) --------------*/
/* Colored band across the full row, and the nav row is stretched full-height
   (instead of being centered/shrink-wrapped) so the <li> hover box reaches all
   the way down to the mega's top edge — this is what removes the dead gap
   that used to break hover when moving from a parent item into its dropdown. */
.hdr-inline-search .nav-bottom{background:var(--navy);border-top:0;position:relative}
.hdr-inline-search .nav-bottom .container{position:static;align-items:stretch}
.hdr-inline-search .links{align-items:stretch}
.hdr-inline-search .links a.nav-link{display:flex;height:100%}

@media (min-width:1281px){
	.hdr-inline-search .links a.nav-link{color:#fff}
	.hdr-inline-search .links a.nav-link:hover{color:var(--pink)}
	.hdr-inline-search .links a.nav-link.active{color:var(--pink)}
}

/* Mega menu becomes a full-viewport-width band anchored to .nav-bottom (not
   the narrower .container), with its content re-centered to the container
   width one level down via .mega-inner. Desktop-only: at mobile widths the
   pre-existing tap/click accordion behaviour (position:static, display
   toggled by .open) is left completely in charge — see note below. */
@media (min-width:1281px){
	.hdr-inline-search .mega{left:0;right:0;transform:none;border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.12);padding:0;display:block;transition:opacity .18s ease,visibility .18s}
	.hdr-inline-search .mega-3,.hdr-inline-search .mega-4{width:auto}
	.hdr-inline-search .has-mega:hover .mega,.hdr-inline-search .has-mega.open .mega{transform:none}
}
.hdr-inline-search .mega-inner{width:min(1240px,calc(100% - 40px));margin-inline:auto;padding:30px 34px;display:grid;gap:28px}
.hdr-inline-search .mega-3 .mega-inner{grid-template-columns:1fr 1fr 220px}
.hdr-inline-search .mega-4 .mega-inner{grid-template-columns:repeat(3,1fr) 240px}

/* Mobile: .mega itself keeps the site's original position:static/display:none
   accordion toggle untouched — only the grid/padding that used to live on
   .mega directly are redirected to .mega-inner here. */
@media (max-width:1280px){
	.hdr-inline-search .mega-inner{padding:10px 0 10px 16px}
	.hdr-inline-search .mega-3 .mega-inner,.hdr-inline-search .mega-4 .mega-inner{grid-template-columns:1fr}
}

/* Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:64px 0 0;background:radial-gradient(circle at 88% 10%,#eaf5ff 0,transparent 32%),linear-gradient(105deg,#fff9ef 0,#fff 55%)}
.hero .container{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding-bottom:60px}
.hero-copy{max-width:560px}
.hero h1 .accent{color:var(--pink)}
.hero .lead{font-size:1.05rem;color:var(--muted);max-width:480px}
.hero .cta-row{margin-top:8px}
.hero-photo{position:relative}
.hero-photo .frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1/1.02}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:22% 30%;transition:transform 6s cubic-bezier(.16,1,.3,1)}
.hero .deco{z-index:2;color:var(--navy-2)}

/* Hero slider ------------------------------------------------------------
   All slides share one grid cell (grid-area:1/1) so the section's height is
   always driven by the tallest slide's content — no JS height measuring and
   no jump when slides change. Only the active slide is interactive/exposed
   to assistive tech; the rest sit at opacity:0 underneath. */
.hero-slides{display:grid}
.hero-slide{grid-area:1/1;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hero-slide.is-active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;z-index:1}
.hero-slide.is-active .hero-photo .frame img{transform:scale(1.06)}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);box-shadow:var(--shadow-md);color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow:hover{background:#fff;box-shadow:var(--shadow-lg)}
.hero-arrow:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.hero-arrow-prev{left:14px}
.hero-arrow-prev svg{transform:rotate(180deg)}
.hero-arrow-next{right:14px}

.hero-dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:9px}
.hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:5px;background:rgba(13,43,78,.22);cursor:pointer;transition:background .25s ease,width .25s ease}
.hero-dot:hover{background:rgba(13,43,78,.4)}
.hero-dot.is-active{background:var(--pink);width:26px}
.hero-dot:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

.hero-slider.has-single-slide .hero-arrow,
.hero-slider.has-single-slide .hero-dots{display:none}

/* Between 901–1380px .container's own side margin is thin (a flat 20px up
   to 1280px, then only growing a little past it, since width:min(1240px,
   calc(100% - 40px)) caps out at 1240px) — not enough room for a 46px arrow
   before it reaches the flush-left hero copy. Give the hero's own container
   a bit more inset here so the arrows sit clear of the text. */
@media (min-width:901px) and (max-width:1400px){
	.hero .container{padding-inline:56px}
}

/* Large desktops: the sticky header's two rows (nav-top + nav-bottom) take
   up ~145px, so the hero's own padding and near-square photo frame are
   trimmed here to keep header + hero within one screen's height, without
   touching the tablet/mobile layout below 1281px (where the header is
   shorter -- single row -- and there's already more room to spare). */
@media (min-width:1281px){
	.hero{padding:36px 0 0}
	.hero .container{padding-bottom:32px}
	.hero-photo .frame{aspect-ratio:1.35/1}
}

.trust-bar{position:relative;z-index:4;margin-top:-15px}
.trust-bar .trust-panel{background:#fff;border-radius:22px;box-shadow:var(--shadow-md);border:1px solid var(--line);padding:26px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none}
.trust-item .ico svg{width:20px;height:20px}
.trust-item:nth-child(1) .ico{background:#ffe3e9;color:var(--pink)}
.trust-item:nth-child(2) .ico{background:#e6f4e0;color:var(--green)}
.trust-item:nth-child(3) .ico{background:#fff2c7;color:var(--orange)}
.trust-item:nth-child(4) .ico{background:#dcebfc;color:var(--blue)}
.trust-item strong{display:block;font-size:.92rem;font-weight:800;line-height:1.3}

/* Generic section -------------------------------------------------------*/
section{padding:96px 0}
.section-tight{padding-top:76px}
#about{position:relative}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.photo{position:relative}
.photo img{width:100%;aspect-ratio:1.22/1;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.photo img.tone-warm{object-position:center 20%}

/* About section decorations */
#about .deco{color:var(--green)}

/* Products --------------------------------------------------------------*/
.section-head{text-align:center;max-width:640px;margin:0 auto 44px}
.section-head .eyebrow{justify-content:center}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.card .thumb{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin-bottom:20px;overflow:hidden}
.card .thumb svg{width:34px;height:34px}
.card:nth-child(1) .thumb{background:#fff2c7;color:var(--orange)}
.card:nth-child(2) .thumb{background:#ffe3e9;color:var(--pink)}
.card:nth-child(3) .thumb{background:#e6f4e0;color:var(--green)}
.card:nth-child(4) .thumb{background:#dcebfc;color:var(--blue)}
.card p{font-size:.92rem;margin-bottom:20px}
.card-arrow{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;transition:transform .3s ease}
.card-arrow svg{width:16px;height:16px}
.card:nth-child(1) .card-arrow{background:var(--orange)}
.card:nth-child(2) .card-arrow{background:var(--pink)}
.card:nth-child(3) .card-arrow{background:var(--green)}
.card:nth-child(4) .card-arrow{background:var(--blue)}
.card:hover .card-arrow{transform:translateX(4px)}

/* Why families dark bar --------------------------------------------------*/
.why{background:linear-gradient(120deg,var(--navy),#0a3560);color:#fff;padding:56px 0}
.why .section-head{margin-bottom:38px}
.why .eyebrow{color:var(--gold)}
.why h2{color:#fff;font-size:1.1rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.why-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.why-item{display:flex;align-items:flex-start;gap:14px;padding:0 26px;position:relative}
.why-item + .why-item:before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(255,255,255,.16)}
.why-item .ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.why-item .ico svg{width:19px;height:19px}
.why-item:nth-child(1) .ico{background:rgba(255,60,90,.18);color:#ff7c90}
.why-item:nth-child(2) .ico{background:rgba(255,195,0,.18);color:var(--gold)}
.why-item:nth-child(3) .ico{background:rgba(0,136,225,.22);color:#59b2ec}
.why-item:nth-child(4) .ico{background:rgba(83,182,55,.22);color:#8fd07d}
.why-item strong{display:block;font-size:.98rem;font-weight:800;margin-bottom:3px}
.why-item p{font-size:.86rem;color:#c6d2df;margin:0}

/* Brand + Contact split ---------------------------------------------------*/
.brand-contact{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:stretch}
.brand-panel{position:relative;background:linear-gradient(120deg,var(--cream),var(--cream-2));border:1px solid #f6ead5;border-radius:var(--radius-lg);padding:44px 46px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;overflow:hidden}
.brand-panel .eyebrow{color:var(--pink)}
.brand-panel p{max-width:320px}
.brand-photo{position:relative;width:180px;justify-self:end;align-self:end}
.brand-photo img{width:100%;aspect-ratio:.92/1;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-md)}
.brand-panel .deco{color:var(--gold)}

.contact-panel{background:linear-gradient(120deg,#ffeef1,#ffe3e9);border:1px solid #ffd7de;border-radius:var(--radius-lg);padding:44px 38px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.contact-panel h3{font-size:1.45rem}
.contact-panel .button{align-self:flex-start;margin-top:10px}

/* Footer -------------------------------------------------------------------*/
footer{background:var(--navy);color:#fff;padding:64px 0 34px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:0}
.footer-brand{padding-right:36px}
.footer-brand .tag{color:#aebdd0;display:block;margin-top:14px;font-style:italic;font-size:.86rem}
.footer-tagline{color:#a9bcd2;font-size:.92rem;line-height:1.6;max-width:300px;margin:14px 0 0}
.footer-col{padding:0 28px;border-left:1px solid rgba(255,255,255,.14)}
.footer-heading{color:#fff;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin:0 0 20px}
.footer-links{display:flex;flex-direction:column;gap:13px;font-size:.9rem}
.footer-links a,.footer-link-btn{color:#c6d2df;font:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.footer-links a:hover,.footer-link-btn:hover{color:var(--gold)}
.footer-divider{border:0;border-top:1px solid rgba(255,255,255,.14);margin:44px 0 0}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px}
.copy{color:#9fb0c4;font-size:.82rem;margin:0}
.footer-legal-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:.82rem}
.footer-legal-row a,.footer-legal-row .footer-link-btn{color:#9fb0c4;font:inherit;background:none;border:0;padding:0;cursor:pointer}
.footer-legal-row a:hover,.footer-legal-row .footer-link-btn:hover{color:var(--gold)}

/* Cookie consent banner -------------------------------------------------------*/
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:500;background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 32px rgba(13,42,78,.16);padding:20px 0;transform:translateY(110%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner-inner{width:min(1240px,calc(100% - 40px));margin-inline:auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cookie-banner-copy{flex:1;min-width:240px}
.cookie-banner-copy h4{font-size:1rem;margin-bottom:4px}
.cookie-banner-copy p{font-size:.86rem;color:var(--muted);margin:0}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}

.btn-cookie{border:0;border-radius:11px;padding:11px 18px;font-weight:750;font-size:.86rem;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s ease}
.btn-cookie.solid{background:var(--navy);color:#fff}
.btn-cookie.solid:hover{background:var(--navy-2)}
.btn-cookie.outline{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-cookie.outline:hover{background:#f5f7fa}
.btn-cookie.ghost{background:none;color:var(--muted);text-decoration:underline;padding:11px 6px}
.btn-cookie.ghost:hover{color:var(--ink)}

/* Cookie preferences modal ------------------------------------------------------*/
.cookie-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:24px}
.cookie-modal.visible{display:flex}
.cookie-modal-backdrop{position:absolute;inset:0;background:rgba(13,35,61,.5);backdrop-filter:blur(2px)}
.cookie-modal-panel{position:relative;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:min(680px,86vh);display:flex;flex-direction:column;overflow:hidden}
.cookie-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line);flex:none}
.cookie-modal-head h3{font-size:1.15rem;margin:0}
.cookie-modal-close{border:0;background:#f5f7fa;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--navy);cursor:pointer;flex:none}
.cookie-modal-close:hover{background:#e9edf3}
.cookie-modal-close svg{width:14px;height:14px}
.cookie-modal-body{padding:20px 26px;overflow-y:auto;flex:1}
.cookie-modal-body>p{font-size:.88rem;margin-bottom:18px;color:var(--muted)}
.cookie-cat{padding:16px 0;border-bottom:1px solid var(--line)}
.cookie-cat:last-child{border-bottom:0;padding-bottom:0}
.cookie-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.cookie-cat-head h4{font-size:.95rem;margin:0}
.cookie-cat-tag{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--green)}
.cookie-cat p{font-size:.84rem;color:var(--muted);margin:0}
.cookie-modal-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:18px 26px;border-top:1px solid var(--line);background:#fbfcfd;flex:none}

/* Toggle switch ----------------------------------------------------------------*/
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;inset:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:#d7dde5;border-radius:999px;transition:background .2s ease;pointer-events:none}
.switch-track:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,42,78,.3);transition:transform .2s ease}
.switch input:checked+.switch-track{background:var(--pink)}
.switch input:checked+.switch-track:before{transform:translateX(18px)}
.switch.disabled{opacity:.6}
.switch input:disabled{cursor:not-allowed}

@media (max-width:820px){
	.cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:center}
	.cookie-banner-actions{justify-content:center}
	.cookie-modal-panel{max-height:92vh}
}
@media (max-width:560px){
	.cookie-banner-actions{flex-direction:column;align-items:stretch}
	.btn-cookie{width:100%}
	.btn-cookie.ghost{padding:11px 18px}
	.cookie-modal-foot{flex-direction:column-reverse;align-items:stretch}
}

/* Reveal animation ----------------------------------------------------------*/
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.hero-slide.is-active .hero-copy h1{animation:fadeUp .8s .15s cubic-bezier(.16,1,.3,1) both}
.hero-slide.is-active .hero-copy .bar{animation:fadeUp .6s .26s cubic-bezier(.16,1,.3,1) both}
.hero-slide.is-active .hero-copy .lead{animation:fadeUp .8s .36s cubic-bezier(.16,1,.3,1) both}
.hero-slide.is-active .hero-copy .cta-row{animation:fadeUp .8s .46s cubic-bezier(.16,1,.3,1) both}
.hero-slide.is-active .hero-photo{animation:popIn .9s .25s cubic-bezier(.16,1,.3,1) both}
.trust-panel{animation:fadeUp .8s .5s cubic-bezier(.16,1,.3,1) both}

.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal{transform:translateY(32px)}
.reveal-left{transform:translateX(-38px)}
.reveal-right{transform:translateX(38px)}
.reveal-scale{transform:scale(.94)}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible,.reveal-scale.is-visible{opacity:1;transform:none}
.cards .card:nth-child(1){transition-delay:0s}
.cards .card:nth-child(2){transition-delay:.1s}
.cards .card:nth-child(3){transition-delay:.2s}
.cards .card:nth-child(4){transition-delay:.3s}
.why-row .why-item:nth-child(1){transition-delay:0s}
.why-row .why-item:nth-child(2){transition-delay:.08s}
.why-row .why-item:nth-child(3){transition-delay:.16s}
.why-row .why-item:nth-child(4){transition-delay:.24s}

/* Responsive ----------------------------------------------------------------*/
@media (max-width:1100px){
	.links{gap:16px}
	.cards{grid-template-columns:repeat(2,1fr)}
	.why-row{grid-template-columns:repeat(2,1fr);row-gap:26px}
	.why-item + .why-item:before{display:none}
	.why-item:nth-child(3),.why-item:nth-child(4){padding-top:16px}
}
@media (max-width:900px){
	.hero .container{grid-template-columns:1fr;gap:36px}
	.hero-photo{max-width:420px;margin-inline:auto}
	.brand-contact{grid-template-columns:1fr}
	.brand-panel{grid-template-columns:1fr}
	.brand-photo{justify-self:center}
	/* Stacked hero layout: side arrows would either float mid-text or
	   mid-photo, so they move down to sit level with the dots instead. */
	.hero-arrow{top:auto;bottom:18px;transform:none;width:38px;height:38px}
	.hero-arrow-prev{left:18px}
	.hero-arrow-next{right:18px}
	.hero-dots{bottom:30px}
}
@media (max-width:1280px){
	.menu-toggle{display:block}
	.utility-links li:not(:last-child){display:none}
	.utility-links li:last-child{padding-left:0;border-left:0}
	.nav-bottom{border-top:0}
	.nav-bottom .container{height:auto;display:block}
	.nav-search{display:none}
	.links{display:none;position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 24px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);max-height:calc(100vh - 84px);overflow-y:auto}
	.links.open{display:flex}
	.links>li{width:100%}
	.links a.nav-link{width:100%;padding:12px 0}
	.links a.nav-link.active:after{display:none}
	.mega{position:static;transform:none;width:100%;box-shadow:none;border:0;padding:10px 0 10px 16px;grid-template-columns:1fr;display:none;opacity:1;visibility:visible;pointer-events:auto}
	.has-mega:hover .mega{display:none;transform:none}
	.has-mega.open .mega{display:grid;transform:none}
}
@media (max-width:820px){
	.container{width:min(100% - 32px,720px)}
	.split{grid-template-columns:1fr;gap:34px}
	.cards{grid-template-columns:1fr 1fr;gap:16px}
	.trust-bar .trust-panel{grid-template-columns:1fr 1fr;gap:22px 16px}
	.footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;column-gap:24px}
	.footer-brand{grid-column:1/-1;padding-right:0}
	.footer-col{border-left:0;padding:0}
	section{padding:68px 0}
}
@media (max-width:560px){
	html{scroll-padding-top:70px}
	.container{width:min(100% - 26px,520px)}
	.nav-top{height:70px}
	.links{top:70px}
	.trust-bar .trust-panel{grid-template-columns:1fr;padding:22px}
	.cards{grid-template-columns:1fr}
	.why-row{grid-template-columns:1fr}
	.why-item{padding:0}
	.brand-panel{padding:30px 24px}
	.contact-panel{padding:30px 24px}
	.button{width:100%}
	.footer-grid{grid-template-columns:1fr;row-gap:32px}
	.footer-brand{grid-column:auto}
	.footer-tagline{max-width:none}
	.footer-bottom{flex-direction:column;align-items:flex-start}
	.footer-legal-row{gap:18px}
	.hero-photo .frame{aspect-ratio:1.1/1}
	.hero-arrow{width:34px;height:34px;bottom:14px}
	.hero-arrow-prev{left:12px}
	.hero-arrow-next{right:12px}
	.hero-arrow svg{width:15px;height:15px}
	.hero-dots{bottom:24px}
}
@media (min-width:1500px){
	.container{width:min(1360px,calc(100% - 80px))}
	/* .mega-inner (WordPress-port addition, see its own rule/comment above)
	   centers itself to the same width as .container so the mega-menu's
	   content lines up with the header/hero/every other section below it --
	   its base rule hardcodes the pre-1500px min(1240px,...) formula with no
	   matching override here, so above this breakpoint .container grows
	   wider/re-centers while .mega-inner stays capped at 1240px, drifting
	   apart from every other section by half the difference (60px at this
	   breakpoint's own values) -- confirmed live, not a rounding artifact. */
	.hdr-inline-search .mega-inner{width:min(1360px,calc(100% - 80px))}
}

/* WooCommerce notices (WordPress-port addition, no static-site equivalent).
   wc_add_notice() output (stock/validation/login errors, "added to cart"
   confirmations) isn't limited to cart/checkout/account -- it also renders
   on the shop archive and single product pages, which don't load
   commerce.css, so this lives here instead where every page can reach it. */
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 22px;padding:16px 20px;border-radius:var(--radius-md);font-size:.9rem}
.woocommerce-error{background:#fff0f1;border:1px solid #f8c8cd;color:var(--pink-dark)}
.woocommerce-error li{margin:0;padding:2px 0}
/* .woocommerce-message/-info are always a single notice per div (WooCommerce's
   own notices/success.php and notice.php loop and render one of these per
   notice, unlike -error's shared <ul><li> list) -- safe to lay out as a row
   with any action link (e.g. "View cart") pushed to the right, instead of
   the link defaulting to block/below the message text. */
.woocommerce-message,.woocommerce-info{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.woocommerce-message{background:#eaf7e6;border:1px solid #cfe9c6;color:#2d6e1e}
.woocommerce-info{background:#eef6fc;border:1px solid #cfe3f2;color:var(--navy-2)}
.woocommerce-error .button{margin-top:10px}
.woocommerce-message .button,.woocommerce-info .button{margin:0;margin-left:auto;flex:none}
.woocommerce-invalid input:not([type="checkbox"]):not([type="radio"]),.woocommerce-invalid select{border-color:var(--pink-dark) !important;background:#fff8f8 !important}

/* ==========================================================================
   Shared inner-page components (About, Contact, Shop, Category, Product, Terms)
   ========================================================================== */

/* Breadcrumb ----------------------------------------------------------- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:650;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--pink)}
.breadcrumb .current{color:var(--pink)}
.breadcrumb .sep{color:#c3ccd7}

/* Page hero (About / Contact / Shop / Category / Terms) ------------------*/
.page-hero{padding:44px 0 76px;background:radial-gradient(circle at 88% 8%,#eaf5ff 0,transparent 32%),linear-gradient(105deg,#fff9ef 0,#fff 55%)}
.page-hero + section{padding-top:26px}
.page-hero .split{gap:56px}
.page-hero h1{font-size:clamp(2.1rem,4vw,3.1rem)}
.page-hero .lead{color:var(--muted);font-size:1.02rem;max-width:520px}
.page-hero-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1.28/1}
.page-hero-photo img{width:100%;height:100%;object-fit:cover}
/* Resources (blog index, home.php) only -- .page-hero-photo's shared 1.28/1
   ratio is meant for About/Contact/Shop/Category/Terms, where it's the only
   thing in that column; here it made the whole hero ~510px tall against
   only ~184px of actual text, most of it empty vertical space. Scoped to
   body.blog (WordPress's own class for the designated Posts page) instead
   of a new markup class, since nothing else about this hero differs. */
body.blog .page-hero{padding:32px 0 48px}
body.blog .page-hero-photo{aspect-ratio:2.4/1}
.page-hero-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:2.35/1}
.page-hero-banner img{width:100%;height:100%;object-fit:cover}
.page-hero-head{max-width:640px}

/* 404 page (404.php) -----------------------------------------------------*/
.notfound-block{max-width:560px;margin:0 auto;text-align:center}
.notfound-icon{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,var(--cream),var(--cream-2));display:grid;place-items:center;color:var(--pink)}
.notfound-icon svg{width:38px;height:38px}
.notfound-code{font-size:clamp(3.5rem,9vw,5.5rem);font-weight:800;line-height:1;color:var(--line);margin-bottom:4px}
.notfound-block h1{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.notfound-block .bar{margin-inline:auto}
.notfound-block .lead{max-width:460px;margin-inline:auto}
.notfound-block .cta-row{justify-content:center;flex-wrap:wrap}
.notfound-products-head{max-width:none;text-align:center;margin-bottom:8px}
.notfound-products-head .bar{margin-inline:auto}
.notfound-slider{position:relative;margin-top:12px}
.notfound-slider-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 6px 18px;-ms-overflow-style:none;scrollbar-width:none}
.notfound-slider-track::-webkit-scrollbar{display:none}
.notfound-slider-track .related-card{flex:0 0 clamp(220px,26vw,260px);scroll-snap-align:start}
.notfound-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-md);color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background .2s ease,box-shadow .2s ease,opacity .2s ease}
.notfound-arrow svg{width:16px;height:16px}
.notfound-arrow:hover{background:#f5f7fa}
.notfound-arrow:disabled{opacity:.35;cursor:default}
.notfound-arrow-prev{left:-14px}
.notfound-arrow-next{right:-14px}
@media (max-width:640px){
	.notfound-arrow{display:none}
	.notfound-icon{width:72px;height:72px}
	.notfound-icon svg{width:30px;height:30px}
}

/* Mission / Vision split panel ------------------------------------------*/
.mv-panel{background:#f5f7fa;border-radius:var(--radius-lg);padding:44px 48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative}
.mv-panel:before{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;background:var(--line)}
.mv-item{display:flex;align-items:flex-start;gap:20px}
.mv-item .ico{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;flex:none}
.mv-item .ico svg{width:26px;height:26px}
.mv-item:nth-child(1) .ico{color:var(--pink)}
.mv-item:nth-child(2) .ico{color:var(--blue)}
.mv-item h3{font-size:1.15rem}

/* Values grid ------------------------------------------------------------*/
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;margin-top:44px}
.value-item{padding:0 24px;position:relative}
.value-item+.value-item:before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:var(--line)}
.value-item .ico{width:52px;height:52px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:16px}
.value-item .ico svg{width:24px;height:24px}
.value-item:nth-child(1) .ico{color:var(--pink)}
.value-item:nth-child(2) .ico{color:var(--blue)}
.value-item:nth-child(3) .ico{color:var(--green)}
.value-item:nth-child(4) .ico{color:var(--orange)}
.value-item h3{font-size:1.02rem}
.value-item p{font-size:.88rem}

/* Our Story timeline -------------------------------------------------------*/
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.timeline:before{content:"";position:absolute;left:6%;right:6%;top:20px;height:2px;background:var(--line)}
.timeline-item{text-align:center;position:relative}
.timeline-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;position:relative;z-index:2;font-weight:800;color:#fff;font-size:.8rem;box-shadow:0 0 0 6px #fff}
.timeline-item:nth-child(1) .timeline-dot{background:var(--pink)}
.timeline-item:nth-child(2) .timeline-dot{background:var(--blue)}
.timeline-item:nth-child(3) .timeline-dot{background:var(--green)}
.timeline-item:nth-child(4) .timeline-dot{background:var(--orange)}
.timeline-item .year{font-weight:800;font-size:.95rem;margin-bottom:4px;display:block}
.timeline-item:nth-child(1) .year{color:var(--pink)}
.timeline-item:nth-child(2) .year{color:var(--blue)}
.timeline-item:nth-child(3) .year{color:var(--green)}
.timeline-item:nth-child(4) .year{color:var(--orange)}
.timeline-item h3{font-size:.98rem;margin-bottom:8px}
.timeline-item p{font-size:.82rem}

/* CTA split panel (About bottom, generic use) -----------------------------*/
.cta-split{background:#f5f7fa;border-radius:var(--radius-lg);padding:40px 48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;margin-top:64px}
.cta-split:before{content:"";position:absolute;left:50%;top:14%;bottom:14%;width:1px;background:var(--line)}
.cta-split h3{font-size:1.4rem}
.cta-split .right{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-split .deco{position:static;flex:none}
.cta-split.cream{background:linear-gradient(120deg,var(--cream),var(--cream-2));border:1px solid #f6ead5}
.cta-split.cream:before{background:rgba(6,43,85,.14)}

/* Contact info cards -------------------------------------------------------*/
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-70px;position:relative;z-index:4}
.info-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);padding:28px 22px;text-align:center}
.info-card .ico{width:52px;height:52px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:14px}
.info-card .ico svg{width:22px;height:22px}
.info-card:nth-child(1) .ico{background:#ffe3e9;color:var(--pink)}
.info-card:nth-child(2) .ico{background:#e6f4e0;color:var(--green)}
.info-card:nth-child(3) .ico{background:#fff2c7;color:var(--orange)}
.info-card h3{font-size:1.02rem}
.info-card p{font-size:.86rem;margin:2px 0}
.account-form-featured.reveal-right.is-visible {
    padding-left: 25px;
}
/* Contact form ---------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:7fr 3fr;gap:72px;align-items:start;margin-top:80px}
.contact-featured .product-card{width:100%}
.contact-featured .product-media{aspect-ratio:1.8/1}
.form-field{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field input,.form-field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:.92rem;color:var(--ink);background:#fbfcfd;transition:border-color .2s ease}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--pink);background:#fff}
.form-field textarea{min-height:120px;resize:vertical}
.form-note{font-size:.82rem;color:var(--muted);margin-top:20px}
.form-note a{color:var(--pink);font-weight:650}
.button.navy{background:var(--navy);box-shadow:0 10px 24px rgba(13,43,78,.24)}
.button.navy:hover{box-shadow:0 14px 30px rgba(13,43,78,.32)}

/* Shop toolbar --------------------------------------------------------------*/
.shop-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-sm);margin-top:36px}
.search-field{position:relative;flex:1;min-width:220px;display:flex;align-items:center;gap:10px;color:var(--muted)}
.search-field svg{width:18px;height:18px;flex:none}
.search-field input{flex:1;border:0;font-family:inherit;font-size:.92rem;color:var(--ink);background:transparent}
.search-field input:focus{outline:none}
.select-field{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:650;color:var(--ink);border-left:1px solid var(--line);padding-left:14px}
.select-field select{border:0;background:transparent;font-family:inherit;font-size:.88rem;font-weight:650;color:var(--ink);appearance:none;-webkit-appearance:none;-moz-appearance:none}
.select-field select:focus{outline:none}
.select-field svg{width:14px;height:14px;color:var(--muted)}
.toolbar-plain{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;font-size:.9rem;color:var(--muted)}
.toolbar-plain strong{color:var(--ink)}
.toolbar-plain .select-field{border-left:0;padding-left:0}

/* Category pills row (shop hero) --------------------------------------------*/
.category-pills{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:32px;text-align:center}
.category-pill .ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px}
.category-pill .ico svg{width:26px;height:26px}
.category-pill span{font-size:.86rem;font-weight:700;display:block}
.category-pill:nth-child(6n+1) .ico{background:#ffe3e9;color:var(--pink)}
.category-pill:nth-child(6n+2) .ico{background:#fff0de;color:var(--orange)}
.category-pill:nth-child(6n+3) .ico{background:#e6f4e0;color:var(--green)}
.category-pill:nth-child(6n+4) .ico{background:#dcebfc;color:var(--blue)}
.category-pill:nth-child(6n+5) .ico{background:#ece3fb;color:#8a5cf6}
.category-pill:nth-child(6n+6) .ico{background:#ffe9d6;color:#ff7a3d}

/* Product grid / ecommerce card ---------------------------------------------*/
.section-toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;margin-bottom:22px}
.section-toolbar h2{font-size:1.5rem}
.link-arrow{color:var(--pink);font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.link-arrow svg{width:15px;height:15px;transition:transform .25s ease}
.link-arrow:hover svg{transform:translateX(4px)}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.product-media{display:block;position:relative;overflow:hidden;aspect-ratio:1.15/1;background:#f5f7fa}
.product-media img,.product-media .art{width:100%;height:100%;object-fit:cover;display:block}
.product-badge{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px;border-radius:20px;color:#fff}
.product-badge.new{background:var(--pink)}
.product-badge.best{background:var(--gold)}
.product-badge.diy{background:var(--green)}
.product-badge.sale{background:var(--blue)}
.product-discount{position:absolute;top:12px;right:12px;background:var(--pink-dark);color:#fff;font-size:.72rem;font-weight:800;padding:5px 9px;border-radius:20px}
.product-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-body h3{font-size:1rem;margin-bottom:0}
.product-meta{font-size:.8rem;color:var(--muted)}
.product-price{font-size:1.15rem;font-weight:800;color:var(--pink)}
.product-price .was{font-size:.85rem;font-weight:650;color:var(--muted);text-decoration:line-through;margin-left:6px}
.product-rating{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--muted);font-weight:650}
.product-rating .stars{color:var(--gold);display:inline-flex;gap:1px}
.product-rating .stars svg{width:13px;height:13px}
.btn-cart{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;font-weight:750;font-size:.88rem;border:0;border-radius:11px;padding:11px;cursor:pointer;transition:background .25s ease}
.btn-cart svg{width:16px;height:16px}
.btn-cart:hover{background:var(--navy-2)}
.btn-cart.outline{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-cart.outline:hover{background:#f5f7fa}

/* Trust strip (plain, no card wrapper) --------------------------------------*/
.trust-strip{background:#f5f7fa;border-radius:var(--radius-lg);padding:36px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;margin-top:56px}
.trust-strip .ico{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:inline-grid;place-items:center;margin-bottom:12px}
.trust-strip .ico svg{width:22px;height:22px}
.trust-strip .item:nth-child(1) .ico{color:var(--pink)}
.trust-strip .item:nth-child(2) .ico{color:var(--green)}
.trust-strip .item:nth-child(3) .ico{color:var(--blue)}
.trust-strip .item:nth-child(4) .ico{color:var(--orange)}
.trust-strip h3{font-size:.95rem;margin-bottom:4px}
.trust-strip p{font-size:.82rem;margin:0}

/* Newsletter bar -------------------------------------------------------------*/
.newsletter{background:linear-gradient(120deg,var(--cream),var(--cream-2));border:1px solid #f6ead5;border-radius:var(--radius-lg);padding:30px 40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:56px}
.newsletter .ico{width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;flex:none;color:var(--pink)}
.newsletter .ico svg{width:24px;height:24px}
.newsletter .copy-block{flex:1;min-width:220px}
.newsletter h3{font-size:1.1rem;margin-bottom:2px}
.newsletter p{font-size:.86rem;margin:0}
.newsletter-form{display:flex;gap:10px;flex:none}
.newsletter-form input{border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-family:inherit;font-size:.9rem;min-width:240px}
.newsletter-form input:focus{outline:none;border-color:var(--pink)}
.newsletter-form button{border:0;background:var(--navy);color:#fff;font-weight:750;border-radius:12px;padding:12px 22px;cursor:pointer;font-size:.9rem}
.newsletter-form button:hover{background:var(--navy-2)}

/* Category page: sidebar filters --------------------------------------------*/
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;margin-top:32px}
.filters{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;position:sticky;top:100px}
.filters h4{font-size:.98rem;margin-bottom:14px}
.filter-list{display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.filter-list a{display:flex;justify-content:space-between;font-size:.9rem;font-weight:650;color:var(--ink);padding:8px 10px;border-radius:8px}
.filter-list a span{color:var(--muted);font-weight:600}
.filter-list a:hover,.filter-list a.active{background:#fff0de;color:var(--pink)}

/* Sidebar Categories filter: parent rows with a +/- toggle, children
   collapsed underneath by default (archive-product.php's taxonomy branch) */
.category-tree-item{display:flex;flex-direction:column}
.category-tree-row{display:flex;align-items:center;gap:2px}
.category-tree-row a{flex:1;min-width:0}
.category-tree-toggle{display:grid;place-items:center;width:28px;height:28px;flex:none;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer}
.category-tree-toggle:hover{background:#fff0de;color:var(--pink)}
.category-tree-toggle svg{width:13px;height:13px}
.category-tree-toggle .i-minus{display:none}
.category-tree-item.open>.category-tree-row .category-tree-toggle .i-plus{display:none}
.category-tree-item.open>.category-tree-row .category-tree-toggle .i-minus{display:block}
.category-tree-children{display:flex;flex-direction:column;gap:2px;padding-left:14px}

.filter-check{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.88rem;padding:6px 0;cursor:pointer}
.filter-check input{accent-color:var(--pink)}
.filter-check span.count{color:var(--muted);font-size:.82rem}
.filter-block{margin-bottom:24px}
.filter-block:last-of-type{margin-bottom:0}
.price-range{margin-top:10px}
.price-range input[type=range]{width:100%;accent-color:var(--pink)}
.price-range .labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}

/* WooCommerce's real price-range widget (WC_Widget_Price_Filter, rendered
   via the_widget() in archive-product.php's sidebar) uses its own
   .price_slider/jQuery-UI markup -- unrelated to .price-range above, which
   was written for the static shop-category.html mockup's plain <input
   type=range> and never applied to the real widget. WooCommerce's own CSS
   (which styles .ui-slider/.ui-slider-handle) is dequeued per
   docs/ARCHITECTURE.md, so without this the slider track/handles rendered
   with no size or colour at all -- invisible, not just unstyled. */
.price_slider{margin:4px 2px 24px}
.price_slider_wrapper .ui-widget-content{background:var(--line);border:0;border-radius:1em}
.ui-slider{position:relative}
.ui-slider-horizontal{height:6px}
.ui-slider .ui-slider-range{position:absolute;top:0;height:100%;background:var(--pink);border-radius:1em}
/* Only left/top (jQuery UI's own drag-positioning properties) are ever
   touched by JS -- transitioning box-shadow/transform instead of those
   keeps the hover/focus feedback below from adding any lag to the actual
   drag, while still making the handle feel more deliberately interactive
   than a flat circle with no response to touch at all. */
.ui-slider .ui-slider-handle{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;margin-left:-9px;background:var(--pink-dark);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(13,42,78,.25);cursor:ew-resize;outline:none;transition:box-shadow .15s ease,transform .15s ease}
.ui-slider .ui-slider-handle:hover{transform:scale(1.15)}
.ui-slider .ui-slider-handle.ui-state-active{transform:scale(1.15);box-shadow:0 2px 10px rgba(13,42,78,.4)}
.ui-slider .ui-slider-handle:focus-visible{box-shadow:0 0 0 3px rgba(255,60,90,.35)}
/* Stacked, not the space-between row this used to be -- .filters is a
   260px sidebar column (.shop-layout), and "Filter" + "Price: X — Y" never
   comfortably fit side by side at that width without wrapping mid-word.
   .price_label is reordered ahead of the button (source order in
   WooCommerce's own template is button-then-label) since showing the
   current value before the action that applies it reads better. */
.price_slider_amount{display:flex;flex-direction:column;gap:10px}
.price_slider_amount .price_label{order:-1}
.price_slider_amount .button{min-height:auto;padding:11px 18px;font-size:.85rem;width:100%}
.price_label{font-size:.85rem;color:var(--muted);font-weight:650}
.price_label .from,.price_label .to{color:var(--ink);font-weight:800}
.btn-clear{width:100%;text-align:center;border:1px solid var(--line);border-radius:11px;padding:11px;font-weight:700;font-size:.88rem;color:var(--navy);background:#fff;cursor:pointer;margin-top:20px}
.btn-clear:hover{background:#f5f7fa}

/* All Categories hub (page-categories.php only) --------------------------------*/
.category-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-sm);margin-top:32px}
.category-toolbar .count{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;font-size:.88rem;flex:none}
.category-toolbar .search-field{border-left:1px solid var(--line);padding-left:16px;max-width:280px}

.category-jump{display:flex;gap:10px;overflow-x:auto;margin-top:20px;padding-bottom:6px}
.category-jump a{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.84rem;font-weight:700;color:var(--ink);white-space:nowrap;transition:border-color .2s ease,color .2s ease}
.category-jump a svg{width:15px;height:15px}
.category-jump a:hover{border-color:var(--pink);color:var(--pink)}

.category-hub{display:flex;flex-direction:column;gap:18px}
.category-hub-empty{text-align:center;padding:60px 20px}

.category-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm);scroll-margin-top:110px}
.category-group-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.category-group-head .art{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none}
.category-group-head .art svg{width:28px;height:28px}
.category-group-head .copy{flex:1;min-width:200px}
.category-group-head h2{font-size:1.2rem;margin-bottom:4px}
.category-group-head h2 a{color:inherit}
.category-group-head h2 a:hover{color:var(--pink)}
.category-group-head p{font-size:.88rem;margin:0}
.category-group:nth-child(6n+1) .art{background:#ffe3e9;color:var(--pink)}
.category-group:nth-child(6n+2) .art{background:#fff0de;color:var(--orange)}
.category-group:nth-child(6n+3) .art{background:#e6f4e0;color:var(--green)}
.category-group:nth-child(6n+4) .art{background:#dcebfc;color:var(--blue)}
.category-group:nth-child(6n+5) .art{background:#ece3fb;color:#8a5cf6}
.category-group:nth-child(6n+6) .art{background:#ffe9d6;color:#ff7a3d}

.category-subs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sub-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:#f5f7fa;font-size:.83rem;font-weight:650;color:var(--ink);transition:background .2s ease,color .2s ease}
.sub-chip svg{width:16px;height:16px;flex:none}
.sub-chip:hover{background:var(--pink);color:#fff}

/* Flat card grid -- Parent/Selected Category Display modes (page-categories.php) */
.category-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.category-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.category-card .art{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.category-card .art svg{width:30px;height:30px}
.category-card h3{font-size:1.05rem;margin-bottom:6px}
.category-card h3 a{color:inherit}
.category-card h3 a:hover{color:var(--pink)}
.category-card p{font-size:.9rem;margin-bottom:14px}
.category-cardgrid .category-hub-empty{grid-column:1/-1}
.category-card:nth-child(6n+1) .art{background:#ffe3e9;color:var(--pink)}
.category-card:nth-child(6n+2) .art{background:#fff0de;color:var(--orange)}
.category-card:nth-child(6n+3) .art{background:#e6f4e0;color:var(--green)}
.category-card:nth-child(6n+4) .art{background:#dcebfc;color:var(--blue)}
.category-card:nth-child(6n+5) .art{background:#ece3fb;color:#8a5cf6}
.category-card:nth-child(6n+6) .art{background:#ffe9d6;color:#ff7a3d}

.all-products-banner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:linear-gradient(120deg,var(--cream),var(--cream-2));border:1px solid #f6ead5;border-radius:var(--radius-lg);padding:28px 32px;margin-top:22px}
.all-products-banner .art{width:64px;height:64px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;flex:none;color:var(--pink)}
.all-products-banner .art svg{width:28px;height:28px}
.all-products-banner .copy{flex:1;min-width:220px}
.all-products-banner h2{font-size:1.15rem;margin-bottom:4px}
.all-products-banner p{font-size:.88rem;margin:0}

@media (max-width:640px){
	.category-toolbar .search-field{border-left:0;padding-left:0;max-width:none;width:100%}
	.category-group-head .link-arrow{width:100%}
}

/* Product detail page ---------------------------------------------------------*/
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:8px}
.gallery-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#f5f7fa;aspect-ratio:1/1;box-shadow:var(--shadow-sm)}
.gallery-main img,.gallery-main .art{width:100%;height:100%;object-fit:cover}
/* Hover-to-zoom (WordPress-port addition -- the .gallery-zoom icon was
   purely decorative in the static design, aria-hidden and with no click/
   hover behaviour in main.js; see woocommerce/content-single-product.php
   for the mousemove-driven JS this pairs with, kept out of main.js since
   that file is deliberately byte-identical to the static original). */
.gallery-main.has-zoom{cursor:zoom-in}
.gallery-main.has-zoom img{transition:transform .2s ease}
.gallery-main.has-zoom img.is-zoomed{transform:scale(2)}
@media (prefers-reduced-motion:reduce){.gallery-main.has-zoom img{transition:none}}
.gallery-zoom{position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--navy)}
.gallery-zoom svg{width:16px;height:16px}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.gallery-thumbs button{border:2px solid var(--line);border-radius:14px;overflow:hidden;padding:0;background:#f5f7fa;aspect-ratio:1/1;cursor:pointer;display:grid;place-items:center}
.gallery-thumbs button.active{border-color:var(--pink)}
.gallery-thumbs img,.gallery-thumbs .art{width:100%;height:100%;object-fit:cover}
.product-info .eyebrow{margin-bottom:8px}
.product-info h1{font-size:2rem;margin-bottom:4px}
.product-subtitle{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.rating-row{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted);margin-bottom:16px}
.rating-row .stars{color:var(--gold);display:inline-flex;gap:1px}
.rating-row .stars svg{width:15px;height:15px}
.rating-row a{color:var(--pink);font-weight:650}
.price-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.price-row .price{font-size:2rem;font-weight:850;color:var(--pink)}
.in-stock{display:flex;align-items:center;gap:6px;color:var(--green);font-weight:700;font-size:.9rem;margin-bottom:18px}
.in-stock svg{width:16px;height:16px}
.feature-list{display:flex;flex-direction:column;gap:10px;margin:18px 0 24px}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;list-style:none}
.feature-list svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
.qty-row{display:flex;align-items:center;gap:18px;margin-bottom:22px}
/* display:inline-flex, not flex -- as a flex ITEM (product page's .qty-row,
   the variation buy box) it already sizes to content regardless, but on the
   cart page it's the lone child of a <td>, a block context, where a
   display:flex block box defaults to filling the column's full width,
   leaving the border wrapped around a lot of empty space next to the
   actual -/qty/+ controls. inline-flex is shrink-to-fit everywhere. */
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty-stepper button{border:0;background:#f5f7fa;width:40px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.qty-stepper button:hover{background:#e9edf3}
.qty-stepper svg{width:15px;height:15px}
.qty-stepper input{width:44px;text-align:center;border:0;font-family:inherit;font-weight:700;font-size:.95rem}
.qty-stepper input:focus{outline:none}
.action-row{display:flex;gap:14px;flex-wrap:wrap}
.action-row .button{flex:1;min-width:160px}
.icon-link-row{display:flex;gap:20px;margin-top:16px;font-size:.86rem;font-weight:650;color:var(--muted)}
.icon-link-row a:hover{color:var(--pink)}
.icon-link-row .js-wishlist-toggle.is-active{color:var(--pink)}
.icon-link-row .js-wishlist-toggle.is-active svg{fill:currentColor}
.icon-link-row .js-wishlist-toggle.is-loading{opacity:.5;pointer-events:none}

/* Share popup (WordPress-port addition, no static-site equivalent -- the
   "Share" link on product.html was always decorative, href="#" with no
   backend). wp_get_shortlink() provides the real short URL (WordPress
   core's own ?p={id} shortlink API, not a fabricated third-party
   shortener); this only styles the popup that displays and copies it. */
.share-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.share-modal[hidden]{display:none}
.share-modal-backdrop{position:absolute;inset:0;background:rgba(13,35,61,.55)}
.share-modal-panel{position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px;width:min(420px,100%)}
.share-modal-panel h3{margin:0 0 18px;font-size:1.1rem;padding-right:32px}
.share-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:0;background:#f5f7fa;display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.share-modal-close svg{width:14px;height:14px}
.share-modal-close:hover{background:#e9edf3}
.share-modal-row{display:flex;gap:10px}
.share-modal-input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:.88rem;color:var(--ink);background:#fbfcfd}
.share-modal-input:focus{outline:none;border-color:var(--pink)}
.share-modal-copy{white-space:nowrap;min-height:auto;padding:12px 20px}
.share-modal-feedback{margin:10px 0 0;font-size:.85rem;color:var(--green);font-weight:650;min-height:1.2em}
body.share-modal-open{overflow:hidden}

/* Variable products (WordPress-port addition, no static-site equivalent --
   product.html only ever modeled a simple product). WooCommerce's own
   add-to-cart-variation.js drives all of this; only the markup/classes
   below are new. */
.variations{margin-bottom:18px}
.variation-row{margin-bottom:14px}
.variation-row label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.variation-row select{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 40px 13px 16px;font-family:inherit;font-size:.92rem;color:var(--ink);background:#fbfcfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647186' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;background-size:14px;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:border-color .2s ease}
.variation-row select:focus{outline:none;border-color:var(--pink);background:#fff}
.reset_variations{display:inline-block;margin-top:4px;font-size:.82rem;font-weight:700;color:var(--pink)}
.woocommerce-variation-description,.woocommerce-variation-price,.woocommerce-variation-availability{margin-bottom:14px}
.woocommerce-variation-description p{margin:0}
.woocommerce-variation-price .price{font-size:1.4rem;font-weight:800;color:var(--ink)}
.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .qty-row,
.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .action-row{opacity:.5;pointer-events:none}

/* Tabs + spec table -------------------------------------------------------------*/
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin:64px 0 30px}
.tab{font-weight:750;font-size:.95rem;color:var(--muted);padding-bottom:14px;position:relative;background:none;border:0;font-family:inherit;cursor:pointer}
.tab.active{color:var(--navy)}
.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink)}
.tab-panels{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.tab-panel ul{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tab-panel ul li{font-size:.92rem;padding-left:16px;position:relative}
.tab-panel ul li:before{content:"•";position:absolute;left:0;color:var(--pink)}
.spec-table{background:#f5f7fa;border-radius:16px;padding:22px 26px}
.spec-table .row{display:flex;justify-content:space-between;padding:9px 0;font-size:.9rem;border-bottom:1px solid var(--line)}
.spec-table .row:last-child{border-bottom:0}
.spec-table .row span:first-child{color:var(--muted)}
.spec-table .row span:last-child{font-weight:650;text-align:right}

/* Product reviews (WordPress-port addition, no static-site equivalent --
   product.html only ever showed a fixed review count, never a write/read
   review UI). Reuses the .stars/i-star-fill pattern from the product card
   and the .spec-table row-divider convention above. */
.review-list{list-style:none;margin:24px 0 40px;padding:0}
/* Override .tab-panel ul li's pink bullet/left-padding (meant for the
   Additional Information tab's plain feature lists) -- higher specificity
   needed since that rule also matches these <li>s, both being inside a
   .tab-panel. */
.tab-panel .review-item{padding:20px 0;padding-left:0;border-bottom:1px solid var(--line)}
.tab-panel .review-item:before{content:none}
.review-item:last-child{border-bottom:0}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.review-head .stars{display:inline-flex;gap:2px}
.review-head .stars svg{width:14px;height:14px}
.review-form-wrapper{margin-top:8px}
.review-form-wrapper h3{margin-bottom:16px}

/* Clickable star-rating input (review form). Radios are marked up highest-
   value-first; row-reverse restores the visual 1->5 reading order while
   letting the ~ (general sibling) selector -- which only ever matches
   siblings AFTER an element in the DOM -- light up every lower star too. */
.star-rating-input{position:relative;display:flex;flex-direction:row-reverse;gap:4px;margin-bottom:18px;width:max-content}
.star-rating-input input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.star-rating-input label{cursor:pointer;font-size:1.6rem;line-height:1;color:var(--line);transition:color .15s ease}
.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label,
.star-rating-input input:checked ~ label ~ label{color:var(--gold)}
.star-rating-input input:focus-visible + label{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px}

/* Related products (simpler card) -----------------------------------------------*/
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.related-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;padding-bottom:16px;transition:transform .3s ease,box-shadow .3s ease}
.related-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.related-card .product-media{aspect-ratio:1.3/1}
.related-card .body{padding:14px 16px 0}
.related-card h4{font-size:.92rem;margin-bottom:2px}
.related-card .product-meta{margin-bottom:4px}
.related-card .price-rating{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px}
.related-card .price-rating .product-price{font-size:.98rem}
.related-card .btn-cart{margin:0 16px;width:calc(100% - 32px)}

/* Terms / typography content -----------------------------------------------*/
.terms-content{max-width:900px;margin-top:8px}
.terms-section{padding:22px 0;border-bottom:1px solid var(--line)}
.terms-section:last-of-type{border-bottom:0}
.terms-section h2{font-size:1.15rem;margin-bottom:10px}
.terms-section p{font-size:.94rem}
.terms-section ul{margin:10px 0 0;padding-left:20px}
.terms-section ul li{font-size:.94rem;margin-bottom:6px}
.terms-updated{color:var(--muted);font-size:.86rem;margin-top:24px}

/* FAQ accordion --------------------------------------------------------------*/
.schema-faq{margin-top:8px}
.schema-faq-section{border-bottom:1px solid var(--line)}
.schema-faq-section:first-of-type{border-top:1px solid var(--line)}
.schema-faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 0;background:none;border:0;text-align:left;font-size:1rem;font-weight:750;color:var(--navy);cursor:pointer}
.schema-faq-question:hover{color:var(--navy-2)}
.schema-faq-question svg{flex:none;width:14px;height:14px;transition:transform .25s ease}
.schema-faq-section.open .schema-faq-question svg{transform:rotate(180deg)}
.schema-faq-answer{font-size:.94rem;color:var(--ink);margin:0 0 20px}

/* Responsive: shared inner-page components ---------------------------------*/
@media (max-width:1100px){
	.product-grid{grid-template-columns:repeat(2,1fr)}
	.related-grid{grid-template-columns:repeat(2,1fr)}
	.category-pills{grid-template-columns:repeat(3,1fr);row-gap:24px}
}
@media (max-width:900px){
	.contact-grid{grid-template-columns:1fr;margin-top:60px}
	.product-detail{grid-template-columns:1fr;gap:36px}
	.tab-panels{grid-template-columns:1fr;gap:28px}
	.shop-layout{grid-template-columns:1fr}
	.filters{position:static}
}
@media (max-width:820px){
	.page-hero{padding:32px 0 56px}
	.mv-panel{grid-template-columns:1fr;gap:28px;padding:32px}
	.mv-panel:before{display:none}
	.values-grid{grid-template-columns:1fr 1fr;row-gap:28px}
	.value-item:nth-child(3):before{display:none}
	.timeline{grid-template-columns:1fr 1fr;row-gap:36px}
	.timeline:before{display:none}
	.cta-split{grid-template-columns:1fr;gap:20px;padding:32px}
	.cta-split:before{display:none}
	.cta-split .right{justify-content:flex-start}
	.info-cards{margin-top:-50px}
	.category-group{padding:22px 20px}
	.category-cardgrid{grid-template-columns:1fr 1fr}
	.trust-strip{grid-template-columns:1fr 1fr;padding:28px}
	.newsletter{padding:26px}
	.newsletter-form{width:100%}
	.newsletter-form input{min-width:0;flex:1}
}
@media (max-width:560px){
	.values-grid{grid-template-columns:1fr;row-gap:26px}
	.value-item:before{display:none}
	.timeline{grid-template-columns:1fr 1fr;row-gap:32px}
	.product-grid{grid-template-columns:1fr}
	.related-grid{grid-template-columns:1fr}
	.category-pills{grid-template-columns:repeat(2,1fr)}
	.info-cards{grid-template-columns:1fr;margin-top:-30px}
	.category-cardgrid{grid-template-columns:1fr}
	.category-group-head{flex-direction:column;align-items:flex-start}
	.category-group-head .link-arrow{margin-left:84px}
	.all-products-banner{flex-direction:column;align-items:flex-start;text-align:left}
	.trust-strip{grid-template-columns:1fr}
	.newsletter{flex-direction:column;align-items:flex-start}
	.newsletter-form{flex-direction:column;width:100%}
	.newsletter-form input{width:100%}
	.newsletter-form button{width:100%}
	.form-row{grid-template-columns:1fr}
	.action-row .button{min-width:0}
	.shop-toolbar{flex-direction:column;align-items:stretch}
	.select-field{border-left:0;padding-left:0}
	.gallery-thumbs{grid-template-columns:repeat(4,1fr)}
	.tabs{gap:20px;overflow-x:auto}
}

/* ==========================================================================
   Blog listing + article page
   ========================================================================== */

/* Blog toolbar (search + filters) ------------------------------------------*/
.blog-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-sm);margin-top:36px}

/* Blog card grid -------------------------------------------------------------*/
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.blog-media{position:relative;aspect-ratio:1.5/1;display:grid;place-items:center;overflow:hidden}
/* Real featured-image thumbnails (WordPress-port addition -- blog.html's
   static mockup never had real photos here, only the centered icon-
   fallback below, so no static rule ever sized one). Without this, an
   <img> dropped into place-items:center renders at its own intrinsic
   size instead of filling the card. */
.blog-media img{display:block;width:100%;height:100%;object-fit:cover}
.blog-media svg{width:60px;height:60px}
.blog-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blog-tag{display:inline-block;font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:20px}
.blog-date{font-size:.8rem;color:var(--muted);font-weight:650}
.blog-card h3{font-size:1.08rem;margin-bottom:0}
.blog-card h3 a:hover{color:var(--pink)}
.blog-card>.blog-body>p{font-size:.9rem;margin:0;flex:1}

.blog-tag.c-early{background:#ece3fb;color:#8a5cf6}
.blog-tag.c-toys{background:#e6f4e0;color:var(--green)}
.blog-tag.c-parenting{background:#ffe3e9;color:var(--pink)}
.blog-tag.c-creativity{background:#fff0de;color:var(--orange)}
.blog-tag.c-baby{background:#dcebfc;color:var(--blue)}
.blog-tag.c-activities{background:#ece3fb;color:#8a5cf6}

.blog-media.m-early,.tone-early{background:linear-gradient(135deg,#ece3fb,#f5effd);color:#8a5cf6}
.blog-media.m-toys,.tone-toys{background:linear-gradient(135deg,#e6f4e0,#f0faec);color:var(--green)}
.blog-media.m-parenting,.tone-parenting{background:linear-gradient(135deg,#ffe3e9,#fff4f6);color:var(--pink)}
.blog-media.m-creativity,.tone-creativity{background:linear-gradient(135deg,#fff0de,#fff8ee);color:var(--orange)}
.blog-media.m-baby,.tone-baby{background:linear-gradient(135deg,#dcebfc,#ebf4fe);color:var(--blue)}
.blog-media.m-activities,.tone-activities{background:linear-gradient(135deg,#ece3fb,#f5effd);color:#8a5cf6}

/* Pagination -----------------------------------------------------------------*/
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px}
.pagination a,.pagination span.ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:11px;font-weight:700;font-size:.9rem;color:var(--ink);border:1px solid var(--line)}
.pagination a:hover{background:#f5f7fa}
.pagination a.active{background:var(--pink);border-color:var(--pink);color:#fff}
.pagination a.nav-btn{color:var(--muted)}
.pagination a.nav-btn svg{width:14px;height:14px}
.pagination span.ellipsis{border:0;color:var(--muted)}

/* Blog infinite scroll (assets/js/blog-infinite-scroll.js) ---------------*/
.blog-load-more{display:flex;justify-content:center;margin-top:48px}
.load-more-btn{min-width:220px}
.load-more-btn:disabled{opacity:.7;cursor:default}
.load-more-btn.is-loading{position:relative;color:transparent}
.load-more-btn.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(13,43,78,.25);border-top-color:var(--navy);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Article page: header + share ------------------------------------------------*/
.article-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;margin-top:8px}
.article-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.article-head h1{font-size:clamp(1.7rem,3.2vw,2.3rem);max-width:640px}
.article-share{display:flex;align-items:center;gap:10px;flex:none}
.article-share span{font-size:.85rem;font-weight:650;color:var(--muted);margin-right:2px}
.article-share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);transition:background .25s ease,color .25s ease,border-color .25s ease}
.article-share a:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.article-share svg{width:15px;height:15px}
.article-byline{display:flex;align-items:center;gap:14px;font-size:.86rem;color:var(--muted);font-weight:650;flex-wrap:wrap;margin:16px 0 24px}
.article-byline .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}
.article-byline strong{color:var(--ink)}
.article-byline .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);flex:none}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1.9/1;margin-bottom:28px}
.article-cover img,.article-cover .art{width:100%;height:100%;object-fit:cover}
.article-cover .art{display:grid;place-items:center}
.article-cover .art svg{width:88px;height:88px}

.avatar-text{display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;font-weight:800;border-radius:50%;flex:none;letter-spacing:.02em}
.article-byline .avatar-text{width:34px;height:34px;font-size:.72rem}
.author-card .avatar-text{width:52px;height:52px;font-size:.9rem}
.article-body>p{font-size:.98rem}
.article-body>p.lead-in{font-size:1.05rem;color:var(--ink)}

/* Numbered activity steps + tip callouts ---------------------------------------*/
.step-item{display:flex;gap:20px;margin-bottom:26px}
.step-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-weight:800;font-size:1rem}
.step-item:nth-child(6n+1) .step-num{background:#8a5cf6}
.step-item:nth-child(6n+2) .step-num{background:var(--orange)}
.step-item:nth-child(6n+3) .step-num{background:var(--green)}
.step-item:nth-child(6n+4) .step-num{background:var(--pink)}
.step-item:nth-child(6n+5) .step-num{background:var(--blue)}
.step-item:nth-child(6n+0) .step-num{background:var(--gold)}
.step-item h3{font-size:1.02rem;margin-bottom:6px}
.step-item p{font-size:.9rem;margin-bottom:10px}
.step-tip{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;border-radius:12px;padding:10px 14px;font-weight:600}
.step-tip svg{width:15px;height:15px;flex:none;margin-top:1px}
.step-item:nth-child(6n+1) .step-tip{background:#ece3fb;color:#6d3ed6}
.step-item:nth-child(6n+2) .step-tip{background:#fff0de;color:#c76a00}
.step-item:nth-child(6n+3) .step-tip{background:#e6f4e0;color:#1f8a4e}
.step-item:nth-child(6n+4) .step-tip{background:#ffe3e9;color:var(--pink-dark)}
.step-item:nth-child(6n+5) .step-tip{background:#dcebfc;color:#2a63c2}
.step-item:nth-child(6n+0) .step-tip{background:#fff3df;color:#a5760a}

.steps-more{display:none}
.steps-more.open{display:block}
.btn-continue{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;font-weight:750;font-size:.92rem;color:var(--navy);cursor:pointer;margin-top:6px}
.btn-continue:hover{background:#f5f7fa}
.btn-continue svg{width:14px;height:14px;transition:transform .25s ease}
.btn-continue.open svg{transform:rotate(180deg)}

/* Sidebar widgets --------------------------------------------------------------*/
.widget{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.widget h4{font-size:1rem;margin-bottom:16px}
.author-card{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.author-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.author-card strong{display:block;font-size:.95rem}
.author-card span{font-size:.8rem;color:var(--muted)}
.widget .muted{font-size:.86rem}

.cat-list{display:flex;flex-direction:column;gap:2px}
.cat-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.9rem;font-weight:650;color:var(--ink);padding:9px 10px;border-radius:9px}
.cat-list a .label{display:flex;align-items:center;gap:9px}
.cat-list a .label svg{width:15px;height:15px;flex:none;color:var(--muted)}
.cat-list a .count{color:var(--muted);font-weight:600;font-size:.82rem}
.cat-list a:hover,.cat-list a.active{background:#ece3fb;color:#6d3ed6}
.cat-list a.active .label svg{color:#8a5cf6}

.popular-post{display:flex;gap:12px;margin-bottom:14px}
.popular-post:last-child{margin-bottom:0}
.popular-post .thumb{width:64px;height:64px;border-radius:14px;flex:none;display:grid;place-items:center;overflow:hidden}
.popular-post .thumb img{width:100%;height:100%;object-fit:cover}
.popular-post .thumb svg{width:24px;height:24px}
.popular-post h5{font-size:.88rem;margin:0 0 4px;line-height:1.3;font-weight:750}
.popular-post h5 a:hover{color:var(--pink)}
.popular-post .date{font-size:.78rem;color:var(--muted)}

/* Responsive: Blog -------------------------------------------------------------*/
@media (max-width:1100px){
	.blog-grid{grid-template-columns:repeat(2,1fr)}
	.article-layout{grid-template-columns:1fr}
}
@media (max-width:820px){
	.blog-toolbar{flex-direction:column;align-items:stretch}
	.blog-toolbar .select-field{border-left:0;padding-left:0}
	.article-cover{aspect-ratio:1.5/1}
	.article-head{flex-direction:column}
}
@media (max-width:560px){
	.blog-grid{grid-template-columns:1fr}
	.step-item{gap:14px}
	.pagination{gap:6px}
	.pagination a,.pagination span.ellipsis{min-width:34px;height:34px;font-size:.85rem}
}

/* Cart toast (assets/js/cart-toast.js) -----------------------------------*/
/* WooCommerce's own default "View cart" link, appended after the clicked
   button by add-to-cart.js -- replaced by the toast below instead. */
.added_to_cart{display:none}
.cart-toast-region{position:fixed;top:100px;right:20px;z-index:600;display:flex;flex-direction:column;gap:12px;width:min(360px,calc(100vw - 32px))}
.cart-toast{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 40px 14px 14px;position:relative;opacity:0;transform:translateX(24px);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.cart-toast.is-visible{opacity:1;transform:translateX(0)}
.cart-toast.is-leaving{opacity:0;transform:translateX(24px)}
.cart-toast-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:#f5f7fa}
.cart-toast-icon{width:48px;height:48px;border-radius:50%;background:rgba(83,182,55,.12);color:var(--green);display:grid;place-items:center;flex:none}
.cart-toast-icon svg{width:20px;height:20px}
.cart-toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-toast-title{font-size:.85rem;font-weight:800;color:var(--ink)}
.cart-toast-name{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-toast-viewcart{margin-top:4px;font-size:.82rem;font-weight:700;color:var(--pink-dark);text-decoration:underline}
.cart-toast-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:50%;background:#f5f7fa;color:var(--muted);font-size:1rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.cart-toast-close:hover{background:#e9edf3;color:var(--ink)}
@media (max-width:480px){
	.cart-toast-region{top:auto;bottom:16px;right:16px;left:16px;width:auto}
}

/* Reduced motion --------------------------------------------------------*/
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.hero h1,.hero .bar,.hero .lead,.hero .cta-row,.hero-photo,.trust-panel{animation:none!important}
	.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}
	.card,.button,.card-arrow{transition:none!important}
	.hero-slide,.hero-slide .hero-copy>*,.hero-photo .frame img{transition:none!important;transform:none!important}
	.cart-toast{transition:none!important;transform:none!important}
}