/*
Theme Name: Diyaa
Theme URI: https://seifweb.com
Author: SeifWeb
Author URI: https://seifweb.com
Description: متجر الإضاءة والأدوات الكهربائية على WooCommerce: لمبات LED وسبوتات وثريات وأباجورات وشرائط LED، وإضاءة خارجية وشمسية، ومفاتيح ومقابس ووصلات وأسلاك وقواطع، وعدد يدوية وكهربائية وأدوات السلامة، بخيارات للقدرة ولون الضوء والطول واللون، ودليل لاختيار الإضاءة، وأطقم جاهزة، وتوصيل إلى كل الإمارات. تصميم هادئ، عربي أولًا ومصمَّم للهاتف. A calm WooCommerce store for LED lighting, outdoor and solar lights, electrical supplies, hand and power tools and safety gear, with wattage, light colour, length and finish options, a lighting guide, ready kits and delivery across the UAE — Arabic first and built for phones.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diyaa
Tags: e-commerce, rtl-language-support, custom-logo, custom-menu
*/

/* ---------- Tokens: one brand colour (deep slate navy), cool neutrals, warm amber only for prices and badges ---------- */
:root {
	--bg: #f6f7f8;
	--card: #ffffff;
	--soft: #ebeef1;
	--line: #dce1e6;
	--line-strong: #c2c9d1;
	--field: #76808b;
	--ink: #1a2028;
	--ink-2: #3f4955;
	--muted: #5a6470;
	--brand: #26313d;
	--brand-deep: #1b232c;
	--amber: #a2560c;
	--on-deep: #e8ecf0;
	--on-deep-2: #b7c1cb;
	--ok: #2d6a40;
	--err: #a3352b;
	--radius: 8px;
	--radius-lg: 14px;
	--shadow: 0 8px 28px rgba(26, 32, 40, .07);
	--font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
	--gutter: 16px;
	--header-h: 64px;
	--tabbar-h: 62px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--ink); background: var(--bg);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.35; margin: 0 0 .5em; letter-spacing: 0; color: var(--ink); }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.site-footer :focus-visible, .demo-bar :focus-visible, .closing-inner :focus-visible, .toast :focus-visible { outline-color: #fff; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; inset-inline-start: 12px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.container { width: 100%; max-width: 1232px; margin-inline: auto; padding-inline: var(--gutter); }
.icon { flex: none; }
.muted { color: var(--muted); }
.only-desktop { display: none !important; }
.eyebrow { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
html[lang^="en"] .eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }

/* ---------- Buttons ---------- */
.btn, .button, button.button, a.button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius);
	font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0; text-align: center;
	cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
	background: var(--brand); color: #fff; text-decoration: none;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--brand-deep); color: #fff; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-lg { min-height: 52px; padding-inline: 34px; font-size: 17px; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--field); }
.btn-line:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--soft); color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.btn-block { width: 100%; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce button.single_add_to_cart_button { background: var(--brand); color: #fff; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce button.single_add_to_cart_button:hover { background: var(--brand-deep); color: #fff; }
/* WooCommerce paints disabled buttons in its own purple: keep the brand colour. */
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt.disabled:hover, .woocommerce div.product form.cart .button.disabled {
	background: var(--brand) !important; color: #fff !important; opacity: .5; cursor: not-allowed;
}
.icon-btn { display: inline-grid; place-items: center; position: relative; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.icon-btn .icon { width: 22px; height: 22px; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 10px; margin-inline-end: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1; }
.lang-btn:hover { border-color: var(--ink); color: var(--ink); }
.lang-link .icon, .lang-foot .icon { width: 18px; height: 18px; }
.lang-foot { display: inline-flex; align-items: center; gap: 6px; }
.link-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: 15.5px; white-space: nowrap; color: var(--brand); }
.link-more:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 4px; }
.link-more .icon { width: 18px; height: 18px; }
[dir="ltr"] .link-more .icon-arrow, [dir="ltr"] .card-btn .icon-arrow, [dir="ltr"] .budget-tile .icon-arrow, [dir="ltr"] .band-row .icon-arrow { transform: scaleX(-1); }

/* ---------- Demo notice and store notices ---------- */
.demo-bar { background: var(--ink); color: #fff; font-size: 14px; }
.demo-bar-inner { display: flex; align-items: center; gap: 6px 14px; min-height: 40px; padding-block: 4px; }
.demo-bar p { margin: 0; flex: 1; min-width: 0; line-height: 1.5; }
.demo-bar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.demo-bar a:hover { color: var(--on-deep-2); }
.demo-bar-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.demo-bar-close:hover { background: rgba(255, 255, 255, .14); }
.demo-bar-close .icon { width: 18px; height: 18px; }
.announce { background: var(--soft); color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--line); }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 38px; }
.announce-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; text-align: center; align-items: center; } /* stacked rotating notes: the visible one is centred in the tallest one's height */
.announce-item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; line-height: 1.45; padding-block: 8px; }
.announce-item.is-on { opacity: 1; visibility: visible; }
.announce-link { flex: none; display: inline-flex; align-items: center; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(26, 32, 40, .06); }
.admin-bar .site-header { top: 46px; }
.header-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: var(--header-h); }
.header-row > .icon-btn:first-child { justify-self: start; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: center; color: var(--brand); min-width: 0; }
.brand:hover { color: var(--brand); }
.brand-logo { max-height: 40px; width: auto; }
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--brand); }
.brand-mark-line { stroke: var(--bg); }
.brand-text { display: grid; line-height: 1; }
.brand-name { font-weight: 700; font-size: 24px; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.brand-second { font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; margin-top: 4px; }
.brand-second[lang="ar"] { letter-spacing: 0; font-size: 13px; text-transform: none; }
html[lang^="en"] .brand-name { font-size: 21px; letter-spacing: .02em; }
.header-actions { display: flex; align-items: center; justify-self: end; }
.diyaa-cart-count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-family: var(--font); }
.diyaa-cart-count.is-empty { display: none; }
.header-search { border-top: 1px solid var(--line); padding-block: 12px; }

