/* ============================================================================
   CIRCLE STOREFRONT UI  ·  IIM JAMMU × CIRCLE
   Collegiate storefront in the clean, product-forward style of a modern
   university shop: white pages, one strong crimson accent, a bold geometric
   sans, square product cards, an announcement bar and a category-led home.
   Scoped to body.csui-active. Never changes WooCommerce behaviour.
   Mobile-first: base rules are the phone; larger screens enhance.
   ============================================================================ */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
	--csui-white:   #ffffff;   /* page */
	--csui-off:     #f6f5f3;   /* light section wash */
	--csui-paper:   #ffffff;   /* cards */

	/* One consistent maroon accent (Harvard-shop style), on white + black */
	--csui-primary:   #9b1c2e;   /* maroon = the accent, used everywhere */
	--csui-primary-d: #7e1626;   /* pressed */
	--csui-primary-soft: rgba(155, 28, 46, .07);
	--csui-red:       #9b1c2e;   /* sale / limited = same maroon for consistency */
	--csui-red-d:     #7e1626;
	--csui-sky:       #6b7280;   /* neutral grey for the "coming soon" badge */
	--csui-sky-soft:  rgba(107, 114, 128, .12);

	--csui-ink:     #1a1a1a;   /* headings / near-black */
	--csui-ink-2:   #3f3f3f;   /* body */
	--csui-muted:   #767676;
	--csui-line:    #e6e4e0;
	--csui-line-2:  #d3d0cb;

	--csui-shell:   min(1280px, calc(100vw - 40px));
	--csui-r:       4px;
	--csui-r-lg:    8px;
	--csui-pill:    999px;

	--csui-shadow:    0 12px 34px rgba(20, 20, 20, .10);
	--csui-shadow-hi: 0 22px 56px rgba(20, 20, 20, .16);

	--csui-display: "CSUI Display", "Jost", "Futura", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
	--csui-sans:    "CSUI Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--csui-hero: clamp(38px, 10vw, 84px);
	--csui-h1:   clamp(30px, 7vw, 56px);
	--csui-h2:   clamp(24px, 5vw, 38px);
	--csui-h3:   clamp(17px, 4vw, 21px);

	--csui-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------
   2. GLOBAL RESET (scoped) + horizontal-scroll fix
   ------------------------------------------------------------------ */
