/* =========================================================================
   Super Fence 2026 — WooCommerce
   -------------------------------------------------------------------------
   Ported from the Elementor kit's Custom CSS (post-963.css, 3 Oct 2026).

   Two kinds of change were made during the port:

   1. Rules keyed to `.elementor-element-<id>` are reproduced against
      semantic classes the new templates emit. The mapping is noted at each
      one.
   2. `!important` is dropped wherever it only existed to out-rank Elementor.
      It is kept where it out-ranks WooCommerce's own stylesheet, which still
      loads.
   ========================================================================= */

/* ===== Product cards (archive, category, search) ========================= */

.woocommerce ul.products li.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-lg);
	padding: 0 0 18px;
	overflow: hidden;
	text-align: left;
	transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 16px 30px rgba(18, 35, 61, .10); transform: translateY(-3px); }
.woocommerce ul.products li.product a img { border-radius: 0; margin: 0 0 14px; background: #F2F4F7; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating { margin-left: 18px; margin-right: 18px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--sf-navy) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 0 !important;
	margin-top: 14px;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price { color: var(--sf-price) !important; font-weight: 800 !important; font-size: 18px !important; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount { color: #9AA5B4 !important; font-weight: 500 !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Stock pills. In stock sits top-right, Sale! top-left, so they never collide. */
.woocommerce ul.products li.product.instock::before,
.woocommerce ul.products li.product.outofstock::before {
	position: absolute; top: 22px; right: 22px; z-index: 3;
	font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 20px;
}
.woocommerce ul.products li.product.instock::before { content: "In stock"; background: #E8F7EE; color: var(--sf-in-stock); }
.woocommerce ul.products li.product.outofstock::before { content: "Out of stock"; background: #FBEAEA; color: var(--sf-out-stock); }

/*
 * Selector raised to 0,4,2. WooCommerce's own
 * `.woocommerce ul.products li.product .onsale` (0,4,2, loaded first) sets
 * top:0; right:0; margin:-.5em -.5em 0 0, which out-ranked the old 0,3,1 rule
 * and pinned the badge top-RIGHT, clipped above the card edge. Production has
 * it top-LEFT, 22px in, fully inside the card.
 */
.woocommerce span.onsale,
.woocommerce li.product .onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product span.onsale {
	left: 22px; right: auto; top: 22px;
	background: var(--sf-orange); color: #fff;
	border-radius: 20px; font-weight: 700; padding: 5px 12px;
	font-size: 11px; line-height: 1.4; min-height: 0; min-width: 0; margin: 0;
}

/* The add-to-cart button is removed from tiles in PHP (see inc/woocommerce.php),
   but these keep any that a plugin re-adds looking right. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block; width: calc(100% - 36px);
	margin: 14px 18px 0;
	background: var(--sf-navy); color: #fff; border: none; border-radius: var(--sf-radius-sm);
	padding: 10px 16px; font-weight: 700; font-size: 13px; text-align: center;
	transition: background .15s ease;
}
.woocommerce ul.products li.product .button:hover { background: var(--sf-orange); color: #fff; }
.woocommerce ul.products li.product.outofstock .button { background: #F1F3F6 !important; color: #9AA5B4 !important; }
.woocommerce ul.products li.product.outofstock .button:hover { background: #e9edf2 !important; color: #7a8699 !important; }

.woocommerce .woocommerce-result-count { color: var(--sf-muted); font-size: 14px; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); padding: 8px 12px; color: var(--sf-text); background: #fff; }

/* ===== Shop / category layout ============================================
   Was .elementor-element-c186bc1 (filters + products, 280px sidebar).
   ====================================================================== */

.sf-shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; width: 100%; }
@media (max-width: 960px) { .sf-shop-layout { grid-template-columns: 1fr; } }

/* Product grid. Was .elementor-element-21f8cbf / 78db75a (auto-fill 260px)
   and .sf-slay (fixed 4 columns). The 4-column rule won on the live site, so
   that is what is kept. */
.sf-slay .woocommerce ul.products,
.sf-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	/*
	 * 24px, as production. At 22px the four columns came out 310.5px instead of
	 * 309px — (1308 - 3*22)/4 vs (1308 - 3*24)/4 — which cascaded into every
	 * card width and made the grid 27px taller.
	 */
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Inherited base again: production's grid sits on the kit's flat 22px. */
	line-height: 22px;
}
.sf-slay .woocommerce ul.products::before, .sf-slay .woocommerce ul.products::after,
.sf-products ul.products::before, .sf-products ul.products::after { content: none !important; display: none !important; }
.sf-slay .woocommerce ul.products li.product,
.sf-products ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; clear: none !important; }

@media (max-width: 1200px) { .sf-slay .woocommerce ul.products, .sf-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 960px)  { .sf-slay .woocommerce ul.products, .sf-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { .sf-slay .woocommerce ul.products, .sf-products ul.products { grid-template-columns: 1fr !important; } }

.sf-slay {
	/*
	 * Production's whole sidebar layout inherits the Elementor kit's flat
	 * `line-height:22px`; the theme's base is 1.6 (24px). Scoped here rather
	 * than on each piece, because it was showing up separately in the search
	 * header, the result count, every filter row and the product titles — the
	 * filters sidebar alone came out 33px tall.
	 */
	line-height: 22px;
	padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2));
	padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2));
	padding-bottom: 64px;
}