/* Desktop navigation and the "Shop" panel */
.main-nav { align-self: stretch; display: flex; align-items: stretch; gap: 2px; }
.nav-list, .drawer-list { list-style: none; margin: 0; padding: 0; }
.main-nav .nav-list { display: flex; align-items: stretch; gap: 2px; }
.main-nav .nav-list > li { position: relative; display: flex; align-items: center; }
.main-nav .nav-list a { display: block; padding: 10px 12px; font-size: 16px; color: var(--ink-2); white-space: nowrap; }
.main-nav .nav-list a:hover, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { color: var(--ink); }
.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { font-weight: 700; }
.main-nav .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; inset-inline-start: 0; min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, visibility .2s, transform .2s; z-index: 5; }
.main-nav .sub-menu a { border-radius: 6px; padding: 9px 12px; }
.main-nav .sub-menu a:hover { background: var(--soft); }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .nav-shop > .has-mega { position: static; gap: 0; }
.mega-link { padding-inline-end: 4px !important; color: var(--ink) !important; font-weight: 700; }
.mega-toggle { display: inline-grid; place-items: center; width: 28px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 6px; }
.mega-toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
.has-mega.is-open .mega-toggle .icon, .has-mega:hover .mega-toggle .icon { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; inset-inline: var(--gutter); z-index: 30; padding: 28px 0 30px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, visibility .2s, transform .2s; }
.has-mega:hover > .mega, .has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: none; }
.mega-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 32px; padding-inline: 28px; }
.mega-col { min-width: 0; }
.mega-title { font-weight: 700; font-size: 15.5px; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.main-nav .mega-list a { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 15.5px; color: var(--ink-2); white-space: normal; border-radius: 6px; }
.main-nav .mega-list a:hover { color: var(--ink); background: var(--bg); }
.mega-list .icon { width: 18px; height: 18px; color: var(--brand); }
.mega-thumb { flex: none; width: 38px; height: 38px; border-radius: 6px; overflow: hidden; background: var(--soft); }
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.main-nav .mega-list a.mega-all { font-weight: 700; color: var(--brand); padding-inline-start: 52px; }
.main-nav .nav-list .mega-promo { position: relative; display: grid; grid-template-rows: auto auto; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--soft); color: var(--ink); white-space: normal; }
.mega-promo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mega-promo-text { display: grid; gap: 2px; padding: 12px 14px 14px; }
.mega-promo-kicker { font-size: 13px; font-weight: 500; color: var(--muted); }
.mega-promo-title { font-weight: 700; font-size: 16.5px; line-height: 1.4; color: var(--ink); }
.mega-promo-cta { font-weight: 700; font-size: 15px; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.main-nav .nav-list .mega-promo:hover { color: var(--ink); }

/* ---------- Search form ---------- */
.search-form { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--field); border-radius: var(--radius); padding: 4px; padding-inline-start: 14px; max-width: 640px; margin-inline: auto; }
.search-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.search-form .icon { color: var(--muted); width: 20px; height: 20px; }
.search-form input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 4px; outline: none; font-size: 16px; text-overflow: ellipsis; }
.search-form .btn { min-height: 42px; padding: 0 18px; }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(26, 32, 40, .45); opacity: 0; transition: opacity .25s; }
.drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(88vw, 380px); background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom); }
[dir="ltr"] .drawer-panel { transform: translateX(-100%); }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); }
.drawer-head .brand { justify-self: start; }
.drawer-body { flex: 1; overflow: auto; padding: 14px var(--gutter) 8px; }
.drawer-title { margin: 6px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.drawer-cats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.drawer-cats a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-weight: 700; font-size: 14px; line-height: 1.35; }
.drawer-cats a span:last-child { min-width: 0; }
.drawer-occ { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.drawer-occ a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-size: 15px; }
.drawer-list a { display: block; padding: 13px 2px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16.5px; }
.drawer-list .sub-menu { list-style: none; padding-inline-start: 14px; margin: 0; }
.drawer-list .sub-menu a { font-size: 15.5px; font-weight: 400; color: var(--ink-2); padding-block: 11px; }
.drawer-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 14px var(--gutter); border-top: 1px solid var(--line); }
.drawer-foot > :first-child { grid-column: 1 / -1; }
.drawer-foot .btn { padding-inline: 12px; }

/* ---------- Home: hero (text beside one calm photo; no text on the photo) ---------- */
.hero { background: var(--bg); padding-block: 28px 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.hero-text { min-width: 0; max-width: 540px; }
.hero-title { font-size: clamp(32px, 8vw, 52px); line-height: 1.3; margin-bottom: 16px; }
.hero-lead { font-size: 17px; color: var(--ink-2); max-width: 500px; margin-bottom: 26px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.hero-note .icon { width: 20px; height: 20px; color: var(--ink-2); }
.hero-note span { min-width: 0; }
.hero-media { margin: 0; min-width: 0; }
.hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); background: var(--soft); }

