/*
Theme Name: Ghazl
Theme URI: https://seifweb.com
Author: SeifWeb
Author URI: https://seifweb.com
Description: متجر أونلاين لاستوديو مشغولات يدوية وكروشيه على WooCommerce: حقائب كروشيه، وقطع للأطفال والمواليد، وأوشحة ومحبوكات، وديكور يدوي، وخيوط وأدوات، ومجموعات وورش نهاية الأسبوع، مع اختيار اللون والمقاس بأزرار وإضافة سريعة بالكمية، واختيار يوم التوصيل وموعد مدته ساعتان، ودليل للعناية بالمشغولات اليدوية. عربي أولًا ومصمَّم للهاتف. An online shop for a handmade and crochet studio on WooCommerce — colour and size as option buttons, quick add with quantity, a delivery day and two-hour slot, weekend workshops and a care guide for handmade pieces — 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: ghazl
Tags: e-commerce, rtl-language-support, custom-logo, custom-menu
*/

/* ---------- Tokens: a calm dusty clay rose, off-white, a warm light grey and charcoal; no second strong colour.
   --brand-dark carries brand-coloured text on the light tints (contrast over 4.5:1 on every background used). ---------- */
:root {
	--brand: #9a5b4f;
	--brand-dark: #7e463b;
	--brand-soft: #f6eeeb;
	--brand-line: #e6d3cd;
	--ink: #2a2422;
	--ink-2: #4a413d;
	--muted: #6b605b;
	--line: #ebe5e1;
	--line-2: #d9d0ca;
	--bg: #fbf9f7;
	--panel: #f3efeb;
	--price: #7e463b;
	--on-brand: #ffffff;
	--on-brand-muted: #fdf3f0;
	--footer: #2b2523;
	--on-dark-muted: #d9cfca;
	--radius: 16px;
	--radius-sm: 12px;
	--pill: 999px;
	--shadow: 0 6px 20px rgba(42, 36, 34, .07);
	--font: "Rubik", "Segoe UI", Tahoma, Arial, sans-serif;
	--gutter: 16px;
	--maxw: 1200px;
	--tabbar-h: 62px;
	--sticky-top: 120px;
}

/* ---------- 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: 17.5px; 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: 600; line-height: 1.5; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.site-footer :focus-visible, .topbar :focus-visible, .toast :focus-visible, .contact-card :focus-visible, .cta :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-sm); }
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* A section reached by a link (home#care) stops below the sticky header. */
section[id] { scroll-margin-top: var(--sticky-top); }
.icon { flex: none; }
.muted { color: var(--muted); }
/* Directional icons: the chevron points to "forward", the arrows of "see all" and of the care guide's lines too. */
[dir="rtl"] .icon-chevron { transform: scaleX(-1); }
[dir="ltr"] .link-more .icon-arrow, [dir="ltr"] .care-line .icon-arrow, [dir="ltr"] .check-link .icon-arrow { transform: scaleX(-1); }

/* ---------- 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(--pill);
	font-family: var(--font); font-weight: 600; font-size: 16.5px; 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, .button .icon { width: 19px; height: 19px; }
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--brand-dark); color: #fff; }
.btn-primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce button.single_add_to_cart_button { background: var(--brand); color: #fff; }
.btn-primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce button.single_add_to_cart_button:hover { background: var(--brand-dark); color: #fff; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-line:disabled { opacity: .5; cursor: default; }
.btn-line:disabled:hover { color: var(--ink); border-color: var(--line-2); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn-block { width: 100%; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15.5px; }
/* 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: var(--pill); background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--panel); color: var(--ink); }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1; }
.lang-btn:hover { border-color: var(--brand); color: var(--brand); }
.lang-btn[lang="en"] { letter-spacing: .04em; }
.lang-link .icon, .lang-foot .icon, .topbar-lang .icon { width: 17px; height: 17px; }
.lang-foot, .topbar-lang { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Demo notice and delivery bar ---------- */
.demo-bar { background: var(--panel); color: var(--ink-2); font-size: 14.5px; border-bottom: 1px solid var(--line); }
.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.55; }
.demo-bar a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.demo-bar-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.demo-bar-close:hover { background: var(--line); }
.demo-bar-close .icon { width: 18px; height: 18px; }
.topbar { background: var(--brand); color: var(--on-brand); font-size: 14.5px; }
.topbar-row { display: flex; align-items: center; gap: 8px 24px; min-height: 38px; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-width: 0; line-height: 1.5; }
.topbar-note .icon { width: 17px; height: 17px; }
.topbar-links { display: none; align-items: center; gap: 20px; margin-inline-start: auto; }
.topbar-links a { color: var(--on-brand-muted); white-space: nowrap; }
.topbar-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.promo-bar { background: var(--ink); color: #fff; font-size: 14.5px; text-align: center; }
.promo-bar-inner { display: flex; align-items: center; justify-content: center; min-height: 38px; padding-block: 4px; }
.promo-bar p { margin: 0; font-weight: 600; line-height: 1.5; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { box-shadow: var(--shadow); }
.header-row {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu brand actions" "search search search";
	align-items: center; gap: 6px 8px; padding-block: 6px 10px;
}
.menu-btn { grid-area: menu; }
.header-row > .brand { grid-area: brand; justify-self: start; }
.header-search { grid-area: search; min-width: 0; }
.header-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; justify-self: end; }
.header-actions .account-btn { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.brand:hover { color: var(--ink); }
.brand-logo { max-height: 44px; width: auto; }
.brand-mark { width: 36px; height: 36px; flex: none; color: var(--brand); }
.brand-text { display: grid; line-height: 1; min-width: 0; }
.brand-name { font-weight: 600; font-size: 26.5px; line-height: 1.15; white-space: nowrap; }
.brand-other { font-weight: 400; font-size: 12px; letter-spacing: .2em; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.brand-other[lang="en"] { text-transform: uppercase; }
html[lang^="en"] .brand-name { letter-spacing: .02em; font-size: 24px; }
html[lang^="en"] .brand-other { letter-spacing: 0; font-size: 13px; }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.cart-btn:hover { color: var(--ink); }
.cart-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); }
.cart-btn:hover .cart-icon { background: var(--brand-soft); }
.cart-icon .icon { width: 22px; height: 22px; }
.ghazl-cart-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pill); background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.ghazl-cart-count.is-empty { display: none; }
.cart-btn .cart-sum { display: none; }
.cart-sum-label { font-size: 13px; color: var(--muted); }
.ghazl-cart-total { font-weight: 600; font-size: 16.5px; white-space: nowrap; }