html:has(body.csui-active) { overflow-x: hidden; scroll-behavior: smooth; background: var(--csui-white); }
body.csui-active {
	overflow-x: hidden; max-width: 100vw; margin: 0;
	background: var(--csui-white); color: var(--csui-ink-2);
	font-family: var(--csui-sans); font-size: 16px; line-height: 1.6;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.csui-active *, body.csui-active *::before, body.csui-active *::after { box-sizing: border-box; }
body.csui-active img, body.csui-active video, body.csui-active svg, body.csui-active table { max-width: 100%; }
body.csui-active .csui-shell { width: var(--csui-shell); max-width: 100%; margin-inline: auto; }
body.csui-active.csui-lock { overflow: hidden; }
body.csui-active :focus-visible { outline: 2px solid var(--csui-primary); outline-offset: 2px; border-radius: 3px; }
body.csui-active .csui-skip { position: fixed; top: -60px; left: 12px; z-index: 2147483600; background: var(--csui-primary); color: #fff; padding: 10px 16px; border-radius: var(--csui-r); font-family: var(--csui-display); font-size: 13px; font-weight: 600; text-decoration: none; transition: top .18s var(--csui-ease); }
body.csui-active .csui-skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { body.csui-active * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* headline defaults: bold geometric sans */
body.csui-active .csui-home h1, body.csui-active .csui-home h2, body.csui-active .csui-home h3,
body.csui-active .csui-help h1, body.csui-active .csui-help h2, body.csui-active .csui-hero h1,
body.csui-active .csui-shop-intro h1, body.csui-active .csui-page-heading h1, body.csui-active .csui-footer h2,
body.csui-active .csui-sec-title {
	font-family: var(--csui-display); font-weight: 700; letter-spacing: -.01em; line-height: 1.06; margin: 0; color: var(--csui-ink);
}

/* ------------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------------ */
body.csui-active .csui-eyebrow {
	display: block; font-family: var(--csui-sans); font-size: 11px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--csui-primary); margin: 0 0 12px;
}
body.csui-active .csui-eyebrow.center { text-align: center; }

/* section title: centered, uppercase, small crimson rule under it (collegiate) */
body.csui-active .csui-sec-head { text-align: center; margin-bottom: clamp(24px, 5vw, 42px); }
body.csui-active .csui-sec-title { font-size: var(--csui-h2); text-transform: none; }
body.csui-active .csui-sec-head::after { content: ""; display: block; width: 46px; height: 3px; background: var(--csui-primary); margin: 16px auto 0; }
body.csui-active .csui-sec-head p { margin: 14px auto 0; color: var(--csui-muted); max-width: 52ch; }

body.csui-active .csui-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 15px 34px; border: 2px solid var(--csui-primary); border-radius: var(--csui-r);
	background: var(--csui-primary); color: #fff; font-family: var(--csui-display);
	font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background .18s var(--csui-ease), color .18s var(--csui-ease), border-color .18s var(--csui-ease);
}
body.csui-active .csui-btn:hover { background: var(--csui-primary-d); border-color: var(--csui-primary-d); }
body.csui-active .csui-btn.ghost { background: transparent; color: var(--csui-primary); }
body.csui-active .csui-btn.ghost:hover { background: var(--csui-primary); color: #fff; }
body.csui-active .csui-btn.on-dark { background: #fff; color: var(--csui-ink); border-color: #fff; }
body.csui-active .csui-btn.on-dark:hover { background: transparent; color: #fff; border-color: #fff; }

body.csui-active .csui-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--csui-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--csui-primary); text-decoration: none; transition: gap .2s var(--csui-ease); }
body.csui-active .csui-link::after { content: "\2192"; }
body.csui-active .csui-link:hover { gap: 11px; }
body.csui-active .csui-link.on-dark { color: #fff; }

body.csui-active .csui-section { padding: clamp(48px, 10vw, 96px) 0; }

/* ------------------------------------------------------------------
   4. ANNOUNCEMENT BAR
   ------------------------------------------------------------------ */
body.csui-active .csui-announce {
	background: var(--csui-primary); color: #fff; overflow: hidden; position: relative;
}
body.csui-active .csui-announce-track { display: flex; width: max-content; animation: csui-ann 42s linear infinite; }
body.csui-active .csui-announce:hover .csui-announce-track { animation-play-state: paused; }
body.csui-active .csui-announce-set { display: flex; align-items: center; }
body.csui-active .csui-announce-item {
	display: inline-flex; align-items: center; white-space: nowrap; padding: 11px 0;
	font-family: var(--csui-display); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
body.csui-active .csui-announce-item::after { content: "\2726"; color: rgba(255,255,255,.45); margin: 0 30px; font-size: 9px; }
@keyframes csui-ann { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.csui-active .csui-announce-track { animation: none; justify-content: center; width: 100%; } body.csui-active .csui-announce-set:nth-child(2) { display: none; } }

/* ------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------ */
body.csui-active .ij-global-header, body.csui-active header.wp-block-template-part {
	position: sticky; top: 0; z-index: 2147482000; width: 100%; max-width: none; margin: 0;
	background: #fff; border-bottom: 1px solid var(--csui-line); transition: box-shadow .3s var(--csui-ease);
}
body.admin-bar.csui-active .ij-global-header, body.admin-bar.csui-active header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar.csui-active .ij-global-header, body.admin-bar.csui-active header.wp-block-template-part { top: 46px; } }
body.csui-active .ij-global-header.csui-scrolled, body.csui-active header.wp-block-template-part.csui-scrolled { box-shadow: 0 6px 22px rgba(20,20,20,.07); }

/* the original theme header group, hidden once JS builds the centered bar */
body.csui-active .ij-global-header .csui-orig-hidden { display: none !important; }

/* fallback flex layout used only if JS has not run yet */
body.csui-active .csui-header-grid, body.csui-active .ij-global-header .is-layout-flex, body.csui-active .ij-global-header .is-layout-grid {
	width: var(--csui-shell); max-width: 100%; margin-inline: auto; padding: 14px 0; display: flex; align-items: center; gap: 14px;
}

/* centered, two-row bar built by JS */
body.csui-active .csui-hbar {
	width: var(--csui-shell); max-width: 100%; margin-inline: auto; padding: 11px 0;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px;
}
body.csui-active .csui-hleft { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 2px; }
body.csui-active .csui-hcenter { grid-column: 2; grid-row: 1; justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; overflow: hidden; }
body.csui-active .csui-hcenter .csui-brandlink { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.csui-active .csui-hright { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 2px; }
body.csui-active .csui-navrow { grid-column: 1 / -1; grid-row: 2; display: none; justify-content: center; }

body.csui-active .csui-hcenter .wp-block-site-logo { margin: 0; }
body.csui-active .csui-hcenter .wp-block-site-logo img { display: block; width: auto; max-width: 190px; max-height: 48px; object-fit: contain; }
body.csui-active .csui-hcenter .wp-block-site-title { margin: 0; white-space: nowrap; }
body.csui-active .csui-hcenter .wp-block-site-title a { color: var(--csui-ink); text-decoration: none; font-family: var(--csui-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-align: center; }

/* nav (lives in the second row) */
body.csui-active .ij-global-header .wp-block-navigation { display: block; }
body.csui-active .ij-global-header .wp-block-navigation__container { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
body.csui-active .ij-global-header .wp-block-navigation__container > li { margin: 0; padding: 0; list-style: none; }
body.csui-active .ij-global-header .wp-block-navigation__container > li::marker { content: ""; }
body.csui-active .ij-global-header .wp-block-navigation-item__content {
	padding: 8px 18px; color: var(--csui-ink); text-decoration: none; font-family: var(--csui-display);
	font-size: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; transition: color .16s var(--csui-ease);
}
body.csui-active .ij-global-header .wp-block-navigation-item__content::after { display: none; }
body.csui-active .ij-global-header .wp-block-navigation-item__content:hover,
body.csui-active .ij-global-header .current-menu-item > .wp-block-navigation-item__content,
body.csui-active .ij-global-header .current_page_item > .wp-block-navigation-item__content { color: var(--csui-primary); }

body.csui-active .csui-header-button, body.csui-active .ij-global-header .wc-block-mini-cart, body.csui-active .ij-global-header .wc-block-customer-account {
	width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: transparent; color: var(--csui-ink); cursor: pointer; transition: background .16s var(--csui-ease), color .16s var(--csui-ease);
}
body.csui-active .csui-header-button:hover, body.csui-active .ij-global-header .wc-block-mini-cart:hover, body.csui-active .ij-global-header .wc-block-customer-account:hover { background: var(--csui-primary-soft); color: var(--csui-primary); }
body.csui-active .csui-header-button svg { width: 20px; height: 20px; }
body.csui-active .csui-menu-toggle { display: inline-flex; }
body.csui-active .csui-menu-lines, body.csui-active .csui-menu-lines::before, body.csui-active .csui-menu-lines::after { display: block; width: 19px; height: 1.8px; background: currentColor; border-radius: 2px; }
body.csui-active .csui-menu-lines { position: relative; }
body.csui-active .csui-menu-lines::before { content: ""; position: absolute; top: -6px; }
body.csui-active .csui-menu-lines::after { content: ""; position: absolute; top: 6px; }

/* self-contained header rendered by the plugin */
body.csui-active .csui-siteheader { position: sticky; top: 0; z-index: 2147482000; width: 100%; background: #fff; border-bottom: 1px solid var(--csui-line); transition: box-shadow .3s var(--csui-ease); }
body.admin-bar.csui-active .csui-siteheader { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar.csui-active .csui-siteheader { top: 46px; } }
body.csui-active .csui-siteheader.csui-scrolled { box-shadow: 0 6px 22px rgba(20,20,20,.07); }
body.csui-active .csui-hcenter .csui-brandlink { color: var(--csui-ink); text-decoration: none; font-family: var(--csui-display); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-align: center; }
body.csui-active .csui-hcenter .custom-logo-link { display: block; margin: 0; line-height: 0; }
body.csui-active .csui-hcenter .custom-logo-link img { display: block; width: auto; max-width: 200px; max-height: 48px; object-fit: contain; }
body.csui-active .csui-navlink { font-family: var(--csui-display); font-size: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--csui-ink); text-decoration: none; padding: 6px 18px; transition: color .16s var(--csui-ease); }
body.csui-active .csui-navlink:hover, body.csui-active .csui-navlink.is-active { color: var(--csui-primary); }
body.csui-active .csui-cart-link { position: relative; }
body.csui-active .csui-cart-count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--csui-primary); color: #fff; font-family: var(--csui-sans); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* ------------------------------------------------------------------
   6. SEARCH OVERLAY + MOBILE MENU
   ------------------------------------------------------------------ */
body.csui-active .csui-search-overlay { position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: flex-start; justify-content: center; padding: clamp(18px,10vh,130px) 18px 18px; background: rgba(20,20,20,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .25s var(--csui-ease), visibility .25s; }
body.csui-active .csui-search-overlay.open { opacity: 1; visibility: visible; }
body.csui-active .csui-search-box { width: min(640px,100%); background: #fff; border-radius: var(--csui-r-lg); padding: 22px; box-shadow: var(--csui-shadow-hi); transform: translateY(-10px); transition: transform .25s var(--csui-ease); }
body.csui-active .csui-search-overlay.open .csui-search-box { transform: none; }
body.csui-active .csui-search-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
body.csui-active .csui-search-top span { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--csui-muted); text-transform: uppercase; }
body.csui-active .csui-search-close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--csui-ink); cursor: pointer; }
body.csui-active .csui-search-form { display: flex; gap: 10px; }
body.csui-active .csui-search-form input[type="search"] { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 1px solid var(--csui-line-2); border-radius: var(--csui-r); font-size: 16px; color: var(--csui-ink); background: #fff; }
body.csui-active .csui-search-form input[type="search"]:focus { border-color: var(--csui-primary); outline: none; }
body.csui-active .csui-search-form button { height: 54px; padding: 0 26px; border: 0; border-radius: var(--csui-r); background: var(--csui-primary); color: #fff; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }

body.csui-active .csui-mobile-menu { position: fixed; inset: 0; z-index: 2147483200; background: rgba(20,20,20,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s var(--csui-ease), visibility .25s; }
body.csui-active .csui-mobile-menu.open { opacity: 1; visibility: visible; }
body.csui-active .csui-mobile-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(400px,88vw); background: #fff; padding: 24px 26px 34px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--csui-ease); }
body.csui-active .csui-mobile-menu.open .csui-mobile-panel { transform: none; }
body.csui-active .csui-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
body.csui-active .csui-mobile-brand { font-family: var(--csui-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--csui-primary); text-transform: uppercase; }
body.csui-active .csui-mobile-close { border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--csui-ink); cursor: pointer; }
body.csui-active .csui-mobile-nav { display: flex; flex-direction: column; }
body.csui-active .csui-mobile-nav a { font-family: var(--csui-display); font-size: 22px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--csui-ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--csui-line); }
body.csui-active .csui-mobile-nav a.active { color: var(--csui-primary); }
body.csui-active .csui-mobile-footer { margin-top: auto; font-size: 12px; color: var(--csui-muted); line-height: 1.7; }

/* ------------------------------------------------------------------
   7. PAGE HEADING
   ------------------------------------------------------------------ */
body.csui-active .csui-page-heading { width: var(--csui-shell); max-width: 100%; margin: clamp(26px,7vw,52px) auto clamp(18px,4vw,30px); text-align: center; }
body.csui-active .csui-page-heading span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--csui-primary); margin-bottom: 12px; }
body.csui-active .csui-page-heading h1 { font-size: var(--csui-h1); }

/* ------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------ */
body.csui-active .csui-hero {
	position: relative; isolation: isolate; min-height: clamp(420px, 74vw, 620px);
	display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden;
	background: linear-gradient(160deg, #2a0d12 0%, #6d1522 55%, #9b1c2e 100%);
}
body.csui-active .csui-hero img.csui-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
body.csui-active .csui-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,14,34,.35), rgba(8,14,34,.55)); }
body.csui-active .csui-hero-inner { width: var(--csui-shell); max-width: 100%; padding: clamp(40px,10vw,80px) 0; }
body.csui-active .csui-hero .csui-eyebrow { color: #fff; opacity: .85; }
body.csui-active .csui-hero h1 { color: #fff; font-size: var(--csui-hero); text-transform: uppercase; letter-spacing: 0; max-width: 16ch; margin-inline: auto; }
body.csui-active .csui-hero p { max-width: 50ch; margin: 18px auto 0; color: rgba(255,255,255,.9); font-size: clamp(15px,4vw,18px); }
body.csui-active .csui-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ------------------------------------------------------------------
   9. HOMEPAGE SECTIONS
   ------------------------------------------------------------------ */
body.csui-active .csui-home { background: #fff; }

/* shop by category grid */
body.csui-active .csui-cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
body.csui-active .csui-cat-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 260px; padding: 22px; text-align: center; border-radius: var(--csui-r-lg); overflow: hidden; text-decoration: none !important; isolation: isolate; background: var(--csui-off); }
body.csui-active .csui-promo, body.csui-active .csui-promo * { text-decoration: none !important; }
body.csui-active .csui-cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s var(--csui-ease); }
body.csui-active .csui-cat-tile:hover img { transform: scale(1.05); }
body.csui-active .csui-cat-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,14,34,.7), rgba(8,14,34,.05) 60%); }
body.csui-active .csui-cat-tile.no-img { background: linear-gradient(160deg, #6d1522, #9b1c2e); }
body.csui-active .csui-cat-tile.no-img::after { display: none; }
body.csui-active .csui-cat-tile h3 { font-family: var(--csui-display); color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 4px; }
body.csui-active .csui-cat-tile .csui-cat-go { display: inline-block; color: #fff; font-family: var(--csui-display); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--csui-primary); padding-bottom: 3px; }

/* editorial promo banner */
body.csui-active .csui-promo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--csui-r-lg); min-height: clamp(280px, 44vw, 420px); display: flex; align-items: center; padding: clamp(26px,6vw,64px); color: #fff; background: linear-gradient(150deg, #2a0d12, #6d1522 60%, #9b1c2e); }
body.csui-active .csui-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
body.csui-active .csui-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,34,.72), rgba(8,14,34,.15)); }
body.csui-active .csui-promo-copy { max-width: 460px; }
body.csui-active .csui-promo-copy h2 { color: #fff; font-family: var(--csui-display); font-weight: 700; font-size: var(--csui-h2); text-transform: uppercase; margin: 0 0 12px; }
body.csui-active .csui-promo-copy p { color: rgba(255,255,255,.9); margin: 0 0 22px; }

/* story / value row */
body.csui-active .csui-values { display: grid; grid-template-columns: 1fr; gap: 14px; text-align: center; }
body.csui-active .csui-value { padding: 26px 20px; }
body.csui-active .csui-value .csui-value-ico { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--csui-primary); }
body.csui-active .csui-value h3 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; color: var(--csui-ink); margin: 0 0 8px; }
body.csui-active .csui-value p { margin: 0; color: var(--csui-muted); font-size: 14px; }

