/*
 Theme Name:   Astra Child
 Description:  Child theme for Astra
 Author:       SubKart
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* The parent Astra stylesheet is enqueued in functions.php
   (astra-parent-style). It must NOT also be @import-ed here: that loaded
   the whole parent sheet a second time and blocked rendering while it
   resolved, since @import is fetched serially after this file arrives. */

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
	/* Wired to Astra's own Global Color Palette (Appearance → Customize →
	   Colors & Background → Global Palette), NOT hardcoded — Astra already
	   outputs its palette as CSS variables --ast-global-color-0 through -8
	   (class-astra-global-palette.php), one per swatch shown in that panel:
	   0=Button/Link, 1=Hover, 2=Heading text. Changing Color 1/2/3 there now
	   changes the brand blue/navy everywhere on the site (buttons, prices,
	   badges, hero accent, links — anywhere these two tokens are used), with
	   no code change and no separate settings page, because every section
	   already reads color through these two variables. The hex after the
	   comma is only a fallback for the (currently impossible) case where
	   Astra's variable isn't defined — today's exact color, so nothing can
	   regress. Neutral/structural tones (borders, muted gray, backgrounds)
	   are deliberately left as plain hex below — those aren't "brand color"
	   and shouldn't shift just because Primary was changed. */
	--sk-primary: var(--ast-global-color-0, #0b6fd3);
	--sk-primary-dark: var(--ast-global-color-1, #0757a8);
	--sk-navy: var(--ast-global-color-2, #162033);
	--sk-navy-2: #243247;
	--sk-muted: #667085;
	--sk-bg: #f7f9fc;
	--sk-border: #e4e8ef;
	--sk-soft-blue: #eef6ff;
	--sk-card-bg: #ffffff;
	--sk-radius: 16px;

	/* One content width for the whole site. Astra's own .ast-container is
	   1240px wide with a 20px gutter, i.e. 1200px of content — matching it
	   here is what keeps homepage sections, WooCommerce pages and the header
	   flush with each other instead of stepping in and out by 10-57px. */
	--sk-max: 1200px;
	--sk-gutter: 20px;
	--sk-shadow: 0 12px 35px rgba(22, 32, 51, 0.08);
	--sk-shadow-lg: 0 20px 45px rgba(22, 32, 51, 0.14);
}

/* ==========================================================================
   0b. Site header — compact
   Astra's Customizer CSS (injected inline, stylesheet index 2) is what sets
   the header row heights:
     .ast-primary-header-bar .site-primary-header-wrap { min-height: 80px }
     .ast-below-header-bar  .site-below-header-wrap    { min-height: 60px }
     .ast-mobile-header-wrap .ast-primary-header-bar   { min-height: 80px }
   all at specificity (0,2,0) — an 80px logo/search/account/cart row plus a
   60px Home/Shop row made the desktop header 142px tall before a single pixel
   of page content. Those three are necessary but NOT sufficient; see the
   cart-icon rule at the end of this section for what actually held the bar
   open. Everything here is written above Astra's specificity so it wins on
   merit rather than on source order, and every rule touches ROW HEIGHT only:
   the logo, the search/account/cart icons and the nav links all keep their
   own sizes, so this is a compact header, not a shrunken one.
   ========================================================================== */
.ast-primary-header-bar .site-primary-header-wrap.ast-builder-grid-row-container {
	min-height: 64px;
}

.ast-below-header-bar .site-below-header-wrap.ast-builder-grid-row-container {
	min-height: 44px;
}

.ast-mobile-header-wrap .ast-primary-header-bar.ast-primary-header {
	min-height: 64px;
}

/* THE actual height driver on desktop, and the reason lowering only the two
   rules above changed nothing: Astra's Customizer gives the CART ICON its own
   floor —
     .ast-desktop .ast-primary-header-bar .ast-header-woo-cart { min-height: 80px }
   at (0,3,0). The row cannot shrink below its tallest child, so the cart
   element held the bar at 80px even with the wrap's min-height at 64px.
   Verified by walking every descendant of .site-primary-header-wrap and
   reading computed min-height: the branding block is only 63.2px and the
   search and account icons 27.8px and 26.4px, so nothing else was ever
   responsible. Written at (0,4,0); the icon itself is 40px and is untouched. */
.ast-desktop .ast-primary-header-bar .ast-header-woo-cart.ast-builder-layout-element {
	min-height: 64px;
}

/* Same story on the second row: its 60px was NOT coming from the wrap's
   min-height either but from
     .ast-desktop .ast-below-header-bar .main-header-menu > .menu-item
       { line-height: 60px }
   at (0,3,0) — Astra centres the nav labels by setting the line box to the
   full row height. Lowering it in step with the row keeps Home/Shop centred
   and keeps the whole 44px band clickable; the label's own font size is
   unchanged (its natural line-height is 26.4px, so 44px is still a
   comfortable tap target). (0,4,0) via the ul's .ast-nav-menu class. */
.ast-desktop .ast-below-header-bar .ast-nav-menu > .menu-item {
	line-height: 44px;
}

/* ==========================================================================
   0c. Site logo
   The uploaded logo file (main_logo1.png, set via Customizer > Site Identity,
   attachment ID 221) is a single stacked lockup 1536x1024px: icon (rows
   0-654), "SubKart" wordmark (rows 673-899), then a tagline "BEST PRODUCTS.
   GREATE PRICES." in the bottom ~12% (rows 932-974) — confirmed by scanning
   the PNG's alpha channel row-by-row, not by eye. A tagline is illegible at
   header scale and no theme has room for one in the nav bar, so rather than
   let Astra's Logo Width control scale the WHOLE image (which blew the
   compact header from gotcha 21 back out to ~300px tall), this crops the
   image to just the icon+wordmark (rows 0-899, i.e. 900/1024 = 87.9% of the
   height) using an overflow:hidden box shorter than the scaled image, so the
   bottom slice (tagline + its padding) is clipped off instead of shrunk to
   an unreadable size. Width alone drives the crop — set the img's width and
   both figures below scale together (visible height = width * 0.5859,
   derived from 900/1024 * 1536/1536... i.e. width * (900/1024) / (1536/1536)
   simplifies to width * 900 / 1536 = width * 0.5859).
   No viewport media query needed for mobile vs desktop: one size is used
   everywhere. (This used to be 96x56 on desktop and 72x42 on mobile — the
   owner said the desktop header logo was "very huge," so both were dropped
   to the smaller, already-mobile-verified 72x42, rather than guess at a new
   desktop-only number. If a future ask wants the desktop logo bigger again,
   re-split into a separate `.ast-mobile-header-wrap` override like before.)
   Site Title text visibility is turned off for all 3 devices in the
   Customizer (astra-settings display-site-title-responsive) since the logo
   already includes the wordmark — redundant, and "Inline Logo & Site Title"
   was wrapping it letter-by-letter next to the giant unstyled image before
   these rules and that toggle were both set. Verified live at a real 375px
   reload (72x42, x=20 matching --sk-gutter, vertically centred with the
   hamburger toggle within ~1px, no horizontal overflow); desktop uses the
   same box so the same math applies at any width. */
.site-header .ast-site-identity .custom-logo-link {
	display: inline-block;
	overflow: hidden;
	width: 72px;
	height: 42px;
}

.site-header .ast-site-identity .custom-logo-link img.custom-logo {
	display: block;
	width: 72px !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
}

/* ==========================================================================
   0d. Mobile header search box — fix horizontal overflow
   Astra's mobile "slide-search" toggle (.ast-search-menu-icon.slide-search,
   activated by adding .ast-dropdown-active) sets the revealed <form> to
   `position: absolute` with a JS-computed `left` meant to right-align the
   dropdown's right edge to the search ICON's right edge, sized to roughly
   fill the header. That JS positions the form relative to the icon's OWN
   tiny box (~18px wide) — not the header or the viewport — and assumes the
   icon sits flush against the right edge. On this header the icon is
   followed by the hamburger toggle, so the icon is NOT flush right, and the
   dropdown (sized ~92% of viewport width) overshoots the icon's actual
   available space and renders with a NEGATIVE left offset — confirmed live:
   at 375px wide the form rendered at x=-50.8px, i.e. its left ~51px were
   pushed off-screen past the header/logo. This is a pre-existing Astra
   layout quirk, not something introduced by the logo change above — it
   reproduces with the logo entirely unstyled too.
   Fix targets ONLY `left` and `width`, both in viewport units via calc(),
   and leaves `position`/`top`/`transform` completely alone. Those three
   looked fine natively (checked before touching anything: top:12.5px,
   transform: translateY(-20.8px), giving a sane on-screen y) — and,
   discovered the hard way, they're driven by an active `transition: all
   0.2s` on the form. Overriding `position` (e.g. to `fixed`) makes the
   transition re-evaluate top/transform against a totally different
   coordinate scheme mid-flight, and neither plain nor `!important` styles —
   from a stylesheet OR set via JS after the fact — can reliably win against
   a live CSSTransition for the properties it's actively animating. `left`
   and `width` are NOT among those animated properties, so they take a
   stylesheet override cleanly; `transition: none` on top of that (once the
   dropdown is already .ast-dropdown-active) prevents any future left/width
   change from kicking off a fresh fight.
   The calc() constants come from measuring the icon's own x at two
   different widths (375px: x=276.575; 414px: x=315.775 — a 39.2px shift for
   a 39px width change, confirming the icon is right-anchored, not
   fixed-position) and solving for "icon's distance from the right edge is a
   constant 98.425px, so icon_x = 100vw - 98.425px" — then choosing a target
   on-screen box of [16px, 100vw-16px] (a 16px margin each side) and solving
   `left` (relative to the icon) as 16 - icon_x = 114.425px - 100vw.
   Verified live at 375px and 414px (x=15.8px both times, i.e. the 16px
   target, zero horizontal overflow, `scrollWidth === clientWidth`). Not
   independently re-verified at exactly 320px — the pane's CSS runtime
   injection produced a separate, seemingly pane-specific measurement
   inconsistency at that width (see the CLAUDE.md gotcha about stale
   computed styles after runtime CSS injection); the underlying math doesn't
   depend on viewport width in any way that should break there specifically,
   but it's worth a real-device glance after deploy. */
.ast-mobile-header-wrap .slide-search.ast-dropdown-active .search-form {
	transition: none !important;
	left: calc(114.425px - 100vw) !important;
	width: calc(100vw - 32px) !important;
}

/* ==========================================================================
   1. Hero section
   ========================================================================== */
.subkart-hero {
	background: linear-gradient(135deg, #f3f8ff 0%, #fff 58%);
	padding: 56px var(--sk-gutter) 64px;
	overflow: hidden;
}

.subkart-hero__grid {
	max-width: var(--sk-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 50px;
	align-items: center;
}

.subkart-eyebrow {
	display: inline-flex;
	padding: 7px 12px;
	border-radius: 99px;
	background: var(--sk-soft-blue);
	color: var(--sk-primary);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	margin-bottom: 18px;
}

.subkart-hero__title {
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--sk-navy);
	font-weight: 800;
	margin: 0 0 20px;
}

.subkart-hero__title-accent {
	color: var(--sk-primary);
}

.subkart-hero__subtitle {
	font-size: 18px;
	color: var(--sk-muted);
	max-width: 560px;
	margin: 0 0 28px;
	line-height: 1.6;
}

.subkart-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.subkart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 21px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.subkart-btn--primary {
	background: var(--sk-primary);
	color: #fff;
}

.subkart-btn--primary:hover,
.subkart-btn--primary:focus-visible {
	background: var(--sk-primary-dark);
	transform: translateY(-2px);
	color: #fff;
}

.subkart-btn--light {
	background: #fff;
	border-color: var(--sk-border);
	color: var(--sk-navy);
}

.subkart-btn--light:hover,
.subkart-btn--light:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sk-shadow);
	color: var(--sk-navy);
}

.subkart-hero__note {
	display: flex;
	gap: 22px;
	margin-top: 28px;
	color: var(--sk-muted);
	font-size: 13px;
	flex-wrap: wrap;
}

.subkart-hero__note strong {
	color: var(--sk-navy);
	display: block;
	font-size: 15px;
}

.subkart-hero__visual {
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 26px;
	padding: 18px;
	box-shadow: var(--sk-shadow);
}

.subkart-hero__product {
	min-height: 370px;
	border-radius: 18px;
	background: linear-gradient(145deg, #e9f4ff, #f8fbff);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.subkart-hero__product-link {
	display: block;
	width: 100%;
	height: 100%;
}

.subkart-hero__product-link img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 370px;
	object-fit: contain;
}

.subkart-hero__placeholder {
	width: 55%;
	padding: 40px 0;
	border-radius: 22px;
	background: #d9e8f8;
	box-shadow: 0 20px 45px rgba(11, 111, 211, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #6b7f95;
	font-weight: 700;
}

.subkart-floating {
	position: absolute;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 12px;
	padding: 11px 14px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	font-size: 12px;
	font-weight: 700;
	color: var(--sk-navy);
}

.subkart-floating--one {
	left: 20px;
	top: 20px;
}

.subkart-floating--two {
	right: 18px;
	bottom: 20px;
}

/* ==========================================================================
   2. Shared homepage section layout
   ========================================================================== */
.subkart-section {
	padding: 64px var(--sk-gutter);
}

.subkart-section--alt {
	background: var(--sk-bg);
}

.subkart-section > * {
	max-width: var(--sk-max);
	margin-left: auto;
	margin-right: auto;
}

.subkart-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.subkart-section__head h2 {
	margin: 0;
	font-size: 30px;
	letter-spacing: -0.03em;
	color: var(--sk-navy);
}

.subkart-section__head p {
	margin: 6px 0 0;
	color: var(--sk-muted);
	font-size: 14px;
}

.subkart-viewall {
	color: var(--sk-primary);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

/* ==========================================================================
   3. Category strip
   ========================================================================== */
.subkart-categories {
	display: grid;
	/* auto-fit rather than a hardcoded 5: the strip renders however many real
	   product categories exist (5 today) and stays in one even row if the owner
	   adds or removes one. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.subkart-category {
	display: block;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	padding: 22px;
	background: #fff;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subkart-category:hover {
	transform: translateY(-3px);
	box-shadow: var(--sk-shadow);
}

.subkart-category__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--sk-soft-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-primary);
	font-size: 22px;
	margin-bottom: 15px;
}

.subkart-category__icon--image {
	background-size: cover;
	background-position: center;
}

.subkart-category h3 {
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--sk-navy);
}

.subkart-category p {
	margin: 0;
	color: var(--sk-muted);
	font-size: 13px;
}

/* ==========================================================================
   4. Product grid — premium card redesign
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	/* Explicit counts, not auto-fill: Astra's woocommerce-layout-grid.min.css
	   ships an unconditional `repeat(4, 1fr)` under a `:not(.elementor-grid)`
	   selector that outweighs a plain `.woocommerce ul.products` rule at every
	   width, so these need `!important` — including inside the media queries
	   below, where a later non-important rule would still lose to the
	   important base rule. */
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px 20px;
	margin: 0 0 40px !important;
	clear: both;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sk-card-bg);
	border: 1px solid var(--sk-border);
	border-radius: 15px;
	overflow: hidden;
	text-align: left;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--sk-shadow);
}

.woocommerce ul.products li.product a {
	text-decoration: none;
	box-shadow: none;
	color: inherit;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: linear-gradient(145deg, #edf5fd, #f8fafc);
}

/* Astra rebuilds the loop card markup with its own wrapper classes
   (astra-shop-thumbnail-wrap / astra-shop-summary-wrap) instead of plain
   WooCommerce markup, and its Customizer CSS ships
   `li.product.desktop-align-left .button { margin-left: 0; margin-right: 0 }`
   inline — which loads AFTER this file and outweighs it, so per-child
   horizontal margins on the button silently never applied and the button sat
   flush to the card edge while the text above it was inset 16px.
   The inset therefore lives on the summary wrapper instead: one source of
   truth that Astra has no rule against, and nothing here to lose a cascade
   fight over. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3.woocommerce-loop-product__title,
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sk-navy);
	/* Fixed three-line box rather than a min-height: every card is then the
	   same height whatever the title length, instead of rows differing by
	   ~20px depending on how the longest title wrapped. */
	height: 63px;
	margin: 4px 0 10px;
	padding: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-woo-product-category {
	/* One line, ellipsised. Left to wrap, a long category name ("Beauty &
	   Personal Care") took two or three lines on a narrow card while a short
	   one took one, which was the last thing making card heights differ
	   between rows once the title was clamped. */
	display: block;
	height: 16px;
	line-height: 16px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0;
	margin: 0 0 2px;
	font-size: 12px;
	color: var(--sk-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 0 7px;
	color: #f59e0b;
	font-size: 13px;
}

.woocommerce ul.products li.product .price {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--sk-navy);
}

.woocommerce ul.products li.product .price del {
	color: #98a2b3;
	font-weight: 500;
	font-size: 12px;
	opacity: 1;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--sk-navy);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	margin: auto 0 0;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid var(--sk-primary);
	background: #fff;
	color: var(--sk-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover {
	background: var(--sk-primary);
	color: #fff;
}

.woocommerce ul.products li.product .added_to_cart {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-primary);
}

.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 6px;
	background: var(--sk-navy);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: none;
	z-index: 2;
}

/* ==========================================================================
   5. Trust strip
   ========================================================================== */
.subkart-trust {
	max-width: var(--sk-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	overflow: hidden;
	background: #fff;
}

.subkart-trust__item {
	padding: 24px;
	border-right: 1px solid var(--sk-border);
	display: flex;
	gap: 13px;
	align-items: center;
}

.subkart-trust__item:last-child {
	border-right: 0;
}

.subkart-trust__icon {
	font-size: 23px;
}

.subkart-trust__item strong {
	display: block;
	font-size: 13px;
	color: var(--sk-navy);
}

.subkart-trust__item span {
	font-size: 11px;
	color: var(--sk-muted);
}

/* ==========================================================================
   6. Deals banner
   ========================================================================== */
.subkart-banner {
	max-width: var(--sk-max);
	margin: 0 auto;
	background: var(--sk-navy);
	color: #fff;
	border-radius: 22px;
	padding: 42px 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	flex-wrap: wrap;
}

.subkart-banner h2 {
	font-size: 29px;
	margin: 0 0 7px;
	color: #fff;
}

.subkart-banner p {
	margin: 0;
	color: #cbd5e1;
	font-size: 14px;
}

/* ==========================================================================
   7. Newsletter
   ========================================================================== */
.subkart-newsletter {
	background: var(--sk-soft-blue);
	padding: 56px var(--sk-gutter);
}

.subkart-newsletter__inner {
	max-width: var(--sk-max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 35px;
	flex-wrap: wrap;
}

.subkart-newsletter__inner h2 {
	margin: 0 0 7px;
	font-size: 28px;
	color: var(--sk-navy);
}

.subkart-newsletter__inner p {
	margin: 0;
	color: var(--sk-muted);
	font-size: 14px;
}

.subkart-newsletter__form {
	display: flex;
	min-width: 380px;
	flex: 1;
	max-width: 430px;
}

.subkart-newsletter__form input {
	flex: 1;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--sk-border);
	border-right: 0;
	border-radius: 9px 0 0 9px;
	outline: none;
	font-size: 14px;
}

.subkart-newsletter__form button {
	border: 0;
	background: var(--sk-primary);
	color: #fff;
	padding: 0 22px;
	border-radius: 0 9px 9px 0;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.subkart-newsletter__form button:hover {
	background: var(--sk-primary-dark);
}

/* ==========================================================================
   8. Single product page
   ========================================================================== */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
	row-gap: 24px;
	align-items: start;
	/* No max-width / horizontal padding here: this sits inside Astra's
	   .ast-container, which already supplies the single site-wide gutter.
	   Adding another one indented product content a further 24px on desktop
	   and 20px on mobile, so the page stepped in twice and no longer lined up
	   with the header or the breadcrumb. */
	padding: 32px 0 0;
}

.single-product div.product div.images.woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	overflow: hidden;
	background: #fff;
}

.single-product div.product div.summary.entry-summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}