/* Category description card. Was .elementor-element-a29a5d9. */
/*
 * Category editorial block. Ported verbatim from snippet 6's own CSS, which is
 * what styles `.sf-cat-desc` on production — the theme's first pass guessed at
 * these values and was wrong on padding, margin, colour, font-size,
 * line-height and all four heading properties.
 */
.sf-cat-desc{background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:28px 32px;margin-top:32px;color:#3A4a5f;line-height:1.7;font-size:15px;}
.sf-cat-desc h2,.sf-cat-desc h3{color:#12233D;font-weight:800;margin:0 0 12px;}
.sf-cat-desc p{margin:0 0 12px;}
.sf-cat-desc p:last-child{margin-bottom:0;}

/*
 * The kit's h2 rule reaches in here too: production renders .sf-cat-desc h2 at
 * 20px with the line-height inherited from the block (1.7 => 34px), while the
 * weight stays 800 from the rule above. Without this the heading came out at
 * 22.5px/28.125px — browser default 1.5em against the theme's global
 * h1..h6{line-height:1.25}.
 */
.sf-cat-desc h2{font-size:20px;line-height:inherit;}

/*
 * The dual-range fill used to be forced to `top:0; height:100% !important`
 * here, which turned the 4px navy bar into a 22px navy slab inside .sf-slay —
 * so the price filter looked broken on exactly the three templates that have a
 * sidebar (shop, category, search) and correct nowhere else. The base rules
 * below already match production: a 4px grey track (.sf-range::before) with a
 * 4px navy fill centred on it.
 */

/* Mobile filter toggle. */
.sf-filter-toggle { display: none; }
@media (max-width: 960px) {
	.sf-slay .sf-filter-toggle {
		display: flex; align-items: center; justify-content: space-between; gap: 8px;
		grid-column: 1 / -1; width: 100%; background: var(--sf-navy); color: #fff;
		border: none; border-radius: var(--sf-radius); font-weight: 700; font-size: 15px;
		padding: 13px 18px; cursor: pointer; margin-bottom: 6px;
	}
	.sf-slay .sf-filter-toggle::after { content: "\25BE"; font-size: 12px; transition: transform .2s ease; }
	.sf-slay.sf-filters-open .sf-filter-toggle::after { transform: rotate(180deg); }
	.sf-slay .sf-filters { display: none; }
	.sf-slay.sf-filters-open .sf-filters { display: block; }
}

/* ===== Sort row ========================================================== */

.sf-results-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sf-results-top .woocommerce-result-count { margin: 0 !important; color: var(--sf-muted); font-size: 14px; }
.sf-sort { position: relative; display: inline-block; }
/* form reset: the <form> wrapper's default margin made the row 50px tall
   against production's 37px. */
.sf-sort { margin: 0; }
/* WooCommerce's `.woocommerce .woocommerce-ordering{margin:0 0 1em}` (0,2,0)
   out-ranked the reset above and pushed the grid 15px lower than production. */
.sf-results-top .sf-sort.woocommerce-ordering { margin: 0; }
/* `select.sf-orderby` (0,2,1) so it out-ranks the generic
   `.woocommerce .woocommerce-ordering select` rule above, which was forcing
   8px 12px padding and leaving no room for the arrow. */
.sf-sort select.sf-orderby {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
	padding: 9px 36px 9px 14px; font-size: 13px; font-weight: 600; color: var(--sf-text); cursor: pointer; line-height: 1.3;
}
.sf-sort .sf-orderby:hover { border-color: var(--sf-navy); }
.sf-sort .sf-orderby:focus { outline: none; border-color: var(--sf-navy); box-shadow: 0 0 0 3px rgba(0, 87, 132, .12); }
.sf-sort::after { content: "\25BE"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--sf-muted); font-size: 12px; }
@media (max-width: 480px) { .sf-results-top { flex-direction: column; align-items: flex-start; } }

/* ===== Pagination ======================================================== */

/*
 * Pagination. Production emits paginate_links( type => plain ) — bare anchors
 * inside the nav, no <ul> — and the nav is not inside a .woocommerce wrapper on
 * this template, so these rules drop both assumptions. The list selectors are
 * kept for any view that still renders WooCommerce's own list markup.
 */
/* Production leaves the nav a plain centred block — the links are inline-flex
   and carry their own 8px bottom margin, which is what makes the nav 48px tall
   rather than 40px. Flex on the nav collapsed that margin and lost the 8px. */
nav.woocommerce-pagination { margin-top: 40px; border: none; text-align: center; line-height: 22px; }
nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: 8px; border: none; margin: 0; padding: 0; }
nav.woocommerce-pagination ul li { border: none; margin: 0; }
nav.woocommerce-pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 13px;
	margin-bottom: 8px; line-height: 22px;
	border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
	background: #fff; color: var(--sf-text); font-size: 14px; font-weight: 500; text-decoration: none;
	transition: all .15s;
}
nav.woocommerce-pagination a.page-numbers:hover { border-color: var(--sf-navy); color: var(--sf-navy); }
nav.woocommerce-pagination .page-numbers.current { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; font-weight: 600; }
nav.woocommerce-pagination .page-numbers.dots { border: none; background: transparent; min-width: auto; padding: 0 4px; }