/* Product search */
.gzl-search { position: relative; display: flex; align-items: stretch; min-height: 46px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--pill); transition: border-color .2s, background-color .2s; }
.gzl-search:focus-within { border-color: var(--brand); background: #fff; }
.gzl-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 18px; outline: none; font-size: 17.5px; text-overflow: ellipsis; }
.gzl-search input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.gzl-search .search-submit { display: inline-grid; place-items: center; flex: none; width: 46px; margin: 3px; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; }
.gzl-search .search-submit:hover { background: var(--brand-dark); }
.gzl-search .search-submit .icon { width: 20px; height: 20px; }

/* The category row (desktop) */
.header-nav { display: none; border-top: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 18px; min-height: 50px; }
.main-nav { min-width: 0; }
.nav-list, .drawer-list, .drawer-cats { list-style: none; margin: 0; padding: 0; }
.main-nav .nav-list { display: flex; flex-wrap: wrap; gap: 2px; }
.main-nav .nav-list a { position: relative; display: block; padding: 12px; font-weight: 400; font-size: 16.5px; color: var(--ink-2); white-space: nowrap; }
.main-nav .nav-list a:hover, .main-nav .current-menu-item > a { color: var(--brand); }
.main-nav .current-menu-item > a { font-weight: 600; }
.main-nav .nav-list a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform .2s; }
.main-nav .nav-list a:hover::after, .main-nav .current-menu-item > a::after { transform: scaleX(1); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 15.5px; color: var(--muted); white-space: nowrap; }
.nav-phone .icon { width: 18px; height: 18px; color: var(--brand); }
.nav-phone [dir="ltr"] { font-weight: 600; color: var(--ink); }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(42, 36, 34, .45); opacity: 0; transition: opacity .25s; }
.drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(88vw, 360px); background: #fff; 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-body { flex: 1; overflow: auto; padding: 6px var(--gutter) 12px; }
.drawer-title { margin: 16px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.drawer-cats a { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 17px; }
.drawer-cats .icon { width: 22px; height: 22px; color: var(--brand); }
.drawer-list a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px; }
.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; }

/* ---------- Sections ---------- */
.section { padding-block: 48px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px; }
.section-head > * { min-width: 0; }
.section-head > .link-more { flex-shrink: 0; } /* the title wraps first, the link never spills past the edge (English on 360 px phones) */
.section-head h2, .section-title h2 { font-size: clamp(24px, 5.4vw, 31px); margin: 0; }
.section-note { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.head-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.link-more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; font-size: 16px; white-space: nowrap; color: var(--brand-dark); }
.link-more .icon { width: 18px; height: 18px; }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.rail-nav { display: none; gap: 8px; }
.rail-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.rail-btn:hover { border-color: var(--brand); color: var(--brand); }
.rail-btn .icon { width: 18px; height: 18px; }
.rail-btn:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .rail-btn:not(.is-next) .icon-chevron { transform: none; }
[dir="ltr"] .rail-btn:not(.is-next) .icon-chevron { transform: scaleX(-1); }
.eyebrow { display: inline-block; font-size: 15.5px; font-weight: 600; color: var(--brand-dark); margin-bottom: 8px; }

/* ---------- Home: hero ---------- */
.hero { background: var(--panel); padding-block: 28px 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.hero-text { min-width: 0; }
.hero-title { font-size: clamp(33px, 7.4vw, 50.5px); line-height: 1.45; margin: 0 0 14px; max-width: 15ch; }
.hero-lead { font-size: 18px; color: var(--ink-2); max-width: 520px; margin-bottom: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hero-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--muted); }
.hero-notes li { display: flex; align-items: center; gap: 10px; }
.hero-notes .icon { width: 19px; height: 19px; color: var(--brand); }
.hero-media { min-width: 0; }
.hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: var(--line); }

