/* ==========================================================
   HAMS | همس — Typography & Buttons system
   One source of truth. Values come from tokens.css; this file only
   applies them. Classes are for hand-written markup; the selector
   lists after each class map WordPress, WooCommerce and Elementor
   output onto the same styles. !important is used only where the
   parent theme / Elementor ship more specific selectors.
   ========================================================== */

/* ---------- 1. Families ----------
   --font-ar = Camel (Arabic glyphs only, via unicode-range) → LT Museum for Latin.
   So one stack renders mixed Arabic/English correctly. */
/* :where() keeps this at zero specificity so .t-label/.t-en and other roles override it */
:where(body, body *:not(i, svg, [class*="icon"])) {
	font-family: var(--font-ar) !important;
}
.t-en, [lang="en"], [lang="en"] * { font-family: var(--font-en) !important; font-style: italic; line-height: var(--lh-body-en); }

/* ---------- 2. Scale ----------
   display 84/46 · h1 56/36 · h2 46/32 · h3 26/22 · lead 21/17 · body 18/16 · small 15/14 · label 12/11
   (desktop / ≤760px, from tokens.css) */
body { font-size: var(--fs-body); line-height: var(--lh-body-ar); font-weight: 300; color: var(--hams-burgundy); }

.t-display,
.hams-s-hero h1.elementor-heading-title {
	font-size: var(--fs-display) !important; line-height: 1.15 !important; font-weight: 300 !important; letter-spacing: 0;
}
.t-h1, h1,
.elementor-widget-heading h1.elementor-heading-title,
.product_title, .page-header h1 {
	font-size: var(--fs-h1) !important; line-height: var(--lh-heading) !important; font-weight: 300 !important;
}
.t-h2, h2,
.elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; font-weight: 300 !important;
}
.t-h3, h3, h4,
.cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3,
.related > h2, .upsells > h2, .hams-row-head h2 {
	font-size: var(--fs-h3) !important; line-height: var(--lh-heading) !important; font-weight: 300 !important;
}
.t-lead, .page-header .desc, .hams-footer__line,
.product .summary .price, .woocommerce-product-details__short-description {
	font-size: var(--fs-lead) !important; line-height: 1.7;
}
.t-body { font-size: var(--fs-body); }
.t-small,
.woocommerce-loop-product__title, ul.products .price, .woocommerce-result-count,
.checkout-breadcrumb, .hams-footer__copy, .woocommerce-breadcrumb {
	font-size: var(--fs-small) !important;
}
h1, h2, h3, h4, h5, h6, .product_title, .woocommerce-loop-product__title, .price, .amount {
	color: var(--hams-burgundy) !important; font-weight: 300 !important;
}
p { margin: 0 0 1em; }
.t-measure, .page-content p, .page-content li { max-width: 68ch; }

/* ---------- 3. Labels (small capitals in LT Superior) ---------- */
.t-label, .label,
.hams-nav a, .hams-header__icons a, .onsale, .woocommerce-tabs .tabs a {
	font-family: var(--font-label) !important; font-size: var(--fs-label) !important;
	letter-spacing: .12em; font-weight: 300;
}
.t-label, .label { letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--hams-burgundy-70); }

/* ---------- 4. Links ---------- */
a { color: var(--hams-burgundy); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-whisper); }
a:hover { color: var(--hams-burgundy-70); }
:focus-visible { outline: 2px solid var(--hams-burgundy); outline-offset: 3px; }

/* ==========================================================
   BUTTONS
   .btn              outline (secondary) — default
   .btn--primary     filled burgundy, blush text — one per view
   .btn--light       filled blush on dark backgrounds
   .btn--link        text + underline, for quiet actions ("اكتشفي")
   .btn--sm          compact (cards, tables)
   .btn--block       full width (mobile, checkout)
   states: :hover, :focus-visible, :disabled / .disabled / [aria-disabled]
   ========================================================== */
/* base at zero specificity: variants below always win, whatever element they land on */
:where(.btn,
.button, button[type="submit"], input[type="submit"],
.single_add_to_cart_button, .checkout-button, #place_order,
.wc-block-components-button:not(.is-link),
.elementor-widget-button .elementor-button) {
	display: inline-flex !important; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 56px; padding: 0 38px !important;
	font-family: var(--font-ar) !important; font-size: var(--fs-small) !important; font-weight: 300 !important;
	line-height: 1.2 !important; letter-spacing: .02em; text-decoration: none !important; text-align: center;
	border: 1px solid var(--hams-burgundy) !important; border-radius: 0 !important;
	background: transparent !important; color: var(--hams-burgundy) !important; box-shadow: none !important;
	cursor: pointer; box-sizing: border-box;
	transition: background var(--dur-fast) var(--ease-whisper), color var(--dur-fast) var(--ease-whisper), border-color var(--dur-fast) var(--ease-whisper);
}
:where(.btn:hover,
.button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.wc-block-components-button:not(.is-link):hover) {
	background: var(--hams-burgundy) !important; color: var(--hams-blush) !important;
}