/* ---------- Home: sections ---------- */
.section { padding-block: 48px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section-head > * { min-width: 0; }
.section-head h2 { font-size: clamp(24px, 5.4vw, 32px); margin: 0; }

/* Departments */
.cats { padding-top: 24px; }
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-grid li { min-width: 0; }
.cat-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; color: var(--ink); transition: border-color .2s; }
.cat-card:hover { border-color: var(--brand); color: var(--ink); }
.cat-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-img .brand-mark { width: 44px; height: 44px; }
.cat-card:hover .cat-img img { transform: scale(1.03); }
.cat-card-all .cat-img { background: var(--brand); color: #fff; }
.cat-card-all .cat-img .icon { width: 40px; height: 40px; stroke-width: 1.4; }
.cat-body { display: grid; gap: 2px; padding: 12px 14px 14px; }
.cat-name { font-weight: 700; font-size: 16px; line-height: 1.4; }
.cat-count { font-size: 14px; color: var(--muted); }

/* Best sellers */
.best { padding-top: 16px; }

/* «وفّر الكهرباء مع LED» band */
.band { background: var(--soft); padding-block: 48px; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.band-media { margin: 0; min-width: 0; }
.band-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--card); }
.band-text { min-width: 0; }
.band-text h2 { font-size: clamp(24px, 5.4vw, 32px); }
.band-text > p { color: var(--ink-2); max-width: 520px; }
.band-rows { list-style: none; margin: 8px 0 24px; padding: 0; border-top: 1px solid var(--line-strong); }
.band-rows li { border-bottom: 1px solid var(--line-strong); }
.band-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; color: var(--ink); }
.band-row:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.band-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--brand); }
.band-icon .icon { width: 22px; height: 22px; }
.band-body { display: grid; gap: 2px; min-width: 0; }
.band-name { font-weight: 700; font-size: 16px; }
.band-line { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.band-row > .icon { width: 20px; height: 20px; color: var(--brand); }

/* Why us */
.why { background: var(--card); border-block: 1px solid var(--line); }
.why-row { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding: 28px 0; }
.why-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.why-item .icon { width: 28px; height: 28px; color: var(--brand); margin-top: 2px; }
.why-item span { display: grid; line-height: 1.5; font-size: 14.5px; color: var(--muted); min-width: 0; }
.why-item strong { font-size: 16px; color: var(--ink); }

/* «اختر لون الضوء المناسب»: three rooms, each with a dot in its light colour */
.tones-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.tones-media { margin: 0; min-width: 0; }
.tones-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--soft); }
.tones-text { min-width: 0; max-width: 560px; }
.tones-text h2 { font-size: clamp(24px, 5.4vw, 32px); }
.tone-tips { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.tone-tips li { position: relative; display: grid; gap: 2px; min-width: 0; padding-inline-start: 52px; }
.tone-tips li::before { content: ""; position: absolute; top: 2px; inset-inline-start: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--tone, var(--soft)); box-shadow: inset 0 0 0 1px rgba(26, 32, 40, .18); }
.tone-tips strong { font-size: 16.5px; color: var(--ink); line-height: 1.5; padding-top: 5px; }
.tone-tips span { color: var(--ink-2); font-size: 16px; }

/* Reviews */
.reviews { padding-top: 8px; }
.reviews__note { margin: 0; font-size: 14px; color: var(--muted); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.review { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); display: grid; gap: 16px; align-content: space-between; min-width: 0; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: 16.5px; line-height: 1.85; color: var(--ink); }
.review figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.review figcaption > span:last-child { display: grid; min-width: 0; }
.review figcaption strong { font-size: 16px; color: var(--ink); }
.review-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--brand); font-weight: 700; font-size: 1.45rem; line-height: 1; }

/* Questions */
.faq { background: var(--card); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px; align-items: start; }
.faq-head { min-width: 0; }
.faq-head h2 { font-size: clamp(26px, 5.8vw, 34px); margin-bottom: 8px; }
.faq-head p { color: var(--muted); margin-bottom: 8px; }
.faq-list { min-width: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; line-height: 1.55; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span { min-width: 0; }
.faq-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--brand); font-size: 18px; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item > p { margin: 0 0 18px; padding-inline-end: 44px; color: var(--ink-2); font-size: 16px; }