/* ---------- Home: categories ---------- */
/* Two by two on phones (an odd last tile spans the row); four in a row on tablets with a short last row centred; one row on desktop. */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.cat-grid li { position: relative; min-width: 0; }
.cat-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cat-tile { display: grid; gap: 2px; color: var(--ink); }
.cat-tile:hover { color: var(--ink); }
.cat-media { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--panel); margin-bottom: 10px; }
.cat-grid li:last-child:nth-child(odd) .cat-media { aspect-ratio: 2 / 1; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-media .icon { width: 40px; height: 40px; color: var(--brand); }
.cat-tile:hover .cat-media img { transform: scale(1.03); }
.cat-name { font-weight: 600; font-size: 17.5px; line-height: 1.45; }
.cat-count { font-size: 14.5px; color: var(--muted); }

/* ---------- Home: the new pieces, best sellers ---------- */
.fresh { background: var(--panel); }
/* When a band above is missing, two sections with the same background never add two full paddings. */
.cats + .best, .reviews + .faq { padding-top: 0; }

/* ---------- Product grid and cards (WooCommerce) ---------- */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 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 {
	position: relative; display: flex; flex-direction: column; width: auto !important; min-width: 0; margin: 0 !important; padding: 10px; float: none !important; clear: none !important;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: start; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.woocommerce ul.products li.product:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; min-width: 0; }
.card-media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.woocommerce ul.products li.product .card-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; margin: 0; border-radius: 0; transition: transform .4s ease; }
.woocommerce ul.products li.product:hover .card-media .card-img { transform: scale(1.03); }
.woocommerce ul.products li.product .card-media .card-img-2 { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.card-badges { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
.woocommerce .card-badges .onsale, .woocommerce ul.products li.product .card-badges .onsale {
	position: static; margin: 0; min-width: 0; min-height: 0; padding: 2px 9px; line-height: 1.6; border-radius: var(--pill);
	background: var(--brand-soft); color: var(--brand-dark); font-size: 14px; font-weight: 600; direction: ltr;
}
.badge-new { display: inline-block; padding: 2px 9px; border-radius: var(--pill); background: #fff; color: var(--brand-dark); font-size: 13px; font-weight: 600; line-height: 1.6; }
.card-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.card-made { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 8px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; font-size: 13px; line-height: 1.8; }
.card-made .icon { width: 13px; height: 13px; }
.card-made > span { min-width: 0; overflow-wrap: anywhere; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em;
	font-family: var(--font); font-size: 16.5px; font-weight: 600; line-height: 1.5; padding: 0; margin: 4px 0 6px; color: var(--ink);
}
.woocommerce ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--price); font-weight: 600; font-size: 17.5px; margin: 0; line-height: 1.45; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: 14.5px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--price); }
.price-from { font-size: 14px; font-weight: 400; color: var(--muted); }
.unit-price { display: block; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 1px; }
.unit-price .amount { font-weight: 400; }
.card-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; min-width: 0; }
.card-pick { position: relative; display: block; flex: 1 1 100%; min-width: 0; }
.card-pick select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 40px; padding-block: 0; padding-inline: 14px 32px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; font-size: 15.5px; color: var(--ink); text-overflow: ellipsis; cursor: pointer; }
.card-pick select:hover { border-color: var(--brand); }
.card-pick .icon { position: absolute; top: 50%; inset-inline-end: 11px; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.qty-step { display: flex; align-items: center; flex: 1 1 100%; min-width: 0; height: 40px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; }
.qty-btn { display: grid; place-items: center; flex: none; width: 38px; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--pill); }
.qty-btn:hover { background: var(--panel); color: var(--brand); }
.qty-btn .icon { width: 18px; height: 18px; }
.qty-input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font-weight: 600; font-size: 16.5px; -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce ul.products li.product .card-add, .woocommerce ul.products li.product .card-options { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 100%; min-height: 40px; margin: 0; padding: 0 12px; font-size: 16px; border-radius: var(--pill); }
.woocommerce ul.products li.product .card-options { background: #fff; color: var(--brand); border-color: var(--brand); }
.woocommerce ul.products li.product .card-options:hover { background: var(--brand); color: #fff; }
.woocommerce ul.products li.product .card-add.loading { opacity: .65; pointer-events: none; }
.woocommerce ul.products li.product .card-add.added { background: var(--brand-dark); }
.woocommerce ul.products li.product .card-add.is-unavailable { background: var(--panel); color: var(--muted); border-color: var(--line-2); cursor: not-allowed; }
.woocommerce ul.products li.product .card-add.loading::after, .woocommerce ul.products li.product .card-add.added::after { display: none !important; }
.woocommerce ul.products li.product a.added_to_cart { display: none; }
.woocommerce .star-rating { display: none; }
/* A wide card puts the quantity and the add button on one line (narrow ones stack them). */
.woocommerce ul.products li.product { container-type: inline-size; }
@container (min-width: 210px) {
	.card-buy { flex-wrap: wrap; }
	.qty-step { flex: 1 1 0; }
	.woocommerce ul.products li.product .card-add { flex: 1 1 0; padding: 0 12px; }
}

/* Rows of four (the best sellers, related products): two by two until there is room for four. */
.best-products .woocommerce ul.products, .woocommerce div.product .related ul.products, .woocommerce div.product .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Carousels: one row that scrolls (buttons on desktop, a swipe on phones) */
.rail-products { min-width: 0; }
.rail-products .woocommerce ul.products {
	grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 12px) / 1.7); overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1) !important; padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
}
.rail-products .woocommerce ul.products::-webkit-scrollbar { display: none; }
.rail-products .woocommerce ul.products li.product { scroll-snap-align: start; }

