/**
 * Area: GLOBAL design tokens + site-wide base styles (Lululemon look).
 * Loads first among area files (after style.css). Selectors are kept at .yb + one class/element
 * so every area file loaded after this one can override with the same specificity.
 * Font: Hanken Grotesk (enqueued in inc/areas/00-tokens.php). Weights 300–600 only, never 700.
 * Icon fonts are untouched: no font-family on *, ::before/::after, [class*="wd-icon"] or .wd-tools-icon.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.yb {
	--yb-font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	--yb-ink: #000;
	--yb-ink-2: #222;
	--yb-price: #2C282E;
	--yb-muted: #57585B;
	--yb-underline: #8D9196;
	--yb-line: #E0E0E0;
	--yb-line-2: #D5D5D5;
	--yb-page: #F9F9F9;
	--yb-util: #FAFAFA;
	--yb-band: #F2F2F2;
	--yb-red: #D31334;
	--yb-red-hover: #B81C29;
	--yb-red-line: #D22030;
	--yb-disabled: #BFBFBF;
	--yb-field: #2C282E;
	--yb-radius: 4px;
	--yb-radius-lg: 4px;
	--yb-pill: 4px;
	--yb-cta-h: 52px;
	--yb-container: 1342px;
	--yb-forest: #000;
	--yb-accent: #D31334;

	/* WoodMart variables */
	--wd-primary-color: #000;
	--wd-alternative-color: #D31334;
	--wd-text-color: #000;
	--wd-title-color: #000;
	--wd-link-color: #000;
	--wd-link-color-hover: #000;
	--wd-entities-title-color: #222;
	--wd-entities-title-color-hover: #000;
	--wd-widget-title-color: #000;

	--wd-text-font: var(--yb-font);
	--wd-text-font-size: 16px;
	--wd-text-font-weight: 400;
	--wd-text-line-height: 1.25;
	--wd-title-font: var(--yb-font);
	--wd-title-font-weight: 600;
	--wd-entities-title-font: var(--yb-font);
	--wd-entities-title-font-weight: 500;
	--wd-alternative-font: var(--yb-font);
	--wd-widget-title-font: var(--yb-font);
	--wd-header-el-font: var(--yb-font);
	--wd-header-el-font-weight: 600;

	--wd-brd-radius: 4px;
	--wd-form-brd-radius: 4px;
	--wd-form-brd-width: 1px;
	--wd-form-brd-color: #2C282E;
	--wd-form-brd-color-focus: #000;
	--wd-form-color: #000;
	--wd-form-placeholder-color: #57585B;
	--wd-form-bg: #fff;

	/* WoodMart buttons. --btn-height is NOT changed: WoodMart applies it to every <button>. */
	--btn-font-family: var(--yb-font);
	--btn-font-weight: 600;
	--btn-default-bgcolor: #000;
	--btn-default-bgcolor-hover: #fff;
	--btn-default-color: #fff;
	--btn-default-color-hover: #000;
	--btn-default-brd-radius: 4px;
	--btn-default-box-shadow: none;
	--btn-default-box-shadow-hover: none;
	--btn-accented-bgcolor: #D31334;
	--btn-accented-bgcolor-hover: #B81C29;
	--btn-accented-color: #fff;
	--btn-accented-color-hover: #fff;
	--btn-accented-brd-radius: 4px;
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: none;
}

/* ==========================================================================
   2. Base text
   ========================================================================== */

