/**
 * KAAHEL design tokens
 *
 * Source: design-preferences + .cursor/rules/design-tokens.mdc
 */

:root {
	/* Fonts */
	--font-heading: "Tai Heritage Pro", serif;
	--font-body: "Figtree", sans-serif;
	--font-lang: "Montserrat", sans-serif;

	/* Accent / brand gold */
	--color-accent: #b17915;
	--color-accent-muted: #aa7e35;
	--color-accent-hover: #946112; /* newsletter button hover (newsletter-cta) */
	--color-badge: #ba6f05; /* header wishlist/cart badges */
	--color-lang-chevron: #483e27; /* announcement language chevron */

	/* Text */
	--color-heading: #0b0b0b;
	--color-body-88: rgba(11, 11, 11, 0.88);
	--color-body-80: rgba(11, 11, 11, 0.8);
	--color-body-76: rgba(11, 11, 11, 0.76);
	--color-footer-desc: rgba(11, 11, 11, 0.75); /* footer brand description (footer) */
	--color-footer-muted: rgba(11, 11, 11, 0.5); /* footer copyright (footer) */
	--color-search: rgba(11, 11, 11, 0.7); /* header search input */
	--color-search-line: rgba(11, 11, 11, 0.5); /* header search underline */
	--color-star: #c08817;
	--color-icon-muted: #918268;
	--color-icon-header: #5b472e; /* header account/wishlist/cart strokes (header-nav) */

	/* Borders */
	--color-border-light: #e3e3e3;
	--color-border-card: #e4e4e4;
	--color-border-category: #fee7bd;
	--color-border-trust: #e8e8e8;
	--color-border-input: #e5e5e5; /* newsletter input border (newsletter-cta) */
	--color-footer-border: rgba(88, 56, 23, 0.4); /* footer bottom border (footer) */

	/* Backgrounds */
	--color-bg-cream-1: #f6e8ce;
	--color-bg-cream-2: #fbf5e8;
	--color-bg-placeholder: #d9d9d9;
	--color-bg-card-inner: #f9f8f4;
	--color-bg-product-image: #faf6f3; /* featured product image area (featured-products) */
	--color-white: #ffffff;
	--color-hero-gradient-start: #d5c4ae; /* hero background gradient (hero) */
	--color-hero-gradient-end: #bea483; /* hero background gradient (hero) */
	--color-hero-blur: #f9f7f5; /* hero decorative blur circle (hero) */

	/* Type — announcement / header */
	--announcement-text: 11px;
	--announcement-text-lh: 13px;
	--announcement-text-weight: 600;
	--lang-text: 14px;
	--lang-text-lh: 17px;
	--lang-text-weight: 500;
	--nav-link: 14px;
	--nav-link-weight: 550;
	--nav-link-lh: 17px;
	--badge-text: 10px;
	--badge-text-lh: 12px;
	--badge-text-weight: 500;
	--button-text: 14px;
	--button-text-weight: 600;
	--button-text-lh: 30px;
	--button-letter-spacing: 0.03em;

	/* Radius */
	--radius-button: 4px;
	--radius-input: 6px;
	--radius-product-card: 8px;
	--radius-category-card: 6px; /* shop-by-category cards */

	/* Spacing / component defaults — measured from Figma Home 927:183 (1440×3052) */
	--button-padding: 14px 28px;
	--announcement-height: 32px;
	/*
	 * 72px until the revised design. The header strip of
	 * docs/design/home-revised.png is drawn at a different scale from its body,
	 * so it can only be read as ratios
	 * against furniture whose size is known: the 24px account icon renders a
	 * 15px glyph there against a 79px bar and a 72px mark — bar = 5.27 glyphs,
	 * mark = 4.8. Against this build's 21px glyph that is a 111px bar and a
	 * 101px mark: the band is taller than it was, and the mark scales with it.
	 * 108/98 holds that ratio with a little air.
	 * Mobile keeps the old 72px — see the 1200px block in header-nav.css.
	 */
	--header-bar-height: 108px;
	/*
	 * Logo box. The mark sits *inside* the bar — no white plate, no overhang
	 * onto the hero. Sized to the artwork's own 3:2 canvas so `contain` does
	 * not letterbox; within it the mark paints 121×98, the reference ratio.
	 */
	--header-logo-width: 152px;
	--header-logo-height: 102px;
	/* Kept at 0 so the pages that still add it to their top padding
	   (single-product.css, page-banner.css) stay honest about the fact that
	   there is nothing to clear any more. */
	--header-logo-overhang: 0px;
	/*
	 * Retired by the transparent-PNG mark, which is what "re-exported with
	 * tighter bounds" meant: the old logo was opaque artwork on a 1080×1080
	 * white JPEG filling only ~769×704 of it, so the box had to over-scale the
	 * image and clip the white back off. The current file carries its own
	 * alpha and only ~10% side padding, so `contain` alone places it and the
	 * padding simply does not paint. Kept at 1 rather than deleted so a future
	 * logo with baked-in margin has the hook back.
	 */
	--header-logo-trim: 1;
	/* Mobile drawer — derived, no Figma frame (see docs/design/). */
	--drawer-width: min(84vw, 340px);
	--drawer-pad: 20px; /* = mobile header/container gutter */
	--drawer-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--color-drawer-scrim: rgba(11, 11, 11, 0.45);
	--header-menu-gap: 40px;
	--header-actions-gap: 24px;
	--header-social-gap: 14px;
	--header-content-max: 1440px;
	--header-inline-pad: 34px;
	--section-inline-pad: 32px; /* shop/featured/trust/newsletter content gutters */
	--hero-height: 513px; /* hero Frame 2: y103 h513 → ends y616 */
	/*
	 * The banner asset's own ratio (new-hero.png, 1600×855). The hero takes it
	 * from 1025px up so `cover` has nothing to crop: at 1440 the band is 770px
	 * and the whole composed scene — both models, the pedestals and the product
	 * still-life — is in frame. Forcing the old 513px box instead kept only 66%
	 * of the photo's height and cut the products off the bottom.
	 * Re-measure this if the banner is ever replaced with a different crop.
	 */
	--hero-banner-aspect: 1600 / 855;
	--hero-height-mobile: 300px; /* the banner's own block once the hero stacks */
	--eyebrow-size: 18px;
	--home-section-gap: 40px; /* 616→656, 1031→1071, 1518→1558, 1776→1816 */
	--section-heading-to-divider: 16px; /* shop + featured title → diamond */
	--section-heading-to-grid: 20px; /* shop + featured header → cards */
	--section-title-size: 34px;
	--section-title-tracking: -0.34px;
	--shop-by-category-max: 1376px;
	--shop-by-category-gap: var(--section-heading-to-grid);
	--shop-by-category-grid-gap: 16px;
	--category-card-width: 262.4px;
	/*
	 * Revised design (docs/design/home-revised.png): image on top, caption band
	 * beneath — the caption is no longer overlaid on the photo. Measured off the
	 * reference against the unchanged 1376px grid (5 × 262.4 + 4 × 16), which
	 * fixes its scale at 1.716 screenshot px per design px:
	 * card 274px → 470, media 210px → 360, caption 63px → 108.
	 */
	--category-card-height: 470px;
	--category-card-media-height: 360px;
	/*
	 * The caption block is centred in the band, so the padding is only a floor
	 * on its breathing room — 20px keeps the 58px block (22 + 10 + 26) clear of
	 * the 108px band at every card.
	 */
	--category-card-caption-pad: 20px;
	--category-card-text-gap: 10px;
	/*
	 * "Shop Now" at 12px/30 left the two lines 14px apart against the
	 * reference's 21, and read a size small beside the name. 14px on a 26px line
	 * puts the ink block back at the reference's proportions: 29px of band above
	 * the name, 21px between the lines, 29px below the link.
	 */
	--category-card-link-size: 14px;
	--category-card-link-lh: 26px;
	/*
	 * Phone cards only. The desktop card crops its 2:3 thumbnail into a
	 * 262×360 box, which is close enough to lose only the bottom 8%; stacked
	 * full-width the same box is 358×260 and cuts the model off at the knees,
	 * so the media box takes the thumbnails' own ratio instead.
	 */
	--category-card-media-aspect: 2 / 3;
	--featured-grid-gap: 24px; /* featured product card gap */
	--view-all-tracking: -0.14px; /* Featured "View All" */
	--view-all-line-height: 22px;
	--divider-fade: #c48a20; /* section divider line fade (shop/featured/hero) */
	/*
	 * Style-for-every-moment promo band (docs/design/home-revised.png, between
	 * Featured Products and App Download). No Figma frame — measured off the
	 * reference
	 * at the same 1.716 scale as the category grid: band 198px → 340,
	 * button 164×35 → 281×60, both heading lines cap 21px → 51px type.
	 */
	--home-promo-max: 1376px;
	/*
	 * The band is sized by ratio, not a fixed height: at 1376 (its max width)
	 * that is the reference's 340px, and narrower viewports scale it down
	 * instead of cropping the artwork's sides — the models sit at the very
	 * edges of the frame, so a side crop takes them out. The artwork is cut to
	 * this same 4.047:1, so nothing is cropped at any width.
	 */
	--home-promo-aspect: 1376 / 340;
	--home-promo-min-height: 240px; /* the copy needs 202px; floor for narrow tablets */
	/*
	 * Phone band. The wide artwork's models stand at the very edges, so a 358px
	 * viewport crops them out entirely; below 782px the template serves the
	 * uncropped studio photo instead and the copy sits under it rather than
	 * over it. This is that photo's ratio — the <img> carries the desktop file's
	 * width/height attributes, so the box has to be stated here.
	 */
	--home-promo-aspect-mobile: 1725 / 912;
	--home-promo-radius: 8px;
	--home-promo-title-size: 50px;
	--home-promo-title-lh: 1.2;
	/*
	 * The reference's "STYLE FOR" measures 145px wide — 250px on the 1376 grid,
	 * against the 265px Tai Heritage Pro sets it in untracked at 50px. That is
	 * ~1.9px to come off each of the eight gaps.
	 */
	--home-promo-title-tracking: -0.04em;
	--home-promo-stack-gap: 22px; /* line 2 baseline → button */
	/*
	 * Not the global 14px --button-text: this button is 60px tall against the
	 * hero's 46px, and the reference's label runs 207px wide against the 164px
	 * Figtree sets it in at 14px — ~17px type.
	 */
	--home-promo-btn-text: 17px;
	--home-promo-btn-width: 281px;
	--home-promo-btn-height: 60px;
	--app-download-max: 1376px; /* Frame 48 y1558 h218 */
	--app-download-height: 218px;
	--app-download-pad-left: 21px;
	--app-download-pad-right: 26px; /* QR right edge at band-x1350 of 1376 */
	--app-download-qr-size: 118px;
	--trust-badges-height: 118px; /* y1816 h118 → ends y1934 */
	--trust-badges-pad-y: 32px; /* +1px border top/bottom = Figma's 118px band */
	--trust-badge-gap: 6px;
	--newsletter-height: 177px; /* y2459 h177 → ends y2636 */
	--footer-pad-top: 60px; /* newsletter end 2636 → footer logo y2696 */

	/* Shop archive (product listing screenshot) */
	--shop-archive-max: 1376px;
	--shop-archive-pad-y: 40px;
	--shop-archive-gap: 20px; /* sidebar → main (Figma ~382−32−330) */
	--shop-sidebar-width: 330px; /* Figma Frame 75 */
	/* (330 − 311 Apply) / 2 = 9.5 — sides sized so Apply is exactly 311px */
	--shop-filters-pad: 12px 12px 20px; /* Figma: dividers 306px @ left:12 → 12px inset both sides */
	/* Frame 75: Categories heading y19 → first item y54 (heading lh 26 → 9px gap). */
	--shop-filters-section-gap: 9px; /* heading → list / controls */
	--shop-filters-section-pad-top: 7px; /* 12 pad + 7 = heading y19 */
	--shop-filters-section-pad-y: 16px; /* between sections (divider→next heading) */
	--shop-filters-section-pad-bottom: 18px; /* list end y396 → divider y414 */
	--shop-filter-divider: rgba(0, 0, 0, 0.09);
	/* Figma Frame 75: checkbox tops at y 54, 98, 142… → 44px pitch. Single source = list gap. */
	--shop-filter-item-pitch: 44px;
	--shop-filter-checkbox-hit: 34px;
	--shop-filter-item-gap: 10px; /* pitch − hit; NEVER set to 44 (doubles → ~78px) */
	--shop-filter-checkbox-box: 12.75px;
	--shop-filter-checkbox-border: 1.41667px;
	--shop-filter-label-inset: 43px; /* label left edge from checkbox hit left */
	--shop-filter-price-width: 290px; /* slider container */
	--shop-filter-price-track-width: 272px; /* filled track rect */
	--shop-filter-price-track: 6px;
	--shop-filter-price-thumb: 12px; /* plain circle handles — no icon */
	--shop-filter-swatch-size: 34px;
	--shop-filter-swatch-gap: 20px;
	--shop-filter-apply-width: 311px;
	--shop-filter-apply-height: 50px;
	--shop-toolbar-gap: 20px;
	--shop-sort-width: 124px; /* Sort By control (toolbar) */
	--shop-sort-height: 40px;
	--shop-sort-padding: 10px 16px;
	--shop-sort-gap: 17px; /* label → chevron */
	--shop-sort-label-tracking: 0.1em;
	--color-sort-chevron-stroke: #fff6e3; /* ri:arrow-drop-down-line stroke */
	--shop-grid-gap: 24px;
	--shop-card-width: 238.5px; /* PLP card fixed width (Figma) */
	--shop-card-image-height: 308.05px; /* PLP card image area */
	/*
	 * Figma spec is 162.55px, but that assumes trimmed (leading-trim) text
	 * boxes Figma exports at 11px tall for name/price — real browser
	 * line-height renders those at ~18.5px each, which doesn't leave room
	 * for the full 17.6px gap before the ATC button inside 162.55px.
	 * Grown by ~17px so every gap (name→price→rating→ATC) gets the real
	 * 17.6px per plp-figma-spec.md, instead of the last gap collapsing.
	 */
	--shop-card-info-height: 179.41px; /* PLP card info area */
	--shop-card-info-pad: 15.4px;
	--shop-card-info-gap: 17.6px;
	--shop-card-name-size: 15.4px;
	--shop-card-name-lh: 29px;
	--shop-card-star-w: 14.67px;
	--shop-card-star-h: 13.94px;
	--shop-card-star-gap: 2.2px;
	--shop-card-review-size: 13.2px;
	--shop-card-review-lh: 33px;
	--shop-card-badge-size: 13.2px;
	--shop-card-badge-lh: 24px;
	--shop-card-wishlist-size: 26.404px; /* PLP only — Home stays 24px */
	--shop-card-atc-width: 208px;
	--shop-card-atc-height: 43px;
	--color-product-name: #212121; /* PLP product card title */
	--color-product-price: #171717; /* PLP product card price */

	/* PLP banner (Figma Frame 2 — 1061:2287 = 1440 × 309) */
	--plp-banner-height: 309px;
	--plp-banner-title-size: 56px;
	--plp-banner-title-lh: 70px;
	--color-plp-banner-heading: #1f1f1f;
	/* Per-category tagline between the H1 and the sentence. No Figma frame —
	   derived from the hero eyebrow's idiom; see assets/css/plp-banner.css. */
	--plp-banner-tagline-size: 18px;
	--plp-banner-tagline-lh: 28px;
	--color-breadcrumb-diamond: #fefdf8; /* breadcrumb diamond fill (Frame 1116607181) */
	/*
	 * PLP banner fade: implement via CSS mask on the photo (not white overlay).
	 * White @ alpha over the photo = muddy grey midtones — never do that.
	 */

	/*
	 * Product Details Page (Figma "Product Listing page" 1440 frame).
	 * Columns: gutter 32 | thumbs 136 | 10 | main 574 | 56 | summary 600 | 32.
	 */
	--pdp-gap: 56px; /* gallery → summary (main img right 752 → summary 808) */
	--pdp-summary-width: 600px; /* left 808 → right gutter 1408 */
	--pdp-thumb-width: 136px;
	--pdp-thumb-height: 157px;
	--pdp-thumb-gap: 9.5px; /* thumb tops 189/355/522/688 → 166.5 pitch − 157 */
	--pdp-thumb-rail-gap: 10px; /* thumb column → main image */
	--pdp-main-width: 574px;
	--pdp-main-height: 656px;
	/* Unitless — `aspect-ratio` rejects lengths, so it cannot reuse the two above. */
	--pdp-main-ratio: 574 / 656;
	--pdp-title-size: 34px;
	--pdp-title-lh: 48px;
	--pdp-price-size: 32px;
	--pdp-price-lh: 48px;
	--pdp-star-size: 20px;
	--pdp-star-gap: 5px; /* star pitch 25 − 20 */
	--pdp-swatch-size: 28px; /* Ellipse 5 outer ring */
	/* Figma exports this group as a 34px master placed at 28px, so every value
	   carries the 28/34 = 0.823529 scale — including a "0.823529px" stroke that
	   is really the master's 1px stroke scaled down, and a 23.06px fill that is
	   really 28px. Copying those scaled values renders badly at 1x (most large
	   desktop monitors): a sub-pixel stroke cannot cover a whole device pixel, and
	   a fill that centres to a half-pixel gets rounded a pixel one way and two the
	   other, so the fill sits visibly off-centre inside the ring.
	   Every step therefore has to be whole and the fill even: 1px stroke and 2px
	   gap are both straight from the master, leaving 28 − 2(1 + 2) = 22px of fill,
	   which centres exactly. Costs ~1px of fill against Figma's placed 23.06 and
	   buys a concentric, crisp ring at every DPI. */
	--pdp-swatch-dot: 22px; /* Ellipse 2 inner fill (Figma places 23.06) */
	--pdp-swatch-ring-width: 1px; /* Ellipse 2 + Ellipse 5 stroke, unscaled */
	--pdp-swatch-gap: 16px;
	--pdp-size-btn-width: 64px;
	--pdp-size-btn-height: 40px;
	--pdp-size-btn-gap: 6px;
	--pdp-action-width: 563px; /* Add to cart / Buy it now */
	--pdp-action-height: 50px;
	--pdp-radius: 6px;
	--color-pdp-stock: #208c18; /* In Stock dot + label */
	--color-pdp-swatch-ring: #bd7101; /* colour swatch hairline + selected ring */
	--color-pdp-rule: rgba(11, 11, 11, 0.08); /* Line 53 */
	--color-pdp-size-bg: #f9f8f4; /* size button fill (= --color-bg-card-inner) */

	/* PDP tabs + spec box */
	--pdp-tab-size: 14px;
	--pdp-tab-gap: 48px;
	--pdp-tab-tracking: 0.06em;
	--pdp-spec-box-pad: 32px;
	--pdp-prose-size: 15px;
	--pdp-prose-lh: 30px;

	/* PDP related grid — 6 across the 1376 content width */
	--pdp-related-columns: 6;
	--pdp-related-gap: 24px;
	--pdp-related-heading-size: 34px;

	/* About Us (Figma "About Us" 1440 frame) */
	--about-hero-height: 497px; /* Frame 2 */
	--about-hero-inset: 54px; /* copy block left edge */
	--about-hero-title-size: 56px;
	--about-hero-title-lh: 66px;
	--about-hero-copy-width: 435px;
	--about-btn-height: 46px;
	--about-btn-radius: 4px;
	/* Left white fade over the banner photo (Figma image 119, 270.01deg) */
	--banner-photo-fade: linear-gradient(
		270deg,
		rgba(255, 255, 255, 0) 38.58%,
		rgba(255, 255, 255, 0.5185) 61.62%,
		rgba(255, 255, 255, 0.6112) 78.31%,
		#ffffff 99.99%
	);

	/* Our Story — collage 298|8|410 and copy column, 54px apart */
	--about-story-gap: 54px; /* collage → copy */
	--about-collage-gap: 8px; /* small column → tall image */
	--about-collage-row-gap: 9px; /* between the two small images */
	--about-collage-small-w: 298px;
	--about-collage-small-h: 272px;
	--about-collage-tall-w: 410px;
	--about-collage-tall-h: 553px;
	--about-story-heading-size: 42px;
	--about-story-heading-lh: 56px;
	--about-feature-icon: 50px;
	--about-feature-gap: 37px;
	--about-feature-label-size: 16px;

	/* Contact Us (Figma "Contact Us" 1440 frame) */
	--contact-hero-height: 424px; /* Frame 2 */
	--contact-hero-inset: 54px; /* copy block left edge, as About */
	--contact-hero-title-size: 56px;
	--contact-hero-title-lh: 74px;
	--contact-hero-copy-width: 419px;
	/* Two cream panels: Figma has them at 660 and 674 with a 22px gap, which
	   leaves the right one 20px short of the 1408 gutter. Treated as drawing
	   slack — built as equal columns across the 1376 content width. */
	--contact-panel-min-height: 548px;
	--contact-panel-gap: 22px;
	--contact-panel-pad: 37px; /* field inset 69 − panel left 32 */
	--contact-heading-size: 24px;
	--contact-heading-lh: 36px;
	--contact-field-height: 40px;
	--contact-field-gap: 20px; /* 60px row pitch − 40px field */
	--contact-field-radius: 3px;
	--contact-textarea-height: 131px;
	--contact-submit-height: 50px;
	--contact-submit-radius: 6px;
	--contact-info-pitch: 115px; /* item top → next item top */
	--contact-info-icon: 30px;
	--contact-info-gap: 15px; /* icon → text column */
	--contact-info-title-size: 18px;
	--contact-info-value-size: 16px;
	--contact-info-line-height: 28px;
	/* Figma draws these on a pure-black base; normalised to the 11,11,11 the
	   rest of the theme uses — the difference is not perceptible and a second
	   near-black would only invite drift. */
	--color-contact-field-border: rgba(11, 11, 11, 0.24);

	/*
	 * Utility pages — Cart, Checkout, My Account (+ endpoints), Wishlist.
	 *
	 * These four have no Figma frame. Every value below is derived from a
	 * surface that does, so they read as part of the same set rather than as a
	 * fourth opinion: content width and gutters from the shop archive, the
	 * banner ornament and type ramp from the Contact/About heroes, panels from
	 * the PLP card, and fields/buttons from the Contact form. Nothing here is
	 * an independent design decision — if a Figma frame lands later, these are
	 * the values to reconcile against it.
	 */
	--wc-page-max: 1376px; /* = --shop-archive-max / --app-download-max */
	--wc-page-pad-y: 48px;
	--wc-page-gap: 24px; /* main column → sidebar */

	/* Compact title band — the hero silhouette without the photo. Contact is
	   424px because it carries a banner image; with only breadcrumb + title +
	   divider to hold, 180px keeps the same rhythm without dead space. */
	--wc-banner-height: 180px;
	--wc-banner-title-size: 42px; /* = --about-story-heading-size */
	--wc-banner-title-lh: 56px;
	--wc-banner-crumb-gap: 14px; /* = .contact-hero .kaahel-breadcrumb margin */
	--wc-banner-divider-gap: 16px; /* = --section-heading-to-divider */
	--wc-banner-divider-width: 297px; /* = .contact-hero__divider */
	--wc-banner-bg: linear-gradient(
		180deg,
		var(--color-bg-cream-2) 0%,
		rgba(251, 245, 232, 0) 100%
	);

	/* Panels — the PLP card shell reused as a content surface. */
	--wc-panel-radius: var(--radius-product-card);
	--wc-panel-pad: 28px;
	--wc-panel-pad-tight: 20px;
	--wc-panel-gap: 20px;
	--wc-auth-panel-max: 520px; /* login/register panel — Contact form column width */

	/* Forms — matched to the Contact form so every input on the site agrees. */
	--wc-field-height: 44px; /* Contact is 40px; +4 for the denser Woo labels */
	--wc-field-radius: var(--contact-field-radius);
	--wc-field-border: var(--color-contact-field-border);
	--wc-label-size: 14px;
	--wc-btn-height: var(--contact-submit-height);
	--wc-btn-radius: var(--contact-submit-radius);

	/* Tables — cart lines, order history, wishlist rows. */
	--wc-row-border: var(--color-border-card);
	--wc-thumb-size: 84px;
	--wc-row-pad-y: 20px;

	/* My Account — nav rail sits between the PLP sidebar (330) and the copy
	   column, wide enough for "Payment methods" on one line. */
	--wc-account-nav-width: 268px;
	--wc-account-nav-item-height: 46px;
	--color-wc-muted: var(--color-body-76);
	--color-wc-danger: #b3261e; /* = the Contact form error red */
	--color-wc-success: #208c18; /* = --color-pdp-stock */
}