/* Closing call to action: a slate navy panel on white, before the footer */
.closing { padding-block: 8px 56px; background: var(--card); }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 32px; padding-inline: 24px; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-deep); }
.closing-inner > div { min-width: 0; }
.closing-inner h2 { font-size: clamp(24px, 5.4vw, 30px); color: #fff; }
.closing-inner p { color: var(--on-deep); margin: 0; max-width: 640px; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.closing-inner .btn-light { color: var(--ink); }
.closing-inner .btn-light:hover { color: var(--ink); }
.closing-inner .btn-ghost, .closing-inner .btn-ghost:hover { color: #fff; }

/* ---------- Product grid (WooCommerce) ---------- */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin: 0 !important; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; position: relative; display: flex; flex-direction: column; min-width: 0; text-align: start; color: var(--ink); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: var(--ink); text-decoration: none; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.woocommerce ul.products li.product .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; box-shadow: none; transition: opacity .35s ease, transform .6s ease; }
.woocommerce ul.products li.product .card-media .card-img-alt { opacity: 0; }
.card-cat { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 2px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font); font-size: 16.5px; font-weight: 700; line-height: 1.5; padding: 0; margin: 0 0 4px; color: var(--ink); }
.woocommerce ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--amber); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: 14px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--amber); }
.card-badges { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.badge-new { display: inline-block; padding: 2px 10px; border-radius: 4px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.7; box-shadow: inset 0 0 0 1px var(--line-strong); }
.woocommerce .card-badges .onsale, .woocommerce ul.products li.product .card-badges .onsale {
	position: static; margin: 0; min-width: 0; min-height: 0; padding: 2px 10px; line-height: 1.7; border-radius: 4px;
	background: var(--amber); color: #fff; font-size: 13px; font-weight: 700; font-family: var(--font);
}
.card-dots { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; min-width: 0; }
.card-dots .dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--dot, #ccc); box-shadow: inset 0 0 0 1px rgba(26, 32, 40, .25); }
.card-dots-names { font-size: 13.5px; color: var(--muted); }
.card-fact { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.card-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--brand); border-radius: var(--radius); background: transparent; color: var(--brand); font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; transition: background-color .2s, color .2s; }
.card-btn .icon { width: 17px; height: 17px; }
.card-btn:hover { background: var(--brand); color: #fff; }
.card-btn.loading { opacity: .6; pointer-events: none; }
.card-btn.added { background: var(--ok); border-color: var(--ok); color: #fff; }
.card-btn.loading::after, .card-btn.added::after { display: none !important; }
.woocommerce ul.products li.product a.added_to_cart { display: none; }
.woocommerce .star-rating { display: none; }

/* ---------- Shop page ---------- */
.shop-wrap { padding-block: 16px 56px; }
.shop-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin: 4px 0 20px; padding: 22px; border-radius: var(--radius-lg); background: var(--soft); color: var(--ink); }
.shop-hero-text { min-width: 0; }
.shop-hero h1 { font-size: clamp(30px, 7.4vw, 42px); margin: 0 0 6px; }
.shop-hero-desc { color: var(--ink-2); font-size: 16px; max-width: 640px; }
.shop-hero-desc p:last-child { margin-bottom: 0; }
.shop-hero-img { min-width: 0; }
.shop-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.breadcrumb, .woocommerce .woocommerce-breadcrumb { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.breadcrumb a, .woocommerce .woocommerce-breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { margin-inline: 6px; opacity: .6; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.quick-filters-label { font-size: 14px; font-weight: 700; color: var(--muted); margin-inline-end: 2px; }
.quick-filters-label:not(:first-child) { margin-inline-start: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: transparent; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-active { background: var(--card); border-color: var(--brand); color: var(--ink); font-weight: 700; }
.filter-chip .icon { width: 14px; height: 14px; }
.woocommerce .woocommerce-result-count { margin: 0 0 14px; font-size: 14px; color: var(--muted); float: none; }
.woocommerce .woocommerce-ordering { float: none; margin: 0 0 16px; }
.woocommerce .woocommerce-ordering select {
	appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 16px; padding-inline-end: 40px; border: 1px solid var(--field); border-radius: var(--radius);
	background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4440' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center / 18px; font-size: 15px; cursor: pointer; width: 100%;
}
[dir="ltr"] .woocommerce .woocommerce-ordering select { background-position: right 14px center; }
.woocommerce nav.woocommerce-pagination { margin-top: 32px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); padding: 0 10px; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--brand); color: #fff; border-color: var(--brand); }
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews, p.no-comments { border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--card) !important; color: var(--ink) !important; padding: 14px 18px !important; margin: 0 0 18px !important; list-style: none; }
.woocommerce-message { border-color: #bfd6c4 !important; background: #f3f8f3 !important; }
.woocommerce-error { border-color: #e6c3be !important; background: #fcf4f2 !important; }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }
.woocommerce-message .button, .woocommerce-info .button { float: none !important; min-height: 40px; margin-inline-start: 12px; }

/* ---------- Single product ---------- */
.woocommerce div.product { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 4px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
.woocommerce div.product div.images { position: relative; margin-inline: calc(var(--gutter) * -1) !important; }
.woocommerce div.product div.images img { background: var(--soft); }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 8px; padding-inline: var(--gutter); }
.woocommerce div.product div.images .flex-control-thumbs li { width: 68px !important; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: 6px; opacity: .55; aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; box-shadow: 0 0 0 2px var(--brand); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 12px; background: rgba(255, 255, 255, .95); border-radius: 999px; }
[dir="rtl"] .woocommerce div.product div.images .woocommerce-product-gallery__trigger { left: 12px; right: auto; }
.woocommerce div.product span.onsale { position: absolute; top: 12px; z-index: 3; margin: 0; min-width: 0; min-height: 0; padding: 2px 10px; line-height: 1.7; border-radius: 4px; background: var(--amber); color: #fff; font-size: 14px; font-weight: 700; }
[dir="rtl"] .woocommerce div.product span.onsale { right: 12px; left: auto; }
[dir="ltr"] .woocommerce div.product span.onsale { left: 12px; right: auto; }
.summary-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.summary-kicker:hover { color: var(--ink); }
.woocommerce div.product .product_title { font-size: clamp(28px, 6.8vw, 38px); margin-bottom: 6px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--amber); font-family: var(--font); font-size: 24px; font-weight: 700; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 12px; }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--muted); font-size: 17px; font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: var(--amber); text-decoration: none; }
.woocommerce-product-details__short-description { color: var(--ink-2); font-size: 16.5px; }
.fit-line { display: flex; width: fit-content; max-width: 100%; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 6px 14px; padding-inline-start: 10px; border-radius: var(--radius); background: var(--soft); color: var(--ink-2); font-size: 14.5px; font-weight: 500; line-height: 1.6; }
.fit-line .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.fit-line span { min-width: 0; }
.occ-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.occ-line-label { font-size: 14px; font-weight: 700; color: var(--muted); }
.occ-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.occ-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.occ-chips a:hover { background: var(--brand); color: #fff; }
.occ-chips .icon { width: 15px; height: 15px; }
.stock-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 6px; font-size: 15px; color: var(--ink-2); }
.stock-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ok); }
.stock-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock-dot.is-out { color: var(--err); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 18px 0; }
.woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; }
.woocommerce div.product form.cart.variations_form { display: block; position: relative; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 8px; border: 0; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 12px; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: start; line-height: 1.5; }
.woocommerce div.product form.cart .variations label { font-weight: 700; font-size: 15px; }
.woocommerce div.product form.cart .variations td.value { position: relative; margin: 8px 0 4px; }
.woocommerce div.product form.cart .variations select { min-height: 44px; border: 1px solid var(--field); border-radius: var(--radius); padding: 0 14px; width: 100%; background: var(--card); }
.woocommerce div.product form.cart .variations select.is-replaced { position: absolute !important; top: 0; inset-inline-start: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.option-buttons, .qty-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.option-btn, .qty-pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 64px; min-height: 44px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--field); background: var(--card); color: var(--ink); font-weight: 700; font-size: 15.5px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.option-btn:hover, .qty-pick:hover { border-color: var(--brand); }
.option-btn[aria-pressed="true"], .qty-pick[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.option-btn:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.swatch-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--dot, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.option-btn[aria-pressed="true"] .swatch-dot { box-shadow: 0 0 0 2px #fff; }
form.cart.needs-option .option-buttons { animation: diyaa-nudge .4s; }
form.cart.needs-option .variations label { color: var(--err); }
@keyframes diyaa-nudge { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
.size-guide-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 6px; padding: 0; border: 0; background: none; color: var(--brand); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.size-guide-link .icon { width: 20px; height: 20px; }
.size-guide-link:hover { color: var(--brand-deep); }
.woocommerce div.product form.cart .reset_variations { font-size: 14px; color: var(--muted); display: inline-block; margin-inline-start: 12px; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 10px; }
.woocommerce .quantity .qty { width: 88px; min-height: 52px; border: 1px solid var(--field); border-radius: var(--radius); text-align: center; background: var(--card); font-weight: 700; }
.woocommerce div.product form.cart .button { flex: 1 1 180px; min-height: 52px; font-size: 17px; }
.qty-helper { flex: 1 1 100%; min-width: 0; padding: 16px; border-radius: var(--radius-lg); background: var(--soft); }
.qty-helper p { margin: 0; }
.qty-helper-title { font-weight: 700; font-size: 15.5px; margin-bottom: 10px !important; }
.qty-helper-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px !important; font-size: 15.5px; color: var(--ink-2); }
.qty-helper-total strong { color: var(--amber); font-size: 19px; }
.qty-helper-note { margin-top: 6px !important; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.note-card { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 16px; border-radius: var(--radius-lg); background: var(--soft); color: var(--ink); }
.note-card > div { min-width: 0; }
.note-card-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--brand); }
.note-card-icon .icon { width: 20px; height: 20px; }
.note-card p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.note-card .note-card-title { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.note-card-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 4px; color: var(--brand); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.note-card-link:hover { color: var(--brand-deep); }
.note-card-link .icon { width: 18px; height: 18px; }
.promise { list-style: none; padding: 14px 16px; margin: 0 0 18px; display: grid; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.promise li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.65; }
.promise li span { min-width: 0; }
.promise .icon { color: var(--brand); width: 20px; height: 20px; margin-top: 3px; }
.product-details { min-width: 0; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 2px; cursor: pointer; list-style: none; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .icon { width: 20px; height: 20px; color: var(--brand); }
.fold summary span { flex: 1; min-width: 0; }
.fold summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--muted); }
.fold[open] summary::after { content: "–"; }
.fold > p, .fold-list { margin: 0 0 16px; padding-inline-start: 30px; color: var(--ink-2); font-size: 15.5px; }
.fold-list { padding-inline-start: 48px; }
.fold-list li { margin-bottom: 4px; }
.fold-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fold-links a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 12px; min-width: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 20px; padding: 0; margin: 0 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { position: relative; border: 0; background: none; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 0; font-weight: 700; font-size: 16px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; display: block; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--brand); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; margin: 0; background: none; border: 0; max-width: 820px; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel ul, .woocommerce div.product .woocommerce-tabs .panel ol { padding-inline-start: 1.3em; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 19px; margin-top: 1.2em; }
.woocommerce table.shop_attributes { border: 0; margin: 0; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 0; border-bottom: 1px solid var(--line); background: transparent !important; padding: 10px 0; font-style: normal; text-align: start; }
.woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; margin-top: 24px; min-width: 0; }
.woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: 26px; margin-bottom: 16px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--field); border-radius: var(--radius); background: var(--card); padding: 12px 14px; min-height: 48px; font-size: 16px; }
.woocommerce form .form-row label { font-weight: 700; }

