/**
 * Area: fix-parity — lululemon.co.nz look/UX parity re-check (PARITY agent).
 *
 * Only HIGH-severity, measured, clearly-correct gaps from SITE-AUDIT/PARITY-RECHECK.md.
 * Everything is scoped under `body.yb.yb-parity` (the class is added by
 * inc/areas/fix-parity.php) so the rules outrank the `.yb…` selectors used by area
 * files that are enqueued after this one, without `!important`.
 *
 * `!important` is used in exactly ONE block (§1b) because the declarations being
 * corrected are themselves `!important`; nothing else in this file uses it.
 *
 * Tokens only — no new colour and no new font is introduced (see 00-tokens.css).
 * No price, product fact, menu item or copy is touched.
 */

/* ==========================================================================
   1. Type weight: lululemon's scale is 300/400/500/600 — never 700.
      The brand webfont (Hanken Grotesk, fix-sp2-fonts.css) is declared
      `font-weight: 300 600`, so every `font-weight: 700` in the theme asks for a
      weight the face does not carry: the browser clamps or fakes it, and the text
      reads heavier and blunter than lululemon's 600.
      Measured targets: DESIGN-SYSTEM-LULU-VS-OURS.md §0 "Lululemon never uses 700".
   ========================================================================== */

/* 1a. Plain declarations (bag, checkout, PDP, added-to-bag, account, search, mobile). */
body.yb.yb-parity :is(
	.yb-atb-btn,
	.yb-atb-minibag__title,
	.yb-atb-minibag__subtotal,
	.yb-atb-modal__title,
	.yb-atb-modal__name,
	.yb-atb-modal__price,
	.yb-atb-modal__related-title,
	.yb-bag-title,
	.yb-bag-pay__title,
	.yb-bag-promo__submit,
	.yb-co-h,
	.yb-co-h__num,
	.yb-co-account__title,
	.yb-co-ship__pkg-name,
	.yb-co-sum__total,
	.yb-co-item__name,
	.yb-pdp-why__title,
	.yb-pdp-acc__sub,
	.yb-pdp-card__title,
	.yb-pdp-colour__heading,
	.yb-pdp-size-label,
	.yb-pdp-tagline,
	.yb-pdp-sticky__title,
	.yb-pdp-sticky__btn,
	.yb-reviews__write-btn,
	.yb-wl-start__title,
	.yb-zx-view-items,
	.yb-fix-a5-ty__title,
	.yb-fix-a5-wl-title,
	.yb-fix-a5-nopay__btn,
	.yb-sp7-map__btn,
	.yb-s2-h2,
	.product_title,
	.single_add_to_cart_button,
	.showcoupon,
	.woocommerce-order-details__title,
	.woocommerce-column__title
) { font-weight: 600; }

/* Nested text nodes that carry their own 700. */
body.yb.yb-parity :is( .yb-atb-minibag__total, .yb-atb-modal__subtotal ) strong,
body.yb.yb-parity .yb-search-head__title strong,
body.yb.yb-parity .yb-pdp-acc__desc :is( h2, h3, h4 ),
body.yb.yb-parity .yb-reviews__bar.is-active .yb-reviews__bar-label,
body.yb.yb-parity #reviews #reply-title,
body.yb.yb-parity #payment ul.payment_methods > li > label,
body.yb.yb-parity .cross-sells > :is( .title, h2 ),
body.yb.yb-parity .return-to-shop .button,
body.yb.yb-parity form.woocommerce-ResetPassword button[type="submit"],
body.yb.yb-parity .cart_totals .shop_table tr.order-total :is( th, td, strong ),
body.yb.yb-parity table.woocommerce-checkout-review-order-table tr.order-total :is( th, td, strong, .amount ) { font-weight: 600; }

/* Declarations whose own selector is deeper than the generic list above (or carries
   an id), so they need a matching context here to win on specificity alone. */
body.yb.yb-parity #place_order,
body.yb.yb-parity #payment #place_order,
body.yb.yb-parity #payment .yb-fix-a5-nopay__btn,
body.yb.yb-parity .cart_totals .wc-proceed-to-checkout .checkout-button,
body.yb.yb-parity .woocommerce-cart-form .shop_table .product-subtotal,
body.yb.yb-parity table.woocommerce-checkout-review-order-table tbody td.product-total,
body.yb.yb-parity .yb-co-account__text a,
body.yb.yb-parity.yb-bag-empty :is( .cart-empty, .wd-empty-page ),
body.yb.yb-parity.single-product .summary .yb-pdp-colour .price,
body.yb.yb-parity .product-quick-view .single_add_to_cart_button,
body.yb.yb-parity .popup-quick-view .single_add_to_cart_button { font-weight: 600; }

