/*
 * aSS SHOP-only styles (a-s-s.shop)
 *
 * Generated by splitting the two aSS child.css files by CSS block.
 * Do not hand-merge shared and site-specific rules back together.
 */





/* ── Each tile ──────────────────────────────────────────── */






/* Alternate gradient for the third tile */



.hp-tiles__tile--gallery {
	background: linear-gradient(
		145deg,
		var(--color-secondary, #9966cc) 0%,
		var(--color-primary,   #cc3366) 100%
	);
}

/* ── Responsive ─────────────────────────────────────────── */
/* Tablet: keep 3 columns but allow shorter tiles */







/* Mobile: single column */







body.high-contrast .hp-tiles__tile-title,
body.high-contrast .hp-tiles__tile-label,
body.high-contrast .hp-tiles__tile-cta {
	color: #fff !important;
}

/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */
/* portfolio.css sets background-color: var(--portfolio-table-bg) with no
   fallback, causing a grey flash on load before the variable resolves. */






.portfolio-single__table {
	background-color: var(--portfolio-table-bg, transparent);
}

/* Mobile product page: break the detail table out to the full screen width
   instead of sitting inside .container's side padding, and let the
   configurator's fabric/band preview bleed further out to the table's own
   edges (canceling the td's own horizontal padding). Product-only
   (body.single-product) — the same .portfolio-single__table class is also
   used by the parent theme's Portfolio CPT, which should keep its normal
   contained width. */



@media (max-width: 768px) {
	body.single-product .portfolio-single__table {
		width: calc(100% + (2 * var(--container-padding, 1rem)));
		margin-left: calc(-1 * var(--container-padding, 1rem));
		margin-right: calc(-1 * var(--container-padding, 1rem));
	}

	body.single-product .assc-preview {
		margin-left: calc(-1 * var(--space-lg, 1.25rem));
		margin-right: calc(-1 * var(--space-lg, 1.25rem));
	}
}

/* ── Mobile slide-in menu: search field ──────────────────────────────────
   Same searchform.php as the desktop .header-search, styled to match the
   slide-in panel's other bordered sections (.mobile-social-nav /
   .mobile-top-menu in the parent theme's menu.css). */




.mobile-search {
	display: none;
	border-top: 1px solid var(--color-border, #e0e0e0);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}



.mobile-search input[type="search"] {
	width: 100%;
	padding: 0.5rem 2.25rem 0.5rem 0.75rem;
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: var(--border-radius, 4px);
	font-size: 0.875rem;
}



.mobile-search button {
	position: absolute;
	right: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: var(--color-text-light, #666);
}



@media (max-width: 767px) {
	.mobile-search {
		display: block;
	}
}

/* ── ass-configurator: colour/skin-tone swatches — high-contrast overrides ──
   The parent theme's accessibility.css forces every <button> to a uniform
   blue background under body.high-contrast (see its "7. Buttons" section) —
   correct for action buttons, but it also catches the configurator's
   colour and skin-tone swatches, whose entire purpose is to show the actual
   colour. configurator.js mirrors each swatch's hex into --assc-swatch-hex
   (alongside the plain background-color the parent rule clobbers) so this
   rule has a real value to restore.
   Selector is deliberately over-specific (duplicated class + [style]) to
   match-and-beat the parent rule's specificity regardless of stylesheet
   load order, without touching the shared parent theme. */




body.high-contrast button.assc-swatch.assc-swatch[style],
body.high-contrast button.assc-skin-tone.assc-skin-tone[style] {
	background-color: var( --assc-swatch-hex, #0000ff ) !important;
	border-color:     var( --assc-swatch-hex, #0000ff ) !important;
}

/* ── Checkout block: hide per-item quantity badge in the order summary ──────
   WooCommerce Checkout block core markup — no PHP template to override.
   WC core's own checkout.css sets `display: flex` on this exact element via
   `.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity`
   (two classes — specificity 0,2,0), which beats a bare single-class rule.
   Matching selector + !important so this doesn't silently stop working the
   next time WooCommerce ships a core CSS update. */




.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	display: none !important;
}

/* ── Live quantity total for regular products (assets/js/product-total.js) ──
   Deliberately identical to ass-configurator's own .ass-set-total rules
   (plugins/ass-configurator/assets/css/configurator.css) — plain bold
   price text, no box/border/background, no visible "Total" label — same
   look on a plain WooCommerce product (Keychain, Lighter) as on an aSS Set
   (Tropical) or an aSS Special/Top/Bottom (whose own price row,
   .assc-price-row, never had a box either). Duplicated rather than
   depending on that plugin's stylesheet: it's only enqueued on
   ass_set/ass_top/ass_bottom/ass_special product pages, not on a regular
   product page like Keychain, and this is a theme-level visual convention
   now, not something that should break if the plugin changes. Keep this
   block in sync with that file's copy. */
.ass-set-total {
	display: flex;
	align-items: baseline;
	margin: 0.5em 0 1em;
}

.ass-set-total-label {
	display: none;
}

.ass-set-total-value {
	font-size: 1em;
	font-weight: 700;
	color: var( --text-main );
}