.single-product .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 14px;
	padding: 14px;
	position: relative;
}

.single-product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

.single-product .woocommerce-product-gallery .flex-viewport {
	grid-column: 2;
	grid-row: 1;
	border-radius: 8px;
	overflow: hidden !important;
	/* width and height both forced, and in this order, on purpose.
	   FlexSlider writes an inline `height` on this element and then sizes every
	   slide to whatever width it measures here. With only `aspect-ratio` set,
	   a grid item that has a definite height derives its width FROM that height
	   instead of stretching to the column — so the inline height fed back into
	   the width and the main product image collapsed to 150x150px on mobile.
	   Pinning width:100% and overriding the inline height makes the ratio drive
	   height from width, which is the direction that was always intended. */
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	position: relative;
}

.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
	height: 100%;
}

.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	height: 100% !important;
}

.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
	height: 100%;
	object-fit: cover;
}

.single-product .woocommerce-product-gallery__trigger {
	z-index: 2;
}

.single-product .flex-control-thumbs {
	/* Absolutely positioned so the rail cannot set the grid row's height.
	   Products here carry 5-9 images; as a normal grid item the column ran to
	   710px beside a 394px image, leaving the gallery ~316px taller than the
	   product summary next to it and mostly empty. Now it fills exactly the
	   height of the main image and scrolls past that. */
	position: absolute;
	top: 14px;
	left: 14px;
	bottom: 14px;
	width: 80px;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

.single-product .flex-control-thumbs li {
	flex: 0 0 auto;
}

.single-product .flex-control-thumbs li {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .flex-control-thumbs img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--sk-border);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--sk-primary);
}