/* Lighting guide dialog */
.dya-dialog { width: min(680px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 48px); padding: 0 22px 22px; border: 0; border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px rgba(26, 32, 40, .25); overflow: auto; }
.dya-dialog::backdrop { background: rgba(26, 32, 40, .5); }
.dya-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: -22px; padding: 14px 22px; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.dya-dialog-head h2 { margin: 0; font-size: 22px; }
.guide-part + .guide-part { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.guide-part h3 { font-size: 18px; margin: 0 0 10px; }
.dya-dialog-note { font-size: 15px; color: var(--muted); margin: 12px 0 0; }
.dya-dialog > .link-more { margin-top: 14px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.size-table { width: 100%; min-width: 440px; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; font-size: 15.5px; }
.size-table th, .size-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.size-table thead th { background: var(--soft); font-weight: 700; font-size: 14.5px; }
.size-table tbody th { font-weight: 700; white-space: nowrap; }

/* Phone buy bar */
.buybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 46; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(26, 32, 40, .07); }
.buybar-info { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.buybar-name { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar-price { font-weight: 700; font-size: 16px; color: var(--amber); }
.buybar-price del { color: var(--muted); font-weight: 400; font-size: 13px; }
.buybar-price ins { text-decoration: none; color: var(--amber); }
.buybar .btn { flex: 0 0 auto; min-height: 46px; padding: 0 20px; }
body.single-product .tabbar { display: none; }
body.single-product { padding-bottom: 80px; }

/* Toast */
.toast { position: fixed; z-index: 70; inset-inline: 16px; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: none; }
.toast a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.toast a:hover { color: var(--on-deep-2); }
body.single-product .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ---------- Pages, cart, checkout, account ---------- */
.page-wrap { padding-block: 20px 64px; }
.page-wrap.narrow { max-width: 820px; }
.page-head h1 { font-size: clamp(30px, 7.4vw, 42px); margin-top: 4px; }
.page-lead { color: var(--ink-2); max-width: 680px; }
.entry { font-size: 17px; min-width: 0; }
.entry > :first-child { margin-top: 0; }
.entry h2 { font-size: 25px; margin-top: 1.4em; }
.entry h3 { font-size: 20px; margin-top: 1.2em; }
.entry ul, .entry ol { padding-inline-start: 1.3em; }
.entry li { margin-bottom: .35em; }
:where(.page-wrap:not(.is-store-page)) .entry a:where(:not(.button):not(.btn):not(.wc-block-components-button):not(.card-btn):not(.chip)) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.is-store-page .entry a:where(:not(.button):not(.btn):not([class*="wc-block"])) { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-MyAccount-content a:where(:not(.button)) { color: var(--brand); }
.entry ul.products { padding: 0; }
.entry ul.products li { margin-bottom: 0; }
.entry ul.products a { color: var(--ink); text-decoration: none; }
.entry ul.products .card-btn { color: var(--brand); text-decoration: none; }
.entry ul.products .card-btn:hover, .entry ul.products .card-btn.added { color: #fff; }
.entry figure { margin: 0 0 1.4em; max-width: 100%; overflow-x: auto; }
.entry figure img { border-radius: var(--radius-lg); }
.entry table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.entry th, .entry td { padding: 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.entry th { background: var(--soft); font-weight: 700; }
.entry details.faq-item:first-of-type, .entry h2 + details.faq-item { border-top: 1px solid var(--line); }
.credits-table { font-size: 15px; }
.credits-table small { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.store-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); font-size: 15.5px; color: var(--ink-2); line-height: 1.75; }
.store-note span { min-width: 0; }
.store-note .icon { color: var(--brand); width: 22px; height: 22px; margin-top: 2px; }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; min-height: 52px; font-family: var(--font); font-weight: 700; }
.wc-block-components-button:not(.is-link):hover { background: var(--brand-deep) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-components-textarea, .wc-blocks-components-select .wc-blocks-components-select__select { border-radius: var(--radius) !important; border-color: var(--field) !important; }
.wc-block-components-product-name { font-weight: 700; color: var(--ink) !important; }
.wc-block-components-product-price, .wc-block-components-totals-item__value { color: var(--ink); }
.wc-block-checkout__add-note .wc-block-components-checkbox__label { font-weight: 700; }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); border-collapse: separate; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top-color: var(--line); padding: 12px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 6px; overflow-x: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation li { position: relative; flex: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); white-space: nowrap; font-size: 15px; text-decoration: none; color: inherit; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--brand); color: #fff; border-color: var(--brand); }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { display: none; }
.woocommerce form.login, .woocommerce form.register { border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; background: var(--card); padding: 22px !important; margin: 0 0 18px !important; }
.order-next { display: grid; gap: 10px; margin: 0 0 22px; }
.order-next p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--line); }
.order-next p span { min-width: 0; }
.order-next .icon { color: var(--brand); width: 22px; height: 22px; margin-top: 2px; }
.order-next a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Ready kits page */
.gs-intro { max-width: 760px; color: var(--ink-2); }
.gs-jump { margin: 8px 0 4px; }
.gs-block { padding-top: 40px; scroll-margin-top: calc(var(--header-h) + 16px); min-width: 0; }
.gs-block > h2 { font-size: clamp(24px, 5.4vw, 30px); margin-bottom: 18px; }
.gs-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.gs-sets-list { min-width: 0; }
.gs-sets-list .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-own { display: grid; gap: 10px; justify-items: start; min-width: 0; padding: 22px; border-radius: var(--radius-lg); background: var(--soft); }
.gs-own h3 { font-size: 21px; margin: 4px 0 0; }
.gs-own p { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }
.gs-own .gs-occ-icon { background: var(--card); }
.gs-occ { border-top: 1px solid var(--line); margin-top: 40px; }
.gs-occ-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start; margin-bottom: 18px; }
.gs-occ-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--soft); color: var(--brand); }
.gs-occ-icon .icon { width: 24px; height: 24px; }
.gs-occ-text { min-width: 0; }
.gs-occ-text h2 { font-size: clamp(24px, 5.4vw, 28px); margin: 0 0 4px; }
.gs-occ-desc { color: var(--ink-2); font-size: 16px; margin: 0; }
.gs-occ-head .link-more { grid-column: 2; justify-self: start; }
.budget-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.budget-grid li { min-width: 0; }
.budget-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; height: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); transition: border-color .2s; }
.budget-tile:hover { border-color: var(--brand); color: var(--ink); }
.budget-label { font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--amber); }
.budget-hint { grid-column: 1; font-size: 15px; color: var(--muted); }
.budget-tile .icon { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--brand); }
.gs-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; counter-reset: gs; }
.gs-steps li { position: relative; min-width: 0; padding: 16px 18px; padding-inline-start: 64px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink-2); counter-increment: gs; }
.gs-steps li::before { content: counter(gs); position: absolute; top: 16px; inset-inline-start: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 16px; line-height: 1; }
.gs-bulk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 22px; border-radius: var(--radius-lg); background: var(--soft); }
.gs-bulk .gs-occ-icon { background: var(--card); }
.gs-bulk-text { min-width: 0; }
.gs-bulk-text h3 { font-size: 21px; margin: 0 0 6px; }
.gs-bulk-text p { color: var(--ink-2); }
.gs-bulk-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Questions page */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.faq-entry h2 { font-size: 21px; margin: 1.6em 0 .4em; }
.faq-entry h2:first-child { margin-top: 0; }
.faq-aside { padding: 22px; border-radius: var(--radius-lg); background: var(--soft); min-width: 0; display: grid; gap: 10px; }
.faq-aside h2 { font-size: 21px; margin: 0; }
.faq-aside p { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.contact-card { padding: 22px; border-radius: var(--radius-lg); background: var(--soft); color: var(--ink); min-width: 0; }
.contact-card .brand { margin-bottom: 18px; justify-self: start; }
.contact-card .brand-mark-line { stroke: var(--soft); }
.contact-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.contact-card li { display: flex; gap: 12px; align-items: flex-start; }
.contact-card li > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.contact-card strong { font-weight: 700; font-size: 14px; color: var(--muted); }
.contact-card .icon { color: var(--brand); width: 22px; height: 22px; margin-top: 2px; }
.contact-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-card a:hover { color: var(--brand); }
.contact-card .btn { color: #fff; text-decoration: none; }
.contact-card .contact-hint { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.contact-form { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.swst-contact { display: block !important; margin: 0 !important; color: var(--ink); }
.swst-contact .swst-contact-form { padding: 0 !important; border: 0 !important; background: none !important; }
.swst-contact .swst-contact-details { display: none !important; }
.swst-contact h2 { margin-top: 0 !important; font-size: 23px !important; font-family: var(--font) !important; font-weight: 700 !important; }
.swst-contact .swst-intro { color: var(--muted) !important; }
.swst-contact input:not([type=hidden]), .swst-contact textarea { background: #fff !important; border-color: var(--field) !important; border-radius: var(--radius) !important; }
.swst-contact .swst-submit { font-family: var(--font) !important; background: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; }
.swst-contact .swst-trap { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

/* Not found and empty lists */
.empty-state { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; min-width: 0; }
.empty-state > * { min-width: 0; max-width: 100%; }
.empty-art { width: 120px; height: auto; margin-bottom: 4px; }
.empty-art .ea-bulb { fill: var(--card); stroke: var(--brand); }
.empty-art .ea-rim { fill: none; stroke: var(--brand); }
.empty-art .ea-line { fill: none; stroke: var(--line-strong); }
.empty-code { margin: 0; font-weight: 700; font-size: 14px; color: var(--muted); letter-spacing: .06em; }
.empty-state h1 { font-size: clamp(28px, 7vw, 38px); margin: 0; }
.empty-state .search-form { width: 100%; }
.post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.post-card { min-width: 0; }
.post-card img, .post-cover img { border-radius: var(--radius-lg); margin-bottom: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-deep); color: var(--on-deep); padding-top: 44px; font-size: 15px; }
.site-footer a { color: var(--on-deep); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { justify-self: start; color: var(--on-deep); }
.site-footer .brand-mark { color: var(--on-deep); }
.site-footer .brand-mark-line { stroke: var(--brand-deep); }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-second { color: var(--on-deep-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; padding-bottom: 20px; }
.footer-brand { grid-column: 1 / -1; padding-bottom: 22px; min-width: 0; }
.footer-brand p { margin: 14px 0 16px; color: var(--on-deep-2); max-width: 420px; }
.footer-col { border-top: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.footer-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px 0; cursor: pointer; font-weight: 700; font-size: 16.5px; color: #fff; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--on-deep-2); }
.footer-col[open] summary::after { content: "–"; }
.footer-col ul { list-style: none; margin: 0; padding: 0 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.footer-col li { color: var(--on-deep-2); min-width: 0; }
.footer-contact { grid-column: 1 / -1; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.footer-contact li > span, .footer-contact li > a { min-width: 0; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--on-deep-2); }
.socials { display: flex; gap: 8px; }
.socials a { position: relative; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.socials a:hover { background: rgba(255, 255, 255, .2); }
.socials .icon { width: 19px; height: 19px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 16px; font-size: 14px; color: var(--on-deep-2); }
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pay-badge { display: inline-flex; align-items: center; gap: 6px; }
.pay-badge .icon { width: 18px; height: 18px; color: var(--on-deep-2); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.site-footer .footer-legal a { color: var(--on-deep); }

/* ---------- Phone tab bar ---------- */
.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: none; border: 0; cursor: pointer; min-width: 0; }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--ink); }
.tab-icon { position: relative; display: inline-grid; }
.tabbar .diyaa-cart-count { top: -6px; inset-inline-end: -10px; }

/* ---------- Light motion: a small fade on first view (static without JS or with reduced motion) ---------- */
.has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media print { .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
	.card-badges { top: 8px; inset-inline-start: 8px; max-width: calc(100% - 16px); }
	.woocommerce .card-badges .onsale, .badge-new { font-size: 12px; padding: 1px 8px; }
	.demo-bar { font-size: 13px; }
	.demo-bar-inner { flex-wrap: wrap; }
	.announce-link { display: none; }
	.card-btn { font-size: 14px; padding-inline: 8px; }
	.card-btn .icon { display: none; }
	.hero-text .btn-lg { width: 100%; }
	.faq-item > p { padding-inline-end: 0; }
	.closing-actions .btn { flex: 1 1 140px; }
}

@media (min-width: 600px) {
	:root { --gutter: 24px; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; }
	.gs-sets-list .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce .woocommerce-ordering select { width: auto; }
	.shop-wrap .woocommerce-result-count { float: right !important; }
	[dir="rtl"] .shop-wrap .woocommerce-ordering { float: left !important; }
	[dir="ltr"] .shop-wrap .woocommerce-result-count { float: left !important; }
	[dir="ltr"] .shop-wrap .woocommerce-ordering { float: right !important; }
	.shop-wrap ul.products { clear: both; }
	.budget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.why-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.woocommerce div.product div.images { margin-inline: 0 !important; }
	.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
	.woocommerce div.product div.images .flex-control-thumbs { padding-inline: 0; }
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-contact { grid-column: auto; }
	.shop-hero.has-photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 26px 30px; }
	.gs-occ-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
	.gs-occ-head .link-more { grid-column: 3; grid-row: 1; justify-self: end; }
	.gs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.closing-inner { padding: 36px; }
}

@media (min-width: 760px) {
	.review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 28px; }
	.contact-card, .contact-form { padding: 30px; }
	.faq-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
	.faq-aside { position: sticky; top: calc(var(--header-h) + 24px); }
	.gs-sets { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
}

@media (min-width: 960px) {
	.section { padding-block: 80px; }
	.cats { padding-top: 32px; }
	.best { padding-top: 24px; }
	.reviews { padding-top: 16px; }
	.section-head { margin-bottom: 28px; }
	.hero { padding-block: 56px 72px; }
	.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
	.hero-lead { font-size: 18.5px; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
	.gs-sets-list .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.band { padding-block: 80px; }
	.band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
	.tones-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
	.why-row { padding-block: 32px; }
	.faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
	.closing { padding-bottom: 80px; }
	.closing-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 44px 48px; }
	.woocommerce div.product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; row-gap: 8px; align-items: start; margin-top: 12px; }
	.woocommerce div.product div.images { grid-row: span 2; position: sticky !important; top: calc(var(--header-h) + 24px); }
	.woocommerce div.product div.summary, .woocommerce div.product .product-details { grid-column: 2; }
	.footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; padding-bottom: 40px; }
	.footer-brand { grid-column: auto; }
	.footer-col { border: 0; }
	.footer-col summary { pointer-events: none; min-height: 0; padding: 0 0 12px; }
	.footer-col summary::after { display: none; }
	.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; }
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.shop-hero.has-photo { padding: 32px 40px; }
}

@media (min-width: 1100px) {
	.cat-grid { gap: 20px; }
}

/* Desktop with a mouse: the second photo shows on hover. */
@media (min-width: 960px) and (hover: hover) {
	.woocommerce ul.products li.product:hover .card-media.has-alt .card-img-alt { opacity: 1; }
	.woocommerce ul.products li.product:hover .card-media:not(.has-alt) img { transform: scale(1.03); }
}

/* The header becomes the desktop one when the menu fits. */
@media (min-width: 1024px) {
	:root { --header-h: 76px; }
	body, body.single-product { padding-bottom: 0; }
	.only-mobile { display: none !important; }
	.main-nav.only-desktop { display: flex !important; }
	.icon-btn.only-desktop { display: inline-grid !important; }
	.admin-bar .site-header { top: 32px; }
	.header-row { gap: 24px; }
	.brand { justify-self: start; }
	.main-nav { justify-self: center; }
	.toast, body.single-product .toast { bottom: 24px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.main-nav .nav-list a { padding-inline: 9px; font-size: 15.5px; }
	.mega-grid { gap: 22px; padding-inline: 20px; }
}

@media (max-width: 1023px) {
	.header-actions .icon-btn { width: 40px; }
	.header-actions .lang-btn { min-width: 36px; padding: 0 8px; margin-inline-end: 0; }
}

@media (max-width: 380px) {
	.brand-name { font-size: 23px; }
	.brand-mark { width: 30px; height: 30px; }
	.brand-second { display: none; }
	html[lang^="en"] .brand-name { font-size: 20px; }
	.hero-title { font-size: 32px; }
	.cat-body { padding: 10px 12px 12px; }
	.cat-name { font-size: 15.5px; }
	.band-row { gap: 10px; }
	.tone-tips li { padding-inline-start: 46px; }
}

/* Touch screens: every control is at least 44px (scoped, so nothing hidden comes back). */
@media (pointer: coarse) {
	.lang-btn { height: 44px; min-width: 44px; }
	.chip, .link-more, .size-guide-link, .note-card-link, .woocommerce-account .woocommerce-MyAccount-navigation li a { min-height: 44px; }
	.filter-chip, .occ-chips a, .drawer-occ a, .summary-kicker { min-height: 44px; }
	.header-actions .icon-btn, .mega-toggle { width: 44px; min-height: 44px; }
	.header-actions .lang-btn { min-width: 44px; height: 44px; }
	.demo-bar-close { width: 44px; height: 44px; }
	.footer-col li a, .footer-legal a, .demo-bar a, .breadcrumb a, .fold-links a { display: inline-flex; align-items: center; min-height: 44px; }
	.announce-link { min-height: 44px; } /* no display here: phones hide this link above */
	.footer-col ul { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
	.cat-card:hover .cat-img img, .woocommerce ul.products li.product:hover .card-media img { transform: none !important; }
}

/* English pages: Latin text sits a little smaller and tighter. */
html[lang^="en"] body { font-size: 16px; line-height: 1.65; }
html[lang^="en"] .hero-title { line-height: 1.15; }