/* 1b. The declarations that are `!important` in their own area file, so the
       correction has to be `!important` too. The PDP accordion title is measured at
       weight 500 on lululemon (30px/32px), not 600 — see §8 of the design system. */
body.yb.yb-parity.single-product .woocommerce-tabs .wd-accordion-title-text,
body.yb.yb-parity.single-product .woocommerce-tabs .wd-accordion-title-text span { font-weight: 500 !important; }

body.yb.yb-parity.single-product .related-and-upsells :is( .title, .slider-title ),
body.yb.yb-parity.single-product #reviews .woocommerce-Reviews-title,
body.yb.yb-parity.single-product #reviews .wd-reviews-heading h2 { font-weight: 600 !important; }

/* ==========================================================================
   2. PDP size buttons — lululemon: 17px/23px weight 600 in a 1px #E0E0E0 box;
      hover on desktop fills the chip black; sold-out sizes get a diagonal strike
      running top-left → bottom-right in #D5D5D5 with #959595 text.
      Ours had a #C8C8C8 border, 16px text, a border-colour-only hover and the
      strike mirrored (bottom-left → top-right) in #BBB.
      A9-ROUND2 §4.1/4.3: the measured #E0E0E0 / #D5D5D5 / #959595 fail 1.4.11 and 1.4.3
      (1.32:1, 1.47:1, 3.00:1), so the border and the strike become #949494 (3.03:1) and the
      sold-out label #767676 (4.54:1) — the smallest compliant steps, geometry unchanged.
   ========================================================================== */
body.yb.yb-parity.single-product .summary .wd-swatches-product .wd-swatch.wd-text {
	border-color: #949494;
	font-size: 17px;
	line-height: 23px;
}

@media (min-width: 1025px) {
	body.yb.yb-parity.single-product .summary .wd-swatches-product .wd-swatch.wd-text:not(.wd-disabled):hover {
		border-color: var(--yb-ink);
		background: var(--yb-ink);
		color: #fff;
	}
}

body.yb.yb-parity.single-product .summary .wd-swatches-product .wd-swatch.wd-text.wd-disabled {
	border-color: #949494;
	background: #fff linear-gradient(to right bottom, transparent calc(50% - 1px), #949494, transparent calc(50% + 1.5px));
	color: #767676;
}

/* ==========================================================================
   3. Product-card colour dots — lululemon puts the same grey ring on every swatch
      (24px circle, box-shadow 0 0 0 1.5px #8D9196) and a black ring on the selected
      one. Home cards had an almost invisible rgba(0,0,0,.12) hairline and category
      cards a 1px #C8C8C8 ring, so the same card read differently per template.
   ========================================================================== */
body.yb.yb-parity.home .yb-card__dot {
	border-color: transparent;
	box-shadow: 0 0 0 1.5px var(--yb-underline);
}

body.yb.yb-parity.home .yb-card__dot:hover,
body.yb.yb-parity.home .yb-card__dot.is-selected {
	box-shadow: 0 0 0 1.5px var(--yb-ink);
}

body.yb.yb-parity .product-grid-item .wd-swatches-grid .wd-swatch { box-shadow: 0 0 0 1.5px var(--yb-underline); }

body.yb.yb-parity .product-grid-item .wd-swatches-grid .wd-swatch.wd-active,
body.yb.yb-parity .product-grid-item .wd-swatches-grid .wd-swatch:hover { box-shadow: 0 0 0 1.5px var(--yb-ink); }

/* ==========================================================================
   4. Selected-filter pills — lululemon: 42px tall, 4px radius, 1px #E0E0E0 border,
      16px weight 400 white on black. Ours were square-cornered, 40px, 14px/600.
      (Every lululemon pill, chip, button and input carries the 4px radius that
      00-tokens.css already holds in --yb-radius.)
      A9-ROUND2 §4.2: border --yb-line (1.32:1) -> #949494 (3.03:1).
      A6-ROUND2 row 18: 42px -> 44px so the chip meets the 44px tap target.
   ========================================================================== */
body.yb.yb-parity .sidebar-container .yb-cf-panel .yb-cf-chips li a {
	min-height: 44px;
	border: 1px solid #949494;
	border-radius: var(--yb-radius);
	font-size: 16px;
	font-weight: 400;
}