.single-product .summary.entry-summary {
	padding-top: 4px;
}

.single-product .product_title.entry-title {
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--sk-navy);
	margin: 0 0 10px;
}

.single-product .woocommerce-product-rating {
	margin-bottom: 14px;
	font-size: 14px;
}

.single-product .woocommerce-product-rating .star-rating {
	color: #f59e0b;
}

.single-product p.price {
	font-size: 28px;
	font-weight: 700;
	color: var(--sk-navy);
	margin: 0 0 18px;
}

.single-product p.price del {
	color: #98a2b3;
	font-weight: 500;
	font-size: 16px;
	opacity: 1;
	margin-right: 8px;
}

.single-product p.price ins {
	text-decoration: none;
	color: var(--sk-navy);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--sk-muted);
	font-size: 15px;
	line-height: 1.7;
	padding-bottom: 20px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--sk-border);
}

.single-product .woocommerce-product-details__short-description strong,
.single-product .woocommerce-product-details__short-description b {
	color: var(--sk-navy);
}

.single-product .woocommerce-product-details__short-description ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.single-product .woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 22px;
	margin: 9px 0;
	font-size: 14px;
}

.single-product .woocommerce-product-details__short-description ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--sk-primary);
	font-weight: 700;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.single-product form.cart .quantity {
	margin: 0;
	flex: 0 0 auto;
}

.quantity.subkart-qty-enhanced {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	overflow: hidden;
}

.quantity.subkart-qty-enhanced .qty {
	border: 0;
	border-radius: 0;
	width: 48px;
	text-align: center;
	font-size: 15px;
}