/* primary: the one action that moves the purchase forward */
.btn--primary,
.single_add_to_cart_button, .checkout-button, #place_order,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.elementor-widget-button .elementor-button {
	background: var(--hams-burgundy) !important; color: var(--hams-blush) !important;
}
.btn--primary:hover,
.single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover,
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover,
.elementor-widget-button .elementor-button:hover {
	background: var(--hams-night) !important; border-color: var(--hams-night) !important; color: var(--hams-blush) !important;
}

/* light: on burgundy / dark photos */
.btn--light { background: var(--hams-blush) !important; border-color: var(--hams-blush) !important; color: var(--hams-burgundy) !important; }
.btn--light:hover { background: var(--hams-dew) !important; border-color: var(--hams-dew) !important; color: var(--hams-burgundy) !important; }

/* link: quiet text action */
.btn--link, .hams-ulink,
.woosw-btn, .woosw-btn:hover {
	display: inline-block; min-height: 0; padding: 0 0 3px !important;
	font-family: var(--font-label) !important; font-size: var(--fs-label) !important; letter-spacing: .12em;
	background: none !important; color: var(--hams-burgundy) !important; border: 0 !important;
	border-bottom: 1px solid currentColor !important; text-decoration: none !important;
}
.btn--link:hover, .hams-ulink:hover, .woosw-btn:hover { color: var(--hams-burgundy-70) !important; }

/* sizes */
.btn--sm,
ul.products .button, .woocommerce-cart-form .button, .coupon .button {
	min-height: 44px; padding: 0 22px !important; font-size: var(--fs-label) !important;
}
.btn--block, .wc-block-cart__submit-button, #place_order, .wc-block-components-checkout-place-order-button { width: 100%; }
ul.products .button { width: 100%; }

/* states */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"],
.button:disabled, .button.disabled, .single_add_to_cart_button.disabled {
	opacity: 1 !important; cursor: not-allowed !important; pointer-events: auto;
	background: var(--hams-dew) !important; color: var(--hams-burgundy-70) !important;
	border: 1px dashed var(--hams-burgundy-70) !important;
}
.btn:focus-visible, .button:focus-visible, .elementor-button:focus-visible {
	outline: 2px solid var(--hams-burgundy) !important; outline-offset: 3px;
}
@media (max-width: 760px) {
	.single_add_to_cart_button, .checkout-button { width: 100%; }
}

/* icon-only buttons are not buttons in this system */
.hams-burger { min-height: 44px !important; min-width: 44px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--hams-burgundy) !important; font-size: 24px !important; }

/* fixes after visual check */
.t-display, .t-h1, .t-h2, .t-h3, .t-lead, .t-body, .t-small, p, li { color: var(--hams-burgundy); }
.t-small + *, .t-label { margin-top: 0; }
.btn + .btn, .btn + button.btn { margin-inline-start: var(--sp-3); }
.btn--block, .btn.btn--block { display: flex !important; width: 100%; max-width: none; box-sizing: border-box; }
.t-measure .btn--block, p:has(> .btn--block) { max-width: none; }

/* ==========================================================
   TARGETS & READABILITY (WCAG 2.2 AA 2.5.8 / 1.4.3, Baymard)
   ========================================================== */
html { scroll-padding-top: 96px; } /* sticky header never covers a focused/anchored element */
.t-label, .label, .hams-nav a, .hams-header__icons a, .btn--link, .hams-ulink, .woosw-btn { font-size: max(12px, var(--fs-label)) !important; }
.wc-block-components-product-details, .wc-block-components-product-metadata, .variation { font-size: var(--fs-small) !important; }

/* every tappable text control: ≥24px desktop, ≥44px touch */
.hams-nav a, .hams-header__icons a, .hams-footer a, .woosw-btn,
.woocommerce-tabs .tabs a, .page-numbers, .hams-row-head a, .hams-s-cats .hams-ulink {
	display: inline-flex !important; align-items: center; min-height: 24px; min-width: 24px; box-sizing: border-box;
}
.woosw-btn, .hams-ulink { padding-block: 6px !important; }
@media (pointer: coarse), (max-width: 760px) {
	.hams-nav a, .hams-header__icons a, .hams-footer a, .woosw-btn,
	.woocommerce-tabs .tabs a, .page-numbers, .hams-row-head a, .hams-ulink { min-height: 44px; }
}
.wc-block-components-checkbox__input, .wc-block-components-radio-control__input,
input[type="checkbox"], input[type="radio"] { width: 24px !important; height: 24px !important; min-width: 24px; }

.hams-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn--sm, ul.products .button, .woocommerce-cart-form .button, .coupon .button { font-size: max(12px, var(--fs-label)) !important; }
.woocommerce-tabs .tabs a { font-size: var(--fs-small) !important; }
.hams-assure a, .posted_in a, .checkout-breadcrumb a,
.wc-block-components-panel__button, .wc-block-components-address-form__address_2-toggle,
.wc-block-components-totals-coupon-link, .wc-block-cart-item__product .wc-block-components-product-name {
	display: inline-flex !important; align-items: center; min-height: 24px;
}
@media (pointer: coarse), (max-width: 760px) { .hams-assure a, .posted_in a, .checkout-breadcrumb a { min-height: 44px; } }
.wc-block-components-order-summary-item__quantity { font-size: 12px !important; }
.screen-reader-text { display: block !important; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }