/* product-page-live-overrides.css
 *
 * Live-only WC / plugin integration fixes for the modern PDP.
 * (task 0017 stylesheet unification, 2026-07-19)
 *
 * Everything here targets WooCommerce-emitted (form.cart,
 * .single_add_to_cart_button, .variations) or Unipartner-plugin-emitted
 * (.aps-siblings__*) markup that the sandbox never contained — so these
 * rules cannot live in the canonical sandbox files. This is the ONLY
 * sanctioned exception to the "sandbox owns the CSS" rule (theme
 * CLAUDE.md): the sandbox mocks add-to-cart with a plain
 * .ap-pp__add-to-cart button and colour chips with .ap-pp__colour-option;
 * the live page has real WC + plugin DOM.
 *
 * Also holds the higher-specificity "mirror" variants of canonical
 * sandbox rules that must outrank WC's low-but-present selectors
 * (.woocommerce h2 / img / input[type=text]) on real product pages —
 * see the wc-specificity-on-inputs memory. Each mirror points back at
 * its canonical source.
 *
 * Load order: chrome (product-page-chrome.css) → components
 * (product-page-ago.css) → THIS FILE. Extracted from the retired
 * product-page-modern-v1.scss.
 */

/* ---------------------------------------------------------------------
   WooCommerce add-to-cart form: hide the bits the modern PDP replaces.
   - `.variations` — WC's variation <select> table. The styled chips are
     the picker; chip JS sets the hidden select (kept in DOM for
     variation lookup).
   - `.quantity` — qty stepper. Count moves to the cart drawer; WC
     defaults to qty=1 on submit when the input is absent.
   --------------------------------------------------------------------- */
.ap-pp__buy-row .variations,
.ap-pp__buy-row .quantity,
form.cart .variations,
form.cart .quantity {
	display: none !important;
}

/* Color image-cards on legacy multi-look products (interim until the
   0036 per-look re-authoring; see modern-v1/content.php). The cards
   are <a role="button"> elements carrying the aprangos-product-siblings
   swatch classes — deliberate ELEMENT PARITY with the real swatch
   view, so every swatch rule and every theme hover/focus reset applies
   to cards and reference swatches identically.

   ONE exception, mirroring the reference exactly: the real swatch
   renders its ACTIVE item as a <span>, which chrome.css's interactive
   neutralizer (`.ap-sandbox a:hover/:focus/... { outline:none;
   box-shadow:none }`, (0,2,1)) never touches — so the reference's
   active card keeps its 2px outline + resting shadow in every state.
   Our active card stays an <a> (it must remain clickable-looking
   markup-wise), so we pin the SAME computed values the reference
   span has, at higher specificity, per the neutralizer's own
   "per-element rules keep ownership" contract. Values must match
   swatches.css `.aps-siblings__thumb` / `.is-active` verbatim. */
.ap-pp__colorcards a.astp-colorcard.is-active,
.ap-pp__colorcards a.astp-colorcard.is-active:hover,
.ap-pp__colorcards a.astp-colorcard.is-active:focus,
.ap-pp__colorcards a.astp-colorcard.is-active:focus-visible,
.ap-pp__colorcards a.astp-colorcard.is-active:active {
	outline: 2px solid #1a1a1a;
	outline-offset: -2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	cursor: default;
}

/* "Prieinamumas: Liko 1" — WC's per-variation availability text. Not in
   the Figma. The stock check still happens server-side at add-to-cart
   time, so a 0-stock submission gets rejected normally. */
.woocommerce-variation-availability,
.single_variation .stock {
	display: none !important;
}

/* WC's `form.cart` wraps the add-to-cart button; variable products nest
   through `.single_variation_wrap` + `.woocommerce-variation-add-to-cart`.
   Make every level flex so the button stretches to fill
   `.ap-pp__buy-row`'s available width like the sandbox's
   `.ap-pp__add-to-cart` does. */
.ap-pp__buy-row form.cart,
.ap-pp__buy-row .single_variation_wrap,
.ap-pp__buy-row .woocommerce-variation-add-to-cart {
	display: flex;
	flex: 1 0 0;
	margin: 0;
	padding: 0;
}
.ap-pp__buy-row .woocommerce-variation {
	display: none; /* WC's variation description/price block — duplicates info we already show */
}

/* The big `.single_add_to_cart_button.button` bridge block that styled
   WC's stock button to the sandbox look was RETIRED with 0017 #42
   (2026-07-20): the button templates now emit
   `class="ap-pp__add-to-cart single_add_to_cart_button"` — the
   canonical sandbox rule styles it directly, and the dropped
   `button alt` classes mean Astra's brand-wash (background/radius
   repaints) no longer reaches the button at all. The button is
   sandbox-dark on every brand, per the 06-03 constraints + Figma. */

/* ---------------------------------------------------------------------
   woo-custom-designer "Kurk savo dizainą" button — injected by the
   plugin's wcd-button-injector.js as
   `<a class="button wcd-design-button"><span __label><span __icon>`,
   placed right AFTER `.ap-pp__buy-row` on the modern PDP (the injector
   detects the row; classic PDPs keep the legacy in-form spot untouched
   by these .ap-sandbox-scoped rules).

   Figma 1853-4551 (desktop) / 1853-4574 (mobile): outlined secondary —
   transparent fill, 2px `Button/secondary-outline-enabled` (gray-100)
   border, radius-15, 60px, padding 18/20, gap 8, Outfit 16 medium
   text-primary. Full column width on its own row: 16px below the buy
   row on desktop, 12px on mobile (button y-offset 76/72 vs the 60px
   row above in the frames). The 20×20 link-external icon TRAILS the
   label on desktop and LEADS it on mobile — DOM keeps [label, icon],
   `order` swaps below 768px.

   Selectors sit at (0,2,1)+ with the explicit .disabled variant:
   Astra's `.woocommerce a.button` and WC's `.woocommerce a.button
   .disabled { padding:.618em 1em }` (both ~(0,2,1)–(0,3,1)) would
   otherwise repaint the resting look (red primary bg, 700 weight,
   radius 10, inline-block) — bit the first iteration, visual diff
   2026-08-27. */
.ap-sandbox a.wcd-design-button,
.ap-sandbox a.wcd-design-button.disabled {
	display: flex;
	/* Desktop: as wide as the add-to-cart CTA above (buy-row width minus
	   the 60px wishlist heart + 16px gap); mobile goes full width. */
	width: calc(100% - 76px);
	height: 60px;
	padding: 18px 20px;
	margin: 16px 0 0;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--button-secondary-outline-enabled, #F0F0F0);
	border-radius: var(--radius-15, 15px);
	background: transparent;
	color: var(--text-primary, #191919);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}
.ap-sandbox .wcd-design-button__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	order: 1; /* desktop: icon trails the label */
}
.ap-sandbox .wcd-design-button__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width: 768px) {
	.ap-sandbox a.wcd-design-button,
	.ap-sandbox a.wcd-design-button.disabled {
		width: 100%;
		margin-top: 12px;
	}
	.ap-sandbox .wcd-design-button__icon {
		order: -1; /* mobile: icon leads the label */
	}
}
/* Brand-wash lock (all five properties pinned to resting) — it's a
   `.button`, so Astra's button globals + multi-brand-uni would
   otherwise repaint it. The outline-hover token equals the enabled one
   (gray-100), so the design defines no hover step. */
.ap-sandbox a.wcd-design-button:hover,
.ap-sandbox a.wcd-design-button:focus,
.ap-sandbox a.wcd-design-button:focus-visible,
.ap-sandbox a.wcd-design-button:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
	border-color: var(--button-secondary-outline-hover, #F0F0F0);
	outline: none;
	box-shadow: none;
	text-decoration: none;
}

/* Disabled state. WC marks the button with `.disabled` +
   `.wc-variation-is-unavailable` (not the HTML [disabled] attribute),
   so clicks otherwise go through and trigger WC's "Please select some
   product options" alert. Cut pointer events at the CSS layer so the
   click never reaches the variation form handler. */
.ap-pp__buy-row .single_add_to_cart_button.disabled,
.ap-pp__buy-row .single_add_to_cart_button.wc-variation-is-unavailable,
.ap-pp__buy-row .single_add_to_cart_button.wc-variation-selection-needed,
.ap-pp__buy-row .single_add_to_cart_button[disabled],
.ap-pp__buy-row .single_add_to_cart_button[aria-disabled="true"] {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.5;
}
.ap-pp__buy-row .single_add_to_cart_button.disabled:hover,
.ap-pp__buy-row .single_add_to_cart_button.wc-variation-is-unavailable:hover,
.ap-pp__buy-row .single_add_to_cart_button.wc-variation-selection-needed:hover {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #ffffff);
}

/* ---------------------------------------------------------------------
   Sibling color swatches — `aprangos-product-siblings` plugin output
   restyled to the sandbox's .ap-pp__colour-* chip design (72×94 tile,
   10px radius, is-active dark border, is-disabled 0.5 opacity).
   Plugin emits:
     .aps-siblings > .aps-siblings__label (__title + __current)
                   > .aps-siblings__thumbs > a.aps-siblings__thumb > img
   States: .is-active (selected), .is-disabled (out of stock).
   --------------------------------------------------------------------- */
.aps-siblings {
	margin: 24px 0 0;
	/* The plugin's own swatches.css adds border-top + padding-top; the
	   modern PDP renders an explicit <hr class="ap-pp__divider"> above
	   the swatches, so zero the plugin's second line. */
	border-top: 0;
	padding-top: 0;
}
.aps-siblings__label {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.aps-siblings__title {
	color: var(--text-tertiary, #787878);
	font-size: 12px;
	line-height: 1.15;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.aps-siblings__current {
	color: var(--text-primary, #191919);
	font-size: 12px;
	line-height: 1.15;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.aps-siblings__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.aps-siblings__thumb {
	display: block;
	width: 72px;
	height: 94px;
	aspect-ratio: 36 / 47;
	box-sizing: border-box;
	border-radius: var(--radius-10, 10px);
	border: 2px solid transparent;
	background-color: transparent;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	transition: border-color 120ms ease;
	text-decoration: none;
}
.aps-siblings__thumb > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.aps-siblings__thumb.is-active {
	border-color: var(--color-selector-outline, #191919);
	cursor: default;
}
.aps-siblings__thumb.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}
/* Lock visible rings on hover/focus/active so neither Astra's button
   globals nor the browser focus ring paint a competing colour. */
.aps-siblings__thumb:not(.is-active):not(.is-disabled):hover,
.aps-siblings__thumb:not(.is-active):not(.is-disabled):focus,
.aps-siblings__thumb:not(.is-active):not(.is-disabled):focus-visible,
.aps-siblings__thumb:not(.is-active):not(.is-disabled):active {
	border-color: var(--color-selector-outline, #191919);
	outline: none;
	box-shadow: none;
	background-color: transparent;
}
.aps-siblings__thumb.is-active:hover,
.aps-siblings__thumb.is-active:focus,
.aps-siblings__thumb.is-active:focus-visible,
.aps-siblings__thumb.is-active:active {
	border-color: var(--color-selector-outline, #191919);
	outline: none;
	box-shadow: none;
	background-color: transparent;
}

/* ---------------------------------------------------------------------
   WC-specificity mirrors of canonical sandbox rules. Each exists only
   because a WC selector (.woocommerce h2 / img / input[type="text"])
   beats the canonical bare/.ap-sandbox form on real product pages.
   After the visual-diff pass, drop any mirror whose canonical selector
   already wins.
   --------------------------------------------------------------------- */

/* Mirrors chrome `.ap-pp__footer__title` — chained to (0,2,0) + type
   props redeclared because `.woocommerce h2` beats `.type-heading-xl`.
   NO layout props (margin/max-width) here: chrome owns those per
   breakpoint at the same (0,2,0), and this later-loading sheet would
   pin the desktop values on mobile (max-width calc(50vw−314.5px) goes
   NEGATIVE ≤768 → title collapses to 0 width — bit the live PDP). */
.ap-pp__footer .ap-pp__footer__title {
	color: var(--text-white, #FFF);
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-58);
	line-height: 1.1;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* Mirrors chrome `.ap-pp__footer__bg-shape` — chained to beat
   `.woocommerce img` + Astra's global img caps; the decorative shape
   must render at full native size and spill past the wrapper. */
.ap-pp__footer .ap-pp__footer__bg-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	max-height: none;
	/* No width/height here: the chrome sheet owns the per-breakpoint
	   sizes (1445×480 desktop, 527×176 mobile) at the same (0,2,0) —
	   a size in this later-loading sheet would win the cascade and
	   pin the desktop box on mobile. */
	pointer-events: none;
	user-select: none;
}

/* Mirrors sandbox `.ap-pp__personalize__field-input` — needs (0,3,0)
   to outrank WC's `.woocommerce input[type="text"]` at (0,2,1). See
   the wc-specificity-on-inputs memory. */
.ap-sandbox .ap-pp__personalize__field .ap-pp__personalize__field-input {
	display: flex;
	height: 60px;
	padding: 10px var(--space-12, 12px);
	align-items: center;
	gap: var(--space-8, 8px);
	align-self: stretch;
	box-sizing: border-box;
	border: 1px solid var(--gray-200, #E4E4E4);
	border-radius: var(--radius-15, 15px);
	background: var(--basic-white, #FFF);
}
.ap-sandbox .ap-pp__personalize__field-input::placeholder {
	color: var(--gray-400, #A3A3A3);
	opacity: 1;
}
/* Re-assert white fill + gray border over the universal accent-wash
   kill (which zeroes bg/border on every input state) at (0,3,1). */
.ap-sandbox .ap-pp__personalize__field-input:hover,
.ap-sandbox .ap-pp__personalize__field-input:focus,
.ap-sandbox .ap-pp__personalize__field-input:focus-visible,
.ap-sandbox .ap-pp__personalize__field-input:active {
	background: var(--basic-white, #FFF);
	color: var(--text-primary, #191919);
	border-color: var(--gray-200, #E4E4E4);
	outline: none;
	box-shadow: none;
}

/* Mirrors checkout `.ap-co__item__qty-input` — needs (0,3,0) to
   outrank WC/Astra `.woocommerce input[type="text"]` at (0,2,1) on
   the live cart (bit the qty box: square corners + WC chrome at
   rest; the hover/focus tiers already won at (0,3,1)). Type props
   redeclared per Figma 1159-3557 (Body/MD/Regular) since the
   `.type-body-md-regular` utility at (0,1,0) loses to the same WC
   selectors. */
.ap-sandbox .ap-co__item__qty .ap-co__item__qty-input {
	width: 56px;
	height: 40px;
	padding: 0 var(--space-12, 12px);
	box-sizing: border-box;
	border: 1px solid var(--input-border-enabled, #E4E4E4);
	border-radius: var(--radius-10, 10px);
	background: var(--input-background-enabled, #FFF);
	color: var(--input-text-filled, #191919);
	text-align: center;
	font-family: var(--font-family-ui);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-16);
	line-height: 1.5;
	letter-spacing: 0;
}

/* Mirrors ago.css `.ap-pp__gallery__swiper { display:none }` — chained
   to (0,2,0) so Swiper's own `.swiper { display:block }` (loaded from
   CDN AFTER our CSS) can't win by source order and leave the
   16,777,216px virtual-width container overlaying the add-to-cart
   button (the "click add-to-cart opens the image" bug). */
.ap-pp__gallery .ap-pp__gallery__swiper { display: none; }

@media (max-width: 768px) {
	/* Mobile reveal at the same (0,2,0) so it wins over the desktop
	   hide above inside the breakpoint. `height:auto` is critical:
	   Swiper's `.swiper { height:100% }` otherwise beats aspect-ratio. */
	.ap-pp__gallery .ap-pp__gallery__swiper {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 9 / 16;
	}
	.ap-pp__gallery .ap-pp__gallery__swiper .swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}