/* newsletter */
body.csui-active .csui-newsletter { background: var(--csui-off); text-align: center; }
body.csui-active .csui-newsletter .csui-nl-inner { width: min(640px, var(--csui-shell)); max-width: 100%; margin-inline: auto; }
body.csui-active .csui-newsletter h2 { font-family: var(--csui-display); font-weight: 700; font-size: var(--csui-h2); color: var(--csui-ink); margin: 0 0 10px; }
body.csui-active .csui-newsletter p { color: var(--csui-muted); margin: 0 0 22px; }
body.csui-active .csui-nl-form { display: flex; gap: 10px; }
body.csui-active .csui-nl-form input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid var(--csui-line-2); border-radius: var(--csui-r); font-size: 16px; background: #fff; color: var(--csui-ink); }
body.csui-active .csui-nl-form input:focus { border-color: var(--csui-primary); outline: none; }
body.csui-active .csui-nl-form button { flex: 0 0 auto; }
body.csui-active .csui-nl-note { margin: 14px 0 0; font-size: 12px; color: var(--csui-muted); }

/* spotlight bands: Limited Edition + Coming Soon */
body.csui-active .csui-spot { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: var(--csui-r-lg); overflow: hidden; border: 1px solid var(--csui-line); background: #fff; }
body.csui-active .csui-spot + .csui-spot { margin-top: 18px; }
body.csui-active .csui-spot-media { position: relative; aspect-ratio: 4 / 3; background: var(--csui-off); overflow: hidden; }
body.csui-active .csui-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.csui-active .csui-spot-media.placeholder { background: linear-gradient(150deg, #2a0d12, #6d1522 60%, #9b1c2e); }
body.csui-active .csui-spot-copy { padding: clamp(26px, 5vw, 52px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
body.csui-active .csui-badge { display: inline-block; padding: 6px 14px; border-radius: var(--csui-pill); font-family: var(--csui-display); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
body.csui-active .csui-badge.limited { background: var(--csui-red); color: #fff; }
body.csui-active .csui-badge.soon { background: var(--csui-sky-soft); color: var(--csui-primary); border: 1px solid var(--csui-sky); }
body.csui-active .csui-spot-copy h2 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: var(--csui-h2); color: var(--csui-ink); margin: 0 0 12px; }
body.csui-active .csui-spot-copy p { color: var(--csui-ink-2); margin: 0 0 22px; line-height: 1.7; max-width: 46ch; }
body.csui-active .csui-spot-price { font-weight: 600; color: var(--csui-primary); margin: -10px 0 20px; }

/* ------------------------------------------------------------------
   10. SHOP (classic WooCommerce product loop) — square cards
   ------------------------------------------------------------------ */
body.csui-active .csui-shop-intro { width: var(--csui-shell); max-width: 100%; margin: clamp(24px,7vw,48px) auto clamp(16px,4vw,24px); text-align: center; }
body.csui-active .csui-shop-copy h1 { font-size: var(--csui-h1); text-transform: uppercase; }
body.csui-active .csui-shop-copy p { color: var(--csui-muted); margin: 12px auto 0; max-width: 46ch; }

body.csui-active .csui-shop-categories { width: var(--csui-shell); max-width: 100%; margin: 0 auto clamp(20px,5vw,36px); display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; justify-content: center; }
body.csui-active .csui-shop-categories::-webkit-scrollbar { display: none; }
body.csui-active .csui-chip { flex: 0 0 auto; padding: 9px 20px; border-radius: var(--csui-pill); border: 1px solid var(--csui-line-2); background: transparent; color: var(--csui-ink-2); font-family: var(--csui-display); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all .16s var(--csui-ease); }
body.csui-active .csui-chip:hover { border-color: var(--csui-ink); color: var(--csui-ink); }
body.csui-active .csui-chip.active { background: var(--csui-primary); border-color: var(--csui-primary); color: #fff; }

/* remove the theme's duplicate archive / page title (our intro + page headings replace it) */
body.csui-active .woocommerce-products-header,
body.csui-active .woocommerce-products-header__title,
body.csui-active .term-description,
body.csui-active.woocommerce-shop .wp-block-post-title,
body.csui-active.tax-product_cat .wp-block-post-title,
body.csui-active.woocommerce-cart .wp-block-post-title,
body.csui-active.woocommerce-checkout .wp-block-post-title,
body.csui-active.woocommerce-account .wp-block-post-title,
body.csui-active .woocommerce-breadcrumb { display: none !important; }

body.csui-active .woocommerce ul.products, body.csui-active ul.products {
	width: var(--csui-shell); max-width: 100%; margin: 0 auto clamp(44px,9vw,88px); padding: 0; list-style: none;
	display: grid !important; grid-template-columns: repeat(2, 1fr); gap: clamp(14px,3vw,30px);
}
body.csui-active .woocommerce ul.products::before, body.csui-active .woocommerce ul.products::after { content: none; display: none; }
body.csui-active ul.products li.product { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent; display: flex; flex-direction: column; text-align: center; }
body.csui-active ul.products li.product a.woocommerce-LoopProduct-link, body.csui-active ul.products li.product a.woocommerce-loop-product__link { display: block; text-decoration: none; color: inherit; }
body.csui-active ul.products li.product a img,
body.csui-active ul.products li.product img.attachment-woocommerce_thumbnail,
body.csui-active ul.products li.product img.wp-post-image,
body.csui-active .wc-block-grid__products li.product img,
body.csui-active .wp-block-woocommerce-product-collection li.product img,
body.csui-active .products .wc-block-grid__product-image img {
	width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important;
	aspect-ratio: var(--csui-product-ratio, 1 / 1) !important;
	object-fit: cover !important; object-position: center !important; display: block !important;
	background: var(--csui-off); border-radius: var(--csui-r); transition: opacity .3s var(--csui-ease);
}
/* neutralise any fixed-height image wrapper the theme may add */
body.csui-active ul.products li.product a.woocommerce-LoopProduct-link,
body.csui-active ul.products li.product a.woocommerce-loop-product__link,
body.csui-active ul.products li.product figure,
body.csui-active ul.products li.product .wc-block-grid__product-image { height: auto !important; }
body.csui-active ul.products li.product:hover a img { opacity: .9; }
body.csui-active ul.products li.product .woocommerce-loop-product__title, body.csui-active ul.products li.product h2 {
	font-family: var(--csui-display); font-size: 16px; font-weight: 600; letter-spacing: .01em; color: var(--csui-ink); margin: 0; padding: 16px 6px 2px;
}
body.csui-active ul.products li.product .price { padding: 0 6px; margin: 0; color: var(--csui-ink); font-size: 15px; font-weight: 600; }
body.csui-active ul.products li.product .price del { color: var(--csui-muted); font-weight: 400; margin-right: 6px; }
body.csui-active ul.products li.product .price ins { text-decoration: none; color: var(--csui-primary); }
body.csui-active ul.products li.product .button, body.csui-active ul.products li.product .added_to_cart {
	align-self: center; margin: 12px auto 0; padding: 10px 22px; background: transparent; color: var(--csui-primary); border: 2px solid var(--csui-primary); border-radius: var(--csui-r);
	font-family: var(--csui-display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .16s var(--csui-ease), color .16s var(--csui-ease);
}
body.csui-active ul.products li.product .button:hover { background: var(--csui-primary); color: #fff; }

/* ------------------------------------------------------------------
   11. SINGLE PRODUCT
   ------------------------------------------------------------------ */
body.csui-active.single-product div.product { width: var(--csui-shell); max-width: 100%; margin: clamp(16px,4vw,40px) auto clamp(46px,8vw,84px); display: grid; grid-template-columns: 1fr; gap: clamp(22px,5vw,58px); align-items: start; }
body.csui-active.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary):not(.entry-summary) { grid-column: 1 / -1; }
body.csui-active .csui-back-shop { width: var(--csui-shell); max-width: 100%; margin: clamp(12px,3vw,22px) auto 0; display: block; font-family: var(--csui-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--csui-muted); text-decoration: none; }
body.csui-active .csui-back-shop:hover { color: var(--csui-primary); }

body.csui-active.single-product div.product .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; float: none !important; }
body.csui-active.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
body.csui-active.single-product .woocommerce-product-gallery__image, body.csui-active.single-product .woocommerce-product-gallery__image--placeholder { border-radius: var(--csui-r-lg); overflow: hidden; background: var(--csui-off); }
body.csui-active.single-product .woocommerce-product-gallery__image a, body.csui-active.single-product .woocommerce-product-gallery__image { display: block; }
body.csui-active.single-product .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; aspect-ratio: var(--csui-product-ratio, 1 / 1); object-fit: cover; object-position: center; display: block; }
body.csui-active.single-product .flex-control-thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
body.csui-active.single-product .flex-control-thumbs::-webkit-scrollbar { display: none; }
body.csui-active.single-product .flex-control-thumbs li { flex: 0 0 auto; margin: 0; }
body.csui-active.single-product .flex-control-thumbs img { width: 66px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--csui-r); opacity: .55; cursor: pointer; transition: opacity .16s var(--csui-ease); }
body.csui-active.single-product .flex-control-thumbs img.flex-active, body.csui-active.single-product .flex-control-thumbs img:hover { opacity: 1; }

body.csui-active.single-product div.product .summary, body.csui-active.single-product div.product .entry-summary { margin: 0 !important; width: 100% !important; float: none !important; }
body.csui-active.single-product .product_title { font-family: var(--csui-display); font-weight: 700; font-size: clamp(26px,7vw,42px); text-transform: uppercase; letter-spacing: -.005em; line-height: 1.06; margin: 0 0 12px; color: var(--csui-ink); }
body.csui-active.single-product .summary .price, body.csui-active.single-product .summary p.price { font-family: var(--csui-sans); font-size: 22px; font-weight: 600; color: var(--csui-ink); margin: 0 0 22px; }
body.csui-active.single-product .summary .price del { color: var(--csui-muted); font-weight: 400; font-size: 17px; margin-right: 8px; }
body.csui-active.single-product .summary .price ins { text-decoration: none; color: var(--csui-primary); }
body.csui-active.single-product .woocommerce-product-details__short-description { color: var(--csui-ink-2); line-height: 1.75; margin: 0 0 24px; padding: 0 0 22px; border-bottom: 1px solid var(--csui-line); }
body.csui-active.single-product .woocommerce-product-details__short-description p { margin: 0 0 12px; }

body.csui-active.single-product .variations { width: 100%; margin: 0 0 8px; border: 0; }
body.csui-active.single-product .variations tbody, body.csui-active.single-product .variations tr { display: block; }
body.csui-active.single-product .variations th.label, body.csui-active.single-product .variations td.value { display: block; width: 100%; padding: 0; text-align: left; }
body.csui-active.single-product .variations th.label { font-family: var(--csui-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--csui-ink); margin: 20px 0 12px; }
body.csui-active.single-product .variations th.label label { margin: 0; font-weight: inherit; }
body.csui-active.single-product td.value.csui-has-pills > select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
body.csui-active.single-product .reset_variations { font-size: 12px; color: var(--csui-muted); margin-left: 4px; }

body.csui-active .csui-pills { display: flex; flex-wrap: wrap; gap: 9px; }
body.csui-active .csui-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; min-width: 50px; padding: 0 18px; border: 2px solid var(--csui-line-2); border-radius: var(--csui-r); background: #fff; color: var(--csui-ink); font-family: var(--csui-display); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s var(--csui-ease), background .15s var(--csui-ease), color .15s var(--csui-ease); }
body.csui-active .csui-pill:hover { border-color: var(--csui-ink); }
body.csui-active .csui-pill.selected { border-color: var(--csui-primary); background: var(--csui-primary); color: #fff; }
body.csui-active .csui-pill.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
body.csui-active .csui-pill .csui-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--csui-swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }

body.csui-active.single-product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 22px 0 0; }
body.csui-active.single-product form.cart .quantity { display: inline-flex; }
body.csui-active.single-product form.cart .quantity input.qty { width: 72px; height: 56px; text-align: center; border: 2px solid var(--csui-line-2); border-radius: var(--csui-r); font-size: 16px; font-weight: 600; color: var(--csui-ink); background: #fff; }
body.csui-active.single-product form.cart button.single_add_to_cart_button { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 30px; border: 2px solid var(--csui-primary); border-radius: var(--csui-r); background: #fff; color: var(--csui-primary); font-family: var(--csui-display); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .16s var(--csui-ease), color .16s var(--csui-ease); }
body.csui-active.single-product form.cart button.single_add_to_cart_button:hover { background: var(--csui-primary); color: #fff; }
body.csui-active.single-product form.cart button.single_add_to_cart_button.disabled, body.csui-active.single-product form.cart button.single_add_to_cart_button:disabled { border-color: var(--csui-line-2); color: #b0b4bd; background: #fff; cursor: not-allowed; }
/* Buy now: full-width primary action below Add to bag */
body.csui-active.single-product form.cart .csui-buy-now { flex: 1 1 100%; min-height: 56px; padding: 0 30px; border: 2px solid var(--csui-primary); border-radius: var(--csui-r); background: var(--csui-primary); color: #fff; font-family: var(--csui-display); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .16s var(--csui-ease); }
body.csui-active.single-product form.cart .csui-buy-now:hover { background: var(--csui-primary-d); border-color: var(--csui-primary-d); }
body.csui-active.single-product form.cart .csui-buy-now[disabled] { opacity: .5; cursor: not-allowed; }
/* sale prices in red */
body.csui-active .price ins, body.csui-active .summary .price ins { color: var(--csui-red) !important; }
body.csui-active ul.products li.product .price ins { color: var(--csui-red); }
body.csui-active.single-product .product_meta { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--csui-line); font-size: 13px; color: var(--csui-muted); }
body.csui-active.single-product .product_meta a { color: var(--csui-ink); text-decoration: underline; text-underline-offset: 3px; }

body.csui-active.single-product .related.products, body.csui-active.single-product .up-sells.products { width: 100%; max-width: 100%; margin: clamp(36px,8vw,76px) auto 0; grid-column: 1 / -1; }
body.csui-active.single-product .related.products > h2, body.csui-active.single-product .up-sells.products > h2 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: var(--csui-h2); margin: 0 0 22px; text-align: center; }
body.csui-active.single-product .woocommerce-tabs { margin-top: clamp(28px,6vw,56px); }
body.csui-active.single-product .woocommerce-tabs .tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--csui-line); }
body.csui-active.single-product .woocommerce-tabs .tabs li { margin: 0; }
body.csui-active.single-product .woocommerce-tabs .tabs li a { display: block; padding: 12px 16px; color: var(--csui-muted); text-decoration: none; font-family: var(--csui-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
body.csui-active.single-product .woocommerce-tabs .tabs li.active a { color: var(--csui-ink); box-shadow: inset 0 -2px 0 var(--csui-primary); }

/* ------------------------------------------------------------------
   12. NOTICES / FORMS baseline
   ------------------------------------------------------------------ */
body.csui-active .woocommerce-info, body.csui-active .woocommerce-message, body.csui-active .woocommerce-error { border-radius: var(--csui-r); border: 1px solid var(--csui-line); border-left: 3px solid var(--csui-primary); background: #fff; padding: 14px 18px; color: var(--csui-ink); box-shadow: none; list-style: none; }
body.csui-active .woocommerce-error { border-left-color: #b3261e; }
body.csui-active .woocommerce-message { border-left-color: #2e7d32; }
body.csui-active .woocommerce form .form-row label, body.csui-active .woocommerce-account form label { font-size: 13px; font-weight: 600; color: var(--csui-ink-2); }
body.csui-active .woocommerce form .form-row input.input-text, body.csui-active .woocommerce form .form-row textarea, body.csui-active .woocommerce form .form-row select, body.csui-active .woocommerce .select2-container .select2-selection, body.csui-active .woocommerce-account input[type="text"], body.csui-active .woocommerce-account input[type="email"], body.csui-active .woocommerce-account input[type="password"], body.csui-active .woocommerce-account input[type="tel"] { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--csui-line-2); border-radius: var(--csui-r); background: #fff; font-size: 16px; color: var(--csui-ink); box-shadow: none; }
body.csui-active .woocommerce form .form-row input.input-text:focus, body.csui-active .woocommerce form .form-row textarea:focus, body.csui-active .woocommerce form .form-row select:focus { border-color: var(--csui-primary); outline: none; }
body.csui-active .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding: 0; }
body.csui-active .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; }
body.csui-active .woocommerce #payment #place_order, body.csui-active .woocommerce button.button.alt, body.csui-active .woocommerce a.button.alt, body.csui-active .woocommerce .wc-proceed-to-checkout a.checkout-button, body.csui-active .woocommerce button.button, body.csui-active .woocommerce input.button { background: var(--csui-primary); color: #fff; border: 0; border-radius: var(--csui-r); padding: 15px 30px; font-family: var(--csui-display); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .16s var(--csui-ease); }
body.csui-active .woocommerce #payment #place_order:hover, body.csui-active .woocommerce button.button.alt:hover, body.csui-active .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--csui-primary-d); }

/* ------------------------------------------------------------------
   13. CART / CHECKOUT / ORDER / ACCOUNT
   ------------------------------------------------------------------ */
body.csui-active.woocommerce-cart .wp-block-post-content, body.csui-active.woocommerce-cart .entry-content, body.csui-active.woocommerce-checkout .wp-block-post-content, body.csui-active.woocommerce-checkout .entry-content { width: var(--csui-shell); max-width: 100%; margin-inline: auto; }
body.csui-active.woocommerce-cart table.cart { border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; background: #fff; }
body.csui-active.woocommerce-cart table.cart th { background: var(--csui-off); font-family: var(--csui-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--csui-muted); padding: 16px; }
body.csui-active.woocommerce-cart table.cart td { padding: 16px; border-top: 1px solid var(--csui-line); vertical-align: middle; }
body.csui-active.woocommerce-cart table.cart img { width: 68px; aspect-ratio: var(--csui-product-ratio, 1 / 1); object-fit: cover; border-radius: var(--csui-r); }
body.csui-active.woocommerce-cart .cart_totals, body.csui-active.woocommerce-checkout .woocommerce-checkout-review-order { background: #fff; border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); padding: 24px; }
body.csui-active.woocommerce-cart .cart_totals h2, body.csui-active.woocommerce-checkout #customer_details h3, body.csui-active.woocommerce-checkout #order_review_heading { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: var(--csui-h3); margin: 0 0 16px; }
body.csui-active.woocommerce-checkout table.shop_table { border: 0; }
body.csui-active.woocommerce-checkout table.shop_table th, body.csui-active.woocommerce-checkout table.shop_table td { padding: 12px 0; border-top: 1px solid var(--csui-line); }
body.csui-active.woocommerce-checkout #payment { background: var(--csui-off); border-radius: var(--csui-r-lg); padding: 20px; margin-top: 14px; }
body.csui-active.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 12px; list-style: none; }
body.csui-active.woocommerce-checkout #payment .payment_box { background: #fff; border-radius: var(--csui-r); }

body.csui-active.woocommerce-order-received .woocommerce-order { width: var(--csui-shell); max-width: 100%; margin-inline: auto; }
body.csui-active .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; list-style: none; margin: 0 0 30px; padding: 20px; background: #fff; border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); }
body.csui-active .woocommerce-order-overview li { border: 0; font-size: 11px; color: var(--csui-muted); text-transform: uppercase; letter-spacing: .1em; }
body.csui-active .woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 17px; color: var(--csui-ink); text-transform: none; letter-spacing: 0; font-family: var(--csui-display); font-weight: 700; }

body.csui-active.woocommerce-account .woocommerce { width: var(--csui-shell); max-width: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
body.csui-active .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); padding: 10px; float: none; width: auto; }
body.csui-active .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
body.csui-active .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 16px; border-radius: var(--csui-r); color: var(--csui-ink-2); text-decoration: none; font-family: var(--csui-display); font-weight: 500; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; transition: background .14s var(--csui-ease), color .14s var(--csui-ease); }
body.csui-active .woocommerce-MyAccount-navigation li a:hover { background: var(--csui-off); color: var(--csui-ink); }
body.csui-active .woocommerce-MyAccount-navigation li.is-active a { background: var(--csui-primary); color: #fff; }
body.csui-active .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); padding: clamp(20px,5vw,36px); float: none; width: auto; }
body.csui-active .woocommerce-MyAccount-content a { color: var(--csui-primary); }
body.csui-active .woocommerce-orders-table { border: 1px solid var(--csui-line); border-radius: var(--csui-r); overflow: hidden; border-collapse: separate; border-spacing: 0; }
body.csui-active .woocommerce-orders-table th { background: var(--csui-off); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--csui-muted); padding: 14px; }
body.csui-active .woocommerce-orders-table td { padding: 14px; border-top: 1px solid var(--csui-line); }

/* ------------------------------------------------------------------
   14. HELP & SUPPORT
   ------------------------------------------------------------------ */
body.csui-active .csui-help { background: #fff; }
body.csui-active .csui-help-head { padding: clamp(20px,5vw,40px) 0 0; }
body.csui-active .csui-help-band { border-radius: var(--csui-r-lg); overflow: hidden; position: relative; color: #fff; text-align: center; padding: clamp(34px,9vw,74px) clamp(26px,6vw,60px); background: linear-gradient(150deg, #2a0d12, #6d1522 60%, #9b1c2e); }
body.csui-active .csui-help-band .csui-eyebrow { color: #fff; opacity: .85; }
body.csui-active .csui-help-band h1 { color: #fff; font-size: var(--csui-h1); text-transform: uppercase; }
body.csui-active .csui-help-band p { color: rgba(255,255,255,.85); margin: 14px auto 0; max-width: 52ch; }

body.csui-active .csui-faq-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
body.csui-active .csui-faq-grid h2 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: var(--csui-h2); }
body.csui-active .csui-faq-list { display: flex; flex-direction: column; gap: 10px; }
body.csui-active .csui-faq { background: #fff; border: 1px solid var(--csui-line); border-radius: var(--csui-r); padding: 2px 20px; }
body.csui-active .csui-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--csui-ink); font-size: 16px; }
body.csui-active .csui-faq summary::-webkit-details-marker { display: none; }
body.csui-active .csui-faq summary span { position: relative; width: 14px; height: 14px; flex: none; }
body.csui-active .csui-faq summary span::before, body.csui-active .csui-faq summary span::after { content: ""; position: absolute; background: var(--csui-primary); border-radius: 2px; }
body.csui-active .csui-faq summary span::before { top: 6px; left: 0; width: 14px; height: 2px; }
body.csui-active .csui-faq summary span::after { top: 0; left: 6px; width: 2px; height: 14px; transition: transform .2s var(--csui-ease), opacity .2s var(--csui-ease); }
body.csui-active .csui-faq[open] summary span::after { transform: rotate(90deg); opacity: 0; }
body.csui-active .csui-faq p { margin: 0 0 18px; color: var(--csui-muted); line-height: 1.75; }

body.csui-active .csui-talk-card { display: grid; grid-template-columns: 1fr; gap: 26px; background: var(--csui-off); border: 1px solid var(--csui-line); border-radius: var(--csui-r-lg); padding: clamp(26px,6vw,54px); }
body.csui-active .csui-talk-copy h2 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; font-size: var(--csui-h2); margin-bottom: 12px; }
body.csui-active .csui-talk-copy p { color: var(--csui-muted); }
body.csui-active .csui-form label { display: block; margin-bottom: 16px; }
body.csui-active .csui-form label span { display: block; font-family: var(--csui-display); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--csui-ink-2); margin-bottom: 8px; }
body.csui-active .csui-form input, body.csui-active .csui-form textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--csui-line-2); border-radius: var(--csui-r); font-size: 16px; color: var(--csui-ink); background: #fff; font-family: inherit; }
body.csui-active .csui-form input:focus, body.csui-active .csui-form textarea:focus { border-color: var(--csui-primary); outline: none; }
body.csui-active .csui-two-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.csui-active .csui-message { padding: 12px 16px; border-radius: var(--csui-r); font-size: 14px; margin-bottom: 16px; }
body.csui-active .csui-message.success { background: #eef7ee; color: #256a2b; }
body.csui-active .csui-message.error { background: #fbeeec; color: #97362f; }

/* ------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------ */
body.csui-active footer:not(.csui-footer) { display: none !important; }
body.csui-active .csui-footer { background: #141414; color: #fff; margin-top: clamp(40px,10vw,90px); }
body.csui-active .csui-footer-inner { width: var(--csui-shell); max-width: 100%; margin-inline: auto; padding: clamp(44px,8vw,80px) 0 30px; }
body.csui-active .csui-footer-main { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
body.csui-active .csui-footer-brand span { font-family: var(--csui-display); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
body.csui-active .csui-footer-brand h2 { font-family: var(--csui-display); font-weight: 700; text-transform: uppercase; color: #fff; font-size: clamp(24px,6vw,36px); letter-spacing: .01em; margin: 14px 0 0; }
body.csui-active .csui-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.csui-active .csui-footer-links small { display: block; font-family: var(--csui-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
body.csui-active .csui-footer-links a { display: block; color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .14s var(--csui-ease); }
body.csui-active .csui-footer-links a:hover { color: #fff; }
body.csui-active .csui-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------------
   16. RESPONSIVE (scale up from mobile)
   ------------------------------------------------------------------ */
@media (min-width: 600px) {
	body.csui-active .csui-cat-tiles { grid-template-columns: repeat(3, 1fr); }
	body.csui-active .csui-two-fields { grid-template-columns: 1fr 1fr; }
	body.csui-active .csui-values { grid-template-columns: repeat(3, 1fr); }
	body.csui-active .woocommerce ul.products, body.csui-active ul.products { grid-template-columns: repeat(3, 1fr); }
	body.csui-active .csui-nl-form { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 768px) {
	body.csui-active .csui-faq-grid { grid-template-columns: .8fr 1.2fr; gap: clamp(30px,5vw,60px); }
	body.csui-active .csui-talk-card { grid-template-columns: .85fr 1.15fr; gap: clamp(30px,5vw,56px); }
	body.csui-active.single-product div.product { grid-template-columns: 1fr 1fr; }
	body.csui-active.single-product div.product .woocommerce-product-gallery { position: sticky; top: 132px; }
	body.csui-active.woocommerce-account .woocommerce { grid-template-columns: 240px 1fr; gap: clamp(20px,3vw,44px); }
	body.csui-active .woocommerce-MyAccount-navigation ul { display: block; }
	body.csui-active .csui-footer-main { grid-template-columns: 1fr 1.4fr; gap: clamp(30px,5vw,64px); }
	body.csui-active .csui-footer-links { grid-template-columns: repeat(3, 1fr); }
	/* spotlight becomes two columns; alternate image side */
	body.csui-active .csui-spot { grid-template-columns: 1fr 1fr; }
	body.csui-active .csui-spot.reverse .csui-spot-media { order: 2; }
	body.csui-active .csui-spot-media { aspect-ratio: auto; min-height: 380px; }
}
@media (min-width: 900px) {
	/* desktop: reveal the centered nav row, hide the hamburger */
	body.csui-active .csui-navrow { display: flex; }
	body.csui-active .csui-menu-toggle { display: none; }
	body.csui-active .woocommerce ul.products, body.csui-active ul.products { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	body.csui-active .csui-hcenter .csui-brandlink { font-size: 14px; letter-spacing: .02em; }
	body.csui-active .csui-hbar { column-gap: 6px; }
	body.csui-active .csui-nl-form { flex-direction: column; }
	body.csui-active.single-product form.cart {
		position: sticky; bottom: 0; z-index: 40; background: rgba(255,255,255,.97);
		-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		margin: 22px calc(50% - 50vw) 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--csui-line); box-shadow: 0 -8px 24px rgba(20,20,20,.08);
	}
}
@media (max-width: 400px) {
	body.csui-active .woocommerce ul.products, body.csui-active ul.products { grid-template-columns: 1fr 1fr; gap: 12px; }
	body.csui-active .csui-cat-tiles { grid-template-columns: 1fr 1fr; }
}