/*
 * GW restyle.
 *
 * Every rule in this file must be scoped to body.gw-newskin (shared) or to a
 * per-feature class: .gw-header-on, .gw-footer-on, .gw-cards-on, .gw-catalog-on.
 * An unscoped rule here would change the live storefront.
 *
 * The `body.` prefix is deliberate throughout: Motta's woocommerce.css loads
 * after this file, so at equal specificity the theme wins.
 */

/* ---------------------------------------------------------------- palette */

body.gw-newskin {
	--gw-teal: #09aea6;   /* primary accent */
	--gw-navy: #1e3d6f;   /* secondary accent */
	--gw-ink:  #131921;   /* body + heading text */
	--gw-line: #e6e8eb;   /* general hairline borders */

	--gw-card-line: #e9edf1;              /* product-card border */
	--gw-strip-bg:  #e6f6f5;              /* category description strip */
	--gw-tint:      rgba(9, 174, 166, .12); /* soft circle behind phone icon */
	--gw-muted:     #6b7280;              /* eyebrow, sub-labels */
	--gw-muted-2:   #8a9099;              /* tax suffix, secondary text */
}

/* --------------------------------------------------------- preview badge */

.gw-preview-badge {
	position: fixed;
	z-index: 99999;
	bottom: 12px;
	left: 12px;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px 12px;
	border-radius: 2px;
	background: var(--gw-navy, #1e3d6f);
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .01em;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	pointer-events: auto;
}

.gw-preview-badge a {
	color: var(--gw-teal, #09aea6);
	text-decoration: underline;
}

@media print {
	.gw-preview-badge { display: none; }
}

/* ==========================================================================
   HEADER  (.gw-header-on)
   ========================================================================== */

/* Palette. Motta writes --mt-header-bc:#104994 from the Customizer in an
   inline <style> at (0,2,0); body.gw-header-on wins at (0,2,1).

   White header: teal stays the accent, and the text colours flip from white to
   ink. Motta's own defaults are already a light header, so most of the theme's
   downstream rules read correctly once these variables change. */
body.gw-header-on .site-header__section,
body.gw-header-on .site-header__mobile {
	--mt-header-bc: #fff;
	--mt-header-color: var(--gw-ink, #131921);
	--mt-header-sub-text-color: var(--gw-muted, #6b7280);
	--mt-header-border-color: var(--gw-line, #e6e8eb);
	--mt-header-main-background-color: #fff;
	--mt-header-main-text-color: var(--gw-ink, #131921);
	--mt-header-mobile-bottom-bc: #fff;
	--mt-header-mobile-bottom-tc: var(--gw-ink, #131921);
}

/* Row 1 re-declares --mt-header-main-background-color on .header-main itself,
   at (0,3,0), so setting it on the section above is not enough - the closer
   declaration wins for that element. Match it at (0,3,1). */
body.gw-header-on .site-header__section .header-main,
body.gw-header-on .site-header__mobile .header-main,
body.gw-header-on .site-header__section .header-mobile-bottom,
body.gw-header-on .site-header__mobile .header-mobile-bottom {
	--mt-header-main-background-color: #fff;
	--mt-header-main-text-color: var(--gw-ink, #131921);
	--mt-header-mobile-bottom-bc: #fff;
	--mt-header-mobile-bottom-tc: var(--gw-ink, #131921);
}

/* On navy the rows separated themselves. On white they need a hairline, or the
   header dissolves into the page. Desktop only - the mobile bar already draws
   its own bottom border, and both together read as a stripe. */
body.gw-header-on .site-header__desktop {
	border-bottom: 1px solid var(--gw-line, #e6e8eb);
}

/* Row 2 has a fixed height; a wrapped row would otherwise spill through the
   header's bottom border (gotcha 5.5). */
body.gw-header-on .header-bottom {
	height: auto;
	min-height: 0;
	border-top: 1px solid var(--gw-line, #e6e8eb);
}

/* ---- logo -------------------------------------------------------------- */

/* The Customizer writes 220px desktop / 135px mobile at (0,1,2). */
body.gw-header-on .header-logo > a img,
body.gw-header-on .header-logo > a svg {
	width: 150px;
}

body.gw-header-on .site-header__mobile .header-logo > a img,
body.gw-header-on .site-header__mobile .header-logo > a svg {
	width: 108px;
}

/* ---- row 1: search ----------------------------------------------------- */

/* Desktop only. The mobile row uses header-search--inside, which already puts a
   magnifier button inside the field - a second one would sit beside it. */
/* The visible box is .header-search__container, not the field - the theme makes
   the field transparent and borderless. Bordering the field draws a second
   rectangle inside the first, so outline the container instead and drop the
   raised skin's shadow, which reads as a smudge against white. */
body.gw-header-on .site-header__desktop .header-search__container {
	border: 1px solid var(--gw-line, #e6e8eb);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	box-shadow: none;
	--mt-input__box-shadow: transparent;
}

/* Field and button as one control. The theme spaces them with
   .header-search__button { margin-left: 12px }; this is what its own
   .motta-search--button-no-spacing variant does. */
body.gw-header-on .site-header__desktop .header-search__button {
	margin-left: 0;
}

body.gw-header-on .site-header__desktop .header-search__form:focus-within .header-search__container {
	border-color: var(--gw-teal, #09aea6);
}

body.gw-header-on .site-header__desktop .header-search__field {
	padding-left: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px 50%;
	background-size: 18px 18px;
}

body.gw-header-on .header-search__button {
	background-color: var(--gw-teal, #09aea6);
	border-color: var(--gw-teal, #09aea6);
	border-radius: 0 2px 2px 0;
	color: #fff;
}

body.gw-header-on .header-search__button:hover,
body.gw-header-on .header-search__button:focus-visible {
	background-color: var(--gw-navy, #1e3d6f);
	border-color: var(--gw-navy, #1e3d6f);
}

body.gw-header-on .header-search__divider {
	display: none;
}

/* ---- row 1: right cluster (phone / account / cart) --------------------- */

/* Two-line labels. Never size .motta-button__icon - the SVG is sized from the
   span and collapses to zero (gotcha 5.7). */
body.gw-header-on .header-right-items .motta-button__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	line-height: 1.25;
	white-space: nowrap;
}

body.gw-header-on .header-right-items .motta-button__subtext {
	font-size: 11px;
	font-weight: 400;
	color: var(--mt-header-sub-text-color, rgba(255, 255, 255, .72));
}

body.gw-header-on .header-right-items .motta-button__text--account,
body.gw-header-on .header-cart .motta-button__text {
	font-size: 13px;
	font-weight: 600;
}

body.gw-header-on .header-cart__counter {
	background-color: var(--gw-teal, #09aea6);
	color: #fff;
}

/* .header-right-items is a flex row that will happily shrink this block until
   "Call Us Now" and the number each wrap onto three lines. Pin it. */
body.gw-header-on .gw-header-phone {
	flex: 0 0 auto;
	white-space: nowrap;
}

body.gw-header-on .gw-header-phone__link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

body.gw-header-on .gw-header-phone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gw-tint, rgba(9, 174, 166, .12));
	color: var(--gw-teal, #09aea6);
}

body.gw-header-on .gw-header-phone__labels {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}

body.gw-header-on .gw-header-phone__eyebrow {
	font-size: 11px;
	color: var(--mt-header-sub-text-color, rgba(255, 255, 255, .72));
}

body.gw-header-on .gw-header-phone__number {
	font-size: 13px;
	font-weight: 600;
}

body.gw-header-on .gw-header-phone__link:hover .gw-header-phone__number {
	color: var(--gw-teal, #09aea6);
}

/* ---- row 2: All Categories pill + CSS-only dropdown -------------------- */

body.gw-header-on .gw-cats {
	position: relative;
	text-align: left;   /* Motta centres .header-center-items; that would
	                       inherit into the panel (gotcha 5.3) */
}

/* Motta's button line-height/min-height would set this row's height
   (gotcha 5.8), so pin all three. */
body.gw-header-on .gw-cats__pill {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 18px;
	border: 0;
	border-radius: 2px;
	background: var(--gw-teal, #09aea6);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

body.gw-header-on .gw-cats__pill:hover,
body.gw-header-on .gw-cats:focus-within .gw-cats__pill {
	background: #089b94;
}

body.gw-header-on .gw-cats__burger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 15px;
	height: 11px;
}

body.gw-header-on .gw-cats__burger span {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

body.gw-header-on .gw-cats__panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 120;
	width: 560px;
	max-width: calc(100vw - 40px);
	max-height: min(78vh, 660px);   /* the full list is ~600px; this avoids a
	                                   scrollbar on any normal desktop */
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 6px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--gw-line, #e6e8eb);
	border-radius: 2px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

/* :target also opens it, so #gw-cats-panel deep-links to the open menu - which
   is how the open state gets verified without a pointer. */
body.gw-header-on .gw-cats:hover > .gw-cats__panel,
body.gw-header-on .gw-cats:focus-within > .gw-cats__panel,
body.gw-header-on .gw-cats > .gw-cats__panel:target {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Two columns so 17 top-level categories plus their children fit without a
   long scroll. break-inside keeps a parent and its children together. */
body.gw-header-on .gw-cats__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 8px;
}

body.gw-header-on .gw-cats__sublist {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

body.gw-header-on .gw-cats__item {
	break-inside: avoid;
	page-break-inside: avoid;   /* Safari */
}

body.gw-header-on .gw-cats__link,
body.gw-header-on .gw-cats__sublink {
	display: block;
	padding: 7px 12px;
	border-radius: 2px;
	color: var(--gw-ink, #131921);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
}

body.gw-header-on .gw-cats__item--has-children > .gw-cats__link {
	font-weight: 600;
}

body.gw-header-on .gw-cats__sublink {
	padding-left: 24px;
	color: var(--gw-muted, #6b7280);
	font-size: 13px;
}

body.gw-header-on .gw-cats__link:hover,
body.gw-header-on .gw-cats__sublink:hover,
body.gw-header-on .gw-cats__item:focus-within > .gw-cats__link {
	background: #f5f7f8;
	color: var(--gw-teal, #09aea6);
}

body.gw-header-on .gw-cats__item--all {
	column-span: all;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--gw-line, #e6e8eb);
}

body.gw-header-on .gw-cats__item--all .gw-cats__link {
	color: var(--gw-teal, #09aea6);
	font-weight: 600;
}

/* ---- row 2: trust chips (render only when the client supplies wording) -- */

body.gw-header-on .gw-trust-chips {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

body.gw-header-on .gw-trust-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--mt-header-sub-text-color, rgba(255, 255, 255, .72));
}

/* ---- mobile: the mobile header reuses the desktop classes (gotcha 5.6) --
   Without this the two-line labels and the phone block push the cart icon off
   screen and the search bar overflows the viewport. */

/* 1199px, not 1024: that is where Motta itself swaps .site-header__desktop for
   .site-header__mobile. Below it the mobile header renders the same cart part,
   so the "My Cart" label we added would sit beside the icon in a bar that has
   no room for it. */
@media (max-width: 1199px) {
	body.gw-header-on .gw-header-phone,
	body.gw-header-on .gw-cats {
		display: none;
	}

	body.gw-header-on .site-header__mobile .motta-button__text {
		display: none;
	}

	body.gw-header-on .header-search {
		max-width: 100%;
	}
}

/* ==========================================================================
   FOOTER  (.gw-footer-on)

   The markup here is ours (template-parts/gw-footer.php) rather than Motta's,
   so these selectors have no theme rules to out-specify. They still carry the
   body. prefix so nothing can leak onto the live Elementor footer.
   ========================================================================== */

body.gw-footer-on .gw-footer {
	background: var(--gw-navy, #1e3d6f);
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	line-height: 1.6;
}

body.gw-footer-on .gw-footer a {
	color: inherit;
	text-decoration: none;
}

body.gw-footer-on .gw-footer a:hover {
	color: var(--gw-teal, #09aea6);
}

/* ---- contact strip ----------------------------------------------------- */

body.gw-footer-on .gw-footer__strip {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

body.gw-footer-on .gw-footer__strip-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px 32px;
	padding-top: 26px;
	padding-bottom: 26px;
}

body.gw-footer-on .gw-fitem {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

body.gw-footer-on .gw-fitem__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gw-tint, rgba(9, 174, 166, .12));
	color: var(--gw-teal, #09aea6);
}

body.gw-footer-on .gw-fitem__labels {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.gw-footer-on .gw-fitem__eyebrow {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

body.gw-footer-on .gw-fitem__value {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* ---- link columns ------------------------------------------------------ */

body.gw-footer-on .gw-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 32px 40px;
	padding-top: 44px;
	padding-bottom: 44px;
}

body.gw-footer-on .gw-footer__logo {
	display: inline-block;
	max-width: 200px;
}

body.gw-footer-on .gw-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

body.gw-footer-on .gw-footer__blurb {
	margin: 14px 0 0;
	max-width: 34ch;
	color: rgba(255, 255, 255, .72);
}

body.gw-footer-on .gw-footer__socials {
	display: flex;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

body.gw-footer-on .gw-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

body.gw-footer-on .gw-footer__socials a:hover {
	background: var(--gw-teal, #09aea6);
	color: #fff;
}

body.gw-footer-on .gw-footer__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
}

body.gw-footer-on .gw-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.gw-footer-on .gw-footer__link + .gw-footer__link {
	margin-top: 9px;
}

/* ---- bottom bar -------------------------------------------------------- */

body.gw-footer-on .gw-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

body.gw-footer-on .gw-footer__bottom-inner {
	padding-top: 18px;
	padding-bottom: 18px;
}

body.gw-footer-on .gw-footer__copy {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 991px) {
	body.gw-footer-on .gw-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.gw-footer-on .gw-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575px) {
	body.gw-footer-on .gw-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	body.gw-footer-on .gw-footer__blurb {
		max-width: none;
	}
}

/* ==========================================================================
   PRODUCT CARDS  (.gw-cards-on)

   Scoped :not(.home) so this can never reach the homepage, which is out of
   scope. Every selector carries a `body.` prefix because Motta's
   woocommerce.css loads after this file and matches at equal specificity.

   Verified against motta/woocommerce.css @ver=20250115:
     .product-actions           position:absolute;opacity:0;visibility:hidden  (0,4,2)
     .product-actions>a.button .motta-svg-icon   display:none                  (0,5,3)
     .product-inner:hover       box-shadow + z-index:3
     .meta-cat span             display:none   <- theme already hides the "in"
   ========================================================================== */

/* ---- card box: flex column so the button can pin to the bottom ---------- */

body.gw-cards-on:not(.home) ul.products li.product {
	display: flex;
}

body.gw-cards-on:not(.home) ul.products li.product > .product-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: auto;
	padding: 14px;
	border: 1px solid var(--gw-card-line, #e9edf1);
	border-radius: 2px;
	background: #fff;
	transition: none;
}

/* ---- no hover effect at all (gotcha 5.10: several theme rules, not one) - */

body.gw-cards-on:not(.home) ul.products li.product .product-inner:hover {
	height: auto;
	box-shadow: none;
	border-color: var(--gw-card-line, #e9edf1);
	z-index: auto;
}

/* The thumbnail overlay holds only a display:none Add-to-cart on this site;
   it exists purely to fade in on hover. */
body.gw-cards-on:not(.home) ul.products li.product .product-thumbnail .product-featured-icons,
body.gw-cards-on:not(.home) ul.products li.product .product-inner:hover .product-featured-icons {
	display: none;
}

/* Insurance: no product currently has a gallery, but one added later would
   otherwise swap image on hover. */
body.gw-cards-on:not(.home) ul.products li.product .product-inner:hover .product-thumbnails--hover:not(.hover-swatch) .hover-image {
	opacity: 0;
}

body.gw-cards-on:not(.home) ul.products li.product .product-inner:hover .woocommerce-loop-product__title a {
	box-shadow: none;
}

/* ---- thumbnail: fix the ratio, source images vary wildly ---------------- */

body.gw-cards-on:not(.home) ul.products li.product .product-thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* ---- summary ------------------------------------------------------------ */

body.gw-cards-on:not(.home) ul.products li.product .product-summary {
	display: flex;
	flex-direction: column;
	padding-top: 12px;
}

/* Category eyebrow. Motta already prints and shows this, and already hides
   its literal "in" prefix span - restyle only. */
body.gw-cards-on:not(.home) ul.products li.product .meta-cat {
	margin: 0 0 3px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gw-muted, #6b7280);
}

body.gw-cards-on:not(.home) ul.products li.product .meta-cat a {
	color: inherit;
}

body.gw-cards-on:not(.home) ul.products li.product .meta-cat a:hover {
	color: var(--gw-teal, #09aea6);
}

/* Title: 2-line clamp, medium weight. No font-family here - typography
   belongs to the Customizer (gotcha 5.13). */
body.gw-cards-on:not(.home) ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
	min-height: 2.9em;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--gw-ink, #131921);
}

body.gw-cards-on:not(.home) ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
}

body.gw-cards-on:not(.home) ul.products li.product .product-summary > .price {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--gw-ink, #131921);
}

/* Style whatever tax suffix WooCommerce prints - never rewrite it (section 7).
   None is currently output on this site; this is here so it lands correctly
   if the client turns tax display on. */
body.gw-cards-on:not(.home) ul.products li.product .price .woocommerce-Price-taxLabel {
	font-size: 11px;
	font-weight: 400;
	color: var(--gw-muted-2, #8a9099);
}

/* ---- actions: always visible, pinned to the bottom --------------------- */

body.gw-cards-on:not(.home) ul.products li.product .product-actions {
	position: static;
	margin-top: auto;
	padding: 12px 0 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: none;
	box-shadow: none;
	border-radius: 0;
	z-index: auto;
	transform: none;
}

body.gw-cards-on:not(.home) ul.products li.product .product-actions > * {
	transform: none;
}

/* Motta renders the price twice - once in .product-summary and again inside
   .product-actions, because the actions panel normally covers the summary on
   hover. Now that both are visible at once, drop the duplicate. */
body.gw-cards-on:not(.home) ul.products li.product .product-actions > .price {
	display: none;
}

body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	height: auto;
	padding: 9px 14px;
	border: 1px solid var(--gw-navy, #1e3d6f);
	border-radius: 2px;
	background: transparent;
	color: var(--gw-navy, #1e3d6f);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color .15s ease, color .15s ease;
}

body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button:hover,
body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button:focus-visible {
	background: var(--gw-navy, #1e3d6f);
	color: #fff;
}

/* Re-enable the theme's own cart icon (gotcha 5.11). Size the SVG, never the
   icon span - a span sized to auto collapses to zero (gotcha 5.7). */
body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button .motta-svg-icon {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: inherit;
}

body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button .motta-svg-icon svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

body.gw-cards-on:not(.home) ul.products li.product .product-actions > a.button .add-to-cart-text {
	padding: 0;
}

/* ==========================================================================
   CATEGORY ARCHIVE HEADER  (.gw-catalog-on)
   ========================================================================== */

/* Motta ships this archive as page-header--minimal page-header--center, which
   centres the crumb and the H1 over a full-width band. Left-aligning it puts
   the title on the same optical line as the grid below. */
body.gw-catalog-on .page-header--products,
body.gw-catalog-on .page-header--products .page-header__content,
body.gw-catalog-on .page-header--products .site-breadcrumb {
	text-align: left;
}

/* page-header--products has padding:0 and gets its spacing from margins, so
   adding padding here only widens the gap. Tighten the bottom margin instead:
   the header reserves room for a description none of these categories has. */
body.gw-catalog-on .page-header--products.page-header--minimal {
	margin-top: 16px;
	margin-bottom: 4px;
}

body.gw-catalog-on .page-header--products .site-breadcrumb {
	font-size: 12.5px;
	color: var(--gw-muted, #6b7280);
}

body.gw-catalog-on .page-header--products .page-header__title {
	margin: 6px 0 0;
	color: var(--gw-ink, #131921);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

body.gw-catalog-on .motta-result-count {
	color: var(--gw-muted, #6b7280);
	font-size: 13px;
}

/* ---- subcategory pills ------------------------------------------------- */

body.gw-catalog-on .gw-subcats {
	margin: 0 0 22px;
}

body.gw-catalog-on .gw-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.gw-catalog-on .gw-subcats__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--gw-card-line, #e9edf1);
	border-radius: 999px;
	background: #fff;
	color: var(--gw-ink, #131921);
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .12s ease, color .12s ease;
}

body.gw-catalog-on .gw-subcats__pill:hover,
body.gw-catalog-on .gw-subcats__pill:focus-visible {
	border-color: var(--gw-teal, #09aea6);
	color: var(--gw-teal, #09aea6);
}

body.gw-catalog-on .gw-subcats__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gw-tint, rgba(9, 174, 166, .12));
	color: var(--gw-teal, #09aea6);
	font-size: 11px;
	font-weight: 600;
}

/* Below the grid's two-column breakpoint the row would wrap to three lines and
   push the first product off screen; scroll it instead. */
@media (max-width: 767px) {
	body.gw-catalog-on .gw-subcats__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.gw-catalog-on .gw-subcats__list::-webkit-scrollbar {
		display: none;
	}
}

/* ---- term description strip (dormant until a category has one) --------- */

body.gw-catalog-on .gw-catdesc {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 3px;
	background: var(--gw-strip-bg, #e6f6f5);
	color: var(--gw-ink, #131921);
	font-size: 14px;
	line-height: 1.65;
}

body.gw-catalog-on .gw-catdesc p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   HOME  (.gw-home-on)

   The only homepage rule in this file. Everything else here stays off the
   homepage on purpose.
   ========================================================================== */

/* Hero removed at the client's request, pending a replacement.
 *
 * This is the Elementor image widget's own section (elementor-element-6c9b4cbe,
 * "best-deals-on.png"), hidden by its element id so it takes nothing else with
 * it. The image was already rendering broken: its src is http:// on an https
 * page, so the browser blocks it as mixed content.
 *
 * When the replacement is built as a NEW Elementor element it gets a new id and
 * shows normally. If instead the existing widget is edited in place, this rule
 * has to be deleted or the replacement stays hidden.
 */
body.gw-home-on.home .elementor-element-6c9b4cbe {
	display: none;
}