/* ==========================================================================
   EQUIPPEDLY — FOUNDATION
   Load order: 2 of 4 (after fonts.css)

   THE canonical Equippedly token layer. There is exactly one declaration of
   each custom property in this project and it lives in this file.

   Token names follow Visual Design System v1, Appendix L ("CSS Variable /
   Design Token Naming Plan") verbatim, because Homepage Hi-Fi Spec v1 — the
   highest-priority source — references those exact names (e.g.
   --eq-color-chalk-white, --eq-radius-lg). The shorthand names used in the
   Phase 4 reference bundle (--eq-ink, --eq-volt) are deliberately NOT declared;
   that bundle is implementation reference only and does not override the
   design system.

   The same names are registered in Bricks > Settings > Variables so they appear
   in the builder pickers. Bricks holds the names; this file holds the values.
   ========================================================================== */


/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {

	/* --- Colour · Visual Design System v1 §4 / Appendix A ------------------
	   Volt is rationed: primary CTA, active/selected state, performance data,
	   focus ring. Never a large background fill, never text. */

	--eq-color-ink-black:            #0E0E10;
	--eq-color-graphite:             #1C1C1F;
	--eq-color-chalk-white:          #F7F5F1;
	--eq-color-pure-white:           #FFFFFF;
	--eq-color-volt:                 #CBFF4D;

	--eq-color-text-secondary-light: #4A4A4D;
	--eq-color-text-secondary-dark:  #B9B9BC;
	--eq-color-text-muted:           #8A8A8E;

	--eq-color-border-light:         #E4E2DD;
	--eq-color-border-dark:          #2C2C30;

	--eq-color-success:              #1F8A4C;
	--eq-color-warning:              #D98C1F;
	--eq-color-error:                #D93F3F;
	--eq-color-sale:                 #C1502E;

	/* Volt interaction states, derived once per §13 (hover ~8% darker,
	   pressed ~15%) so no component invents its own. */
	--eq-color-volt-hover:           #B8EB3A;
	--eq-color-volt-active:          #A6D825;


	/* --- Spacing · §10 / Appendix C ---------------------------------------- */

	--eq-space-xs:   4px;
	--eq-space-sm:   8px;
	--eq-space-md:  16px;
	--eq-space-lg:  24px;
	--eq-space-xl:  32px;
	--eq-space-2xl: 48px;
	--eq-space-3xl: 64px;
	--eq-space-4xl: 96px;
	--eq-space-5xl: 128px;
	--eq-space-6xl: 160px;

	/* Section rhythm. §10 assigns 3xl to standard commerce sections and
	   4xl–5xl to editorial ones; §39 steps each down one tier per breakpoint
	   below desktop. Overrides sit in the RESPONSIVE block. */
	--eq-section-y:           var(--eq-space-3xl);
	--eq-section-y-signature: var(--eq-space-4xl);


	/* --- Layout · §9 ------------------------------------------------------- */

	--eq-container:        1200px;  /* standard: shop, product, most sections */
	--eq-container-canvas: 1440px;  /* site canvas: header, full-width chrome */
	--eq-container-wide:   1600px;  /* editorial / hero emphasis */
	/* Root font-size is 10px — rem tokens below resolve to ~620–680px measure. */
	--eq-prose:              62rem; /* ~620px — readable editorial measure */
	--eq-prose-wide:         68rem; /* ~680px — lead / intro measure */
	--eq-gutter:             16px;  /* mobile first; steps up in RESPONSIVE */


	/* --- Radius · §11 / Appendix L ----------------------------------------- */

	--eq-radius-sm:   4px;  /* product imagery */
	--eq-radius-md:   8px;  /* buttons, inputs */
	--eq-radius-lg:  12px;  /* cards, panels */
	--eq-radius-xl:  16px;  /* modals */
	--eq-radius-2xl: 20px;  /* drawers (top corners only) */


	/* --- Motion · §36 / Appendix L ----------------------------------------- */

	--eq-motion-micro:    150ms;  /* icon hover, toggles */
	--eq-motion-standard: 200ms;  /* button states, header state change */
	--eq-motion-drawer:   250ms;  /* drawers, overlays */
	--eq-motion-reveal:   400ms;  /* scroll reveal */
	--eq-motion-image:    500ms;  /* hero / gallery reveal */

	--eq-ease:        cubic-bezier(.2, .8, .2, 1);
	--eq-ease-in-out: cubic-bezier(.4, 0, .2, 1);


	/* --- Shadows · §12 ----------------------------------------------------- */

	--eq-shadow-dropdown: 0 8px 24px rgba(14, 14, 16, .08);
	--eq-shadow-overlay:  0 16px 48px rgba(14, 14, 16, .14);
	--eq-shadow-header:   0 2px 12px rgba(14, 14, 16, .06);
	--eq-shadow-card:     0 4px 12px rgba(14, 14, 16, .05);


	/* --- Type families · §6 -----------------------------------------------
	   Three faces, not two: Clash Display for display sizes, General Sans for
	   H2–H4, Inter for body/UI/navigation. Inter is listed first in the body
	   stack so it takes over automatically the moment its WOFF2 is installed;
	   until then body copy resolves to General Sans. */

	--eq-font-display: "Clash Display", "General Sans", ui-sans-serif, system-ui,
	                   -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--eq-font-heading: "General Sans", "Inter", ui-sans-serif, system-ui,
	                   -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--eq-font-body:    "Inter", "General Sans", ui-sans-serif, system-ui,
	                   -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Declared for the Pakistan/UAE script support planned in architecture v3
	   §29. Neither brand face covers these scripts. Unused until then. */
	--eq-font-arabic:  "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
	--eq-font-urdu:    "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;


	/* --- Type scale · §7 / Appendix B --------------------------------------
	   Fluid between the approved mobile and desktop endpoints, which is how
	   §39 defines tablet ("linear interpolation between the two"). Each clamp
	   lands exactly on the table value: min = mobile, max = desktop. */

	--eq-type-display-xl: clamp(56px, 6.8vw,  96px);  /* 56 → 96 */
	--eq-type-display-l:  clamp(40px, 4.5vw,  64px);  /* 40 → 64 */
	--eq-type-h1:         clamp(32px, 3.4vw,  48px);  /* 32 → 48 */
	--eq-type-h2:         clamp(26px, 2.5vw,  36px);  /* 26 → 36 */
	--eq-type-h3:         clamp(22px, 1.95vw, 28px);  /* 22 → 28 */
	--eq-type-h4:         clamp(18px, 1.4vw,  20px);  /* 18 → 20 */
	--eq-type-body-lg:    clamp(17px, 1.25vw, 18px);  /* 17 → 18 */
	--eq-type-body:       16px;
	--eq-type-body-sm:    14px;
	--eq-type-caption:    12px;
	--eq-type-button:     15px;
	--eq-type-nav:        14px;


	/* --- Chrome · Hi-Fi Spec v1 Header + §15 ------------------------------- */

	--eq-header-h:          88px;
	--eq-header-h-scrolled: 72px;
	--eq-header-h-mobile:   64px;

	--eq-z-header:  100;
	--eq-z-overlay: 150;
	--eq-z-drawer:  200;
}