/* ===== Single product ====================================================
   Layout was .elementor-element-79e0403 (row) / 7d40655 (gallery, 520px) /
   e8a630f (summary), gap 48px, left-aligned, stacking under 768px.
   ====================================================================== */

.sf-product-layout { display: flex; align-items: flex-start; justify-content: flex-start; gap: 48px; }
.sf-product-gallery { position: relative; line-height: 22px; /* production base; the slider arrows sat 10px low at 1.6 */ flex: 0 0 auto; width: 520px; max-width: 520px; }
.sf-product-summary { flex: 1 1 auto; max-width: 720px; }


/*
 * Production renders the product title at 25px. The theme's own h1 sizing gave
 * 30px here. The element stays an <h1> — production uses an h2 and so has no h1
 * at all on a product page, which is an SEO defect this theme should not copy,
 * and the one-H1-per-page rule is part of the removal baseline. Size matched,
 * semantics kept.
 */
.woocommerce div.product .product_title { color: var(--sf-navy) !important; font-weight: 800 !important; font-size: 25px !important; }

/*
 * WooCommerce's own stylesheet sets `div.product div.images { width: 48% }`,
 * which inside the theme's 520px gallery column rendered the gallery at 250px —
 * half production's 520px, with the image shrunk to match.
 */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-bottom: 30px;
}

/* Related products: six across, as production. */
/* Production leaves 123px between the tabs and related products, and 80px
   before the footer. */
.woocommerce div.product .related { margin-top: 70px; margin-bottom: 80px; }
.woocommerce div.product .related ul.products {
	line-height: 22px; /* production's base, as on the archive grids — the price line was 28.8px */
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 40px 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Production's 1px #E4E7EC divider between "You may also need" and the
	   grid: border-top on its section, 28px above the first row. */
	border-top: 1px solid #E4E7EC;
	padding-top: 28px !important;
}
/* Production (Elementor's tablet/mobile breakpoints): 2 across up to 1024px,
   1 across up to 767px. The fixed 6 columns squeezed cards to 48px on a phone. */
@media (max-width: 1024px) { .woocommerce div.product .related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px)  { .woocommerce div.product .related ul.products { grid-template-columns: 1fr !important; } }
.woocommerce div.product .related ul.products::before,
.woocommerce div.product .related ul.products::after { content: none !important; display: none !important; }
.woocommerce div.product .related ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
/*
 * Production hides WooCommerce's "Related products" heading and shows its own
 * "You may also need" above the grid instead: 25px/600 in black, left-aligned,
 * with 28px to a full-width divider and 28px more to the first row (57px in
 * all). The theme keeps WooCommerce's heading element (an h2 under the
 * product h1) and gives it production's text and look.
 */
.woocommerce div.product .related > h2 { font-size: 25px; font-weight: 600; line-height: 25px; color: #000; margin: 0 0 28px; }

/* Single-product price is navy, not the archive red. */
body.single-product .price,
body.single-product .price .woocommerce-Price-amount,
body.single-product .price bdi,
body.single-product .price ins .woocommerce-Price-amount { color: var(--sf-navy) !important; }
body.single-product .price del,
body.single-product .price del .woocommerce-Price-amount { color: #9AA5B4 !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 28px !important; font-weight: 600 !important; } /* production: 600, not the 800 used on loop cards */

.woocommerce div.product form.cart .quantity input.qty,
body.single-product .quantity input.qty {
	/* 54px wide with a 1px border, as production (was 66px / 1.5px, which
	   pushed Add to Cart 12px right of where production has it). */
	height: 48px; width: 54px; padding: 10px; text-align: center;
	border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm);
	color: var(--sf-text); font-weight: 700; font-size: 15px;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--sf-navy) !important; color: #fff !important;
	border: none !important; border-radius: var(--sf-radius-sm) !important;
	font-weight: 700 !important; padding: 14px 28px !important; height: 48px; text-transform: none;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--sf-navy-light) !important; }

body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery img { border-radius: var(--sf-radius-lg); max-height: 480px; object-fit: contain; }
body.single-product .woocommerce-product-gallery { border: none; border-radius: 0; background: transparent; }

body.single-product .stock.in-stock { color: var(--sf-in-stock) !important; font-weight: 700; }
body.single-product .stock.out-of-stock { color: var(--sf-out-stock) !important; font-weight: 700; }

/*
 * Product tabs, matched to production: the active tab is white with a 4px top
 * radius and sits on a white panel with a 1px #D3CED2 top rule and 20px of
 * padding. The theme had transparent tabs over no panel at all, which read as
 * plain text links and made the block 278px against production's 303px.
 */