/* ---------- Home: the weekend workshops ---------- */
.workshops { background: var(--brand-soft); }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.ws-media { min-width: 0; }
.ws-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: var(--panel); }
.ws-media > .icon { width: 64px; height: 64px; color: var(--brand); }
.ws-text { min-width: 0; }
.ws-text h2 { font-size: clamp(24px, 5.4vw, 33px); }
.ws-lead { color: var(--ink-2); max-width: 540px; }
.ws-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; color: var(--ink-2); }
.ws-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-facts .icon { width: 19px; height: 19px; color: var(--brand-dark); }
.ws-list { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ws-item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--brand-line); border-radius: var(--radius); background: #fff; min-width: 0; color: var(--ink); }
.ws-thumb { flex: none; width: 64px; }
.ws-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.ws-info { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; line-height: 1.5; }
.ws-name { font-weight: 600; font-size: 16.5px; color: var(--ink); }
.ws-name:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.ws-price { font-weight: 600; font-size: 16px; color: var(--price); }
.ws-price del { color: var(--muted); font-weight: 400; font-size: 14.5px; }
.ws-price ins { text-decoration: none; }
.ws-price .price-from { font-size: 14px; }

/* ---------- Home: why Ghazl ---------- */
.why { border-block: 1px solid var(--line); background: #fff; }
.why-row { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding-block: 26px; }
.why-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.why-item .icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.why-item span { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.why-item strong { font-weight: 600; font-size: 16.5px; color: var(--ink); }

/* ---------- Home: the care guide band ---------- */
.care-band { background: var(--panel); }
.care-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.care-text { min-width: 0; }
.care-text .btn { margin-top: 18px; }
.care-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.care-lines li { position: relative; min-width: 0; }
.care-line { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); transition: border-color .2s; }
.care-line:hover { border-color: var(--brand); color: var(--ink); }
.care-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.care-mark .icon { width: 21px; height: 21px; }
.care-line-text { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-width: 0; line-height: 1.5; }
.care-line-text strong { font-weight: 600; font-size: 17px; }
.care-line-text small { font-size: 14.5px; color: var(--muted); }
.care-line > .icon-arrow { width: 18px; height: 18px; color: var(--brand); }

/* ---------- Home: reviews ---------- */
.review-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.review { margin: 0; padding: 24px; border-radius: var(--radius); background: var(--panel); min-width: 0; color: var(--ink); }
.review blockquote { margin: 0 0 16px; }
.review blockquote p { margin: 0; color: var(--ink-2); font-size: 17px; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review figcaption > span:last-child { display: grid; line-height: 1.5; font-size: 14.5px; color: var(--muted); }
.review figcaption strong { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.review-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--brand-dark); font-weight: 600; font-size: 1.6rem; line-height: 1; }

/* ---------- Questions (home and the questions page) ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.faq-grid > .section-title { min-width: 0; }
.faq-grid .link-more { margin-top: 8px; }
.faq-list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); min-width: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding-block: 12px; cursor: pointer; font-weight: 600; font-size: 17.5px; line-height: 1.55; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 20px; height: 20px; color: var(--brand); transition: transform .2s; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--brand); }
.faq-answer { padding-bottom: 16px; color: var(--ink-2); font-size: 16.5px; max-width: 70ch; }
.faq-answer p { margin: 0; }
.faq-page .faq-list { max-width: 820px; margin-bottom: 28px; }
.faq-more-text { max-width: 820px; }
.faq-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 28px 0 0; padding: 18px 20px; border-radius: var(--radius); background: var(--panel); max-width: 820px; font-weight: 600; }

/* ---------- Home: closing call to action ---------- */
.cta { background: var(--brand); color: var(--on-brand); }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 48px; align-items: center; }
.cta-text { min-width: 0; }
.cta h2 { color: #fff; font-size: clamp(26.5px, 5.6vw, 35px); margin-bottom: 8px; }
.cta p { margin: 0; color: var(--on-brand-muted); max-width: 560px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Shop pages ---------- */
.shop-wrap { padding-block: 14px 56px; }
.breadcrumb, .woocommerce .woocommerce-breadcrumb { font-size: 14.5px; color: var(--muted); margin: 0 0 10px; }
.breadcrumb a, .woocommerce .woocommerce-breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { margin-inline: 6px; opacity: .6; }
.shop-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 16px; padding: 18px; border-radius: var(--radius); background: var(--panel); }
.shop-head.has-photo { grid-template-columns: minmax(0, 1fr) 96px; }
.shop-head-text { min-width: 0; }
.shop-title { font-size: clamp(26.5px, 6vw, 37.5px); margin: 0 0 4px; }
.shop-lead { color: var(--ink-2); font-size: 16.5px; max-width: 680px; }
.shop-lead p { margin: 0; }
.shop-head-media { min-width: 0; }
.shop-head-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.shop-main, .shop-side { min-width: 0; }
.side-box { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.side-toggle { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; cursor: pointer; font-weight: 600; font-size: 16.5px; }
.side-toggle::-webkit-details-marker { display: none; }
.side-toggle::after { content: "+"; margin-inline-start: auto; font-size: 22px; font-weight: 400; color: var(--muted); }
.side-box[open] .side-toggle::after { content: "–"; }
.side-toggle .icon { width: 19px; height: 19px; color: var(--brand); }
.filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--pill); background: var(--brand); color: #fff; font-size: 13px; }
.side-body { padding: 0 16px 16px; }
.side-title { margin: 16px 0 8px; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.side-cats ul { list-style: none; margin: 0; padding: 0; }
.side-cats a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 16.5px; color: var(--ink-2); }
.side-cats a > span:first-of-type { flex: 1; min-width: 0; }
.side-cats .icon { width: 20px; height: 20px; color: var(--brand); }
.side-cats a:hover { background: var(--panel); color: var(--brand-dark); }
.side-cats a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.side-count { flex: none; min-width: 26px; padding: 0 7px; border-radius: var(--pill); background: var(--panel); font-size: 13px; color: var(--muted); text-align: center; line-height: 22px; }
.side-sub { padding-inline-start: 30px !important; }
.side-sub a { min-height: 38px; font-size: 15.5px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; font-size: 15px; color: var(--ink-2); }
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 36, 34, .28); }
.filter-chip.is-active .swatch { box-shadow: 0 0 0 1.5px #fff; }
.filter-clear { display: inline-block; margin-top: 16px; font-size: 15.5px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: var(--pill); border: 1px solid var(--line-2); background: #fff; font-size: 15.5px; font-weight: 400; 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); font-weight: 600; }
.chip.is-offer:not(.is-active) { color: var(--brand-dark); border-color: var(--brand-line); }
.woocommerce .woocommerce-result-count { margin: 0 0 10px; font-size: 14.5px; 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 18px; padding-inline-end: 42px; border: 1px solid var(--line-2); border-radius: var(--pill);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a413d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 16px center / 18px; font-size: 15.5px; cursor: pointer; width: 100%;
}
[dir="ltr"] .woocommerce .woocommerce-ordering select { background-position: right 16px 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(--pill); border: 1px solid var(--line-2); background: #fff; padding: 0 12px; }
.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: #fff !important; color: var(--ink) !important; padding: 14px 18px !important; margin: 0 0 18px !important; list-style: none; }
.woocommerce-message { border-color: var(--brand-line) !important; background: var(--brand-soft) !important; }
.woocommerce-error { border-color: #e6c3bc !important; background: #fcf2f0 !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 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; 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; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { border-radius: 20px; overflow: hidden; background: var(--panel); }
.woocommerce div.product div.images img { background: var(--panel); }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 68px !important; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--radius-sm); opacity: .55; border: 1px solid var(--line); }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--brand); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 12px; background: rgba(255, 255, 255, .96); border-radius: 50%; }
[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: 3px 12px; line-height: 1.6; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-dark); font-size: 15.5px; font-weight: 600; direction: ltr; }
[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: 8px; padding: 2px 12px; border-radius: var(--pill); background: var(--brand-soft); font-size: 14.5px; font-weight: 600; color: var(--brand-dark); }
.summary-kicker:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce div.product .product_title { font-size: clamp(26.5px, 5.6vw, 35px); margin-bottom: 6px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--price); font-size: 26.5px; font-weight: 600; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 2px; }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--muted); font-size: 17.5px; font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: var(--price); text-decoration: none; }
.woocommerce div.product p.price .price-from { font-size: 15.5px; }
.summary-unit { margin: 0 0 12px; }
.summary-unit .unit-price { font-size: 15.5px; }
.woocommerce div.product .woocommerce-variation-price .unit-price { font-size: 15px; }
.woocommerce-product-details__short-description { color: var(--ink-2); font-size: 17.5px; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 20px 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: 12px; border: 0; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 10px; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: start; line-height: 1.55; }
.woocommerce div.product form.cart .variations label { font-weight: 600; font-size: 16px; }
.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(--line-2); border-radius: var(--pill); padding: 0 16px; width: 100%; background: #fff; }
.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 { display: flex; flex-wrap: wrap; gap: 8px; }
.option-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 64px; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line-2); background: #fff; font-weight: 400; font-size: 16px; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.option-btn:hover { border-color: var(--brand); }
.option-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand); }
/* The colours of «اللون» get a small dot (main.js writes each button's value). */
.option-btn[data-value="beige"] { --sw: #d8c6a8; }
.option-btn[data-value="white"] { --sw: #ffffff; }
.option-btn[data-value="light-pink"] { --sw: #efcfcf; }
.option-btn[data-value="olive"] { --sw: #6f7148; }
.option-btn[data-value="grey"] { --sw: #a19c98; }
.option-btn[data-value="beige"]::before, .option-btn[data-value="white"]::before, .option-btn[data-value="light-pink"]::before, .option-btn[data-value="olive"]::before, .option-btn[data-value="grey"]::before {
	content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(42, 36, 34, .28);
}
.option-btn:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
form.cart.needs-option .variations label { color: var(--brand); }
form.cart.needs-option .option-buttons { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius-sm); }
.woocommerce div.product form.cart .reset_variations { font-size: 14.5px; color: var(--muted); display: inline-block; margin-top: 8px; }
.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: 72px; min-height: 52px; border: 1px solid var(--line-2); border-radius: var(--pill); text-align: center; background: #fff; font-weight: 600; font-size: 17.5px; }
.qty-wrap { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--line-2); border-radius: var(--pill); background: #fff; }
.woocommerce .qty-wrap .qty { width: 52px; min-height: 0; height: 100%; border: 0; border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.qty-wrap .qty::-webkit-outer-spin-button, .qty-wrap .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-wrap .qty-btn { width: 46px; }
.woocommerce div.product form.cart .button { flex: 1 1 180px; min-height: 52px; font-size: 17.5px; }
.promise { list-style: none; padding: 16px; margin: 0 0 18px; display: grid; gap: 10px; border-radius: var(--radius); background: var(--panel); }
.promise li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.65; }
.promise li span { min-width: 0; }
.promise .icon { color: var(--brand); width: 21px; height: 21px; margin-top: 1px; }
.details-list { margin: 0 0 18px; border-top: 1px solid var(--line); }
.detail { border-bottom: 1px solid var(--line); }
.detail summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 600; font-size: 16.5px; }
.detail summary::-webkit-details-marker { display: none; }
.detail summary .icon { width: 19px; height: 19px; color: var(--brand); transition: transform .2s; }
.detail[open] summary .icon { transform: rotate(45deg); }
.detail-body { padding-bottom: 14px; font-size: 16px; color: var(--ink-2); }
.detail-body ul { margin: 0; padding-inline-start: 1.2em; }
.detail-body li { margin-bottom: 4px; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 8px; 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: 600; font-size: 17.5px; 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: 760px; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 18.5px; margin-top: 1.2em; }
.woocommerce div.product .woocommerce-tabs .panel ul, .woocommerce div.product .woocommerce-tabs .panel ol { padding-inline-start: 1.3em; }
.woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; margin-top: 22px; min-width: 0; }
.woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: 24px; margin-bottom: 16px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; padding: 12px 14px; min-height: 48px; font-size: 17.5px; }
.woocommerce form .form-row label { font-weight: 400; }

/* 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: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(42, 36, 34, .07); }
.buybar-info { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.buybar-name { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar-price { font-weight: 600; font-size: 17.5px; color: var(--price); }
.buybar-price del { color: var(--muted); font-weight: 400; font-size: 13px; }
.buybar-price ins { text-decoration: none; }
.buybar-price .price-from { font-size: 13px; }
.buybar .btn { flex: 0 0 auto; min-height: 46px; padding: 0 18px; }
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 20px; border-radius: var(--pill); background: var(--ink); color: #fff; font-weight: 400; 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: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.single-product .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ---------- Pages, cart, checkout, account ---------- */
.page-wrap { padding-block: 18px 56px; }
.page-wrap.narrow { max-width: 820px; }
.page-head h1 { font-size: clamp(28.5px, 6.4vw, 39.5px); margin-top: 4px; }
.page-lead { color: var(--ink-2); max-width: 680px; }
.entry { font-size: 17.5px; min-width: 0; }
.is-text-page .entry { max-width: 820px; }
.entry > :first-child { margin-top: 0; }
.entry h2 { font-size: 24px; margin-top: 1.5em; }
.entry h3 { font-size: 20px; margin-top: 1.2em; }
.entry ul, .entry ol { padding-inline-start: 1.3em; }
.entry li { margin-bottom: .35em; }
.entry .wp-block-image { margin: 0 0 1.6em; }
.entry .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
:where(.page-wrap:not(.is-store-page)) .entry a:where(:not(.button):not(.btn):not(.wc-block-components-button)) { 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 !important; }
.entry ul.products a.button { color: #fff; }
.entry ul.products a.button.card-options { color: var(--brand); }
.entry ul.products a.button.card-options:hover { color: #fff; }
.entry figure { margin: 0 0 1.4em; max-width: 100%; overflow-x: auto; }
.entry table { width: 100%; border-collapse: collapse; background: #fff; 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(--panel); font-weight: 600; }
.credits-table { font-size: 15.5px; }
.credits-table small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.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); background: var(--panel); font-size: 16px; 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(--pill) !important; min-height: 52px; font-family: var(--font); font-weight: 600; }
.wc-block-components-button:not(.is-link):hover { background: var(--brand-dark) !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-sm) !important; border-color: var(--line-2) !important; }
.wc-block-components-product-name { font-weight: 600; color: var(--ink) !important; }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; 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-2); border-radius: var(--pill); background: #fff; white-space: nowrap; font-size: 15.5px; 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) !important; background: #fff; padding: 22px !important; margin: 0 0 18px !important; }
.order-next { display: grid; gap: 10px; margin: 0 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.order-next h2 { font-size: 22px; margin: 0; }
.order-next p { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--ink-2); }
.order-next p span { min-width: 0; }
.order-next .icon { color: var(--brand); width: 22px; height: 22px; margin-top: 2px; }
.order-next .order-when { padding: 12px 14px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.empty-state { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding-block: 48px 64px; }
.empty-state > * { min-width: 0; max-width: 100%; }
.empty-state h1 { font-size: clamp(26.5px, 6vw, 35px); margin: 0; }
.empty-state p { color: var(--ink-2); max-width: 520px; margin: 0; }
.empty-state .big { font-size: 79px; font-weight: 600; color: var(--brand); line-height: 1; }
.empty-state .gzl-search { width: 100%; max-width: 520px; margin-top: 6px; }
.empty-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.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); margin-bottom: 10px; }