.subkart-qty-btn {
	width: 36px;
	border: 0;
	background: #fff;
	color: var(--sk-navy);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.subkart-qty-btn:hover {
	background: var(--sk-soft-blue);
}

.single-product form.cart .quantity,
.single-product form.cart .qty {
	height: 46px;
}

.single-product .single_add_to_cart_button,
.single-product .subkart-buy-now-button {
	min-height: 46px;
	padding: 0 26px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.single-product .single_add_to_cart_button {
	background: #fff;
	color: var(--sk-primary);
	border-color: var(--sk-primary);
}

.single-product .single_add_to_cart_button:hover {
	background: var(--sk-soft-blue);
	transform: translateY(-2px);
}

.single-product .subkart-buy-now-button {
	background: var(--sk-primary);
	color: #fff;
}

.single-product .subkart-buy-now-button:hover {
	background: var(--sk-primary-dark);
	transform: translateY(-2px);
}

.subkart-discount-pill {
	display: inline-flex;
	align-items: center;
	background: var(--sk-soft-blue);
	color: var(--sk-primary);
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	margin-left: 10px;
	vertical-align: middle;
}

.subkart-product-trust {
	border: 1px solid var(--sk-border);
	border-radius: 11px;
	padding: 14px 16px;
	margin: 0 0 20px;
	background: #fafbfc;
}

.subkart-product-trust p {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sk-muted);
}

.subkart-product-trust p:last-child {
	margin-bottom: 0;
}

.subkart-product-trust strong {
	color: var(--sk-navy);
}

.single-product .product_meta {
	font-size: 13px;
	color: var(--sk-muted);
	padding-top: 16px;
	border-top: 1px solid var(--sk-border);
}

.single-product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.single-product .product_meta a {
	color: var(--sk-primary);
	text-decoration: none;
}

/* Tabs */
.single-product .woocommerce-tabs.wc-tabs-wrapper {
	grid-column: 1 / -1;
	margin-top: 0;
	align-self: start;
}

.single-product ul.tabs.wc-tabs {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-bottom: 1px solid var(--sk-border);
	/* Five tabs measure 484px total (measured 2026-10-10 at 14px: 78 + 150 +
	   129 + 80 + 27px plus four 4px gaps) against only 335px of content on a
	   375px phone. Scrolling was the first answer, but with scrollbar-width:
	   none there is no visual cue that more tabs exist, so "Reviews" (4th of
	   5, starting at x=389 in a 375px viewport) sat entirely off-screen and
	   simply looked missing — reported by the owner 2026-10-10. Below 767px
	   the strip now WRAPS instead (see section 12), so every tab is on screen
	   without needing to discover a swipe.
	   Wrapping was originally abandoned because the last tab squeezed to a
	   27px sliver — that was before `flex: 0 0 auto` was added on the li (the
	   shrinkage, not the wrap itself, was the bug), so wrap is safe now.
	   overflow-x stays auto purely as a safety net: if a label were ever
	   wider than the whole strip (longer translation, bigger font), it
	   scrolls internally rather than pushing the whole page sideways.
	   Note for future edits: this file's own `li a { padding: 12px 18px }`
	   does NOT win — getComputedStyle reports the links at `7px 0` (i.e.
	   0.5em 0 from a higher-specificity Astra/WooCommerce rule), which is
	   why the labels are tight text with no side padding. Pre-existing on
	   desktop too; left alone here. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.single-product ul.tabs.wc-tabs::-webkit-scrollbar {
	display: none;
}

.single-product ul.tabs.wc-tabs li {
	margin: 0;
	/* Without flex:0 0 auto the tabs shrink to fit instead of overflowing, and
	   "FAQ" collapsed to a 27px sliver on a phone. */
	flex: 0 0 auto;
}

.single-product ul.tabs.wc-tabs li a {
	display: block;
	white-space: nowrap;
	padding: 12px 18px;
	font-weight: 700;
	font-size: 14px;
	color: var(--sk-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.single-product ul.tabs.wc-tabs li.active a {
	color: var(--sk-primary);
	border-bottom-color: var(--sk-primary);
}

.single-product .woocommerce-Tabs-panel {
	padding: 28px 0;
	color: var(--sk-navy);
	font-size: 15px;
	line-height: 1.75;
}

.single-product .woocommerce-Tabs-panel h2 {
	font-size: 24px;
	margin: 30px 0 14px;
	color: var(--sk-navy);
}

.single-product .woocommerce-Tabs-panel h2:first-child {
	margin-top: 0;
}

.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li {
	color: var(--sk-muted);
}

/* Specifications table */
.single-product table.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
	max-width: 750px;
}

.single-product table.woocommerce-product-attributes th,
.single-product table.woocommerce-product-attributes td {
	border: 1px solid var(--sk-border);
	padding: 11px 14px;
	font-size: 14px;
	text-align: left;
}

.single-product table.woocommerce-product-attributes th {
	font-weight: 700;
	background: #f8fafc;
	color: var(--sk-navy);
	width: 35%;
}

.single-product table.woocommerce-product-attributes td {
	color: var(--sk-muted);
}

/* Reviews */
.single-product #reviews ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product #reviews li.comment {
	border-bottom: 1px solid var(--sk-border);
	padding: 16px 0;
}

.single-product #reviews .comment-text .star-rating {
	color: #f59e0b;
	margin-bottom: 6px;
}

.single-product #reviews p.meta {
	font-size: 13px;
	color: var(--sk-muted);
	margin: 0 0 6px;
}

.single-product #reviews .woocommerce-review__author {
	color: var(--sk-navy);
}

.single-product #reviews .description p {
	margin: 0;
	color: var(--sk-navy);
}

.single-product #review_form_wrapper {
	margin-top: 24px;
}

/* FAQ accordion */
.subkart-faq details {
	border-bottom: 1px solid var(--sk-border);
	padding: 15px 0;
}

.subkart-faq summary {
	font-weight: 700;
	color: var(--sk-navy);
	cursor: pointer;
}

.subkart-faq details p {
	margin: 10px 0 0;
	color: var(--sk-muted);
}

/* Related products */
.single-product section.related.products {
	grid-column: 1 / -1;
	margin-top: 0;
	align-self: start;
	padding-bottom: 72px;
}

.single-product section.related.products h2 {
	font-size: 26px;
	letter-spacing: -0.02em;
	color: var(--sk-navy);
	margin: 0 0 24px;
}

/* ==========================================================================
   9. Shop archive (filters, toolbar, pagination)
   ========================================================================== */
.woocommerce-breadcrumb {
	padding: 20px 0 0;
	font-size: 13px;
	color: var(--sk-muted);
}

.woocommerce-breadcrumb a {
	color: var(--sk-primary);
	text-decoration: none;
}

.ast-woocommerce-container {
	/* Inherit Astra's container width and gutter rather than nesting a second,
	   narrower one inside it — see the note on .single-product div.product. */
	max-width: none;
	margin: 0;
	padding: 0 0 60px;
}

.woocommerce-products-header {
	margin-bottom: 4px;
}

.woocommerce-products-header__title.page-title {
	margin: 20px 0 4px;
	font-size: 26px;
}

/* Result count + sort control share a flex parent emitted by
   subkart_shop_toolbar_open(). The `p.` / `form.` qualifiers are what beat
   Astra's inline `.woocommerce .woocommerce-result-count { float: left }`
   (0,2,0) — that rule loads after this file, so an equal-specificity override
   would lose on source order and the count kept floating over the dropdown at
   narrow widths. */
.subkart-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.subkart-shop-toolbar p.woocommerce-result-count {
	float: none;
	margin: 0;
	padding: 0;
	color: var(--sk-muted);
	font-size: 14px;
}

.subkart-shop-toolbar form.woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce-ordering select.orderby {
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--sk-navy);
	background: #fff;
}

.woocommerce-pagination {
	clear: both;
	text-align: center;
	margin-top: 40px;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border-radius: 8px;
	border: 1px solid var(--sk-border);
	color: var(--sk-navy);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-pagination .page-numbers.current {
	background: var(--sk-primary);
	border-color: var(--sk-primary);
	color: #fff;
}

.woocommerce-pagination .page-numbers.dots {
	border: 0;
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--sk-primary);
	color: var(--sk-primary);
}

/* ==========================================================================
   9d. Shop sidebar (real WooCommerce classic widgets: Categories, Price)
   ========================================================================== */
.subkart-shop-subtitle {
	color: var(--sk-muted);
	font-size: 14px;
	margin: 0 0 4px;
}

.subkart-shop-layout {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 28px;
	align-items: start;
}

.subkart-shop-main {
	min-width: 0;
}

.subkart-shop-sidebar {
	border: 1px solid var(--sk-border);
	border-radius: 14px;
	padding: 20px;
}

/* <details>/<summary>: a plain heading on desktop, a tap target on mobile
   (see subkart_shop_filters_script). */
.subkart-shop-sidebar__toggle {
	font-size: 16px;
	font-weight: 700;
	color: var(--sk-navy);
	list-style: none;
	cursor: default;
	margin-bottom: 20px;
}

.subkart-shop-sidebar__toggle::-webkit-details-marker {
	display: none;
}

.subkart-shop-widget {
	border-top: 1px solid var(--sk-border);
	padding: 18px 0;
}

.subkart-shop-widget:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.subkart-shop-widget__title {
	font-size: 14px;
	margin: 0 0 12px;
	color: var(--sk-navy);
}

.subkart-shop-widget ul.product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.subkart-shop-widget ul.product-categories li {
	margin: 0 0 10px;
}

.subkart-shop-widget ul.product-categories a {
	color: var(--sk-muted);
	text-decoration: none;
	font-size: 14px;
}

.subkart-shop-widget ul.product-categories a:hover {
	color: var(--sk-primary);
}

.subkart-shop-widget ul.product-categories .count {
	color: #98a2b3;
	font-size: 12px;
}

.subkart-shop-widget ul.product-categories li.current-cat > a {
	color: var(--sk-primary);
	font-weight: 700;
}

