/* ==========================================================================
6ixmerchandise — design tokens
Source: Shopify Horizon theme (config/settings_data.json + assets/6m-tokens.css
+ assets/6m-design.css + assets/s6m-search.css) and the computed :root of the
LIVE storefront, read 2026-09-14. Nothing here is invented.
Target: /Users/admin/6ix-woo/wp-content/themes/kadence-child/assets/css/tokens.css
Enqueue FIRST, before every other child-theme stylesheet.
Layer order used by the Woo build:
1. tokens.css (this file — variables only, zero selectors beyond :root)
2. kadence parent (Customizer --global-palette* etc.)
3. base.css (element + Woo overrides that consume these tokens)
4. component css (header, pdp, collection, cart, …)
========================================================================== */
:root {
/* ---------------------------------------------------------------------
1. BRAND LAYER (assets/6m-tokens.css — port verbatim)
These are what make the site look like 6ix. Prefer them over the
Horizon scheme variables below when building 6M components.
--------------------------------------------------------------------- */
--6m-ink: #0a0a0a;
--6m-ink-2: #1a1a1a;
--6m-ink-3: #2a2a2a;
--6m-bg: #ffffff;
--6m-bg-2: #f4f3ef;
--6m-bg-3: #ebe9e2;
--6m-signal: #c02b30;
--6m-signal-2: #ff3a30;
--6m-signal-soft: rgba(192, 43, 48, 0.08);
--6m-line: rgba(10, 10, 10, 0.1);
--6m-line-2: rgba(10, 10, 10, 0.06);
/*
* 0.56, not 0.55 (REVIEW_3 item 6 / REVIEW_2 §9.10). Composited on white,
* 0.55 lands on #787878 = 4.41:1 — just under WCAG AA's 4.5:1 — and that one
* token was responsible for every one of the 72 `color-contrast` failures
* Lighthouse reported across home, collection and the PDP. 0.56 composites to
* #767676 = 4.54:1, the darkest value that is still visually the same grey
* (two 8-bit steps). Every surface this token is used on is light: the cart
* summary, the PDP meta, the mobile tab bar and the mobile drawer.
*/
/* 0.58, not 0.56. 0.56 clears AA on WHITE (#767676 = 4.54:1) and the token's old
* comment said "every surface this token is used on is light" — but light is not
* white: three live rules put muted text on --6m-bg-2 #f4f3ef (PDP press-play
* skeleton, collection hero skeleton, cart gift bar), where 0.56 is 4.41:1, and
* --6m-bg-3 #ebe9e2 is worse at 4.32:1 (REVIEW_4 a13). 0.58 is the lightest alpha
* that clears 4.5:1 on ALL THREE grounds — white 4.88, bg-2 4.74, bg-3 4.60 —
* and it is two 8-bit steps darker, which is not a visible change. */
--6m-muted: rgba(10, 10, 10, 0.58);
/* Was 0.35, which composites to #a9a9a9 = 2.34:1 on white — the single largest
* source of colour-contrast failures on the site (88 of the 103 text elements a
* direct audit of the collection page flagged, at 11-13px). 0.35 is not a legible
* grey for text at any size.
*
* 0.56 is the LIGHTEST alpha over white that clears AA (#767676 = 4.54:1), so
* this tier cannot be both lighter than --6m-muted and accessible; the value is
* therefore the same, and the second tier of the type hierarchy is carried by
* size, weight and letter-spacing instead of by an illegible tint. The token is
* kept (rather than consumers being repointed) so collection.css, pdp.css and
* inc/policies.php need no edit and the distinction stays available if a future
* dark surface wants it. */
--6m-muted-2: rgba(10, 10, 10, 0.58);
/* The brand red is 3.42:1 on --6m-ink, which fails AA for text. Used for accent
* TEXT on a dark ground (the drop-countdown eyebrow and title accent); #e0454b is
* the same hue at 4.83:1. Decorative glyphs on dark keep --6m-signal and carry
* aria-hidden, which is the correct answer for decoration. */
--6m-signal-on-dark: #e0454b;
--6m-gold: #c9a96e;
/* Opaque equivalents (flattened over #ffffff) for contexts that reject alpha,
e.g. the Kadence Customizer palette slots. */
/* The opaque twin of --6m-muted. It cannot composite, so it has to clear AA
* against the DARKEST ground it is used on, not against white: #717171 was
* 4.88 / 4.40 / 4.02 on white / bg-2 / bg-3 — two failures — and its old comment
* quoted the ALPHA token's 4.74 as if it were the solid's (REVIEW_5 R5-10).
* #696969 is 5.49 / 4.94 / 4.52: AA on all three. */
--6m-muted-solid: #696969;
--6m-muted-2-solid: #696969; /* follows --6m-muted-solid above; #a9a9a9 was 2.34:1. */
--6m-line-solid: #e6e6e6;
--6m-line-2-solid: #f0f0f0;
/* Film-grain overlay used by snippets/6m-grain.liquid */
--6m-grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
/* ---------------------------------------------------------------------
2. TYPEFACES
Load once in the document head:
NOTE --6m-serif is declared in the Shopify theme but Cormorant Garamond is
NOT in the Google Fonts request, so it has always fallen back to Times New
Roman. Either add it to the href or delete the token. OWNER DECISION.
--------------------------------------------------------------------- */
--6m-sans: "Inter", system-ui, -apple-system, sans-serif;
--6m-display: "Anton", "Inter", sans-serif;
--6m-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
--6m-serif: "Cormorant Garamond", "Times New Roman", serif;
--font-body--family: var(--6m-sans);
--font-body--weight: 400;
--font-body--style: normal;
--font-heading--family: var(--6m-sans);
--font-heading--weight: 700;
--font-heading--style: normal;
--font-subheading--family: var(--6m-sans);
--font-subheading--weight: 500;
--font-accent--family: var(--6m-sans);
--font-accent--weight: 700;
/* ---------------------------------------------------------------------
3. TYPE SCALE (Horizon computed values)
--------------------------------------------------------------------- */
--font-size--3xs: 0.625rem; /* 10 */
--font-size--2xs: 0.75rem; /* 12 */
--font-size--xs: 0.8125rem; /* 13 */
--font-size--sm: 0.875rem; /* 14 */
--font-size--md: 1rem; /* 16 */
--font-size--lg: 1.125rem; /* 18 */
--font-size--xl: 1.25rem; /* 20 */
--font-size--2xl: 1.5rem; /* 24 */
--font-size--3xl: 2rem; /* 32 */
--font-size--4xl: 2.5rem; /* 40 */
--font-size--5xl: 3rem; /* 48 */
--font-size--6xl: 3.5rem; /* 56 */
--font-size--paragraph: 0.875rem;
--font-size--h1: clamp(3rem, 5.6vw, 3.5rem);
--font-size--h2: clamp(2.25rem, 4.8vw, 3rem);
--font-size--h3: 2rem;
--font-size--h4: 1.5rem;
--font-size--h5: 0.875rem;
--font-size--h6: 0.75rem;
--font-paragraph--size: 0.875rem;
--font-paragraph--line-height: 1.6;
--font-paragraph--letter-spacing: 0em;
--font-paragraph--weight: 400;
--font-h1--size: var(--font-size--h1);
--font-h1--line-height: 1;
--font-h1--letter-spacing: 0em;
--font-h1--weight: 700;
--font-h2--size: var(--font-size--h2);
--font-h2--line-height: 1;
--font-h2--weight: 700;
--font-h3--size: var(--font-size--h3);
--font-h3--line-height: 1.1;
--font-h3--weight: 700;
--font-h4--size: var(--font-size--h4);
--font-h4--line-height: 1;
--font-h4--weight: 700;
--font-h5--size: var(--font-size--h5);
--font-h5--line-height: 1.2;
--font-h5--weight: 500;
--font-h6--size: var(--font-size--h6);
--font-h6--line-height: 1.2;
--font-h6--weight: 500;
--line-height--body-tight: 1.2;
--line-height--body-normal: 1.4;
--line-height--body-loose: 1.6;
--line-height--heading-tight: 1.15;
--line-height--heading-normal: 1.25;
--line-height--heading-loose: 1.35;
--line-height--display-tight: 1;
--line-height--display-normal: 1.1;
--line-height--display-loose: 1.2;
--letter-spacing--body-tight: -0.03em;
--letter-spacing--body-normal: 0em;
--letter-spacing--body-loose: 0.03em;
--letter-spacing--heading-tight: -0.03em;
--letter-spacing--heading-normal: 0em;
--letter-spacing--heading-loose: 0.03em;
--letter-spacing-sm: 0.06em;
--letter-spacing-md: 0.13em;
--max-width--body-narrow: 22.75em;
--max-width--body-normal: 32.5em;
--max-width--heading-narrow: 19.5em;
--max-width--heading-normal: 32.5em;
--max-width--display-tight: 3.25em;
--max-width--display-narrow: 9.75em;
--max-width--display-normal: 13em;
/* 6M component type recipes (assets/6m-design.css) */
--6m-eyebrow-size: 10px;
--6m-eyebrow-weight: 600;
--6m-eyebrow-tracking: 0.18em;
--6m-chip-size: 9.5px;
--6m-chip-tracking: 0.14em;
--6m-section-title-size: 32px; /* 40px @768, 44px @1280 */
--6m-btn-size: 13px;
--6m-btn-weight: 600;
--6m-btn-tracking: 0.04em;
/* ---------------------------------------------------------------------
4. COLOUR SCHEME 1 — the site default (white)
Every page on 6ixmerchandise.ca renders in scheme-1. Schemes 2-6 and the
transparent scheme are in tokens.json; add them as .color-scheme-N
classes only when a section actually needs them.
--------------------------------------------------------------------- */
--color-background: rgb(255 255 255 / 1);
--color-background-rgb: 255 255 255;
--color-foreground: rgb(0 0 0 / 0.81);
--color-foreground-rgb: 0 0 0;
--color-foreground-heading: rgb(0 0 0 / 1);
--color-foreground-muted: rgb(0 0 0 / 0.6);
--color-primary: rgb(0 0 0 / 0.81);
--color-primary-hover: rgb(0 0 0 / 1);
--color-border: rgb(0 0 0 / 0.06);
--color-border-rgb: 0 0 0;
--color-shadow: rgb(0 0 0 / 1);
--color-shadow-rgb: 0 0 0;
--color-primary-button-background: #000000;
--color-primary-button-text: #ffffff;
--color-primary-button-border: #000000;
--color-primary-button-hover-background: #333333;
--color-primary-button-hover-text: #ffffff;
--color-primary-button-hover-border: #000000;
--color-secondary-button-background: rgba(0, 0, 0, 0);
--color-secondary-button-text: #000000;
--color-secondary-button-border: #000000;
--color-secondary-button-hover-background: #fafafa;
--color-secondary-button-hover-text: #333333;
--color-secondary-button-hover-border: #333333;
--color-input-background: rgb(255 255 255 / 0.78);
--color-input-text: #333333;
--color-input-border: #dfdfdf;
--color-input-hover-background: rgb(0 0 0 / 0.01);
--color-variant-background: #ffffff;
--color-variant-text: #000000;
--color-variant-border: rgb(0 0 0 / 0.13);
--color-variant-hover-background: #f5f5f5;
--color-variant-hover-text: #000000;
--color-variant-hover-border: #e6e6e6;
--color-selected-variant-background: #000000;
--color-selected-variant-text: #ffffff;
--color-selected-variant-border: #000000;
--color-selected-variant-hover-background: #1a1a1a;
--color-selected-variant-hover-text: #ffffff;
--color-selected-variant-hover-border: #1a1a1a;
/* Status */
--color-black: #000000;
--color-white: #ffffff;
--color-error: #8b0000;
--color-success: #006400;
--color-instock: #3ed660;
--color-lowstock: #ee9441;
--color-outofstock: #c8c8c8;
--backdrop-color-rgb: 0 0 0;
--backdrop-opacity: 0.15;
--gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
/* Opacity ladder */
--opacity-5: 0.05;
--opacity-8: 0.08;
--opacity-10: 0.1;
--opacity-15: 0.15;
--opacity-20: 0.2;
--opacity-25: 0.25;
--opacity-30: 0.3;
--opacity-40: 0.4;
--opacity-50: 0.5;
--opacity-60: 0.6;
--opacity-70: 0.7;
--opacity-80: 0.8;
--opacity-85: 0.85;
--opacity-90: 0.9;
--opacity-subdued-text: 0.7;
--disabled-opacity: 0.5;
--skeleton-opacity: 0.025;
/* ---------------------------------------------------------------------
5. SPACING
--------------------------------------------------------------------- */
--padding-3xs: 0.125rem;
--padding-2xs: 0.25rem;
--padding-xs: 0.5rem;
--padding-sm: 0.7rem;
--padding-md: 0.8rem;
--padding-lg: 1rem;
--padding-xl: 1.25rem;
--padding-2xl: 1.5rem;
--padding-3xl: 1.75rem;
--padding-4xl: 2rem;
--padding-5xl: 3rem;
--padding-6xl: 4rem;
--margin-3xs: 0.125rem;
--margin-2xs: 0.3rem;
--margin-xs: 0.5rem;
--margin-sm: 0.7rem;
--margin-md: 0.8rem;
--margin-lg: 1rem;
--margin-xl: 1.25rem;
--margin-2xl: 1.5rem;
--margin-3xl: 1.75rem;
--margin-4xl: 2rem;
--margin-5xl: 3rem;
--margin-6xl: 5rem;
--gap-3xs: 0.125rem;
--gap-2xs: 0.3rem;
--gap-xs: 0.5rem;
--gap-sm: 0.7rem;
--gap-md: 0.9rem;
--gap-lg: 1rem;
--gap-xl: 1.25rem;
--gap-2xl: 2rem;
--gap-3xl: 3rem;
--spacing-scale-default: 1;
--spacing-scale-md: 0.7;
--spacing-scale-sm: 0.6;
--scroll-margin: 50px;
/* 6M page gutters — fixed px, not the rem scale */
--6m-gutter: 18px; /* <768px */
--6m-gutter-d: 48px; /* >=768px */
--6m-gutter-xl: 64px; /* >=1280px */
/* ---------------------------------------------------------------------
6. LAYOUT
--------------------------------------------------------------------- */
--narrow-page-width: 90rem; /* 1440px — the ACTIVE page width */
--normal-page-width: 120rem;
--wide-page-width: 150rem;
--page-width: var(--narrow-page-width);
--page-margin: 16px; /* 40px >=750px, set in the media query below */
--narrow-content-width: 36rem;
--normal-content-width: 42rem;
--wide-content-width: 46rem;
--sidebar-width: 25rem;
--section-height-small: 50svh;
--section-height-medium: 65svh;
--section-height-large: 80svh;
--height-small: 17.5rem;
--height-medium: 21.25rem;
--height-large: 25rem;
--height-full: 100vh;
--header-height: 60px; /* 68px >=768px, set below */
--sticky-header-offset: var(--header-height);
--minimum-touch-target: 44px;
--modal-max-height: 65dvh;
--drawer-width: 95vw;
--drawer-max-width: 500px;
--drawer-height: 100dvh;
--drawer-animation-speed: 0.2s;
--drawer-inline-padding: 25px;
--drawer-header-block-padding: 20px;
--drawer-content-block-padding: 10px;
--quick-add-modal-width: min(54rem, 96vw);
--quick-add-modal-height: min(38.5rem, 96vh);
--quick-add-modal-gallery-width: 24rem;
/* z-index ladder */
--layer-section-background: -2;
--layer-lowest: -1;
--layer-base: 0;
--layer-flat: 1;
--layer-raised: 2;
--layer-heightened: 4;
--layer-sticky: 8;
--layer-window-overlay: 10;
--layer-header-menu: 12;
--layer-overlay: 16;
--layer-menu-drawer: 18;
--layer-temporary: 20;
/* ---------------------------------------------------------------------
7. RADII / BORDERS
--------------------------------------------------------------------- */
--style-border-radius-buttons-primary: 14px;
--style-border-radius-buttons-secondary: 14px;
--style-border-radius-inputs: 4px;
--style-border-radius-popover: 14px;
--style-border-radius-pills: 40px;
--style-border-radius-xs: 0.2rem;
--style-border-radius-sm: 0.6rem;
--style-border-radius-md: 0.8rem;
--style-border-radius-lg: 1rem;
--style-border-radius-50: 50%;
--product-corner-radius: 0px;
--card-corner-radius: 4px;
--badge-border-radius: 100px;
--style-border-width: 1px;
--style-border-width-inputs: 1px;
--style-border-width-primary: 0px;
--style-border-width-secondary: 1px;
--border-width-sm: 1px;
--border-width-md: 2px;
--border-width-lg: 5px;
/* ---------------------------------------------------------------------
8. SHADOWS
--------------------------------------------------------------------- */
--shadow-blur: 20px;
--shadow-drawer: 0px 4px 20px rgb(0 0 0 / 0.15);
--shadow-popover: 0px 4px 20px rgb(0 0 0 / 0.15);
--shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
/* ---------------------------------------------------------------------
9. BUTTONS
--------------------------------------------------------------------- */
--button-padding-block: 16px;
--button-padding-inline: 24px;
--button-size: 44px;
--button-size-md: 36px;
--button-size-sm: 30px;
--button-font-family-primary: var(--6m-sans);
--button-font-family-secondary: var(--6m-sans);
--checkout-button-gap: 10px;
--height-buy-buttons: calc(1rem * 2 + 1.25rem);
/* 6M square button */
--6m-btn-padding: 14px 20px;
--6m-btn-radius: 0px;
/* ---------------------------------------------------------------------
10. INPUTS
--------------------------------------------------------------------- */
--input-padding-x: 0.8rem;
--input-padding-y: 0.8rem;
--input-padding: 0.8rem 0.8rem;
--input-box-shadow-width: 1px;
--input-box-shadow: 0 0 0 1px var(--color-input-border);
--input-box-shadow-focus: 0 0 0 1.5px var(--color-input-border);
--input-email-min-width: 200px;
--input-search-max-width: 650px;
--input-textarea-min-height: 55px;
--input-disabled-background-color: rgb(0 0 0 / 0.1);
--input-disabled-border-color: rgb(0 0 0 / 0.05);
--input-disabled-text-color: rgb(0 0 0 / 0.5);
--checkbox-size: 16px;
--checkbox-border: 1px solid rgb(0 0 0 / 0.35);
--checkbox-border-radius: 5px;
--checkbox-label-padding: 6px;
--focus-outline-width: 0.09375rem;
--focus-outline-offset: 0.2em;
/* ---------------------------------------------------------------------
11. VARIANT PICKER
NOTE: two sets. The Horizon defaults (34px round swatch, 14px pill) are
what settings_data.json stores; the LIVE PDP overrides them to a 36px
SQUARE swatch with an offset outline. Build the PDP to the 6M values.
--------------------------------------------------------------------- */
--variant-picker-swatch-width: 34px;
--variant-picker-swatch-height: 34px;
--variant-picker-swatch-radius: 32px;
--variant-picker-button-radius: 14px;
--variant-picker-button-border-width: 1px;
--variant-picker-border-width: 1px;
--variant-picker-border-style: solid;
--variant-picker-border-opacity: 10%;
--6m-swatch-size: 36px; /* live PDP colour swatch */
--6m-swatch-radius: 0px; /* SQUARE */
--6m-swatch-border: 1px solid rgba(10, 10, 10, 0.35);
--6m-swatch-selected-outline: 2px solid var(--6m-ink);
--6m-swatch-selected-offset: 3px;
--6m-swatch-fallback: #9a9a9a; /* unmapped colour name */
--6m-size-pill-min: 72px;
--6m-size-pill-padding: 12px 4px;
/* ---------------------------------------------------------------------
12. ICONS
--------------------------------------------------------------------- */
--icon-stroke-width: 1.5px;
--icon-size-2xs: 0.6rem;
--icon-size-xs: 0.85rem;
--icon-size-sm: 1.25rem;
--icon-size-md: 1.375rem;
--icon-size-lg: 1.5rem;
/* ---------------------------------------------------------------------
13. MOTION
--------------------------------------------------------------------- */
--animation-speed-fast: 0.0625s;
--animation-speed: 0.125s;
--animation-speed-medium: 0.15s;
--animation-speed-slow: 0.2s;
--animation-easing: ease-in-out;
--animation-values: 0.125s ease-in-out;
--animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
--animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
--animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);
--animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--animation-slideshow-easing: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--submenu-animation-speed: 0.36s;
--submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
--surface-transition-duration: 0.3s;
--surface-transition-timing: var(--ease-out-quad);
--hover-lift-amount: 4px;
--hover-scale-amount: 1.03;
--hover-subtle-zoom-amount: 1.015;
--hover-transition-duration: 0.25s;
--hover-transition-timing: ease-out;
/* ---------------------------------------------------------------------
14. PRODUCT CARD / GRID
--------------------------------------------------------------------- */
--product-card-gap: 4px;
--product-card-aspect-ratio: 1; /* square, object-fit: cover */
--product-grid-gap-mobile: 12px 12px;
--product-grid-gap-desktop: 24px 16px;
--product-grid-gap: var(--product-grid-gap-mobile);
--product-grid-min-col: 250px; /* card_size medium, centered */
--product-grid-mobile-columns: 2;
/* ---------------------------------------------------------------------
15. RAPIDSEARCH (own app — the overlay reads these)
--------------------------------------------------------------------- */
--s6m-bg: #ffffff;
--s6m-bg2: #f7f7f7;
--s6m-ink: #111111;
--s6m-muted: #767676; /* AA on --s6m-bg: 4.54:1. #777777 was 4.47:1. */
--s6m-line: #e5e5e5;
--s6m-accent: #111111;
--s6m-discount: #ef4444;
--s6m-instock: #16a34a;
--s6m-overlay: rgba(0, 0, 0, 0.5);
--s6m-hover-bg: #fafafa;
--s6m-radius: 4px;
--s6m-pill-radius: 999px;
--s6m-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
--s6m-z-overlay: 2000001;
--s6m-z-input: 2000002;
--s6m-z-dropdown: 2000003;
--s6m-font-display: var(--6m-display);
--s6m-font-body: var(--6m-sans);
--s6m-text-xs: 11px;
--s6m-text-sm: 13px;
--s6m-text-md: 14px;
--s6m-text-lg: 15px;
--s6m-text-xl: 28px;
--s6m-transition: 200ms cubic-bezier(0.2, 0, 0.2, 1);
--s6m-header-h: 68px;
--s6m-header-search-w-idle: 305px;
--s6m-header-search-w-focus: min(90vw, 1280px);
--s6m-header-search-h-idle: 44px;
--s6m-header-search-h-focus: 60px;
--s6m-header-search-bg-idle: #f5f5f5;
--s6m-header-search-bg-focus: #ffffff;
--s6m-header-search-icon-size: 16px;
--s6m-header-search-placeholder: #8a8a8a;
--s6m-sidebar-w: 280px;
--s6m-grid-gap: 24px;
--s6m-card-min: 240px;
}
/* ==========================================================================
BREAKPOINT-DEPENDENT TOKENS
The canonical 6M breakpoint is 768px. Horizon's own layer switches at 750px.
Do not invent new breakpoints — pick from:
480 / 750 / 768 / 990 / 1024 / 1200 / 1280 / 1400
========================================================================== */
@media screen and (min-width: 750px) {
:root {
--page-margin: 40px;
--product-grid-gap: var(--product-grid-gap-desktop);
}
}
@media screen and (min-width: 768px) {
:root {
--header-height: 68px;
--6m-section-title-size: 40px;
}
}
@media screen and (min-width: 1280px) {
:root {
--6m-section-title-size: 44px;
}
}
/* ==========================================================================
REDUCED MOTION — the Shopify theme honours this on every marquee/autoplay.
Keep the same contract.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--animation-speed: 0.001s;
--animation-speed-slow: 0.001s;
--hover-transition-duration: 0.001s;
}
}