.woocommerce div.product .woocommerce-tabs { margin-top: 64px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 0 0 15px !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none !important; display: none !important; border: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 4px 4px 0 0 !important; margin: 0 -5px !important; padding: 0 18px 0 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 18px !important; font-size: 15px; font-weight: 700; line-height: 15px; color: var(--sf-muted) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sf-navy) !important; }
.woocommerce div.product .woocommerce-tabs .panel { background: #fff; border-top: 1px solid #D3CED2; margin: -1px 0 0 !important; padding: 20px !important; line-height: 22px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 20px; font-weight: 500; line-height: 22px; margin: .83em 0; }

body.single-product .product_meta,
.woocommerce div.product .product_meta { border-top: 1px solid var(--sf-border); padding-top: 16px; margin-top: 18px; color: var(--sf-muted); font-size: 13px; }

.woocommerce .upsells.products > h2 { color: var(--sf-navy) !important; font-weight: 800; }
body.single-product .upsells.products { border-top: 1px solid var(--sf-border); padding-top: 28px; margin-top: 8px; }

/* Product gallery slider plugin (Product Gallery Slider for WooCommerce). */
body.single-product .wpgs-for .slick-list { box-sizing: border-box; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden; background: #fff; }
body.single-product .wpgs-nav .slick-slide { box-sizing: border-box; border-radius: var(--sf-radius); }
body.single-product .wpgs-nav .slick-slide img { border-radius: 11px; }
body.single-product .wpgs-nav .slick-current { border: 1px solid var(--sf-navy) !important; }

/* ===== Breadcrumb ======================================================== */

.woocommerce .woocommerce-breadcrumb { color: var(--sf-muted); border: none; }
.woocommerce .woocommerce-breadcrumb a { color: var(--sf-navy) !important; }

/* ===== My account ======================================================== */

body.logged-in.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
body.logged-in.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; margin: 0 !important; }
@media (max-width: 960px) { body.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; } }

.woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 10px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: none; background: transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 14px; border-radius: var(--sf-radius-sm); font-size: 14px; font-weight: 600; color: var(--sf-muted) !important; background: transparent !important; border: none !important; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--sf-navy) !important; background: var(--sf-fill) !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #EAF1F8 !important; color: var(--sf-navy) !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sf-out-stock) !important; }

.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 28px; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--sf-navy); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend { color: var(--sf-navy); font-weight: 800; }
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea { border: 1.5px solid var(--sf-border) !important; border-radius: var(--sf-radius-sm) !important; padding: 11px 14px !important; min-height: 46px; }
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-orders-table .button { background: var(--sf-navy) !important; color: #fff !important; border-radius: var(--sf-radius-sm) !important; font-weight: 700 !important; padding: 12px 22px !important; border: none !important; }

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account table.shop_table th { background: var(--sf-fill); color: var(--sf-muted); font-size: 12px; text-transform: uppercase; padding: 14px; border: none; font-weight: 700; }
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account table.shop_table td { border-top: 1px solid var(--sf-border); padding: 14px; }

/* Login / register (logged out) */
.woocommerce-account:not(.logged-in) .woocommerce .u-columns,
.woocommerce-account:not(.logged-in) .woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) {
	.woocommerce-account:not(.logged-in) .woocommerce .u-columns,
	.woocommerce-account:not(.logged-in) .woocommerce .col2-set { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr !important; }
}
.woocommerce-account form.login, .woocommerce-account form.register,
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 28px; }
.woocommerce-account form.login h2, .woocommerce-account form.register h2,
.woocommerce-account .u-column1 h2, .woocommerce-account .u-column2 h2 { color: var(--sf-navy); font-weight: 800; }
.woocommerce-account form.login input, .woocommerce-account form.register input { border: 1.5px solid var(--sf-border) !important; border-radius: var(--sf-radius-sm) !important; padding: 11px 14px !important; min-height: 46px; width: 100%; }
.woocommerce-account form.login .button, .woocommerce-account form.register .button { background: var(--sf-navy) !important; color: #fff !important; border-radius: var(--sf-radius-sm) !important; font-weight: 700 !important; padding: 12px 22px !important; border: none !important; }

/* ===== Cart & checkout =================================================== */

/* The Delivery Site Details plugin only switches to its two-column cart when
   .cart_totals measures at least 640px (TWO_COLUMN_MIN_PX in its frontend.js).
   WooCommerce defaults it to width:48%;float:right, which measures 528px here. */
.wcdsd-styled.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }

@media (max-width: 768px) {
	.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100% !important; float: none !important; margin: 0 0 10px !important; }
}
@media (max-width: 600px) {
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100% !important; float: none !important; margin-right: 0 !important; }
}

/* ===== Order received ==================================================== */