.subkart-shop-widget .price_slider {
	margin-bottom: 18px;
}

.subkart-shop-widget .ui-slider {
	position: relative;
	height: 4px;
	background: var(--sk-border);
	border-radius: 4px;
	margin: 10px 4px 24px;
}

.subkart-shop-widget .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--sk-primary);
	border-radius: 4px;
}

.subkart-shop-widget .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	background: #fff;
	border: 2px solid var(--sk-primary);
	border-radius: 50%;
	cursor: pointer;
	outline: none;
}

.subkart-shop-widget .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.subkart-shop-widget .price_slider_amount input[type="text"] {
	width: calc(50% - 4px);
	padding: 9px;
	border: 1px solid var(--sk-border);
	border-radius: 7px;
	font-size: 13px;
	color: var(--sk-navy);
}

.subkart-shop-widget .price_slider_amount .button {
	order: 3;
	width: 100%;
	border: 0;
	background: var(--sk-primary);
	color: #fff;
	padding: 11px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

.subkart-shop-widget .price_slider_amount .button:hover {
	background: var(--sk-primary-dark);
}

.subkart-shop-widget .price_slider_amount .price_label {
	display: none;
}

/* ==========================================================================
   11b. Cart & Checkout — WooCommerce Blocks version
   These pages render the WooCommerce Blocks Cart/Checkout, not the classic
   shortcodes (gotcha 12). Every selector and every competing rule cited below
   was read out of the LIVE cascade (walking document.styleSheets and testing
   el.matches per rule), not inferred from WooCommerce template files.
   Stylesheet order on these pages: Astra main.min.css = 1, Astra inline
   Customizer CSS = 2, WooCommerce blocks/cart.css = 10, this file = 20 — so
   an equal-specificity rule here beats all three on source order.
   ========================================================================== */

/* --- Page container ------------------------------------------------------
   Both pages wrap their block in .alignwide, which WordPress/Astra pull out
   of the container gutter with negative margins below 1201px. Matching the
   specificity of Astra's own rule (0,4,0) keeps the cart in the normal
   content column at every width. */
.entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-cart.alignwide,
.entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-checkout.alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Space above the "Cart"/"Checkout" page title.
   Astra's .ast-plain-container.ast-no-sidebar #primary (0,2,1) sets
   margin: 60px 0 only inside @media (min-width: 1200px) and 0 everywhere
   else, so these pages had 60px of air on desktop and literally none on
   tablet and mobile. One deliberate value at every width instead; the extra
   class keeps this at (0,3,1) so it wins without !important. Scoped to the
   two body classes so no other page's content spacing moves. */
.woocommerce-cart.ast-plain-container.ast-no-sidebar #primary,
.woocommerce-checkout.ast-plain-container.ast-no-sidebar #primary {
	margin-top: 40px;
	margin-bottom: 48px;
}

@media (min-width: 1200px) {
	.woocommerce-cart.ast-plain-container.ast-no-sidebar #primary,
	.woocommerce-checkout.ast-plain-container.ast-no-sidebar #primary {
		margin-top: 48px;
	}
}

/* Gap between the page title and the cart itself. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
	margin-bottom: 28px;
}

/* --- Two-column layout ---------------------------------------------------
   cart.css lays this out with percentage widths meant for its own flex
   layout (.wc-block-components-main{width:65%},
   .wc-block-components-sidebar{width:35%} plus a percentage padding-left).
   Once the parent is display:grid those percentages resolve against the GRID
   COLUMN and compound, so both children must be reset to fill their column
   and let the grid own the split (gotcha 14). The card's own padding is
   declared on that SAME selector here, so it can no longer lose to the reset
   the way a bare .wc-block-components-sidebar rule did — that is what left
   the totals box with zero horizontal padding and its contents flush against
   its own border. */
.wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: 32px;
	row-gap: 24px;
	align-items: start;
	padding: 0 0 8px;
	margin-bottom: 0;
}

.wc-block-components-sidebar-layout .wc-block-components-main {
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: 0;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: 100%;
	max-width: none;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
}

/* --- Cart item list ------------------------------------------------------
   This is a real <table>. Padding written on .wc-block-cart-items__row has no
   effect at desktop because that element is a <tr> and table-row boxes ignore
   padding — the horizontal inset has to live on the <th>/<td> cells. That is
   why the list previously sat flush against its own border on both edges and
   the row separators appeared to stop at arbitrary positions.
   cart.css owns those cells at (0,2,1) above 700px and (0,4,0) below it, so
   the overrides are written at (0,4,1)/(0,4,2). */
.wc-block-cart table.wc-block-cart-items {
	width: 100%;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	border-collapse: separate;
	border-spacing: 0;
}

.wc-block-cart-items__header th {
	color: var(--sk-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (min-width: 700px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header th {
		padding-top: 14px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--sk-border);
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		padding-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--sk-border);
	}

	.wc-block-cart table.wc-block-cart-items tbody tr:last-child td {
		border-bottom: 0;
	}

	/* One inset on the outer edges only, so every row lines up with the
	   header row and with the card border. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header th:first-child,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td:first-child {
		padding-left: 20px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header th:last-child,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td:last-child {
		padding-right: 20px;
	}

	/* 120px = 20px inset + 80px image + 20px gutter, so the product text
	   column starts at the same x in every row. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		width: 120px;
		padding-right: 20px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-total,
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		width: 120px;
	}
}

/* Fixed 80px display area for every thumbnail regardless of the source
   image's aspect ratio, so no product can set a different row height.
   object-fit: contain letterboxes instead of distorting. The <a> around the
   image is display:inline by default, which left the image sitting on a text
   baseline inside the cell. */
.wc-block-cart-item__image a {
	display: block;
	width: 80px;
}

.wc-block-cart-item__image img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 10px;
}

/* --- Product information block -------------------------------------------
   Title, price, description and quantity read as one block: a single flex
   column owning all the vertical rhythm, with the children's own margins
   zeroed so nothing compounds on top of the gap. */
.wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.wc-block-cart-item__wrap > * {
	margin: 0;
}

.wc-block-components-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 44px;
	color: var(--sk-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--sk-primary);
}

.wc-block-cart-item__prices,
.wc-block-cart-item__prices .wc-block-components-product-price {
	color: var(--sk-navy);
	font-size: 15px;
	font-weight: 700;
}

/* Fixed two-line box. Clamping alone is not enough to guarantee equal row
   heights — a one-line description still shortens its row — so the height is
   pinned as well (same reasoning as gotcha 20 on the product cards). */
.wc-block-components-product-metadata {
	width: 100%;
	color: var(--sk-muted);
	font-size: 13px;
	line-height: 1.5;
}

.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
	margin: 0;
}

/* !important here is load-bearing, not decorative: on the Checkout page
   this exact paragraph computes display:flow-root from a rule this
   codebase doesn't own (confirmed live — no matching selector in any
   theme stylesheet), which silently disables -webkit-line-clamp (it only
   works when display is -webkit-box). Without the override the 3rd line
   of a wrapped description isn't clamped, just clipped mid-character by
   the fixed height below — visible live as a horizontal divider cutting
   through half a line of text on the Checkout order summary. */
.wc-block-components-product-metadata__description p {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden;
	height: 39px;
}

/* --- Quantity + remove ---------------------------------------------------
   Two separate cascade fights here, both verified live:
   * cart.css sets .wc-block-components-quantity-selector { width: 107px }.
     An earlier pass here overrode it with width:auto/min-width:0, which let
     the control size to its content — so a "1" and a "10" produced different
     widths and the steppers no longer lined up between rows. It is pinned to
     an explicit width again.
   * Astra styles every input generically as
     input[type="number"], ... { padding: 0.75em; height: auto } at (0,1,1),
     which beats a plain class selector — hence the element name in the input
     rule below. Without it the number box kept a 12px/16px padding and grew
     the control to ~98px. */
.wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 2px;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	display: flex;
	align-items: center;
	width: 112px;
	min-width: 112px;
	height: 36px;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	overflow: hidden;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	flex: 0 0 34px;
	width: 34px;
	min-width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-navy);
	font-size: 16px;
	line-height: 1;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
	background: var(--sk-soft-blue);
	color: var(--sk-primary);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--sk-muted);
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	background: #fef2f2;
	color: #ef4444;
}

