/* Glowshop theme styles — replicates source design tokens. */

:root {
	--gs-accent: #8c462c;
	--gs-link: #1e73be;
	--gs-link-hover: #111111;
	--gs-text: #444444;
	--gs-heading: #111111;
	--gs-bg: #ffffff;
	--gs-topbar-bg: #000000;
	--gs-header-bg: #fbfaf5;
	--gs-btn-bg: #000000;
	--gs-sale-bg: #9a5b45;
	--gs-cat-header-bg: #efeee3;
	--gs-single-bg: #f8f8f8;
	--gs-footer-bg: #f0ecdc;
	--gs-width: 1170px;
	--gs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--gs-radius: 4px;
}

/* ---------- base ---------- */
body.gs-theme {
	font-family: var(--gs-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--gs-text);
	background: var(--gs-bg);
	line-height: 1.6;
	margin: 0;
}
.gs-theme img { max-width: 100%; height: auto; }
.gs-theme a { color: var(--gs-link); text-decoration: none; }
.gs-theme a:hover { color: var(--gs-link-hover); }
.gs-theme h1, .gs-theme h2, .gs-theme h3, .gs-theme h4, .gs-theme h5 { color: var(--gs-heading); font-weight: 600; line-height: 1.3; }
.gs-theme h1 { font-size: 42px; letter-spacing: -1.1px; line-height: 1.2; }
.gs-theme h2 { font-size: 30px; letter-spacing: -0.5px; line-height: 1.25; }
.gs-theme h3 { font-size: 24px; line-height: 1.45; color: #222; }
.gs-theme h4, .gs-theme h5 { font-size: 18px; }
.gs-theme p { margin: 0 0 1em; }

.col-full, .gs-col-full {
	max-width: var(--gs-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.gs-generic-wrap { padding: 40px 20px; box-sizing: border-box; }

/* ---------- buttons ---------- */
.gs-theme .button, .gs-theme button.button, .gs-theme input[type="submit"],
.gs-theme a.button, .gs-theme .single_add_to_cart_button {
	background: var(--gs-btn-bg) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--gs-radius);
	padding: 0.818em 1.416em;
	font-weight: 600;
	font-size: 16px;
	font-family: var(--gs-font);
	cursor: pointer;
	transition: opacity .2s;
	display: inline-block;
	line-height: 1.4;
}
.gs-theme .button:hover { opacity: .88; }

/* ---------- topbar ---------- */
/* Storefront sets `overflow-x: hidden` on body/.site, which silently disables
   `position: sticky` on descendants (computed value becomes `hidden auto`).
   `overflow-x: clip` contains horizontal overflow the same way but keeps
   sticky working, so the header can pin to the top on every breakpoint. */
.gs-theme, .gs-theme body, body.gs-theme { overflow-x: clip; }
.gs-theme .site, #page.hfeed.site { overflow-x: clip; }

.gs-header-wrapper { position: sticky; top: 0; z-index: 999; }
/* subtle lift once the header is actually pinned (set by JS) */
.gs-header-wrapper.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.topbar-wrapper { background: var(--gs-topbar-bg); }
.top-bar { color: #fff; font-size: 14px; padding: 8px 0; }
.top-bar-center { text-align: center; }
.top-bar-center p { margin: 0; color: #fff; }
.top-bar-center a { color: #fff; }

/* ---------- header ---------- */
.gs-theme .site-header { margin-bottom: 0 !important; }
.gs-theme #masthead.site-header { margin-bottom: 0 !important; }
.gs-theme .gs-header-wrapper { margin: 0; }
.site-header { background: var(--gs-header-bg); }
.gs-header-row { display: flex; align-items: center; gap: 28px; padding-top: 20px; padding-bottom: 12px; }
.site-branding { flex: 0 0 auto; }
.gs-theme .gs-header-row .site-branding {
	flex: 0 0 auto !important; width: auto !important; max-width: none !important;
	margin: 0 !important; float: none !important; padding: 0 !important;
}
.gs-logo img { height: 48px; width: auto; display: block; }

/* search: wide input with inline magnifier icon (no visible button) */
.gs-header-search { flex: 1 1 auto; max-width: 760px; margin-left: auto; }
.gs-search-form { position: relative; display: flex; align-items: center; }
.gs-search-icon {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	display: inline-flex; color: #6b6b6b; pointer-events: none;
}
.gs-search-form .search-field {
	width: 100%; padding: 11px 16px 11px 44px; border: 1px solid #ddd9d0; border-radius: 10px;
	font-size: 15px; font-family: var(--gs-font); background: #fff; color: #333; outline: none;
}
.gs-search-form .search-field:focus { border-color: #b9b4a8; }
.gs-search-submit {
	position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.gs-header-actions { display: flex; align-items: center; gap: 14px; }
.gs-icon-btn { background: none; border: 0; padding: 6px; cursor: pointer; color: #000; display: none; }
.gs-menu-toggle { background: none; border: 0; padding: 6px; cursor: pointer; color: #000; display: none; align-items: center; }
.gs-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.gs-burger span { display: block; width: 20px; height: 2px; background: #000; }
/* mobile-visible cart (nav row is hidden on mobile) */
.gs-theme .gs-header-actions .gs-cart-btn { display: none !important; }
.gs-theme .gs-header-actions.gs-nav-actions .gs-cart-btn { display: inline-flex !important; }

/* cart button: total + bag icon with count badge */
.gs-theme a.gs-cart-btn {
	display: inline-flex !important; align-items: center; gap: 8px; color: #000 !important;
	white-space: nowrap; position: relative; font-family: var(--gs-font);
}
.gs-theme a.gs-cart-btn:hover { color: #000 !important; }
.gs-theme .gs-cart-amount { color: #000; font-weight: 600; font-size: 15px; }
.gs-theme .gs-cart-bag { position: relative; display: inline-flex; color: #000; }
.gs-theme .gs-cart-bag svg { display: block; }
.gs-theme .gs-cart-badge { position: absolute; right: -6px; bottom: -2px; display: inline-flex; }
.gs-theme .gs-cart-btn .count {
	background: #000; color: #fff; border-radius: 50%; min-width: 16px; height: 16px; line-height: 16px;
	text-align: center; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 3px; box-sizing: border-box;
}

/* kill any parent-theme spacing between header and content */
.gs-theme .site-content, body.gs-theme #content, .gs-theme #page > .site-content {
	margin: 0 !important;
	padding: 0 !important;
}

/* nav row */
.gs-primary-nav { background: var(--gs-header-bg); }
.gs-nav-row { display: flex; align-items: center; min-height: 60px; gap: 20px; }
.gs-menu, .gs-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.gs-menu { display: flex !important; justify-content: flex-start; gap: 26px; align-items: center; height: 100%; }
.gs-nav-actions { margin-left: auto; }
.gs-theme .gs-menu > li > a span, .gs-theme .gs-menu > li > a { white-space: nowrap; }
/* The <li> still spans the full bar so the panel can anchor to it, but only
   the link itself (text height) is a hover/click target — see .gs-menu > li > a
   below. Nothing above/below the text reacts. */
.gs-menu > li { position: relative; display: flex; align-items: center; height: 100%; z-index: 1; }
/* An opened item must outrank its siblings: the panel can be wider than its
   trigger and overlap the neighbouring menus, whose own submenus would
   otherwise paint on top (they are positioned and come later in DOM order). */
.gs-menu > li.gs-open { z-index: 60; }
.gs-menu > li > a {
	display: flex; align-items: center; gap: 5px; color: #000; font-weight: 600; font-size: 15px;
	letter-spacing: -0.1px; padding: 0; margin: 0; line-height: 24px; text-transform: none;
}
.gs-menu > li > a:hover, .gs-menu > li > a:hover span { color: var(--gs-accent); }
.caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }

/* dropdowns — opened via JS (.gs-open) so the trigger area stays exactly on the link.
   The wrapper itself is transparent and only carries geometry + pointer events;
   the visible surface + shadow live on `.container` so the transparent bridge
   above it does not paint a strip under the nav bar. */
.sub-menu-wrapper {
	display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	background: transparent; min-width: 220px;
	padding: 0;
	opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
	z-index: 999;                     /* top of this item's stacking context */
}
/* The li is centred in the bar, so its bottom sits (barH - linkH)/2 above the
   bar's bottom edge. The panel should *look* like it hangs off the bar's
   bottom edge, but the pointer must be able to travel from the link text down
   into the panel without crossing a dead strip.

   The reference site (thymeslink.com) has zero gap — its panel top equals the
   link's bottom. We get the same continuous path while keeping the panel's
   visual position under the bar by making the wrapper start at the li's bottom
   and giving it a transparent top "bridge" (padding) of exactly the bar's
   remaining height. The wrapper is therefore adjacent to the trigger, so
   `panel.matches(':hover')` stays true the whole way down, and the visible
   panel still begins at the bar's bottom edge. */
.gs-menu > li > .sub-menu-wrapper {
	top: 100%;
	padding-top: 20px;               /* transparent bridge = bar bottom - li bottom */
}
/* Keep a long panel from running off the left/right viewport edge. `left: 50%`
   centres it under the trigger; these clamps pull it back in when the trigger
   sits near an edge. */
.gs-menu > li > .sub-menu-wrapper { max-width: calc(100vw - 32px); }
.gs-menu > li.gs-open > .sub-menu-wrapper,
.menu-item-has-children:focus-within > .sub-menu-wrapper { opacity: 1; visibility: visible; }
/* `container` is a Storefront layout class with max-width — neutralise it here so
   the panel hugs its content instead of stretching into the neighbouring menus.
   It also carries the visible surface (bg + shadow), so the 20px padding above
   it stays fully transparent while still bridging the pointer. */
.sub-menu-wrapper .container {
	padding: 14px 18px; max-width: none; width: auto; margin: 0;
	background: var(--gs-header-bg);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.sub-menu { position: static; display: block !important; opacity: 1 !important; visibility: visible !important; box-shadow: none; min-width: 0; padding: 0; background: transparent; }
/* rows are only as wide as their text, so the empty area to the right of a short
   label is not part of the link's hit box */
.sub-menu li { position: relative; padding: 6px 0; }
.sub-menu a { color: #323232; font-size: 14px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sub-menu a:hover { color: var(--gs-accent); }

/* level-3: hidden by default, expands in place (accordion) when its parent is hovered/opened */
.gs-menu .sub-menu .sub-menu {
	display: block !important;
	max-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 10px;
	border-left: 1px solid transparent;
	opacity: 0;
	visibility: visible !important;
	transition: max-height .22s ease, opacity .18s ease, margin .22s ease, padding .22s ease;
}
/* Level-3 expansion is driven purely by the `.gs-sub-open` class (set in JS),
   NOT by `:hover`. Using `:hover` let several branches stay expanded at once
   as the pointer moved down a long panel, which pushed the panel past the
   viewport and made the expanded rows overlap one another — clicks in that
   region then landed on the wrong link (or on nothing). One branch at a time. */
.gs-menu .sub-menu .menu-item-has-children.gs-sub-open > .sub-menu {
	max-height: 620px;
	opacity: 1;
	margin: 6px 0 2px;
	padding: 2px 0 2px 10px;
	border-left-color: #e6e2d8;
}
.gs-menu .sub-menu .sub-menu li { padding: 4px 0; }
.gs-menu .sub-menu .sub-menu a { font-size: 13px; color: #555; }
.gs-menu .sub-menu .sub-menu a:hover { color: var(--gs-accent); }
/* rotate caret on open parent for affordance */
.sub-menu .menu-item-has-children > a .caret { transition: transform .2s ease; }
.sub-menu .menu-item-has-children.gs-sub-open > a .caret { transform: rotate(180deg); }

/* ------------------------------------------------------------------
   Make the panel's *dead space* transparent to the pointer.

   Only the actual link text should be clickable. The row padding, the
   gaps between rows and the wrapper's own padding sit inside the panel
   box but are NOT anchors — leaving them hit-testable is what let stray
   clicks in empty panel space land on the menu.

   IMPORTANT: the `auto` restore is scoped to the OPEN panel only.
   A closed panel is `visibility: hidden` but its anchors still occupy
   real screen coordinates, and because the panels can be wider than
   their triggers they overlap each other. Restoring pointer-events on
   *every* panel meant a click at the right edge of the open SHOP BY
   SCENT panel landed on FRASIER FIR's hidden "Heritage" link — the
   "clicking a product jumps to the menu" bug.
   ------------------------------------------------------------------ */
.sub-menu-wrapper .container,
.sub-menu { pointer-events: none; }
/* The wrapper's own box (the transparent 20px bridge above the visible panel)
   must accept the pointer while open, otherwise `panel.matches(':hover')` turns
   false as soon as the cursor leaves the link and the menu closes mid-travel. */
.gs-menu > li.gs-open > .sub-menu-wrapper,
.menu-item-has-children:focus-within > .sub-menu-wrapper { pointer-events: auto; }
.gs-menu > li.gs-open > .sub-menu-wrapper .container,
.gs-menu > li.gs-open > .sub-menu-wrapper .sub-menu,
.menu-item-has-children:focus-within > .sub-menu-wrapper .container,
.menu-item-has-children:focus-within > .sub-menu-wrapper .sub-menu { pointer-events: auto; }
/* anchors are clickable only while their own panel is open */
.gs-menu > li.gs-open > .sub-menu-wrapper a,
.gs-menu > li.gs-open > .sub-menu-wrapper button,
.menu-item-has-children:focus-within > .sub-menu-wrapper a,
.menu-item-has-children:focus-within > .sub-menu-wrapper button { pointer-events: auto; }
/* a closed panel must not intercept anything at all */
.sub-menu-wrapper a,
.sub-menu-wrapper button { pointer-events: none; }

/* the link itself is the only hover target; keep a hairline bridge to the panel */
.gs-menu > li > a { position: relative; z-index: 2; }
/* ---------- mobile drawer ---------- */
.gs-drawer-backdrop, .gs-cart-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; opacity: 0; transition: opacity .2s;
}
.gs-drawer, .gs-cart-drawer {
	position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 88vw); background: #fff; z-index: 1001;
	overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; padding-bottom: 40px;
}
.gs-cart-drawer { left: auto; right: 0; transform: translateX(100%); width: min(420px, 92vw); }
.gs-drawer.is-open, .gs-cart-drawer.is-open { transform: translateX(0); }
.gs-drawer-backdrop.is-open, .gs-cart-backdrop.is-open { opacity: 1; }
.gs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 2; }
.gs-drawer-title { font-weight: 600; font-size: 17px; }
.gs-drawer-close, .gs-cart-drawer-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #000; }
.gs-drawer-search { padding: 12px 18px; border-bottom: 1px solid #eee; }
.gs-drawer-search form { display: flex; gap: 6px; }
.gs-drawer-search .search-field { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: var(--gs-radius); font-family: var(--gs-font); }
.gs-drawer-menu { list-style: none; margin: 0; padding: 8px 0; }
.gs-drawer-menu .gs-drawer-menu { padding-left: 14px; }
.gs-drawer-item { border-bottom: 1px solid #f2f0eb; }
.gs-drawer-item > a, .gs-accordion-btn {
	display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px;
	padding: 13px 18px; color: #111; font-size: 15px; font-weight: 600; background: none; border: 0;
	font-family: var(--gs-font); cursor: pointer; text-align: left;
}
.gs-drawer-item > a:hover, .gs-accordion-btn:hover { color: var(--gs-accent); }
.gs-accordion-panel ul { list-style: none; margin: 0; padding: 0; }
.gs-accordion-panel .gs-drawer-item > a, .gs-accordion-panel .gs-accordion-btn { font-weight: 400; font-size: 14px; padding: 10px 18px; }

/* cart drawer */
.gs-cart-item { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f2f0eb; }
.gs-cart-item img { width: 64px; height: 64px; object-fit: cover; }
.gs-cart-item-title { color: #111; font-weight: 600; font-size: 14px; display: block; }
.gs-cart-item-qty { color: #666; font-size: 13px; }
.gs-cart-subtotal { padding: 14px 18px; font-size: 15px; }
.gs-cart-view, .gs-cart-checkout { display: block; text-align: center; margin: 8px 18px; }
.gs-cart-empty { padding: 24px 18px; }

/* ---------- home ---------- */
.gs-home { overflow-x: hidden; }
.gs-hero-link { display: block; }
.gs-hero-link img { width: 100%; display: block; }
.gs-hero-mobile { display: none; }
.gs-home-section { margin: 0; }
.gs-grid-section { padding: 48px 0; }
.gs-grid-title { text-align: center; font-size: 26px; margin: 0 0 22px; }

.gs-home-grid, .gs-theme ul.products {
	list-style: none; margin: 0; padding: 0; display: grid !important;
	grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.gs-theme .columns-3 ul.products { grid-template-columns: repeat(3, 1fr); }
.columns-4 ul.products, ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.columns-3 ul.products, ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }

/* product card */
.gs-theme li.product {
	background: #fff; text-align: left; margin: 0 !important; width: auto !important; float: none !important;
	display: flex; flex-direction: column;
}
.woocommerce-image__wrapper { position: relative; }
.woocommerce-image__wrapper a { display: block; }
.shoptimizer-plp-image-wrapper { aspect-ratio: 1 / 1; overflow: hidden; background: #f7f6f1; }
.shoptimizer-plp-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
li.product:hover .shoptimizer-plp-image-wrapper img { transform: scale(1.04); }
.onsale, .gs-theme span.onsale {
	position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--gs-sale-bg) !important; color: #fff !important;
	min-width: 46px; min-height: 46px; border-radius: 35px; display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 0 10px; box-sizing: border-box;
}
.woocommerce-card__header { padding-top: 12px; }
.product__categories { margin: 0 0 4px; font-size: 12px; }
.product__categories a { color: #777; text-transform: uppercase; letter-spacing: .3px; font-size: 11px; }
.product__categories a:hover { color: var(--gs-accent); }
.woocommerce-loop-product__title { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 .5em; }
.woocommerce-loop-product__title a { color: var(--gs-heading); }
.woocommerce-loop-product__title a:hover { color: var(--gs-accent); }
li.product .price { display: block; margin: .4em 0 .7em; font-size: 15px; }
.price del { color: #888; margin-right: 6px; }
.price ins { text-decoration: none; color: var(--gs-accent); font-weight: 600; }
li.product .button { width: 100%; text-align: center; margin-top: auto; }

/* headings / tiles */
.gs-heading-section { padding: 34px 0 8px; text-align: center; }
.gs-heading-section .elementor-heading-title { font-size: 30px; margin: 0; }
.gs-tiles { padding: 18px 0 42px; }
.gs-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gs-tile img { width: 100%; display: block; border-radius: 2px; }

/* banners */
.gs-banner { display: block; }
.gs-banner img { width: 100%; display: block; }
.gs-banner-mobile { display: none; }

/* carousel */
.gs-carousel-section { padding: 42px 0; }
.gs-carousel { overflow: hidden; position: relative; }
.gs-carousel-track { display: flex; gap: 20px; transition: transform .5s ease; }
.gs-carousel-slide { flex: 0 0 calc((100% - 40px) / 3); }
.gs-carousel-image { aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 2px; }
.gs-carousel-bullets { display: flex; justify-content: center; gap: 8px; padding-top: 18px; }
.gs-carousel-bullets button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: #d8d3c6; cursor: pointer; padding: 0; }
.gs-carousel-bullets button.is-active { background: var(--gs-accent); }

/* ---------- shop archive (full width, no sidebar) ---------- */
.archive-header { background: var(--gs-cat-header-bg); padding: 22px 0; }
.woocommerce-breadcrumb { font-size: 14px; color: #555; }
.breadcrumb-separator { color: #999; margin: 0 4px; }
.gs-shop-layout { max-width: calc(var(--gs-width) + 60px); margin: 0 auto; padding: 28px 20px 56px; }
.gs-shop-layout .content-area { float: none !important; width: 100% !important; flex: 1; min-width: 0; }
.page-title { font-size: 30px; margin: 0 0 18px; }
.shoptimizer-sorting { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; }
.woocommerce-result-count { margin: 0; font-size: 14px; color: #666; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { padding: 8px 32px 8px 12px; border: 1px solid #ddd; border-radius: var(--gs-radius); font-size: 14px; font-family: var(--gs-font); background: #fff; }
.sorting-end { margin: 26px 0 0; }
.woocommerce-pagination { margin-left: auto; }
.page-numbers { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.page-numbers a, .page-numbers span {
	display: inline-block; min-width: 34px; text-align: center; padding: 6px 10px; border: 1px solid #e3e0d8;
	border-radius: var(--gs-radius); color: #333; font-size: 14px;
	background: #fff;                 /* cancel the parent theme's dark pill */
}
/* The parent theme paints the current page with its own dark background
   (#2c2d33) but inherits a dark text colour, so the number was invisible.
   Give the selected page the site's accent as a filled pill with white text. */
.page-numbers .current,
.page-numbers .current:hover {
	background: var(--gs-accent) !important;
	border-color: var(--gs-accent) !important;
	color: #fff !important;
	font-weight: 600;
}
.page-numbers a:hover { border-color: var(--gs-accent); color: var(--gs-accent); background: #fff; }

/* sidebar widgets */
.widget { margin-bottom: 30px; }
.gamma.widget-title {
	display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
	margin: 0 0 12px; color: #111;
}
.price_slider_amount { display: flex; gap: 8px; align-items: center; }
.price_slider_amount input[type="text"] { width: 70px; padding: 7px 8px; border: 1px solid #ddd; border-radius: var(--gs-radius); font-size: 13px; font-family: var(--gs-font); }
.product_list_widget { list-style: none; margin: 0; padding: 0; }
.product_list_widget li { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f2f0eb; }
.product_list_widget li > a { display: flex; gap: 10px; align-items: center; color: #111; flex: 1; }
.product_list_widget img { width: 56px; height: 56px; object-fit: cover; }
.product_list_widget .product-title { font-size: 13px; font-weight: 600; }
.product_list_widget del { color: #999; font-size: 13px; }
.product_list_widget ins { text-decoration: none; color: var(--gs-accent); font-weight: 600; font-size: 13px; }
.product-categories { list-style: none; margin: 0; padding: 0; }
.product-categories li { padding: 6px 0; border-bottom: 1px solid #f2f0eb; }
.product-categories a { color: #444; font-size: 14px; }
.mobile-filter { display: none; }
.filters.close-drawer { display: none; }

/* ---------- single product ---------- */
.gs-single-product-wrap { background: var(--gs-single-bg); }
.product-details-wrapper {
	max-width: calc(var(--gs-width) + 5.2325em); margin: 0 auto; padding: 34px 20px 60px;
}
.gs-single-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 48px; align-items: start; background: var(--gs-single-bg); }

/* ===== Product gallery: single main image + thumbnail rail ===== */
.woocommerce-product-gallery { background: #fff; position: relative; }
.woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}
.woocommerce-product-gallery.gs-has-thumbs .woocommerce-product-gallery__wrapper {
	grid-template-columns: minmax(0, 1fr) 84px;
	grid-template-areas: "stage thumbs";
}
.gs-gallery-stage {
	grid-area: stage;
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: var(--gs-radius);
}
.gs-gallery-main-link { display: block; position: relative; }
.woocommerce-product-gallery__image img,
.gs-gallery-main-img { width: 100%; height: auto; display: block; }
.gs-gallery-zoom {
	position: absolute; top: 14px; left: 14px;
	width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: #333; background: rgba(255, 255, 255, .82);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	pointer-events: none;
}
.gs-gallery-zoom svg { width: 17px; height: 17px; }
.gs-gallery-thumbs {
	grid-area: thumbs;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 620px;
	overflow-y: auto;
	scrollbar-width: thin;
	padding-right: 2px;
}
.gs-gallery-thumb {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	width: 100%;
	border: 1px solid #e6e6e6;
	border-radius: var(--gs-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
	line-height: 0;
}
.gs-gallery-thumb img { width: 100%; height: auto; display: block; border-radius: inherit; }
.gs-gallery-thumb:hover { border-color: #b5b5b5; }
.gs-gallery-thumb.is-active { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }
.gs-gallery-thumb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.summary .onsale { position: static; display: inline-flex; margin-bottom: 10px; min-width: 0; min-height: 0; padding: 4px 12px; border-radius: 20px; }
.product_title { font-size: 34px; letter-spacing: -0.5px; margin: 0 0 12px; }
.summary > .price { font-size: 24px; display: block; margin-bottom: 8px; }
.stock { font-size: 14px; color: #3a7d44; margin: 0 0 10px; }
.gs-buy-row form.cart { display: flex; gap: 12px; margin: 18px 0 8px; align-items: stretch; }
.gs-buy-row .single_add_to_cart_button { flex: 1; }

/* ===== Quantity stepper (+/-) ===== */
.gs-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #ddd;
	border-radius: var(--gs-radius);
	overflow: hidden;
	background: #fff;
	height: 46px;
}
.gs-qty .gs-qty-btn {
	all: unset;
	box-sizing: border-box;
	width: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #333;
	background: #fafafa;
	transition: background .15s ease, color .15s ease;
	user-select: none;
}
.gs-qty .gs-qty-btn svg { width: 15px; height: 15px; }
.gs-qty .gs-qty-btn:hover { background: #f0f0f0; }
.gs-qty .gs-qty-btn:active { background: #e6e6e6; }
.gs-qty .gs-qty-btn[disabled] { opacity: .38; cursor: not-allowed; }
.gs-qty .gs-qty-minus { border-right: 1px solid #ddd; }
.gs-qty .gs-qty-plus { border-left: 1px solid #ddd; }
.gs-qty .qty,
.gs-buy-row .gs-qty .qty {
	width: 52px;
	border: 0;
	border-radius: 0;
	padding: 0;
	height: 100%;
	text-align: center;
	font-size: 15px;
	font-family: var(--gs-font);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
}
.gs-qty .qty:focus { outline: none; }
.gs-qty .qty::-webkit-outer-spin-button,
.gs-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Variable product: variations table ===== */
.gs-buy-row .variations_form { display: block; width: 100%; margin: 0; }
.gs-buy-row .variations_form .variations {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 0 0 16px;
	table-layout: auto;
}
.gs-buy-row .variations_form .variations tr { display: block; margin-bottom: 14px; }
.gs-buy-row .variations_form .variations th,
.gs-buy-row .variations_form .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
	background: none;
	vertical-align: middle;
}
.gs-buy-row .variations_form .variations .label {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 6px;
	font-weight: 600;
}
.gs-buy-row .variations_form .variations .label label { margin: 0; font-weight: inherit; }
.gs-buy-row .variations_form .value select {
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 38px 0 14px;
	border: 1px solid #ddd;
	border-radius: var(--gs-radius);
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	font-size: 15px;
	font-family: var(--gs-font);
	color: #111;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.gs-buy-row .variations_form .value select:focus { outline: none; border-color: #111; }
.gs-buy-row .variations_form .variations .reset_variations {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	color: #666;
}
.gs-buy-row .variations_form .single_variation_wrap { display: block; margin: 0; }
.gs-buy-row .variations_form .woocommerce-variation.single_variation { margin-bottom: 12px; }
.gs-buy-row .variations_form .woocommerce-variation-price { font-size: 20px; font-weight: 600; }
.gs-buy-row .variations_form .woocommerce-variation-availability .stock { margin: 4px 0 0; }
.gs-buy-row .variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 0;
}
.gs-buy-row .variations_form .woocommerce-variation-add-to-cart .gs-qty { flex: 0 0 auto; }
.gs-buy-row .variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 160px;
	white-space: nowrap;
	min-width: 140px;
}
.gs-buy-row .variations_form .single_add_to_cart_button[disabled],
.gs-buy-row .variations_form .single_add_to_cart_button.disabled {
	opacity: .5;
	cursor: not-allowed;
}
.gs-buy-row .variations_form .woocommerce-variation-add-to-cart.variations_button { display: flex; }

.shoptimizer-product-prevnext { display: flex; gap: 10px; margin-bottom: 12px; }
.shoptimizer-product-prevnext > a {
	position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ddd;
	display: inline-flex; align-items: center; justify-content: center; color: #333; background: #fff;
}
.shoptimizer-product-prevnext .tooltip {
	display: none; position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
	background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 10px; width: 190px; z-index: 20; text-align: center;
}
.shoptimizer-product-prevnext > a:hover .tooltip { display: block; }
.tooltip img { width: 80px; height: 80px; object-fit: cover; margin: 0 auto 6px; }
.tooltip .title { display: block; font-size: 12px; font-weight: 600; color: #111; }
.tooltip .prevnext_price { display: block; font-size: 12px; }

.gs-usp { margin-top: 22px; }
.gs-usp .textwidget p { font-size: 14px; line-height: 1.55; }
.gs-safe-checkout { border: 0; padding: 0; margin: 14px 0 0; }
.gs-safe-checkout legend { font-size: 13px; font-weight: 600; padding-right: 8px; text-transform: uppercase; letter-spacing: .3px; }
.gs-safe-checkout img { max-width: 100%; }

/* tabs */
.gs-tabs-row { margin-top: 44px; background: #fff; border-radius: 4px; padding: 0 26px 26px; }
.wc-tabs { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; border-bottom: 1px solid #e8e5dd; }
.wc-tabs li a { display: inline-block; padding: 16px 2px; color: #555; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wc-tabs li.is-active a { color: #111; border-bottom-color: var(--gs-accent); }
/* Storefront decorates every tab item with an absolutely-positioned Font Awesome
   chevron: `.woocommerce-tabs ul.tabs li::after { position:absolute; right:-1em }`,
   revealed on the active tab. Our tab <li> has no positioning context, so the icon
   resolved against the initial containing block instead of the tab and parked itself
   at the far right of the viewport — a stray "⌄" floating over the product gallery.
   Worse, `right: -1em` (= -15px at 15px font) pushed it past the viewport edge, which
   is what made the WHOLE page horizontally draggable on mobile (the 15px was a
   constant regardless of screen width, which is the tell-tale sign of an em-based
   negative offset, not of content being too wide).
   We draw our own active-tab indicator (the accent underline above), so the
   decoration is removed instead of repositioned. */
.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before { display: none !important; content: none !important; }
/* keep any future absolutely-positioned descendant local to its own tab */
.wc-tabs li { position: relative; }
.wc-tab { display: none; padding-top: 20px; }
.wc-tab.is-active { display: block; }

/* related */
.related-wrapper { margin-top: 44px; }
.related > h2 { font-size: 24px; margin: 0 0 20px; }

/* mobile search row (toggled by the search icon) */
.gs-search-row { display: none; padding: 10px 0 18px; }
.gs-search-row.is-open { display: block; }
.gs-search-row .gs-search-form { max-width: 520px; margin: 0 auto; }

/* ---------- footer (Storefront's .col-full clearfix pseudo must not join the grid) ---------- */
.gs-theme .gs-footer-inner::before, .gs-theme .gs-footer-inner::after {
	content: none !important;
	display: none !important;
}
.site-footer { background: var(--gs-footer-bg); margin-top: 0; }
.gs-footer-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 48px; padding-bottom: 48px; }
.gs-footer-col { min-width: 0; }
.gs-footer-links { list-style: none; margin: 0; padding: 0; }
.gs-footer-links li { padding: 4px 0; }
.gs-footer-links a, .gs-footer-contact a { color: #000; font-size: 15px; }
.gs-footer-links a:hover, .gs-footer-contact a:hover { color: var(--gs-accent); }
.gs-footer-contact p { color: #000; font-size: 14px; margin: 0 0 10px; }
.gs-payment-icons { width: 220px; }

/* ---------- responsive ---------- */
@media (max-width: 992px) {
	.gs-menu-toggle { display: inline-flex; }
	.gs-icon-btn.mobile-search-toggle { display: inline-flex; }
	#col-full-nav { display: none; }
	.gs-header-search { display: none; }
	.gs-theme .gs-header-actions .gs-cart-btn { display: inline-flex !important; }
	.gs-theme .gs-header-actions .gs-cart-btn .gs-cart-amount { display: none; }
	.gs-logo img { height: 42px; }
	.gs-header-row { padding-top: 12px; padding-bottom: 12px; justify-content: space-between; }
	.site-branding { flex: 0 1 auto; }

	/* roomier vertical rhythm on mobile */
	.gs-grid-section { padding: 40px 0; }
	.gs-heading-section { padding: 40px 0 14px; }
	.gs-tiles { padding: 22px 0 48px; }

	.gs-hero-mobile, .gs-banner-mobile { display: block; }
	.gs-hero-desktop, .gs-banner-desktop { display: none; }

	/* breathing room between stacked banner / hero blocks */
	.gs-banner-section { margin: 26px 0; }
	.gs-banner-section + .gs-banner-section { margin-top: 0; }
	.gs-carousel-section { padding: 46px 0; }

	/* Two columns on phones, like the reference site. The selector must carry
	   the same `.gs-theme` prefix as the desktop rule above, otherwise
	   `.gs-theme .columns-3 ul.products` (0,3,1) wins over `.columns-3 ul.products`
	   (0,2,1) — a media query does NOT raise specificity, so the 3-up desktop
	   grid kept applying on mobile and the cards were crushed to 106px wide. */
	.gs-theme .gs-home-grid,
	.gs-theme ul.products,
	.gs-theme .columns-4 ul.products, .gs-theme ul.products.columns-4,
	.gs-theme .columns-3 ul.products, .gs-theme ul.products.columns-3,
	.gs-theme .columns-2 ul.products, .gs-theme ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }

	.gs-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.gs-carousel-slide { flex: 0 0 calc((100% - 20px) / 2); }
	.gs-carousel-track { gap: 20px; }

	.gs-shop-layout { padding-top: 18px; }
	.gs-single-grid { grid-template-columns: 1fr; gap: 26px; }
	.woocommerce-product-gallery.gs-has-thumbs .woocommerce-product-gallery__wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "thumbs";
	}
	.gs-gallery-thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 10px;
		padding-bottom: 4px;
	}
	.gs-gallery-thumb { flex: 0 0 74px; width: 74px; }
	.gs-footer-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
	.gs-theme h1 { font-size: 30px; }
	.product_title { font-size: 26px; }
}

@media (max-width: 768px) {
	.gs-theme body, body.gs-theme { font-size: 15px; }
	.col-full, .gs-col-full { padding-left: 16px; padding-right: 16px; }
	.gs-heading-section { padding: 32px 0 12px; }
	.gs-heading-section .elementor-heading-title { font-size: 22px; }
	.gs-grid-title { font-size: 21px; }
	.gs-grid-section { padding: 34px 0; }
	.gs-tiles { padding: 18px 0 40px; }
	.gs-carousel-section { padding: 38px 0; }
	.wc-tabs { gap: 16px; }

	/* full-bleed banners get side gutters + air between them on phones */
	.gs-banner-section { margin: 22px 0; padding: 0 16px; }
	.gs-banner-section + .gs-banner-section { margin-top: 22px; }
	.gs-banner img { border-radius: 2px; }
	/* phones: one slide at a time so the image is large enough to read */
	.gs-carousel-slide { flex: 0 0 100%; }
	.gs-carousel-slide + .gs-carousel-slide { margin-left: 0; }
	.gs-carousel-track { gap: 0; }
	.gs-carousel-bullets { padding-top: 14px; }
	.gs-carousel-bullets button { width: 9px; height: 9px; }

	/* phone: full-width qty stepper + add-to-cart stacked */
	.gs-buy-row form.cart { flex-wrap: wrap; gap: 10px; }
	.gs-qty { flex: 1 1 auto; justify-content: space-between; }
	.gs-qty .qty { flex: 1; width: auto; }
	.gs-buy-row .single_add_to_cart_button { flex: 1 1 100%; height: 48px; }
}

@media (max-width: 600px) {
	.gs-carousel-slide { flex: 0 0 100%; }
	.gs-carousel-track { gap: 0; }
	/* hero + banners: inset from the screen edges so they read as cards, not slabs */
	.gs-hero { padding: 14px 12px 0; }
	.gs-hero-link img { border-radius: 3px; }
}