.woocommerce-order-received .woocommerce { max-width: 1100px; margin: 0 auto; padding: 36px 20px 8px; }
.sf-paypal-legal { max-width: 1100px; margin: 26px auto 52px; padding: 0 20px; font-size: 12px; line-height: 1.6; color: #8A97A8; }
.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 1.6rem; font-weight: 800; color: var(--sf-navy); line-height: 1.25; margin: 0 0 22px; padding: 0; border: 0; background: none; }
.woocommerce-order-received ul.woocommerce-order-overview { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; padding: 0; border: 0; }
.woocommerce-order-received ul.woocommerce-order-overview li { flex: 1 1 180px; margin: 0; padding: 14px 16px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); font-weight: 700; }
.woocommerce-order-received ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--sf-text); font-weight: 800; }
.woocommerce-order-received h2 { font-size: 1.15rem; font-weight: 800; color: var(--sf-navy); margin: 32px 0 14px; }
.woocommerce-order-received table.shop_table { width: 100%; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.woocommerce-order-received table.shop_table thead th { background: var(--sf-fill); color: var(--sf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 14px 16px; border: 0; font-weight: 700; }
.woocommerce-order-received table.shop_table td,
.woocommerce-order-received table.shop_table tfoot th { padding: 14px 16px; border: 0; border-top: 1px solid var(--sf-border); color: var(--sf-text); }
.woocommerce-order-received table.shop_table tfoot th { color: var(--sf-muted); font-weight: 600; }
.woocommerce-order-received table.shop_table a { color: var(--sf-navy); font-weight: 700; }

@media (max-width: 600px) {
	.woocommerce-order-received .woocommerce { padding: 24px 14px 8px; }
	.sf-paypal-legal { padding: 0 14px; }
	.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 1.3rem; }
}

/* ===== Search results page =============================================== */

.sf-search-wrap {
	padding-top: 40px; padding-bottom: 80px;
	padding-left: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2));
	padding-right: max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2));
}
.sf-search-head { margin-bottom: 8px; }
.sf-search-head h1 { font-size: 34px; font-weight: 800; color: var(--sf-navy); letter-spacing: -.01em; margin: 0 0 8px; }
.sf-search-sub { font-size: 15px; color: var(--sf-muted); margin: 0; }
.sf-search-sub b { color: var(--sf-text); }
.sf-search-wrap .woocommerce-result-count { font-size: 13px; color: var(--sf-muted); font-weight: 600; margin: 14px 0 24px; float: none; }
.sf-search-wrap .woocommerce { width: 100%; }
.sf-search-empty { background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: 40px; text-align: center; color: var(--sf-muted); }
.sf-search-empty h3 { color: var(--sf-navy); font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.sf-search-empty a { color: var(--sf-steelblue); font-weight: 700; }

/* ===== Contact page grids (.sfc) ========================================= */

.sfc .sfc-main > *, .sfc .sfc-quick > *, .sfc .sfc-row > *, .sfc .sfc-faqgrid > * { min-width: 0; }
@media (max-width: 1100px) {
	.sfc .sfc-main { grid-template-columns: 1fr !important; }
	.sfc .sfc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.sfc .sfc-faqgrid, .sfc .sfc-faq { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
	.sfc .sfc-quick, .sfc .sfc-row { grid-template-columns: 1fr !important; }
}

/* ===== Homepage bands (.sfhome) ========================================== */


.sfhome .cta-wrap { margin-top: 64px; }

/* ===== Archive header (theme templates) ==================================
   Replaces the Elementor shop/category header containers and the CSS
   `content:` injections that used to supply this text.
   ====================================================================== */

/*
 * Production: heading top-aligned with the sidebar, 6px under the H1, 22px
 * under the subtitle before the results row. The theme had 8px of padding
 * above (so the heading sat below the sidebar's top edge), 8px under the H1
 * and only 4px before the results row.
 */
.sf-archive-head { padding: 0; margin-bottom: 22px; }
.sf-archive-head .sf-h1 { margin-top: 0; margin-bottom: 6px; }
.sf-archive-intro, .sf-archive-sub { font-size: 15px; color: var(--sf-muted); max-width: 90ch; margin: 0; }
.sf-archive-intro p:last-child, .sf-archive-sub:last-child { margin-bottom: 0; }
.sf-archive-intro a { color: var(--sf-steelblue); font-weight: 600; }
.sf-archive-below { padding-bottom: 8px; }
.sf-archive-faq { padding-top: 0; padding-bottom: 64px; }
@media (max-width: 1024px) { .sf-archive-faq { padding-bottom: 10px; } } /* production, tablet and phone */
/* Production: the FAQ follows the description with no gap; the 64px
   container padding sits below the FAQ instead (see archive-product.php). */
.sf-slay.sf-slay--faq { padding-bottom: 0; }

/* The theme's own wrappers already provide the gutter, so WooCommerce's
   notices wrapper should not add its own margins on top. */
.sf-slay .woocommerce-notices-wrapper:empty { display: none; }

/* ===== Subcategory tiles (theme-rendered) ================================
   Replaces WooCommerce's own subcategory output, which had the side effect of
   zeroing the product loop. See sf2026_render_subcategories().
   ====================================================================== */

.sf-subcats {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 32px;
	padding: 0;
}
.sf-subcat { margin: 0; }
.sf-subcat a {
	display: block;
	background: #fff;
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-lg);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.sf-subcat a:hover { box-shadow: 0 16px 30px rgba(18, 35, 61, .10); transform: translateY(-3px); }
.sf-subcat img { display: block; width: 100%; height: auto; background: #F2F4F7; }
.sf-subcat-name {
	display: block;
	padding: 14px 18px 16px;
	color: var(--sf-navy);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
}

@media (max-width: 1200px) { .sf-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .sf-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .sf-subcats { grid-template-columns: 1fr; } }

/* ===== Filters sidebar (theme-rendered) ==================================
   Replaces the hand-written Elementor filters panel and the availability
   snippet that drove it. Class names match the original so the ported
   `.sf-slay` / `.sf-filter-toggle` rules above still apply.
   ====================================================================== */

.sf-shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.sf-shop-main { min-width: 0; }
@media (max-width: 960px) { .sf-shop-layout { grid-template-columns: 1fr; } }

.sf-filters, .sf-filters * { box-sizing: border-box; }
.sf-filters a { text-decoration: none; color: inherit; }
.sf-filters {
	background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
	padding: 24px; position: sticky; top: 24px; color: var(--sf-text);
	/*
	 * Production's sidebar declares no line-height, so everything in it
	 * inherits the Elementor kit's flat `line-height:22px` from the body. The
	 * theme's base is 1.6 (24px), which made every filter row and group taller
	 * and the whole sidebar 39px short of live's 870px once the rows
	 * compounded. Absolute, as the kit's is, so nested font-sizes don't rescale
	 * it.
	 */
	line-height: 22px;
}

/* The theme's global h1..h6{line-height:1.25} beats inheritance and rendered
   the group labels at 15px tall against production's 22px. */
.sf-filters h3, .sf-filters h4 { line-height: inherit; }
@media (max-width: 960px) { .sf-filters { position: static; } }

.sf-filters .fh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sf-filters .fh h3 { font-size: 15px; font-weight: 800; color: var(--sf-navy); margin: 0; }
.sf-filters .fh .clear { font-size: 12px; font-weight: 700; color: var(--sf-orange); }
.sf-filters .fh .clear:hover { text-decoration: underline; }

.sf-fg { border-top: 1px solid var(--sf-border); padding: 18px 0; }
.sf-fg:first-of-type { border-top: none; padding-top: 0; }
.sf-fg h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-text); margin: 0 0 14px; }

.sf-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 11px; font-size: 14px; color: var(--sf-muted); cursor: pointer;
}
.sf-opt:last-child { margin-bottom: 0; }
.sf-opt .l { display: flex; align-items: center; gap: 10px; }
.sf-opt input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sf-navy); pointer-events: none; }
/* Production indents subcategories 12px under their parent list, in 13px. */
.sf-opt-sub { padding-left: 12px; font-size: 13px; }
/* Checkbox sits at the right edge, after the label, as production. */
.sf-opt .sf-av { margin: 3px 3px 3px 4px; flex: 0 0 auto; } /* production keeps the browser checkbox margin on three sides */
.sf-opt:hover { color: var(--sf-navy); }
.sf-opt.active { color: var(--sf-navy); font-weight: 700; }