/* --- Line total ----------------------------------------------------------- */
/* cart.css sets display:flex on this <td>. A flex table-cell is pulled out of
   the table's own box model — the browser generates an anonymous cell around
   it — so the cell stops matching the row's height and its border-bottom
   painted a short stray rule floating mid-row under the price instead of a
   separator spanning the row. Restoring table-cell puts it back in the row
   box; the price wrapper inside is still flex, so the right alignment is
   unaffected. */
.wc-block-cart-item__total {
	display: table-cell;
	vertical-align: top;
	text-align: right;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
	justify-content: flex-end;
	color: var(--sk-navy);
	font-size: 16px;
	font-weight: 700;
}

/* --- Order summary card --------------------------------------------------
   The block heading is an <h2> carrying .wc-block-cart__totals-title, which
   cart.css sizes at var(--wp--preset--font-size--small) (13px), uppercases
   and pads asymmetrically (8px 16px 10px 0) at (0,2,0). The previous rules
   here targeted h3/h4 and so never matched it at all. */
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	display: block;
	padding: 0 0 14px;
	margin: 0 0 4px;
	border-bottom: 1px solid var(--sk-border);
	color: var(--sk-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: left;
}

/* "Add coupons": cart.css renders the chevron as an absolutely positioned
   svg pinned to the right edge. A flex line with the icon ordered last puts
   the label left and the chevron right with no positioning at all — note the
   svg is the FIRST child in the DOM, hence order: 2. */
.wc-block-components-panel__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 4px 0;
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 600;
}

/* transform: none matters as much as position: static here — cart.css centres
   the icon with top:50% + translateY(-50%), and a transform keeps applying to
   a static element, so without this reset the chevron rendered 12px above the
   label's line box even though it was back in normal flow. */
.wc-block-components-panel .wc-block-components-panel__button > svg {
	position: static;
	order: 2;
	flex: 0 0 auto;
	margin: 0;
	transform: none;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
	padding: 14px 0;
}

.wc-block-components-totals-wrapper {
	padding: 4px 0 0;
	margin: 0;
}

/* --- Totals rows ---------------------------------------------------------
   Label left, amount right, and the "Shipping will be calculated at
   checkout" note dropped onto its own full-width line underneath — all with
   flex-wrap, no absolute positioning and no margin nudging. */
.wc-block-components-totals-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 16px;
	padding: 10px 0;
}

.wc-block-components-totals-item__label {
	color: var(--sk-muted);
	font-size: 14px;
}

.wc-block-components-totals-item__value {
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
}

.wc-block-components-totals-item__description {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	color: var(--sk-muted);
	font-size: 12px;
	line-height: 1.4;
}

.wc-block-components-totals-item__description p {
	margin: 0;
}

.wc-block-components-totals-footer-item {
	padding: 14px 0 0;
	margin-top: 6px;
	border-top: 1px solid var(--sk-border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--sk-navy);
	font-size: 16px;
	font-weight: 700;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--sk-navy);
	font-size: 20px;
	font-weight: 700;
}

/* --- Primary action ------------------------------------------------------
   WooCommerce Blocks styles its buttons through
   .wc-block-components-button:not(.is-link) and WordPress adds
   .wp-element-button on top from theme.json, so a bare class selector loses.
   Matching both classes gives (0,3,0) and beats them on merit rather than
   with !important. */
.wc-block-cart__submit-container .wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 24px;
	background-color: var(--sk-primary);
	border: 1px solid var(--sk-primary);
	border-radius: 10px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.wc-block-cart__submit-container .wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--sk-primary-dark);
	border-color: var(--sk-primary-dark);
	color: #fff;
}

.wc-block-cart__submit {
	margin-bottom: 0;
}

/* --- Checkout fields ------------------------------------------------------ */
.wc-block-components-text-input input,
.wc-block-components-address-form select,
.wc-block-checkout__form select {
	border: 1px solid var(--sk-border);
	border-radius: 8px;
}

.wc-block-components-text-input input:focus {
	border-color: var(--sk-primary);
}

.wc-block-components-checkout-step__title {
	color: var(--sk-navy);
	font-size: 18px;
}

.wc-block-components-radio-control__option-checked {
	border-color: var(--sk-primary);
}

/* --- Order summary line items (Checkout only) -----------------------------
   Checkout's order-review panel renders each line with
   .wc-block-components-order-summary-item — a completely different
   component from the Cart page's <table> rows styled above (different
   markup, no shared row wrapper), verified live by walking the DOM: none
   of the .wc-block-cart-item__* rules above ever match anything on
   Checkout except the couple of classes (.wc-block-cart-item__prices,
   .wc-block-components-product-metadata) that happen to be reused on both.
   Before this, everything else in this component fell back to
   WooCommerce's bare default spacing, which is where the messy mobile
   Checkout report traced back to.
   WooCommerce renders this exact markup TWICE on the page — once inside
   the collapsible sidebar summary (desktop: right column; mobile: reordered
   below the form via CSS grid `order`), and again inside the checkout
   actions area as a compact final review directly above Place Order. Both
   share these classes, so one set of rules styles both. */
.wc-block-components-order-summary-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sk-border);
}

.wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

.wc-block-components-order-summary-item__image {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.wc-block-components-order-summary-item__image img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: 10px;
}

/* The quantity badge is an absolutely positioned circle overlapping the
   thumbnail's corner in WooCommerce's own markup already — it just had no
   size/color of its own, so it inherited whatever the surrounding text
   size happened to be. Pinned to a fixed circle matching the design
   system's navy instead.
   !important on position/color is load-bearing: this component's CSS is
   partly generated at runtime by WooCommerce Blocks' own CSS-in-JS
   (confirmed live — an Emotion-generated class, e.g. "css-0 e19lxcc00", on
   an ancestor), which keeps re-declaring top/background at the same
   specificity as a plain class selector here. Without !important this
   rule's `left` won but `top`/`background`/`color` silently lost — same
   shape as gotcha 16 in this project, just with a JS-injected competitor
   instead of Astra's Customizer CSS. */
.wc-block-components-order-summary-item__quantity {
	position: absolute !important;
	top: -8px !important;
	left: -8px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--sk-navy) !important;
	border-radius: 999px;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden;
	margin: 0 0 4px;
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-components-order-summary-item__individual-prices {
	display: block;
	color: var(--sk-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Same flow-root cascade issue as the shared rule above (see its comment) —
   scoped here too since this is the selector that actually matches inside
   the order-summary-item's own description wrapper. */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description p {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden;
	margin: 2px 0 0;
	color: var(--sk-muted);
	font-size: 12px;
	line-height: 1.5;
}

.wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	text-align: right;
}

.wc-block-components-order-summary-item__total-price .price {
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 700;
}

/* --- "Edit cart" link (Issue 3 — quantity/remove at checkout) -------------
   WooCommerce Blocks Checkout doesn't support editing quantity or removing
   an item from this order-review panel (verified live: no button/input in
   its markup, just the read-only badge styled above) — that's current,
   intentional WooCommerce behaviour, not something to patch around with a
   custom AJAX quantity sync here. The Cart page already has full +/- and
   remove controls (section 11b above), so the safe fix is a clearly visible
   way back to it, placed right where the customer is already looking.
   Deliberately button-sized (not a small text link) since this is also,
   right now, the only way to reach Cart from a phone — there's no cart
   icon in the mobile header. Injected via JS (see
   subkart_checkout_edit_cart_link_script in functions.php); this is its
   only styling. */
.subkart-edit-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	margin: -6px 0 16px;
	padding: 6px 14px;
	border: 1px solid var(--sk-border);
	border-radius: 999px;
	background: var(--sk-soft-blue);
	color: var(--sk-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.subkart-edit-cart-link:hover {
	background: var(--sk-primary);
	border-color: var(--sk-primary);
	color: #fff;
}

.subkart-edit-cart-link::after {
	content: "\2192";
}

/* --- Tablet: single column ------------------------------------------------ */
@media (max-width: 899px) {
	.wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}
}

/* --- Mobile ---------------------------------------------------------------
   Below 700px cart.css switches .wc-block-cart-items__row from a <tr> to
   display:grid and zeroes every cell's padding at (0,4,0). Because the row is
   a grid container at this width, padding on the row itself DOES apply, so
   the inset moves there and the cells stay at zero — one source of spacing
   either way. Separators move to the row for the same reason. */