/* ==========================================================================
   RESPONSIVE TOKENS
   Breakpoints per §39: large desktop 1440+, desktop 1024–1439,
   tablet 768–1023, mobile 480–767, small mobile <480.
   ========================================================================== */

@media (min-width: 768px) {
	:root {
		--eq-gutter: 32px;
		--eq-section-y:           var(--eq-space-3xl);
		--eq-section-y-signature: var(--eq-space-3xl);
	}
}

@media (min-width: 1024px) {
	:root {
		--eq-gutter: 48px;
		--eq-section-y:           var(--eq-space-3xl);
		--eq-section-y-signature: var(--eq-space-4xl);
	}
}

@media (min-width: 1440px) {
	:root { --eq-gutter: 80px; }
}

/* Mobile and below: one tier down from the desktop assignment (§39) */
@media (max-width: 767px) {
	:root {
		--eq-section-y:           var(--eq-space-xl);
		--eq-section-y-signature: var(--eq-space-2xl);
	}
}


/* ==========================================================================
   BASE
   Deliberately minimal — Bricks already resets most of this. Only what the
   brand layer must own.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--eq-font-body);
	font-size: var(--eq-type-body);
	line-height: 1.55;
	color: var(--eq-color-ink-black);
	background-color: var(--eq-color-chalk-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nothing on the site may scroll sideways. */
html, body { overflow-x: clip; }


/* --- Type classes · Appendix B -------------------------------------------- */

.eq-display-xl,
.eq-display-l {
	font-family: var(--eq-font-display);
	font-weight: 600;
	margin: 0;
	text-wrap: balance;
}

.eq-display-xl { font-size: var(--eq-type-display-xl); line-height: 1.0;  letter-spacing: -0.02em; }
.eq-display-l  { font-size: var(--eq-type-display-l);  line-height: 1.05; letter-spacing: -0.01em; }