/* The care guide page */
.guide-intro { max-width: 760px; }
.guide-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.check-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin: 6px 0 22px; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); }
.check-progress-text { margin: 0; font-weight: 600; min-width: 0; }
.check-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: var(--pill); background: #fff; overflow: hidden; }
.check-bar > span { display: block; width: 0; height: 100%; border-radius: var(--pill); background: var(--brand); transition: width .3s ease; }
.check-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.check-group { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.check-group h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; margin: 0 0 8px; }
.check-group-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.check-group-icon .icon { width: 22px; height: 22px; }
.check-items { list-style: none; margin: 0 0 6px; padding: 0; }
.check-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.check-items li:last-child { border-bottom: 0; }
.check-item { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; min-height: 48px; padding-block: 6px; cursor: pointer; line-height: 1.6; }
.check-item input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.check-item span { min-width: 0; }
.check-item input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.check-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-inline-start: 34px; padding: 0 12px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-dark); font-size: 15px; font-weight: 600; line-height: 1.4; }
.check-link:hover { background: var(--brand); color: #fff; }
.check-link .icon { width: 15px; height: 15px; }
.check-note { margin: 22px 0 0; font-size: 16px; color: var(--muted); max-width: 760px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.contact-card { padding: 24px; border-radius: 20px; background: var(--brand); color: var(--on-brand); min-width: 0; }
.contact-card .brand { color: #fff; margin-bottom: 16px; }
.contact-card .brand-mark { color: #fff; --mark-ink: var(--brand); }
.contact-card .brand-other { color: var(--on-brand-muted); }
.contact-card ul { list-style: none; margin: 0 0 20px; 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: 600; font-size: 14.5px; color: var(--on-brand-muted); }
.contact-card .icon { color: #fff; width: 22px; height: 22px; margin-top: 2px; }
.contact-card a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-card .btn-light { color: var(--brand); text-decoration: none; }
.contact-card .btn-light .icon { color: var(--brand); margin-top: 0; }
.contact-card .btn-light:hover { color: var(--brand-dark); }
.contact-card .contact-hint { margin: 14px 0 0; font-size: 15px; color: var(--on-brand-muted); }
.contact-form { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.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: 24px !important; }
.swst-contact .swst-intro { color: var(--muted) !important; }
.swst-contact input:not([type=hidden]), .swst-contact textarea { background: #fff !important; border-color: var(--line-2) !important; border-radius: var(--radius-sm) !important; }
.swst-contact .swst-submit { font-family: var(--font) !important; background: var(--brand) !important; color: #fff !important; border-radius: var(--pill) !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; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--on-dark-muted); padding-top: 44px; font-size: 15.5px; }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { color: #fff; justify-self: start; }
.site-footer .brand:hover { text-decoration: none; }
.site-footer .brand-mark { color: var(--brand); --mark-ink: #fff; }
.site-footer .brand-other { color: var(--on-dark-muted); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; padding-bottom: 20px; }
.footer-brand { grid-column: 1 / -1; padding-bottom: 20px; min-width: 0; }
.footer-brand p { margin: 14px 0 16px; max-width: 420px; }
.footer-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.footer-facts li { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.footer-facts .icon { width: 19px; height: 19px; margin-top: 3px; }
.footer-col { border-top: 1px solid rgba(255, 255, 255, .16); min-width: 0; }
.footer-contact { grid-column: 1 / -1; }
.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: 600; font-size: 16.5px; color: #fff; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--on-dark-muted); }
.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 { min-width: 0; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: 4px; color: #fff; }
.socials { display: flex; gap: 8px; }
.socials a { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.socials a:hover { background: rgba(255, 255, 255, .2); }
.socials .icon { width: 19px; height: 19px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .16); padding-block: 16px; font-size: 14.5px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.site-footer .footer-legal a { color: var(--on-dark-muted); }
.pay-badge { display: inline-flex; align-items: center; gap: 6px; }
.pay-badge .icon { width: 18px; height: 18px; color: #fff; }

/* ---------- 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: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a, .tabbar button { position: relative; display: grid; justify-items: center; gap: 2px; min-height: var(--tabbar-h); padding: 8px 0 6px; font-size: 12.5px; font-weight: 400; color: var(--muted); background: none; border: 0; cursor: pointer; min-width: 0; }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--brand); font-weight: 600; }
.tab-icon { position: relative; display: inline-grid; }
.tabbar .ghazl-cart-count { top: -6px; inset-inline-end: -11px; }

/* ---------- A light fade on first view (the script only adds it below the fold) ---------- */
[data-reveal] { transition: opacity .5s ease, transform .5s ease; }
.reveal-wait { opacity: 0; transform: translateY(12px); }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
	.demo-bar { font-size: 13px; }
	.demo-bar-inner { flex-wrap: wrap; }
	.card-badges { top: 6px; inset-inline-start: 6px; }
	.woocommerce .card-badges .onsale, .badge-new { font-size: 12.5px; padding: 1px 8px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
	.hero-actions .btn { flex: 1 1 auto; }
	.check-progress { grid-template-columns: minmax(0, 1fr); }
	.check-progress .btn { justify-self: start; }
}

@media (max-width: 380px) {
	.brand-name { font-size: 24px; }
	.brand-mark { width: 32px; height: 32px; }
	.brand-other { font-size: 11px; letter-spacing: .16em; }
	html[lang^="en"] .brand-name { font-size: 21px; }
	.header-actions .lang-btn { min-width: 36px; padding: 0 8px; }
	.woocommerce ul.products li.product { padding: 8px; }
	.card-pick select { padding-inline: 12px 28px; }
	.card-pick .icon { inset-inline-end: 9px; }
	.qty-btn { width: 34px; }
	.care-line { padding-inline: 12px; gap: 10px; }
	.check-group { padding: 16px; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 600px) {
	:root { --gutter: 24px; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.rail-products .woocommerce ul.products { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); gap: 16px; }
	.woocommerce .woocommerce-ordering select { width: auto; }
	.shop-main .woocommerce-result-count { float: right !important; line-height: 44px; }
	[dir="rtl"] .shop-main .woocommerce-ordering { float: left !important; }
	[dir="ltr"] .shop-main .woocommerce-result-count { float: left !important; }
	[dir="ltr"] .shop-main .woocommerce-ordering { float: right !important; }
	.shop-main ul.products { clear: both; }
	.shop-head { padding: 22px 26px; }
	.shop-head.has-photo { grid-template-columns: minmax(0, 1fr) 180px; }
	.shop-head-img { aspect-ratio: 3 / 2; }
	.cat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.cat-grid li, .cat-grid li:last-child:nth-child(odd) { grid-column: span 2; }
	.cat-grid li:last-child:nth-child(odd) .cat-media { aspect-ratio: 1 / 1; }
	/* a short last row of three, two or one sits in the middle */
	.cat-grid li:nth-child(4n + 1):nth-last-child(3) { grid-column: 2 / span 2; }
	.cat-grid li:nth-child(4n + 1):nth-last-child(2) { grid-column: 3 / span 2; }
	.cat-grid li:nth-child(4n + 1):last-child { grid-column: 4 / span 2; }
	.why-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 28px; }
	.ws-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-contact { grid-column: auto; }
}

@media (min-width: 760px) {
	.review-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 28px; }
	.contact-card, .contact-form { padding: 32px; }
	.check-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.cta-inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: 56px; }
}

@media (min-width: 960px) {
	.section { padding-block: 80px; }
	.cats + .best, .reviews + .faq { padding-top: 0; }
	.section-head { margin-bottom: 30px; }
	.hero { padding-block: 52px 60px; }
	.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
	.cat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; }
	.cat-grid li, .cat-grid li:last-child:nth-child(odd), .cat-grid li:nth-child(4n + 1):nth-last-child(3), .cat-grid li:nth-child(4n + 1):nth-last-child(2), .cat-grid li:nth-child(4n + 1):last-child { grid-column: auto; }
	.ws-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
	.care-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; }
	.faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; }
	.why-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 32px; }
	.woocommerce div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 12px; }
	.woocommerce div.product div.summary { position: sticky; top: calc(var(--sticky-top) + 16px); }
	.footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 40px; padding-bottom: 40px; }
	.footer-brand { grid-column: auto; padding-bottom: 0; }
	.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; }
}

@media (min-width: 960px) and (hover: hover) {
	.woocommerce ul.products li.product:hover .card-media.has-second .card-img-2 { opacity: 1; }
}

/* The desktop header: search in the row, the category row under it. */
@media (min-width: 1024px) {
	:root { --sticky-top: 130px; }
	body, body.single-product { padding-bottom: 0; }
	.only-mobile { display: none !important; }
	.header-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; gap: 32px; min-height: 76px; padding-block: 10px; }
	.menu-btn { display: none; }
	.header-actions { gap: 10px; }
	.header-actions .lang-btn { display: none; }
	.header-actions .account-btn { display: inline-grid; }
	.cart-btn .cart-sum { display: grid; line-height: 1.35; }
	.header-search .gzl-search { min-height: 48px; max-width: 620px; margin-inline: auto; }
	.header-nav { display: block; }
	.topbar-links { display: flex; }
	.brand-mark { width: 40px; height: 40px; }
	.brand-name { font-size: 28.5px; }
	.rail-nav { display: inline-flex; }
	.rail-products .woocommerce ul.products { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; margin-inline: 0 !important; padding-inline: 0; scroll-padding-inline: 0; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.best-products .woocommerce ul.products, .woocommerce div.product .related ul.products, .woocommerce div.product .upsells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.shop-layout { grid-template-columns: 256px minmax(0, 1fr); gap: 32px; }
	.shop-side { position: sticky; top: calc(var(--sticky-top) + 16px); max-height: calc(100vh - var(--sticky-top) - 32px); overflow-y: auto; scrollbar-width: thin; }
	.side-toggle { pointer-events: none; }
	.side-toggle::after { display: none; }
	.shop-main .chips { display: none; }
	.shop-head.has-photo { grid-template-columns: minmax(0, 1fr) 280px; }
	.toast, body.single-product .toast { bottom: 24px; }
}

/* Between 1024 and 1200 the category row needs the room: the phone link keeps its number only. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.nav-phone > span:not([dir]) { display: none; }
	.main-nav .nav-list a { padding-inline: 10px; }
	.main-nav .nav-list a::after { inset-inline: 10px; }
}

@media (min-width: 1100px) {
	.check-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.shop-main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (min-width: 783px) {
	.admin-bar .site-header { top: 32px; }
}

/* Touch screens: every control is at least 44px. */
@media (pointer: coarse) {
	.lang-btn { height: 44px; min-width: 44px; }
	.chip, .filter-chip, .link-more, .btn-small, .check-link, .woocommerce-account .woocommerce-MyAccount-navigation li a { min-height: 44px; }
	.qty-step, .card-pick select, .woocommerce ul.products li.product .card-add, .woocommerce ul.products li.product .card-options { height: 44px; min-height: 44px; }
	.card-pick select, .qty-input, .woocommerce .quantity .qty { font-size: 17.5px; }
	.gzl-search { min-height: 50px; }
	.gzl-search .search-submit { width: 48px; }
	.qty-btn { width: 44px; }
	.rail-btn { width: 44px; height: 44px; }
	.side-cats a { min-height: 44px; }
	.demo-bar-close { width: 44px; height: 44px; }
	.footer-col li a, .footer-legal a, .demo-bar a, .breadcrumb a, .topbar-links a { display: inline-flex; align-items: center; min-height: 44px; }
	.footer-col ul { gap: 0; }
}

@media (pointer: coarse) and (max-width: 380px) {
	.qty-btn { width: 40px; }
}

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

/* English pages: a little more room for the longer words. */
html[lang^="en"] .hero-title { font-size: clamp(33px, 6.6vw, 48.5px); max-width: 17ch; line-height: 1.25; }
html[lang^="en"] .cat-name { font-size: 16.5px; }