/* Production separates the price inputs from the group label by 16px. */
.sf-price-inputs { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sf-price-inputs input { width: 100%; padding: 9px 10px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); font-size: 13px; color: var(--sf-text); }
.sf-price-inputs span { color: #9AA5B4; font-size: 13px; }

.sf-apply {
	width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: var(--sf-radius-sm);
	background: var(--sf-navy); color: #fff; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
}
.sf-apply:hover { background: var(--sf-navy-light); }

/* The product grid sits inside .sf-shop-main now, so target that too. */
.sf-shop-main ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important; margin: 0 !important; padding: 0 !important;
	line-height: 22px;
}
.sf-shop-main ul.products::before, .sf-shop-main ul.products::after { content: none !important; display: none !important; }
.sf-shop-main ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; clear: none !important; }
/* Production's breakpoints (measured: 4 across above 1024px, 3 to 1024px,
   2 to 768px with a 16px gap, 1 to 480px) — snippet 36's search-grid rule,
   which production's category and shop grids also used. */
@media (max-width: 1024px) { .sf-shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 768px)  { .sf-shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (max-width: 480px)  { .sf-shop-main ul.products { grid-template-columns: 1fr !important; } }

/* Dual-range price slider, matching the live filters panel. Two overlaid
   range inputs with a fill bar between their thumbs. */
.sf-range { position: relative; height: 22px; margin: 10px 2px 2px; } /* production's spacing */
.sf-range::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
	height: 4px; background: var(--sf-border); border-radius: 4px;
}
.sf-range-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: var(--sf-navy); border-radius: 4px; }
.sf-range input[type=range] {
	position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%);
	-webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; height: 22px;
}
.sf-range input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto;
	width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--sf-navy); cursor: pointer;
}
.sf-range input[type=range]::-moz-range-thumb {
	pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 3px solid var(--sf-navy); cursor: pointer;
}
.sf-range input[type=range]::-moz-range-track { background: transparent; }

.sf-shop-main .sf-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sf-shop-main .sf-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .sf-shop-main .sf-subcats { grid-template-columns: 1fr; } }

/* Footer grid adapts to however many columns the menu produces. */
.sff-grid { grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 960px) { .sff-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sff-grid { grid-template-columns: 1fr; } }