body.yb {
	font-family: var(--yb-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.yb p,
.yb li,
.yb td,
.yb th,
.yb label,
.yb input,
.yb select,
.yb textarea,
.yb button,
.yb .wd-tools-text,
.yb .wd-entities-title,
.yb .price { font-family: var(--yb-font); }

.yb b,
.yb strong,
.yb th { font-weight: 600; }

/* Headings: weight 600, no negative tracking, same px as Lulu */
.yb h1,
.yb h2,
.yb h3,
.yb h4,
.yb h5,
.yb h6,
.yb .page-title .title,
.yb .product_title,
.yb .yb-head__title,
.yb .yb-news__title {
	font-family: var(--yb-font);
	font-weight: 600;
	letter-spacing: 0;
}
.yb .yb-hero__title { letter-spacing: 0; }
.yb h1 { font-size: 30px; line-height: 1.2; }
.yb h2 { font-size: 28px; line-height: 1.2; }
.yb h3 { font-size: 24px; line-height: 1.25; }
.yb h4 { font-size: 19px; line-height: 1.26; }
.yb h5 { font-size: 17px; line-height: 1.25; }
.yb h6 { font-size: 16px; line-height: 1.25; }

/* ==========================================================================
   3. Links
   ========================================================================== */

/* Inline copy links: 1px grey underline, 4px offset, red on hover */
.yb .entry-content p a:not([class]),
.yb .entry-content li a:not([class]),
.yb .wd-text-block a:not([class]),
.yb .woocommerce-privacy-policy-text a,
.yb .woocommerce-terms-and-conditions-link,
.yb .woocommerce-LostPassword a,
.yb .lost_password a,
.yb .woocommerce-info a:not(.button),
.yb .woocommerce-message a:not(.button),
.yb .woocommerce-error a:not(.button) {
	color: #000;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: #8D9196;
	text-underline-offset: 4px;
	transition: text-decoration-color .15s ease-in-out;
}
.yb .entry-content p a:not([class]):hover,
.yb .entry-content li a:not([class]):hover,
.yb .wd-text-block a:not([class]):hover,
.yb .woocommerce-privacy-policy-text a:hover,
.yb .woocommerce-terms-and-conditions-link:hover,
.yb .woocommerce-LostPassword a:hover,
.yb .lost_password a:hover,
.yb .woocommerce-info a:not(.button):hover,
.yb .woocommerce-message a:not(.button):hover,
.yb .woocommerce-error a:not(.button):hover {
	color: #000;
	text-decoration-color: #D31334;
}

/* Signature utility link (Size guide / Edit / Quick Shop): border underline */
.yb .yb-link {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #8D9196;
	padding-bottom: 4px;
	transition: border-color .15s ease-in-out;
}
.yb .yb-link:hover {
	color: #000;
	background: none;
	border-bottom-color: #D31334;
}

/* ==========================================================================
   4. Buttons
   Search submit, popup close, admin bar and link-style buttons are excluded (zero-specificity :where).
   ========================================================================== */

/* 4a. Shared metrics — every button type */
.yb .button:where(:not(.searchsubmit, .mfp-close, .btn-style-link, #wpadminbar *)),
.yb .btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, #wpadminbar *)),
.yb .wd-btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, #wpadminbar *)),
.yb .yb-btn,
.yb [type="submit"]:where(:not(.searchsubmit, .mfp-close, .btn-style-link, #wpadminbar *)) {
	min-height: 52px;
	padding: 15px 24px;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	font-family: var(--yb-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 1;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* 4b. Default = solid black; hover flips to white with a black border (Lulu .btn-secondary) */
.yb .button:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)),
.yb .btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)),
.yb .wd-btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)),
.yb [type="submit"]:where(:not(.searchsubmit, .mfp-close, .yb-btn, #wpadminbar *)),
.yb .yb-btn--dark {
	background-color: #000;
	border-color: #000;
	color: #fff;
}
.yb .button:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)):hover,
.yb .btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)):hover,
.yb .wd-btn:where(:not(.searchsubmit, .mfp-close, .btn-style-link, .btn-style-bordered, .btn-color-white, #wpadminbar *)):hover,
.yb [type="submit"]:where(:not(.searchsubmit, .mfp-close, .yb-btn, #wpadminbar *)):hover,
.yb .yb-btn--dark:hover {
	background-color: #fff;
	border-color: #000;
	color: #000;
	opacity: 1;
}

/* 4c. Outline = white, 1px black; hover black fill, white text */
.yb .yb-btn--outline,
.yb .btn.btn-style-bordered,
.yb .button.btn-cart,
.yb .wc-backward {
	background-color: #fff;
	border-color: #000;
	color: #000;
}
.yb .yb-btn--outline:hover,
.yb .btn.btn-style-bordered:hover,
.yb .button.btn-cart:hover,
.yb .wc-backward:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
	opacity: 1;
}

/* 4d. Load more / See more */
.yb .wd-load-more {
	background-color: #333;
	border-color: #333;
	color: #fff;
	padding: 16px 32px;
}
.yb .wd-load-more:hover {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

/* 4e. Commerce CTAs ONLY: red. [id] keeps #place_order at class-level specificity. */
.yb .single_add_to_cart_button,
.yb .checkout-button,
.yb .wc-proceed-to-checkout a,
.yb .button.checkout,
.yb [id="place_order"] {
	background-color: #D31334;
	border: 1px solid #D31334;
	border-radius: 4px;
	box-shadow: none;
	color: #fff;
	min-height: 52px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.yb .single_add_to_cart_button:hover,
.yb .single_add_to_cart_button:focus,
.yb .checkout-button:hover,
.yb .checkout-button:focus,
.yb .wc-proceed-to-checkout a:hover,
.yb .wc-proceed-to-checkout a:focus,
.yb .button.checkout:hover,
.yb .button.checkout:focus,
.yb [id="place_order"]:hover,
.yb [id="place_order"]:focus {
	background-color: #B81C29;
	border-color: #B81C29;
	color: #fff;
	opacity: 1;
}
/* Lulu PDP keeps Add to bag red before a size is picked, so WooCommerce's .disabled class is not greyed here. */
.yb [id="place_order"]:disabled {
	background-color: #BFBFBF;
	border-color: #BFBFBF;
	color: #fff;
	opacity: .65;
	cursor: not-allowed;
}

/* Focus ring */
.yb .button:focus-visible,
.yb .btn:focus-visible,
.yb .yb-btn:focus-visible,
.yb [type="submit"]:focus-visible,
.yb [id="place_order"]:focus-visible,
.yb a:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* ==========================================================================
   5. Form fields
   ========================================================================== */

.yb input[type="text"]:where(:not(#wpadminbar *)),
.yb input[type="email"],
.yb input[type="tel"],
.yb input[type="password"],
.yb input[type="url"],
.yb input[type="date"],
.yb input[type="search"]:where(:not(#wpadminbar *)),
.yb input[type="number"]:where(:not(.qty)),
.yb select,
.yb textarea {
	height: 50px;
	padding: 0 16px;
	border: 1px solid #2C282E;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	color: #000;
	font-family: var(--yb-font);
	font-size: 16px;
	font-weight: 400;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.yb select { padding-right: 40px; }
.yb textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	line-height: 1.4;
}
.yb input[type="text"]:where(:not(#wpadminbar *)):focus,
.yb input[type="email"]:focus,
.yb input[type="tel"]:focus,
.yb input[type="password"]:focus,
.yb input[type="url"]:focus,
.yb input[type="date"]:focus,
.yb input[type="search"]:where(:not(#wpadminbar *)):focus,
.yb input[type="number"]:where(:not(.qty)):focus,
.yb select:focus,
.yb textarea:focus {
	border-color: #000;
	box-shadow: none;
	outline: 1px solid #000;
	outline-offset: 0;
}
.yb input::placeholder,
.yb textarea::placeholder {
	color: #57585B;
	opacity: 1;
}

/* Checkboxes / radios: black, 16px */
.yb input[type="checkbox"],
.yb input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: #000;
	vertical-align: -3px;
	cursor: pointer;
}

/* Validation colour */
.yb .woocommerce-invalid input.input-text,
.yb .woocommerce-invalid select { border-color: #D02435; }

/* ==========================================================================
   6. Badges / pills
   ========================================================================== */

.yb .product-labels .product-label,
.yb .onsale,
.yb .wd-label,
.yb .yb-card__badge,
.yb .badge { border-radius: 4px; }

/* ==========================================================================
   7. Overlays / backdrops: 30% black
   ========================================================================== */

.yb .wd-close-side,
.yb .wd-close-side.wd-close-side-opened { background-color: rgba(0, 0, 0, .3); }
.yb .mfp-bg { background: #000; opacity: .3; }
.yb .mfp-bg.mfp-ready { opacity: .3; }

/* ==========================================================================
   8. Grey page ground: category, product, bag, checkout, account (white panels live in area files)
   ========================================================================== */

body.yb.woocommerce-shop,
body.yb.tax-product_cat,
body.yb.tax-product_tag,
body.yb.post-type-archive-product,
body.yb.single-product,
body.yb.woocommerce-cart,
body.yb.woocommerce-checkout,
body.yb.woocommerce-account { background-color: #F9F9F9; }

.yb.woocommerce-shop .website-wrapper,
.yb.tax-product_cat .website-wrapper,
.yb.tax-product_tag .website-wrapper,
.yb.post-type-archive-product .website-wrapper,
.yb.single-product .website-wrapper,
.yb.woocommerce-cart .website-wrapper,
.yb.woocommerce-checkout .website-wrapper,
.yb.woocommerce-account .website-wrapper { background-color: #F9F9F9; }

.yb.single-product .main-page-wrapper { background-color: transparent; }