@media (max-width: 699px) {
	/* THE mobile overflow bug. cart.css lays this row out as
	     grid-template-columns: 80px 132px; column-gap: 16px
	   with the product cell spanning 2/4, so the line total auto-places into
	   an implicit 4th column. Those two FIXED tracks plus the implicit ones
	   and three 16px gaps gave the row a min-content width of 380.9px — wider
	   than the 350px content column at 390px — so the <table> refused to
	   shrink to its width:100% and the whole document scrolled sideways
	   (scrollWidth 404 vs clientWidth 390). Making the middle track
	   minmax(0, 1fr) lets the product column absorb whatever is left instead
	   of demanding a fixed 132px, and the three cells are placed explicitly
	   so nothing lands in an implicit column. This is the actual fix — an
	   overflow-x: hidden here would only have hidden the symptom. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		box-sizing: border-box;
		max-width: 100%;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		column-gap: 16px;
		padding: 16px;
		border-bottom: 1px solid var(--sk-border);
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		border-bottom: 0;
	}

	.wc-block-cart table.wc-block-cart-items tbody tr:last-child {
		border-bottom: 0;
	}

	.wc-block-cart-item__image a,
	.wc-block-cart-item__image img {
		width: 72px;
	}

	.wc-block-cart-item__image img {
		height: 72px;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding: 20px;
	}

	.wc-block-components-product-name {
		font-size: 15px;
		height: 41px;
	}

	.wc-block-cart-item__quantity {
		gap: 12px;
	}
}

/* ==========================================================================
   11c. My Account
   Login/register run WooCommerce's classic form markup (unlike Cart and
   Checkout). Left unstyled, the login inputs stretched to 1152px on desktop.
   ========================================================================== */
.woocommerce-account .woocommerce {
	padding: 32px 0 60px;
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account form.woocommerce-form-login h2,
.woocommerce-account form.register h2 {
	font-size: 20px;
	color: var(--sk-navy);
	margin: 0 0 16px;
}

/* WooCommerce's own core CSS ships
   `body .woocommerce form.login, ... form.register { margin: 2em 0 }`
   at true specificity (0,2,2) — two classes (.woocommerce, .login) plus two
   bare elements (body, form). The original selector here, two classes plus
   one element, is (0,2,1): fewer elements, so it LOST despite loading later
   in the cascade, and the form rendered flush against the container's left
   edge instead of centered (confirmed live: computed margin was 32px 0px,
   not 0px auto). Adding `.woocommerce` — which the form is genuinely nested
   inside — brings this to (0,3,1), enough to win outright, no `!important`
   needed. */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.register {
	max-width: 440px;
	margin: 0 auto;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	background: #fff;
	padding: 28px;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-navy);
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account .form-row input.input-text {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	font-size: 15px;
}

.woocommerce-account .woocommerce-form-row input.input-text:focus,
.woocommerce-account .form-row input.input-text:focus {
	outline: none;
	border-color: var(--sk-primary);
}

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	font-size: 14px;
	color: var(--sk-muted);
}

.woocommerce-account form.woocommerce-form-login button.button,
.woocommerce-account form.register button.button {
	width: 100%;
	min-height: 48px;
	margin-top: 4px;
	background: var(--sk-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.woocommerce-account form.woocommerce-form-login button.button:hover,
.woocommerce-account form.register button.button:hover {
	background: var(--sk-primary-dark);
}

.woocommerce-account .lost_password {
	margin: 14px 0 0;
	font-size: 14px;
}

.woocommerce-account .lost_password a {
	color: var(--sk-primary);
	text-decoration: none;
}

/* Logged-in dashboard */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	color: var(--sk-navy);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--sk-primary);
	border-color: var(--sk-primary);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	padding: 24px;
	font-size: 15px;
	color: var(--sk-navy);
}

/* ==========================================================================
   11d. Site footer
   Rendered by subkart_site_footer() on astra_footer_before, which fires
   outside #content — so it is not caught by the flex container described in
   the CLAUDE.md hook gotcha. Astra's own copyright bar still renders below it.
   ========================================================================== */
.subkart-footer {
	background: var(--sk-navy);
	color: #cbd5e1;
	padding: 56px var(--sk-gutter) 40px;
}

/* Flex, not a fixed grid: the Company and Policies columns only render once
   those pages are published, so the column count varies between two and five.
   A grid with five declared tracks left two empty tracks on the right today. */
.subkart-footer__inner {
	max-width: var(--sk-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	align-items: flex-start;
}

.subkart-footer__brand {
	flex: 1 1 260px;
}

.subkart-footer__col {
	flex: 0 0 auto;
	min-width: 150px;
}

.subkart-footer__brand p {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #9aa8bd;
	max-width: 300px;
}

.subkart-footer__logo {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}

.subkart-footer__logo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}

/* Icon-only crop of the same logo image as the header (see "0c. Site logo"
   for the full row/column measurements). Only the icon — not the full
   icon+wordmark box used in the header — because the wordmark's "Sub" is
   set in dark navy, which disappears against this footer's dark navy
   background (var(--sk-navy)); the icon itself is pure blue/white gradient
   with no dark-navy pixels (confirmed by sampling it), so it reads fine
   here. Crop rect in the source image: cols 249-1155, rows 0-654 (~1.45:1).
   background-size scales the FULL 1536x1024 image so that rect lands at
   0,0 within this element's box; background-position shifts it into view.
   The URL is set inline per-element in functions.php (subkart_site_footer),
   not here, so it stays in sync with whatever the Customizer logo actually
   is — only the crop geometry, which is specific to this one image's
   proportions, lives in CSS. */
.subkart-footer__logo-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 52px;
	height: 36px;
	background-repeat: no-repeat;
	background-size: 88px 59px;
	background-position: -14px -2px;
}

/* "Follow Us" social icons — deliberately kept inside the brand block, not
   a new column, so the existing column layout/count is untouched and the
   footer does not gain height beyond one small row under the email line. */
.subkart-footer__social {
	margin-top: 16px;
}

.subkart-footer__social-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9aa8bd;
	margin-bottom: 10px;
}

.subkart-footer__social-icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.subkart-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #9aa8bd;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.subkart-footer__social-icon svg {
	width: 16px;
	height: 16px;
}

.subkart-footer__social-icon:hover,
.subkart-footer__social-icon:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.subkart-footer__col h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	margin: 0 0 14px;
}

.subkart-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.subkart-footer__col li {
	margin: 0 0 10px;
}

.subkart-footer__col a {
	color: #9aa8bd;
	font-size: 14px;
	text-decoration: none;
}

.subkart-footer__col a:hover {
	color: #fff;
}

/* ==========================================================================
   11e. Astra copyright bar — compact
   Below the theme footer sits Astra's own "Footer Bar" builder row
   (.site-below-footer-wrap, white, 20px 0 padding, 16px body text — 101px
   tall). Padding/font alone only got this to 81px: Astra's own inline
   Customizer CSS also carries `.site-below-footer-wrap[data-section=
   "section-below-footer-builder"]` and its `.ast-builder-grid-row` child,
   BOTH with `min-height: 60px` at (0,2,0)/(0,3,0) — higher specificity
   than the plain-class rules below, so it silently floors the bar at 60px
   of empty row height no matter how small the padding/text get (see
   gotcha 16 method: enumerate computed styles, don't assume a plain-class
   override "just works"). Matching that same [data-section] selector here
   is what actually lets the row shrink to its text's real height. The
   copyright TEXT itself is filtered in functions.php
   (subkart_footer_copyright_text) to drop the "| Powered by Astra
   WordPress Theme" credit link while keeping the real
   "Copyright © [year] SubKart" line.
   ========================================================================== */
.site-below-footer-wrap {
	padding: 6px 0;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	min-height: 0;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
	min-height: 0;
}

.ast-footer-copyright,
.ast-footer-copyright p {
	font-size: 11px;
	line-height: 1.4;
	color: var(--sk-muted);
}

/* ==========================================================================
   11f. MilesWeb hosting badge — hidden
   "Website security powered by MilesWeb" is not theme or plugin markup — it
   is raw HTML the host injects server-side right before </body> on every
   page (confirmed via a raw fetch() of the page source, not just the
   rendered DOM: <div id="force-footer" style="...">...MilesWeb...</div>,
   immediately after the wp-emoji-loader inline script). There is no theme
   hook or filter to stop the injection, so this only hides the badge; it
   does not disable whatever malware-scanning it's advertising.
   ========================================================================== */