.eq-h1 {
	font-family: var(--eq-font-display);
	font-size: var(--eq-type-h1);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

.eq-h2, .eq-h3, .eq-h4 {
	font-family: var(--eq-font-heading);
	letter-spacing: 0;
	margin: 0;
	text-wrap: balance;
}

.eq-h2 { font-size: var(--eq-type-h2); line-height: 1.15; font-weight: 600; }
.eq-h3 { font-size: var(--eq-type-h3); line-height: 1.2;  font-weight: 600; }
.eq-h4 { font-size: var(--eq-type-h4); line-height: 1.3;  font-weight: 500; }

.eq-body-lg { font-size: var(--eq-type-body-lg); line-height: 1.5;  }
.eq-body    { font-size: var(--eq-type-body);    line-height: 1.55; }
.eq-body-sm { font-size: var(--eq-type-body-sm); line-height: 1.5;  }

.eq-eyebrow {
	font-family: var(--eq-font-body);
	font-size: var(--eq-type-caption);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--eq-color-text-muted);
}

.eq-text-secondary { color: var(--eq-color-text-secondary-light); }
.eq-text-muted     { color: var(--eq-color-text-muted); }

/* Tabular figures for prices and comparison numbers (§6). */
.eq-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}


/* --- Links ---------------------------------------------------------------
   Prose links only. Navigation and buttons opt out via their own classes. */

.eq-prose a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color var(--eq-motion-micro) var(--eq-ease);
}

.eq-prose a:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus ring · §40 specifies a 2px Volt outline at 2px offset. Volt measures
   roughly 1.5:1 against Chalk White, below the 3:1 WCAG minimum for non-text
   contrast, so a Volt-only ring would fail the same section's AA requirement
   on every light surface. The Volt ring is kept and backed with an Ink halo,
   which stays visible on both registers. Flagged in the Batch 1 report. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--eq-color-volt);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--eq-color-ink-black) 55%, transparent);
	border-radius: var(--eq-radius-sm);
}

.eq-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.eq-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: var(--eq-space-sm) var(--eq-space-md);
	background-color: var(--eq-color-volt);
	color: var(--eq-color-ink-black);
	font-family: var(--eq-font-body);
	font-size: var(--eq-type-body-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--eq-radius-md);
}

.eq-skip-link:focus {
	left: var(--eq-space-md);
	top: var(--eq-space-md);
}

/* §40 — reveals become instant, no translate or scale. Global kill switch so
   individual components never need their own query. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.eq-container,
.eq-container-canvas,
.eq-container-wide {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--eq-gutter);
}

.eq-container        { max-width: calc(var(--eq-container)        + (var(--eq-gutter) * 2)); }
.eq-container-canvas { max-width: calc(var(--eq-container-canvas) + (var(--eq-gutter) * 2)); }
.eq-container-wide   { max-width: calc(var(--eq-container-wide)   + (var(--eq-gutter) * 2)); }


/* --- Sections · §34 registers --------------------------------------------
   Set the Bricks element's own padding to 0 and use these classes. Two
   competing padding sources is the fastest way to lose vertical rhythm. */

.eq-section {
	position: relative;
	padding-block: var(--eq-section-y);
}

.eq-section--signature { padding-block: var(--eq-section-y-signature); }
.eq-section--flush     { padding-block: 0; }

.eq-section--light {
	background-color: var(--eq-color-chalk-white);
	color: var(--eq-color-ink-black);
}

.eq-section--white {
	background-color: var(--eq-color-pure-white);
	color: var(--eq-color-ink-black);
}

.eq-section--dark {
	background-color: var(--eq-color-ink-black);
	color: var(--eq-color-chalk-white);
}

/* "Graphite = the customer is creating" (§34) — configurator register. */
.eq-section--graphite {
	background-color: var(--eq-color-graphite);
	color: var(--eq-color-chalk-white);
}

/* Secondary and eyebrow text resolve to their dark-surface values inside any
   dark register, so no component has to restate them. */
.eq-section--dark .eq-text-secondary,
.eq-section--graphite .eq-text-secondary,
.eq-on-dark .eq-text-secondary,
.eq-section--dark .eq-eyebrow,
.eq-section--graphite .eq-eyebrow,
.eq-on-dark .eq-eyebrow {
	color: var(--eq-color-text-secondary-dark);
}


/* --- Media ---------------------------------------------------------------
   Fixed ratios so images never cause layout shift (§41). */

.eq-media-cover {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--eq-color-graphite);
}

/* TEMPORARY — a media frame with no approved asset yet. Renders as a labelled
   empty frame rather than borrowed imagery, so it cannot ship unnoticed. The
   label is drawn from the data attribute, so each placeholder names itself. */
.eq-media-cover--placeholder::after {
	content: attr(data-eq-placeholder);
	position: absolute;
	inset: auto var(--eq-space-sm) var(--eq-space-sm) auto;
	padding: 5px 8px;
	border: 1px dashed color-mix(in srgb, var(--eq-color-chalk-white) 30%, transparent);
	border-radius: var(--eq-radius-sm);
	font-family: var(--eq-font-body);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--eq-color-chalk-white) 45%, transparent);
}