/* ===== Single product summary — matched to production ====================
   Production builds the column from separate Elementor widgets sitting 20px
   apart, so nothing collapses between them. Reproduced with explicit margins
   and padding (not margins that would collapse into each other), measured
   from the title's top edge on production:
     title 0–25 · SKU 45–69 · price line centred at 137 · cart 185–233 ·
     pay-later 233–257 · bulk box from 301
   ========================================================================= */

body.single-product .sf-crumb { padding-top: 58px; padding-bottom: 29px; }
body.single-product .sf-crumb .woocommerce-breadcrumb { margin: 0; font-size: 13px; line-height: 22px; color: #000; }

.woocommerce div.product .summary .product_title { line-height: 25px !important; margin: 0 0 20px !important; }

.sf-sku { font-size: 15px; line-height: 22px; padding-bottom: 2px; color: #12233D; margin: 0 0 40px; }

/* Production's price widget: 28px of space either side of a zero-height line,
   which centres the figure 28px into a 56px block. Padding rather than margin,
   so it cannot collapse into the SKU line's margin above. */
.woocommerce div.product .summary p.price { margin: 0 0 20px !important; padding: 28px 0; line-height: 0; }

.woocommerce div.product .summary form.cart { margin: 0 !important; display: flex; align-items: center; }
.woocommerce div.product .summary .quantity { margin: 0 4px 0 0 !important; }
.woocommerce div.product .summary .single_add_to_cart_button { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; }
/* Cart glyph, as production's add-to-cart widget shows. Drawn as a mask so it
   takes the button's text colour. */
.woocommerce div.product .summary .single_add_to_cart_button::before {
	content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0h45.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zm128 440a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0h45.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zm128 440a48 48 0 1 1 96 0 48 48 0 1 1-96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce div.product .summary .ppcp-messages { margin: 0 0 20px; }

/*
 * Sale prices on the product page. Production's price widget is set to
 * "stacked" (elementor-product-price-block-yes): the old price on its own line,
 * 30px above the sale price, and the <ins> in #AF0404 — which only shows as
 * the underline colour, since the figure itself is forced navy above.
 */
.woocommerce div.product .summary p.price del,
.woocommerce div.product .summary p.price ins { display: block; }
.woocommerce div.product .summary p.price del { margin-bottom: 30px; }
.woocommerce div.product .summary p.price ins { color: #AF0404; }

/*
 * Variable products. The flex row above is for the simple-product form
 * (qty + button side by side); on a variations form it put the options table,
 * qty and button in one row and squeezed the button off to the right. As on
 * production: the options table full width on its own row, then qty + button
 * as a flex row beneath it.
 */
.woocommerce div.product .summary form.variations_form { display: block; }
.woocommerce div.product .summary form.variations_form table.variations { width: 100%; }
.woocommerce div.product .summary .woocommerce-variation-add-to-cart { display: flex; align-items: center; }

/*
 * Product-page sale badge. Production keeps WooCommerce's single-product
 * placement — half an em outside the gallery's top-left corner — with the
 * theme's orange pill, no padding, min-width 3.236em and 0.857em text
 * (42 x 21px). The tile rule at the top of this file (22px in, 11px text)
 * is for the loop cards only.
 */
.woocommerce div.product .sf-product-gallery span.onsale,
.woocommerce div.product > span.onsale {
	top: -0.5em; left: -0.5em; right: auto; margin: 0;
	padding: 0; min-width: 3.236em; min-height: auto;
	font-size: 0.857em; line-height: 1.6; text-align: center;
	border-radius: 20px; font-weight: 700;
}

/* Bulk-quote box and trust grid — production's own CSS, verbatim. flow-root
   so the box's 24px top margin cannot collapse up through the wrapper (on
   production the Elementor widget container prevents that). */
.sfpd{font-family:'Manrope',Arial,sans-serif;display:flow-root;}
.sfpd-bulk{background:#EAF1F8;border:1px solid #D3E3F0;border-radius:12px;padding:18px 20px;margin:24px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.sfpd-bulk .t{font-size:13px;color:#005784;line-height:1.5;}
.sfpd-bulk .t b{display:block;font-size:14px;margin-bottom:2px;}
.sfpd-bulk a{white-space:nowrap;background:#005784;color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:8px;text-decoration:none;}
.sfpd-bulk a:hover{background:#0a6e9e;}
.sfpd-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px;}
.sfpd-trust .i{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#5B6B82;line-height:1.35;}
.sfpd-trust .ico{width:34px;height:34px;border-radius:8px;background:#EAF1F8;color:#2F8FBF;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0;}
@media(max-width:520px){.sfpd-trust{grid-template-columns:1fr;}}

/* /search/ breadcrumb (snippet 6 prints its own <nav class="sf-crumb
   woocommerce-breadcrumb">, which picked up the theme's .sf-crumb rules).
   Production: 60px above, 18px below, 22px line, gutter-aligned — 39px more
   than staging was giving it. */
.sf-guide-content > nav.sf-crumb.woocommerce-breadcrumb {
	box-sizing: content-box;
	padding: 60px max(var(--sf-gut), calc((100% - var(--sf-maxw)) / 2)) 18px;
	line-height: 22px;
}

/* Cart / checkout container comes from the Delivery Site Details plugin
   (max-width 1100px, 24px side padding). Production renders it content-box,
   i.e. 1100px of content inside a 1148px box; the theme's global border-box
   took the padding out of the 1100 and made the cart totals 19px taller. */
body.wcdsd-styled.woocommerce-cart .woocommerce,
body.wcdsd-styled.woocommerce-checkout .woocommerce { box-sizing: content-box; }

/* ===== Ported from Code Snippets (so they can be switched off) ============ */

/* Snippet 36 — search results grid (the [sf_search_products] loop is
   .columns-3): 4 across, 3 to 1024px, 2 to 768px, 1 to 480px. */
.sf-slay .woocommerce ul.products.columns-3{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px !important;width:100% !important;margin:0 !important;}
.sf-slay .woocommerce ul.products.columns-3 li.product{width:auto !important;margin:0 !important;float:none !important;}
@media(max-width:1024px){.sf-slay .woocommerce ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(max-width:768px){.sf-slay .woocommerce ul.products.columns-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;}}
@media(max-width:480px){.sf-slay .woocommerce ul.products.columns-3{grid-template-columns:1fr !important;}}

/* Snippet 84 — category description tables and link tiles on small screens
   (scoped to category archives, as the snippet was). */
body.tax-product_cat .sf-cat-desc .sf-scroll{margin:18px 0}
body.tax-product_cat .sf-cat-desc .sf-scroll table{margin:0 !important}
body.tax-product_cat .sf-cat-desc .sf-swipe{display:none}
@media (max-width:782px){
body.tax-product_cat .sf-cat-desc .sf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.tax-product_cat .sf-cat-desc .sf-scroll.sf-wide table{min-width:520px}
body.tax-product_cat .sf-cat-desc .sf-scroll table{font-size:14px}
body.tax-product_cat .sf-cat-desc .sf-scroll th,body.tax-product_cat .sf-cat-desc .sf-scroll td{padding:9px 10px !important}
body.tax-product_cat .sf-cat-desc .sf-scroll th[style*="34%"]{width:38% !important}
body.tax-product_cat .sf-cat-desc div[style*="display:flex"]{gap:12px !important}
body.tax-product_cat .sf-cat-desc div[style*="display:flex"]>a{padding:16px 18px !important}
}
@media (max-width:540px){
body.tax-product_cat .sf-cat-desc .sf-swipe{display:block;font-size:12px;color:#6b7a86;margin:-10px 0 18px}
}

/* ===== Single product — tablet and phone =================================
   Measured against production at 1000/800/390px. Production stacks the
   summary under the gallery from 1024px down (Elementor's tablet breakpoint),
   not 768px; the summary is a 700px column 10px in, with Elementor's 25px
   widget spacing between title, SKU, price, cart and the bulk box. On phones
   the title, SKU, price and cart are centred and the cart row is 300px wide.
   ====================================================================== */
@media (max-width: 1024px) {
	body.single-product .sf-crumb { padding-top: 30px; padding-bottom: 20px; }
	body.single-product .sf-crumb .woocommerce-breadcrumb { margin-bottom: 13px; }
	.sf-product-layout { flex-direction: column; gap: 0; }
	.sf-product-gallery { width: 520px; max-width: 100%; flex-basis: auto; }
	.woocommerce div.product div.summary.sf-product-summary { float: none; margin: 58px 0 30px 10px; max-width: 700px; width: calc(100% - 10px); }
	.woocommerce div.product .summary .product_title { font-size: 23px !important; line-height: 23px !important; margin: 0 0 25px !important; }
	.woocommerce div.product .sf-sku { font-size: 14px; line-height: 21px; padding: 0; margin: 0 0 25px; }
	/* Padding, not margin: Elementor's 25px widget gap and the price widget's
	   28px margins add up on production instead of collapsing. */
	.woocommerce div.product .summary p.price { padding: 28px 0; margin: 0 !important; }
	.woocommerce div.product .summary form.cart { margin: 25px 0 0 !important; }
	.woocommerce div.product .summary .ppcp-messages { margin: 0; }
	.woocommerce div.product .summary .sfpd { margin-top: 25px; }
	.woocommerce div.product .woocommerce-tabs { margin-top: 0; }
}
@media (max-width: 767px) {
	body.single-product .sf-crumb { padding-bottom: 34px; }
	.woocommerce div.product div.summary.sf-product-summary { margin: 59px 0 20px; max-width: none; width: 100%; }
	.woocommerce div.product .summary .product_title { font-size: 21px !important; line-height: 21px !important; text-align: center; }
	.woocommerce div.product .sf-sku { text-align: center; }
	.woocommerce div.product .summary p.price { text-align: center; padding: 48px 0 28px; }
	.woocommerce div.product .summary form.cart { margin: 45px auto 0 !important; max-width: 300px; }
	.woocommerce div.product .summary .ppcp-messages { max-width: 300px; margin: 0 auto; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 12px; line-height: 12px; padding: 9.6px 14.4px !important; }
}

/* Cart / checkout text sits on production's flat 22px line (the Elementor kit
   base); the theme's 1.6 made each totals row 2px taller. */
body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce { line-height: 22px; }