#force-footer {
	display: none;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 1199px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.subkart-categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.subkart-footer__inner {
		gap: 28px 32px;
	}
}

@media (max-width: 899px) {
	.subkart-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* The hero visual used to be display:none below this width, which left
	   every phone visitor with a product-less hero on a shop's most important
	   screen. It now sits under the copy at a reduced height instead. */
	.subkart-hero__visual {
		padding: 14px;
		border-radius: 20px;
	}

	.subkart-hero__product {
		min-height: 0;
	}

	.subkart-hero__product-link img {
		max-height: 260px;
	}

	.subkart-floating {
		display: none;
	}

	.subkart-trust {
		grid-template-columns: repeat(2, 1fr);
	}

	.subkart-trust__item:nth-child(2) {
		border-right: 0;
	}

	.subkart-trust__item:nth-child(-n+2) {
		border-bottom: 1px solid var(--sk-border);
	}

	.subkart-shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.subkart-shop-sidebar {
		margin-bottom: 24px;
		padding: 0;
	}

	/* Collapsed filter panel: the summary becomes the tap target. */
	.subkart-shop-sidebar__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 16px 18px;
		cursor: pointer;
	}

	.subkart-shop-sidebar__toggle::after {
		content: "+";
		font-size: 20px;
		font-weight: 400;
		color: var(--sk-primary);
		line-height: 1;
	}

	.subkart-shop-sidebar[open] .subkart-shop-sidebar__toggle::after {
		content: "\2212";
	}

	.subkart-shop-sidebar[open] .subkart-shop-sidebar__toggle {
		border-bottom: 1px solid var(--sk-border);
	}

	.subkart-shop-sidebar__body {
		padding: 18px;
	}
}

@media (max-width: 767px) {
	.subkart-hero {
		padding: 40px var(--sk-gutter) 44px;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px 14px;
	}

	.subkart-section {
		padding: 48px var(--sk-gutter);
	}

	.subkart-newsletter__inner {
		display: block;
	}

	.subkart-newsletter__form {
		min-width: 0;
		max-width: none;
		margin-top: 22px;
	}

	.subkart-banner {
		padding: 28px 22px;
		display: block;
	}

	.subkart-banner .subkart-btn {
		margin-top: 18px;
	}

	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 0 0;
	}

	.single-product .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-product .woocommerce-product-gallery .flex-viewport {
		grid-column: 1;
		grid-row: 1;
	}

	/* Back to a horizontal rail under the image, but scrolling in one row
	   rather than wrapping: 8-9 thumbnails wrapped into a 3-column block
	   212px tall, i.e. taller than the product image above it. */
	.single-product .flex-control-thumbs {
		position: static;
		width: auto;
		flex-direction: row !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 8px;
		padding-bottom: 4px;
	}

	.single-product .flex-control-thumbs li {
		flex: 0 0 64px;
		width: 64px !important;
	}

	/* Product tabs, redesigned below 767px as a tidy series of rounded chip
	   pills (owner feedback 2026-10-10: the wrapped underline tabs looked
	   "clumsy"). The wrap itself (so all 5 labels are on screen) dates from
	   the earlier fix; everything else in this block is the chip redesign.
	   SPECIFICITY — the critical part. THREE competitor rules had to be
	   beaten (each confirmed by enumerating document.styleSheets and testing
	   el.matches() per selector — the method from CLAUDE.md gotcha 16):
	   1. WooCommerce grid CSS, `.woocommerce-js div.product .woocommerce-tabs
	      ul.tabs li(.a)` = (0,4,3)/(0,4,4) — sets margin 0 1em 0 0, display
	      inline-block, radius 0, bg initial, padding 0.5em 0 on the a.
	   2. An ASTRA INLINE <style> block printed LATE in the DOM with
	      `.woocommerce #content div.product .woocommerce-tabs ul.tabs li {`
	      `    display: block }` = (0,5,3) — this one ties with the natural
	      first fix (mirroring path + .wc-tabs = (0,5,3)) and wins on source
	      order, silently flattening the pills when only that fix was used
	      (measured: radius applied but display:block won).
	   The block selector below therefore ADDS ONE MORE CLASS on top of both:
	   `.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li` =
	   (0,5,3)... beats rule 1 outright; a rule-level `display: flex !important`
	   finally overrules the Astra tie (fixed strengths can't be out-tied —
	   and !important here is load-bearing, not cosmetic). Floor geometry:
	   chips are 36-37px tall with 6px gaps, all 5 tabs within the viewport
	   at 375/360/320px, text vertically centred, NO text clipping.
	   Desktop is untouched (block is mobile-only) and keeps WooCommerce's
	   own flat-underline rendering — see the base-rule note in section 8.
	   Verified in headless Chrome at 375/360/320px (chip render, geometry,
	   Reviews click opens the panel) and 1280px unchanged. */
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs {
		flex-wrap: wrap;
		gap: 6px;
		padding-bottom: 10px;
	}

	/* Tab = a small rounded pill; the anchor inside is centred by the li's
	   own flex. display:flex carries !important because of the Astra inline
	   (0,5,3) `display: block` tie-breaker documented above (a plain win
	   here would need an even longer selector — this is cheaper and precise).
	   Transition timing matches the footer social icons (0.18s ease). */
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li {
		margin: 0;
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 9px 12px;
		background: #fff;
		color: var(--sk-navy);
		border: 1px solid var(--sk-border);
		border-radius: 999px;
		transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	}

	/* The anchor carries the tab's text and click handler. Its competing
	   WooCommerce rule sets padding `0.5em 0` — zeroed here, so the li's
	   padding above is the ONLY padding the rendered tab gets. color:
	   inherit lets the li own the ink (navy inactive / white active).
	   line-height: 1 stops a browser-default line box inflating the pill;
	   font stays 14px bold as on desktop. */
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
		padding: 0;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		color: inherit;
		font-size: 14px;
	}

	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
		background: var(--sk-primary);
		color: #fff;
		border-color: var(--sk-primary);
	}

	/* WooCommerce decorates every tab with ::before/::after pseudo-elements
	   (the classic connected-tab-outline drawing), and li.active::before is
	   an absolutely-positioned BLUE BAR at bottom:-1px — the active
	   underline. On a rounded pill it paints as a stray straight bar
	   clipping through the chip (caught on screenshot, not by geometry).
	   The pill's own border/background IS the visual state, so all four
	   pseudo slots go away below 767px. */
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li::before,
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li::after,
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::before,
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after {
		display: none;
		content: none;
	}

	/* Kill the desktop-style underline on the active pill. */
	.woocommerce-js div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
		color: #fff;
		border-bottom: 0;
	}

	.woocommerce-result-count,
	.woocommerce-ordering {
		width: 100%;
	}

	.subkart-footer {
		padding: 40px var(--sk-gutter) 32px;
	}

	.subkart-footer__inner {
		gap: 24px 28px;
	}

	.subkart-footer__brand {
		flex: 1 1 100%;
		max-width: none;
	}

	.subkart-footer__brand p {
		max-width: none;
	}

	.subkart-footer__col {
		flex: 1 1 40%;
	}
}

@media (max-width: 600px) {
	.subkart-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 520px) {
	.subkart-hero__title {
		font-size: 32px;
	}

	.subkart-hero__subtitle {
		font-size: 15px;
	}

	.subkart-hero__note {
		gap: 12px;
	}

	.subkart-category {
		padding: 16px;
	}

	.woocommerce ul.products li.product .astra-shop-summary-wrap {
		padding: 12px;
	}

	.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
	.woocommerce ul.products li.product h3.woocommerce-loop-product__title,
	.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link {
		font-size: 13px;
		line-height: 1.35;
		height: 53px;
	}

	.woocommerce ul.products li.product .price {
		font-size: 15px;
	}

	.subkart-trust__item {
		padding: 17px 12px;
	}

	.subkart-trust__item span {
		font-size: 10px;
	}

	.single-product .product_title.entry-title {
		font-size: 24px;
	}

	.single-product p.price {
		font-size: 22px;
	}

	.single-product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	/* Keep the stepper compact even when the buttons go full-width — stretched
	   to 241px it read as an input field rather than a quantity control. */
	.single-product form.cart .quantity,
	.single-product form.cart .quantity.subkart-qty-enhanced {
		align-self: flex-start;
	}

	.single-product .single_add_to_cart_button,
	.single-product .subkart-buy-now-button {
		width: 100%;
	}
}