.eq-media-cover > img,
.eq-media-cover > video,
.eq-media-cover > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eq-ratio-4-5  { aspect-ratio: 4 / 5;  }
.eq-ratio-3-4  { aspect-ratio: 3 / 4;  }
.eq-ratio-1-1  { aspect-ratio: 1 / 1;  }
.eq-ratio-16-9 { aspect-ratio: 16 / 9; }


/* ==========================================================================
   BUTTONS · §13 / Appendix D

   Design System §42 lists these as .eq-btn-primary / -secondary / -tertiary /
   -dark. Implemented as BEM modifiers on a single .eq-btn base, matching the
   approved Batch 1 class list, so shared properties are declared once:

     .eq-btn-primary   → .eq-btn.eq-btn--primary
     .eq-btn-secondary → .eq-btn--outline-dark (light) / --outline-light (dark)
     .eq-btn-tertiary  → .eq-btn--text
     .eq-btn-dark      → .eq-btn--dark
   ========================================================================== */

.eq-btn {
	--_eq-btn-h: 48px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eq-space-sm);

	min-height: var(--_eq-btn-h);
	padding: 0 var(--eq-space-lg);

	font-family: var(--eq-font-body);
	font-size: var(--eq-type-button);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	background: none;
	border: 1px solid transparent;
	border-radius: var(--eq-radius-md);
	cursor: pointer;

	transition: background-color var(--eq-motion-micro) var(--eq-ease),
	            border-color     var(--eq-motion-micro) var(--eq-ease),
	            color            var(--eq-motion-micro) var(--eq-ease),
	            transform        var(--eq-motion-micro) var(--eq-ease);
}

/* Compact height for cards and mini cart (§13). */
.eq-btn--sm   { --_eq-btn-h: 40px; padding-inline: var(--eq-space-md); font-size: var(--eq-type-body-sm); }
.eq-btn--wide { width: 100%; }

/* Primary — the only Volt fill. Never two in one viewport (§14). */
.eq-btn--primary {
	background-color: var(--eq-color-volt);
	color: var(--eq-color-ink-black);
}
.eq-btn--primary:hover  { background-color: var(--eq-color-volt-hover); }
.eq-btn--primary:active { background-color: var(--eq-color-volt-active); transform: scale(.98); }

/* Dark-surface — Chalk fill where Volt is already spent in the same view. */
.eq-btn--dark {
	background-color: var(--eq-color-chalk-white);
	color: var(--eq-color-ink-black);
}
.eq-btn--dark:hover  { background-color: color-mix(in srgb, var(--eq-color-chalk-white) 94%, var(--eq-color-ink-black)); }
.eq-btn--dark:active { transform: scale(.98); }

/* Secondary on light surfaces */
.eq-btn--outline-dark {
	border-color: var(--eq-color-ink-black);
	color: var(--eq-color-ink-black);
}
.eq-btn--outline-dark:hover  { background-color: color-mix(in srgb, var(--eq-color-ink-black) 6%, transparent); }
.eq-btn--outline-dark:active { transform: scale(.98); }

/* Secondary on dark surfaces */
.eq-btn--outline-light {
	border-color: var(--eq-color-chalk-white);
	color: var(--eq-color-chalk-white);
}
.eq-btn--outline-light:hover  { background-color: color-mix(in srgb, var(--eq-color-chalk-white) 12%, transparent); }
.eq-btn--outline-light:active { transform: scale(.98); }

/* Tertiary / text */
.eq-btn--text {
	min-height: auto;
	padding: var(--eq-space-xs) 0;
	border-radius: 0;
	color: inherit;
}
.eq-btn--text:hover  { text-decoration: underline; text-underline-offset: 0.2em; }
.eq-btn--text:active { transform: scale(.98); }

.eq-btn[disabled],
.eq-btn[aria-disabled="true"] {
	opacity: .4;
	pointer-events: none;
}

/* CTA row. Stacks full width across the whole mobile range so both actions stay
   reachable with one thumb.

   The breakpoint is 767px, not 479px: §39 defines Mobile as 480–767px and Small
   mobile as <480px, and the full-width stack is specified for both — Hi-Fi Spec
   v1 §01 puts it in the Mobile block ("CTAs stack full-width, 12px gap, Primary
   on top"), as do §02, §05, §07 and §13 for their own CTAs. Primary sits first
   in the DOM, so column order already puts it on top. */
.eq-btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eq-space-md);
}

@media (max-width: 767px) {
	.eq-btn-group {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.eq-btn-group > .eq-btn { width: 100%; }
}


/* --- Icon button ---------------------------------------------------------
   44px target around a visually smaller icon (§40 touch targets, §32 icons). */

.eq-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--eq-motion-micro) var(--eq-ease);
}

.eq-icon-btn:hover { background-color: color-mix(in srgb, currentColor 10%, transparent); }

.eq-icon-btn > svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}