@stoovles/gap-kit 1.0.0

package/dist/styles.css

@@ -0,0 +1,4309 @@
+/* @stoovles/gap-kit — barrel stylesheet */
+
+/* Tokens */
+/* =============================================================================
+ * @stoovles/gap-kit — Gap 1.0.0 Design Tokens
+ * Extracted from Fabric Theming Variables 1.0
+ * Source: figma.com/design/yl7oauvHXCR3p6xRvr38Q7
+ *
+ * Collections:
+ *   .00 Foundational (320 primitives)
+ *   Universal Toolkit (65 semantic tokens)
+ *   Branded Toolkit / Gap 1.0.0 (608 brand tokens)
+ *
+ * Gap 1.0.0 identity: Gap Sans · weight 400 · 0px radius · deep blue #031ba1
+ * ============================================================================= */
+
+:root {
+  /* ===========================================================================
+     TYPOGRAPHY
+     =========================================================================== */
+
+  /* Font Families */
+  --font-family-base: "Gap Sans", sans-serif;
+  --font-family-display: "Gap Sans", sans-serif;
+
+  /* Font Size Scale (semantic steps -2 through 8) */
+  --font-size--2: 10px;
+  --font-size--1: 12px;
+  --font-size-0: 16px;
+  --font-size-1: 18px;
+  --font-size-2: 20px;
+  --font-size-3: 24px;
+  --font-size-4: 32px;
+  --font-size-5: 40px;
+  --font-size-6: 60px;
+  --font-size-7: 90px;
+  --font-size-8: 120px;
+
+  /* Font Weights */
+  --font-weight-base: 400;
+  --font-weight-base-heavier: 400;
+  --font-weight-display: 400;
+  --font-weight-display-heavier: 400;
+
+  /* Font Letter Spacing Scale (semantic steps -2 through 8) */
+  --font-letter-spacing--2: 0.2px;
+  --font-letter-spacing--1: 0.24px;
+  --font-letter-spacing-0: 0.32px;
+  --font-letter-spacing-1: 0.36px;
+  --font-letter-spacing-2: 0.2px;
+  --font-letter-spacing-3: 0px;
+  --font-letter-spacing-4: 0px;
+  --font-letter-spacing-5: 0px;
+  --font-letter-spacing-6: -1.2px;
+  --font-letter-spacing-7: 0px;
+  --font-letter-spacing-8: 0px;
+  --font-letter-spacing-base: 0.02px;
+  --font-letter-spacing-display: 0px;
+
+  /* ===========================================================================
+     COLOR — SEMANTIC TYPE
+     =========================================================================== */
+
+  --color-type-primary: #000000;
+  --color-type-secondary: #757575;
+  --color-type-accent: #000000;
+  --color-type-neutral: #000000;
+  --color-type-subtle: #757575;
+  --color-type-link: #031ba1;
+  --color-type-disabled: #cccccc;
+  --color-type-visited: #757575;
+  --color-type-copy: #000000;
+  --color-type-inverse: #ffffff;
+  --color-type-sale: #e10000;
+  --color-type-success: #13560e;
+  --color-type-success-2: #068006;
+  --color-type-error: #d00000;
+  --color-type-warning: #e7a32e;
+  --color-type-informational: #5ca8fe;
+
+  /* ===========================================================================
+     COLOR — SEMANTIC BACKGROUND
+     =========================================================================== */
+
+  --color-background-dark: #000000;
+  --color-background-light: #ffffff;
+  --color-background-default: #ffffff;
+  --color-background-subtle: #ededed;
+  --color-background-transparent-dark: rgba(29, 29, 29, 0.3);
+  --color-background-info: #5ca8fe;
+  --color-background-success: #edf8ed;
+  --color-background-error: #fff9f9;
+  --color-background-warning: #fffbe3;
+
+  /* ===========================================================================
+     COLOR — SEMANTIC BORDER
+     =========================================================================== */
+
+  --color-border-default: #595959;
+  --color-border-accent: #031ba1;
+  --color-border-subtle: #cccccc;
+  --color-border-info: #000000;
+  --color-border-disabled: #ededed;
+  --color-border-hover: #000000;
+  --color-border-black: #000000;
+  --color-border-gray: #cccccc;
+  --color-border-inverse: #ffffff;
+  --color-border-success: #068006;
+  --color-border-error: #d00000;
+  --color-border-warning: #e7a32e;
+
+  /* ===========================================================================
+     COLOR — SEMANTIC FILL
+     =========================================================================== */
+
+  --color-fill-accent: #031ba1;
+  --color-fill-action: #000000;
+  --color-fill-dark: #595959;
+  --color-fill-subtle: #cccccc;
+  --color-fill-disabled: #ededed;
+  --color-fill-default: #ffffff;
+  --color-fill-black: #000000;
+  --color-fill-error: #d00000;
+  --color-fill-handle-hover: #757575;
+  --color-fill-image-overlay: rgba(0, 0, 0, 0.6);
+
+  /* ===========================================================================
+     COLOR — SEMANTIC ICON
+     =========================================================================== */
+
+  --color-icon-default: #000000;
+  --color-icon-base: #000000;
+  --color-icon-hover: #cccccc;
+  --color-icon-dark: #595959;
+  --color-icon-disabled: #999999;
+  --color-icon-subtle: #595959;
+  --color-icon-inverse: #ffffff;
+  --color-icon-info: #5ca8fe;
+  --color-icon-success: #068006;
+  --color-icon-error: #d00000;
+  --color-icon-warning: #e7a32e;
+
+  /* ===========================================================================
+     COLOR — BRAND
+     =========================================================================== */
+
+  --color-brand: #031ba1;
+  --color-brand-secondary: #1a1a1a;
+  --color-brand-tertiary: #16a816;
+  --color-brand-black-glass: rgba(29, 29, 29, 0.3);
+  --color-brand-white-glass: rgba(231, 231, 231, 0.3);
+  --color-brand-red: #e10000;
+
+  /* ===========================================================================
+     COLOR — GRAY SCALE (Semantic 5-tier)
+     =========================================================================== */
+
+  --color-gray-1: #f3f3f3;
+  --color-gray-2: #ededed;
+  --color-gray-3: #999999;
+  --color-gray-4: #757575;
+  --color-gray-5: #595959;
+
+  /* ===========================================================================
+     COLOR — GRAY SCALE (Foundational primitives 100–1400)
+     =========================================================================== */
+
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #f2f2f2;
+  --color-gray-300: #e9e9e9;
+  --color-gray-350: #e5e5e5;
+  --color-gray-400: #e5e4e4;
+  --color-gray-500: #d9d9d9;
+  --color-gray-600: #cccccc;
+  --color-gray-650: #bfbfbf;
+  --color-gray-700: #afafaf;
+  --color-gray-800: #999999;
+  --color-gray-900: #757575;
+  --color-gray-1000: #666666;
+  --color-gray-1100: #5e5c5a;
+  --color-gray-1200: #333333;
+  --color-gray-1300: #262626;
+  --color-gray-1400: #0c0c0c;
+
+  /* ===========================================================================
+     COLOR — STATUS PRIMITIVES
+     =========================================================================== */
+
+  --color-red-100: #fff9f9;
+  --color-red-200: #d00000;
+  --color-orange-100: #fffbe3;
+  --color-orange-200: #e7a32e;
+  --color-green-100: #edf8ed;
+  --color-green-200: #068006;
+  --color-green-300: #13560e;
+  --color-blue-100: #5ca8fe;
+
+  /* ===========================================================================
+     COLOR — BLACK & WHITE
+     =========================================================================== */
+
+  --color-white: #ffffff;
+  --color-white-25: rgba(255, 255, 255, 0.25);
+  --color-white-30: rgba(255, 255, 255, 0.3);
+  --color-white-50: rgba(255, 255, 255, 0.5);
+  --color-white-80: rgba(255, 255, 255, 0.8);
+  --color-black: #000000;
+  --color-black-25: rgba(0, 0, 0, 0.25);
+  --color-black-30: rgba(0, 0, 0, 0.3);
+  --color-black-50: rgba(0, 0, 0, 0.5);
+  --color-black-60: rgba(0, 0, 0, 0.6);
+  --color-black-80: rgba(0, 0, 0, 0.8);
+
+  /* ===========================================================================
+     SPACING — BRANDED
+     =========================================================================== */
+
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+
+  /* ===========================================================================
+     SPACING — UNIVERSAL TOOLKIT SCALE
+     =========================================================================== */
+
+  --spacing-4xs: 0px;
+  --spacing-3xs: 2px;
+  --spacing-2xs: 4px;
+  --spacing-utk-xs: 6px;
+  --spacing-utk-s: 8px;
+  --spacing-utk-m: 12px;
+  --spacing-utk-l: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 48px;
+  --spacing-4xl: 64px;
+
+  /* ===========================================================================
+     SPACING — FOUNDATIONAL PRIMITIVES
+     =========================================================================== */
+
+  --spacing-0: 0px;
+  --spacing-00625: 0.5px;
+  --spacing-0125: 1px;
+  --spacing-025: 2px;
+  --spacing-050: 4px;
+  --spacing-075: 6px;
+  --spacing-100: 8px;
+  --spacing-125: 10px;
+  --spacing-150: 12px;
+  --spacing-175: 14px;
+  --spacing-200: 16px;
+  --spacing-250: 20px;
+  --spacing-300: 24px;
+  --spacing-325: 26px;
+  --spacing-375: 30px;
+  --spacing-400: 32px;
+  --spacing-450: 34px;
+  --spacing-500: 40px;
+  --spacing-525: 42px;
+  --spacing-550: 44px;
+  --spacing-600: 48px;
+  --spacing-650: 56px;
+  --spacing-750: 60px;
+  --spacing-800: 64px;
+  --spacing-1000: 80px;
+
+  /* ===========================================================================
+     BORDER
+     =========================================================================== */
+
+  --border-radius-hard: 0px;
+  --border-radius-curved: 16px;
+  --border-radius-round: 999px;
+  --border-radius-curved-s: 0px;
+  --border-radius-curved-m: 0px;
+  --border-radius-curved-l: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-2-focus: 2px;
+
+  /* ===========================================================================
+     SHADOW
+     =========================================================================== */
+
+  --shadow-color: rgba(0, 0, 0, 0.08);
+  --shadow-fill: rgba(0, 0, 0, 0.3);
+  --shadow-high: 2px 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-medium: 2px 3px 3px rgba(0, 0, 0, 0.3);
+  --shadow-low: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-pagination: 0px 2px 6px rgba(0, 0, 0, 0.1);
+
+  /* ===========================================================================
+     SCREEN SIZES
+     =========================================================================== */
+
+  --screen-max: 1920px;
+  --screen-min: 390px;
+
+  /* ===========================================================================
+     COMPONENT — BUTTON
+     =========================================================================== */
+
+  --button-border-radius: 0px;
+  --button-min-height: 44px;
+  --button-padding-horizontal: 48px;
+  --button-hover-border-width: 0px;
+
+  /* Button: Primary */
+  --button-primary-fill: #ffffff;
+  --button-primary-font: #000000;
+  --button-primary-icon: #000000;
+  --button-primary-border-color: #cccccc;
+  --button-primary-border-width: 2px;
+  --button-primary-hover-fill: #031ba1;
+  --button-primary-hover-font: #ffffff;
+  --button-primary-pressed-fill: #ffffff;
+  --button-primary-pressed-font: #000000;
+  --button-primary-pressed-border-color: #000000;
+
+  /* Button: Secondary */
+  --button-secondary-fill: #000000;
+  --button-secondary-font: #ffffff;
+  --button-secondary-border: #000000;
+  --button-secondary-hover-fill: #031ba1;
+  --button-secondary-hover-font: #ffffff;
+  --button-secondary-hover-border: #031ba1;
+  --button-secondary-hover-icon: #ffffff;
+  --button-secondary-disabled-fill: #ededed;
+  --button-secondary-disabled-font: #cccccc;
+
+  /* Button: Critical */
+  --button-critical-hover-fill: #000000;
+  --button-critical-caution-fill: #757575;
+  --button-critical-caution-fill-2: #e7a32e;
+
+  /* Button: Floating Action */
+  --button-floating-action-border-radius: 0px;
+  --button-floating-action-border-width: 0px;
+  --button-floating-action-primary-icon: #000000;
+  --button-floating-action-primary-icon-hover: #ffffff;
+  --button-floating-action-primary-pressed-fill: #ffffff;
+  --button-floating-action-secondary-icon: #000000;
+  --button-floating-action-secondary-icon-hover: #ffffff;
+
+  /* Button: Typography */
+  --button-font-size: 16px;
+  --button-font-weight: 400;
+  --button-letter-spacing: 0.32px;
+
+  /* ===========================================================================
+     COMPONENT — ACCORDION
+     =========================================================================== */
+
+  --accordion-border-default: #595959;
+  --accordion-border-subtle: #cccccc;
+  --accordion-font-size: 16px;
+
+  /* ===========================================================================
+     COMPONENT — BADGE
+     =========================================================================== */
+
+  --badge-border-radius: 0px;
+  --badge-fill: #ffffff;
+  --badge-font-color: #000000;
+  --badge-font-weight: 400;
+  --badge-padding-y: 4px;
+  --badge-padding-x: 4px;
+
+  /* ===========================================================================
+     COMPONENT — BREADCRUMB
+     =========================================================================== */
+
+  --breadcrumb-padding-horizontal: 0px;
+  --breadcrumb-font-color: #000000;
+  --breadcrumb-default: #031ba1;
+  --breadcrumb-hover: #031ba1;
+  --breadcrumb-visited: #757575;
+
+  /* ===========================================================================
+     COMPONENT — CHIPS
+     =========================================================================== */
+
+  --chips-border-color: rgba(231, 231, 231, 0.3);
+  --chips-hover-border: rgba(231, 231, 231, 0.3);
+  --chips-border-radius: 0px;
+  --chips-default: rgba(231, 231, 231, 0.3);
+  --chips-default-border-color: rgba(231, 231, 231, 0.3);
+  --chips-font-color: #031ba1;
+  --chips-link-color: #000000;
+  --chips-icon-color: #031ba1;
+  --chips-swatch-icon-color: #cccccc;
+  --chips-focused: #cccccc;
+  --chips-active: #afafaf;
+
+  /* ===========================================================================
+     COMPONENT — DIVIDER
+     =========================================================================== */
+
+  --divider-border-width: 2px;
+  --divider-color: #595959;
+
+  /* ===========================================================================
+     COMPONENT — DROPDOWN
+     =========================================================================== */
+
+  --dropdown-font-color: #ffffff;
+  --dropdown-border-width: 2px;
+  --dropdown-selected-border-width: 2px;
+  --dropdown-fill-selected: #031ba1;
+  --dropdown-filled-hover: #031ba1;
+  --dropdown-border-color: #595959;
+  --dropdown-default-font-color: #757575;
+
+  /* ===========================================================================
+     COMPONENT — LINK
+     =========================================================================== */
+
+  --link-subtle: #f7f7f7;
+  --link-hover: #031ba1;
+
+  /* ===========================================================================
+     COMPONENT — MODAL
+     =========================================================================== */
+
+  --modal-background: #ffffff;
+  --modal-border-radius: 0px;
+  --modal-header-font: #000000;
+  --modal-header-icon: #000000;
+
+  /* ===========================================================================
+     COMPONENT — SEARCH
+     =========================================================================== */
+
+  --search-input-background: rgba(231, 231, 231, 0.3);
+  --search-input-border-color: rgba(231, 231, 231, 0.3);
+  --search-input-border-width: 0px;
+  --search-text-color: #000000;
+  --search-section-header-color: #595959;
+  --search-cursor-color: #031ba1;
+  --search-cursor-border-width: 2px;
+
+  /* ===========================================================================
+     COMPONENT — SELECTOR (SIZE)
+     =========================================================================== */
+
+  --selector-border-radius: 0px;
+  --selector-size-available-default: #ffffff;
+  --selector-size-available-selected: #ffffff;
+  --selector-size-available-hover: #ffffff;
+  --selector-size-unavailable-default: #ffffff;
+  --selector-size-unavailable-disabled: #ededed;
+  --selector-size-unavailable-hover: #000000;
+  --selector-size-border-default: #cccccc;
+  --selector-size-border-selected: #000000;
+  --selector-size-border-disabled: #ededed;
+  --selector-size-border-hover: #000000;
+  --selector-size-border-width: 2px;
+  --selector-size-selected-border-width: 2px;
+  --selector-size-font-default: #000000;
+  --selector-size-font-selected: #000000;
+  --selector-size-font-disabled: #757575;
+  --selector-size-font-hover: #000000;
+  --selector-size-font-link: #031ba1;
+  --selector-size-font-size: 16px;
+  --selector-size-header-font-size: 16px;
+
+  /* ===========================================================================
+     COMPONENT — SELECTION INPUTS (CHECKBOX, RADIO)
+     =========================================================================== */
+
+  --selection-input-border: #000000;
+  --selection-input-border-accent: #000000;
+  --selection-input-border-disabled: #ededed;
+  --selection-input-border-selected: #000000;
+  --selection-input-fill: #ffffff;
+  --selection-input-selected-fill: #595959;
+  --selection-input-disabled-fill: #ededed;
+  --selection-input-checkbox-border-radius: 0px;
+
+  /* ===========================================================================
+     COMPONENT — SLIDER
+     =========================================================================== */
+
+  --slider-default-color: #595959;
+
+  /* ===========================================================================
+     COMPONENT — SWITCH
+     =========================================================================== */
+
+  --switch-subtle: #ededed;
+  --switch-action: #ededed;
+  --switch-border-radius: 999px;
+  --switch-handle-on-fill: #031ba1;
+  --switch-handle-off-fill: #757575;
+
+  /* ===========================================================================
+     COMPONENT — TABS
+     =========================================================================== */
+
+  --tabs-padding-horizontal: 20px;
+  --tabs-padding-vertical: 0px;
+  --tabs-border-width: 0px;
+  --tabs-selected-border-width: 1px;
+  --tabs-border-color: #ededed;
+  --tabs-font-color: #757575;
+
+  /* ===========================================================================
+     COMPONENT — TEXT INPUT
+     =========================================================================== */
+
+  --text-input-font-size: 16px;
+  --text-input-border-default: rgba(231, 231, 231, 0.3);
+  --text-input-border-focused: #000000;
+  --text-input-border-disabled: #ededed;
+  --text-input-border-error: rgba(231, 231, 231, 0.3);
+  --text-input-fill-default: rgba(231, 231, 231, 0.3);
+  --text-input-fill-disabled: #ededed;
+  --text-input-label-fill: rgba(231, 231, 231, 0.3);
+  --text-input-text-default: #595959;
+  --text-input-text-disabled: #999999;
+  --text-input-text-error: #000000;
+  --text-input-helper-text: #000000;
+
+  /* ===========================================================================
+     COMPONENT — PAGINATION
+     =========================================================================== */
+
+  --pagination-font-color: #000000;
+
+  /* ===========================================================================
+     COMPONENT — SEO CROSSLINK
+     =========================================================================== */
+
+  --seo-crosslink-border-radius: 0px;
+  --seo-crosslink-border-width: 0px;
+  --seo-crosslink-fill-default: #f3f3f3;
+  --seo-crosslink-fill-hover: #757575;
+  --seo-crosslink-fill-press: #757575;
+  --seo-crosslink-padding-horizontal: 8px;
+  --seo-crosslink-padding-vertical: 0px;
+
+  /* ===========================================================================
+     COMPONENT — FILTER & SORT
+     =========================================================================== */
+
+  --filter-sort-border-width: 2px;
+  --filter-sort-border-color: #ffffff;
+  --filter-sort-border-color-disabled: #ededed;
+
+  /* ===========================================================================
+     COMPONENT — STICKY FOOTER
+     =========================================================================== */
+
+  --sticky-footer-disabled: #ededed;
+  --sticky-footer-border-width: 2px;
+
+  /* ===========================================================================
+     COMPONENT — GLOBAL HEADER
+     =========================================================================== */
+
+  --global-header-brand-bar-bg: #000000;
+  --global-header-brand-bar-font: #999999;
+  --global-header-brand-bar-hover-bg: #000000;
+  --global-header-brand-bar-hover-font: #ffffff;
+  --global-header-brand-bar-selected-font: #ffffff;
+  --global-header-edfs-mobile-bg: #000000;
+  --global-header-edfs-mobile-border: #666666;
+  --global-header-edfs-mobile-font: #ffffff;
+  --global-header-edfs-desktop-font: #ffffff;
+  --global-header-account-icon: #ffffff;
+  --global-header-account-font: #ffffff;
+  --global-header-bag-mobile-fill: #d00000;
+  --global-header-bag-desktop-icon: #ffffff;
+  --global-header-bag-desktop-font: #000000;
+
+  /* ===========================================================================
+     COMPONENT — GLOBAL FOOTER
+     =========================================================================== */
+
+  --global-footer-background: #ffffff;
+
+  /* ===========================================================================
+     COMPONENT — MEGA NAV
+     =========================================================================== */
+
+  --mega-nav-top-padding: 16px;
+  --mega-nav-link-font-color: #757575;
+  --mega-nav-link-fill: #f3f3f3;
+  --mega-nav-link-border-width: 0px;
+
+  /* ===========================================================================
+     COMPONENT — QUICK ADD
+     =========================================================================== */
+
+  --quick-add-fill: rgba(29, 29, 29, 0.3);
+  --quick-add-hover-fill: #000000;
+  --quick-add-icon-inverse-fill: #ffffff;
+  --quick-add-font-size: 16px;
+  --quick-add-letter-spacing: 0.32px;
+
+  /* ===========================================================================
+     COMPONENT — PRODUCT
+     =========================================================================== */
+
+  --product-card-marketing-flag: #757575;
+  --product-price-strikethrough: #757575;
+  --product-price-percent-off-font: #595959;
+  --product-style-flag-font: #757575;
+  --product-image-thumbnail-border-radius: 0px;
+  --product-info-top-spacing: 30px;
+  --product-info-bottom-spacing: 24px;
+  --product-info-left-spacing: 0px;
+  --product-info-right-spacing: 0px;
+  --product-info-font-weight: 400;
+
+  /* ===========================================================================
+     COMPONENT — DROP SHADOW
+     =========================================================================== */
+
+  --drop-shadow-color: rgba(0, 0, 0, 0.08);
+  --drop-shadow-high-x: 2px;
+  --drop-shadow-high-y: 4px;
+  --drop-shadow-high-blur: 8px;
+  --drop-shadow-high-spread: 0px;
+
+  /* ===========================================================================
+     CONTENT — TYPOGRAPHY (Responsive)
+     =========================================================================== */
+
+  /* Headline */
+  --content-headline-desktop-font-size: 60px;
+  --content-headline-desktop-line-height: 64px;
+  --content-headline-desktop-letter-spacing: -1.2px;
+  --content-headline-desktop-weight: 400;
+  --content-headline-mobile-font-size: 32px;
+  --content-headline-mobile-line-height: 36px;
+  --content-headline-mobile-letter-spacing: 0px;
+  --content-headline-mobile-weight: 400;
+  --content-headline-max-font-size: 72.8px;
+  --content-headline-min-font-size: 32px;
+
+  /* Headline Alt (the only 500-weight variant) */
+  --content-headline-alt-desktop-font-size: 60px;
+  --content-headline-alt-desktop-line-height: 64px;
+  --content-headline-alt-desktop-letter-spacing: -1.2px;
+  --content-headline-alt-desktop-weight: 500;
+  --content-headline-alt-mobile-font-size: 40px;
+  --content-headline-alt-mobile-line-height: 64px;
+  --content-headline-alt-mobile-letter-spacing: 0px;
+  --content-headline-alt-mobile-weight: 500;
+  --content-headline-alt-max-font-size: 69.14px;
+  --content-headline-alt-min-font-size: 40px;
+
+  /* Product Feed Headline */
+  --content-product-feed-headline-desktop-font-size: 48px;
+  --content-product-feed-headline-desktop-line-height: 56px;
+  --content-product-feed-headline-desktop-letter-spacing: 0px;
+  --content-product-feed-headline-desktop-weight: 400;
+  --content-product-feed-headline-mobile-font-size: 64px;
+  --content-product-feed-headline-mobile-letter-spacing: 0px;
+  --content-product-feed-headline-mobile-weight: 400;
+
+  /* Subhead */
+  --content-subhead-desktop-font-size: 24px;
+  --content-subhead-desktop-line-height: 28px;
+  --content-subhead-desktop-letter-spacing: 0px;
+  --content-subhead-desktop-weight: 400;
+  --content-subhead-mobile-font-size: 20px;
+  --content-subhead-mobile-line-height: 24px;
+  --content-subhead-mobile-letter-spacing: 0.2px;
+  --content-subhead-mobile-weight: 400;
+  --content-subhead-max-font-size: 25.83px;
+  --content-subhead-min-font-size: 20px;
+
+  /* Eyebrow */
+  --content-eyebrow-desktop-font-size: 24px;
+  --content-eyebrow-desktop-line-height: 28px;
+  --content-eyebrow-desktop-letter-spacing: 0px;
+  --content-eyebrow-desktop-weight: 400;
+  --content-eyebrow-mobile-font-size: 18px;
+  --content-eyebrow-mobile-line-height: 22px;
+  --content-eyebrow-mobile-letter-spacing: 0.2px;
+  --content-eyebrow-mobile-weight: 400;
+  --content-eyebrow-max-font-size: 25.83px;
+  --content-eyebrow-min-font-size: 20px;
+
+  /* Copy */
+  --content-copy-desktop-font-size: 14px;
+  --content-copy-desktop-line-height: 18px;
+  --content-copy-desktop-letter-spacing: 0px;
+  --content-copy-desktop-weight: 400;
+  --content-copy-mobile-font-size: 14px;
+  --content-copy-mobile-line-height: 18px;
+  --content-copy-mobile-letter-spacing: 0px;
+  --content-copy-mobile-weight: 400;
+
+  /* Copy Bold */
+  --content-copy-bold-desktop-font-size: 14px;
+  --content-copy-bold-desktop-line-height: 18px;
+  --content-copy-bold-desktop-letter-spacing: 0px;
+  --content-copy-bold-desktop-weight: 500;
+  --content-copy-bold-mobile-font-size: 14px;
+  --content-copy-bold-mobile-line-height: 18px;
+  --content-copy-bold-mobile-letter-spacing: 0px;
+  --content-copy-bold-mobile-weight: 500;
+
+  /* Details */
+  --content-details-font-size: 10px;
+  --content-details-letter-spacing: 0.2px;
+  --content-details-max-font-size: 10px;
+  --content-details-min-font-size: 10px;
+
+  /* Media Card Headline */
+  --content-media-card-headline-font-weight: 400;
+  --content-media-card-headline-desktop-font-size: 24px;
+  --content-media-card-headline-desktop-letter-spacing: 0px;
+  --content-media-card-headline-mobile-font-size: 20px;
+  --content-media-card-headline-mobile-letter-spacing: 0.2px;
+
+  /* ===========================================================================
+     CONTENT — BUTTON
+     =========================================================================== */
+
+  --content-button-border-radius: 0px;
+  --content-button-padding-horizontal: 12px;
+  --content-button-padding-vertical: 12px;
+  --content-button-solid-font-size: 10px;
+  --content-button-solid-letter-spacing: 0.2px;
+  --content-button-solid-font-weight: 400;
+  --content-button-solid-border-radius: 0px;
+  --content-button-solid-min-width: 0px;
+  --content-button-solid-max-width: 800px;
+  --content-button-text-font-size: 10px;
+  --content-button-text-letter-spacing: 0.2px;
+  --content-button-text-font-weight: 400;
+  --content-button-dark-fill: #000000;
+  --content-button-dark-hover: #595959;
+  --content-button-light-fill: #ffffff;
+  --content-button-light-hover: #ededed;
+
+  /* ===========================================================================
+     CONTENT — COLOR
+     =========================================================================== */
+
+  --content-color-type-accent: #000000;
+  --content-color-fill-dark: #000000;
+  --content-color-fill-light: #ededed;
+  --content-color-border-default: #000000;
+
+  /* ===========================================================================
+     CONTENT — LAYOUT
+     =========================================================================== */
+
+  --content-spotlight-max-width: 900px;
+  --content-spotlight-desktop-padding-h: 64px;
+  --content-spotlight-desktop-padding-v: 32px;
+  --content-spotlight-mobile-padding-h: 16px;
+  --content-spotlight-mobile-padding-v: 16px;
+  --content-wayfinding-desktop-gutter: 32px;
+  --content-wayfinding-mobile-gutter: 16px;
+  --content-wayfinding-desktop-padding-h: 64px;
+  --content-wayfinding-desktop-padding-v: 32px;
+  --content-wayfinding-mobile-padding-h: 16px;
+  --content-wayfinding-mobile-padding-v: 12px;
+  --content-volume-control-border-radius: 0px;
+
+  /* ===========================================================================
+     STYLE — TEXT PRESETS
+     =========================================================================== */
+
+  /* Button Text */
+  --text-button-font-size: 16px;
+  --text-button-font-weight: 400;
+
+  /* Caption */
+  --text-caption-font-size: 10px;
+  --text-caption-font-weight: 400;
+
+  /* Card */
+  --text-card-font-size: 16px;
+  --text-card-letter-spacing: 0.32px;
+
+  /* Dialog Header */
+  --text-dialog-header-font-size: 16px;
+  --text-dialog-header-letter-spacing: 0.32px;
+
+  /* Header */
+  --text-header-font-size: 16px;
+  --text-header-letter-spacing: 0.32px;
+  --text-header-font-weight: 400;
+
+  /* Subhead */
+  --text-subhead-font-size: 12px;
+  --text-subhead-letter-spacing: 0.24px;
+
+  /* Title Small */
+  --text-title-small-font-size: 20px;
+  --text-title-small-letter-spacing: 0.2px;
+
+  /* Title Medium */
+  --text-title-medium-font-size: 24px;
+
+  /* Link Regular */
+  --text-link-regular-font-size: 16px;
+  --text-link-regular-font-weight: 400;
+
+  /* Link Small */
+  --text-link-small-font-weight: 400;
+
+  /* Price */
+  --text-price-large-font-size: 16px;
+  --text-price-large-letter-spacing: 0.32px;
+  --text-price-large-font-weight: 400;
+  --text-price-small-font-size: 16px;
+  --text-price-small-letter-spacing: 0.32px;
+  --text-price-small-font-weight: 400;
+  --text-price-percent-off-font-size: 16px;
+  --text-price-percent-off-letter-spacing: 0.32px;
+  --text-price-percent-off-font-weight: 400;
+
+  /* Selector */
+  --text-selector-header-font-size: 16px;
+  --text-selector-header-letter-spacing: 0.32px;
+  --text-selector-label-font-size: 16px;
+  --text-selector-label-letter-spacing: 0.32px;
+  --text-selector-label-selected-font-weight: 400;
+  --text-selector-header-tile-font-size: 16px;
+  --text-selector-header-tile-letter-spacing: 0.32px;
+  --text-selector-header-tile-font-weight: 400;
+
+  /* Merchandising */
+  --text-merchandising-badge-font-size: 12px;
+  --text-merchandising-badge-letter-spacing: 0.24px;
+  --text-merchandising-marketing-flag-font-size: 16px;
+  --text-merchandising-marketing-flag-letter-spacing: 0.32px;
+
+  /* Count */
+  --text-count-font-size: 12px;
+
+  /* SEO Crosslink */
+  --text-seo-crosslink-font-size: 16px;
+
+  /* Input / Search */
+  --text-input-search-font-size: 16px;
+  --text-input-search-letter-spacing: 0.32px;
+
+  /* Mega Nav */
+  --text-mega-nav-font-size: 16px;
+  --text-mega-nav-letter-spacing: 0.32px;
+  --text-mega-nav-font-weight: 400;
+  --text-mega-nav-category-header-font-size: 16px;
+  --text-mega-nav-category-header-letter-spacing: 0.32px;
+  --text-mega-nav-category-header-font-weight: 400;
+  --text-mega-nav-department-link-font-size: 16px;
+  --text-mega-nav-department-link-letter-spacing: 0.32px;
+  --text-mega-nav-department-link-font-weight: 400;
+
+  /* Hamburger Nav */
+  --text-hamburger-nav-title-font-size: 20px;
+  --text-hamburger-nav-title-letter-spacing: 0.2px;
+  --text-hamburger-nav-title-font-weight: 400;
+  --text-hamburger-nav-subtitle-font-size: 12px;
+  --text-hamburger-nav-subtitle-letter-spacing: 0.24px;
+  --text-hamburger-nav-subtitle-font-weight: 400;
+  --text-hamburger-nav-nav-title-font-size: 16px;
+  --text-hamburger-nav-nav-title-letter-spacing: 0.32px;
+  --text-hamburger-nav-nav-title-font-weight: 400;
+
+  /* Global Header */
+  --text-global-header-brand-bar-font-size: 10px;
+  --text-global-header-brand-bar-letter-spacing: 0.2px;
+  --text-global-header-brand-bar-font-weight: 400;
+  --text-global-header-edfs-mobile-font-size: 10px;
+  --text-global-header-edfs-mobile-letter-spacing: 0.2px;
+  --text-global-header-bag-mobile-font-size: 10px;
+
+  /* Global Footer */
+  --text-global-footer-links-font-size: 16px;
+  --text-global-footer-links-letter-spacing: 0.32px;
+  --text-global-footer-nav-header-font-size: 16px;
+  --text-global-footer-nav-header-letter-spacing: 0.32px;
+  --text-global-footer-title-font-weight: 400;
+
+  /* Global Header Copy (Content) */
+  --content-global-header-copy-font-size: 12px;
+  --content-global-header-copy-letter-spacing: 0.24px;
+
+  /* Content Font Letter Spacing */
+  --content-font-letter-spacing--25: -0.25px;
+  --content-font-letter-spacing-0: 0px;
+  --content-font-letter-spacing-50: 0.5px;
+  --content-font-letter-spacing-80: 0.8px;
+  --content-font-letter-spacing-100: 1px;
+  --content-font-letter-spacing-200: 2px;
+}
+
+
+/* Atoms */
+/* =============================================================================
+ * COMPONENT — BUTTON
+ * Variants: critical, primary, secondary
+ * States: default, hover, press/active, loading, disabled
+ * ============================================================================= */
+
+.gap-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--button-min-height, 44px);
+  padding: 0 var(--button-padding-horizontal, 48px);
+  border-radius: var(--button-border-radius, 0px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--button-font-size, 16px);
+  font-weight: var(--button-font-weight, 400);
+  letter-spacing: var(--button-letter-spacing, 0.32px);
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  box-sizing: border-box;
+}
+
+.gap-button--full-width {
+  width: 100%;
+}
+
+.gap-button:focus-visible {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+/* — Critical (filled blue, white text) — */
+
+.gap-button--critical {
+  background-color: var(--color-fill-accent, #031ba1);
+  color: var(--color-type-inverse, #fff);
+  border: none;
+}
+
+.gap-button--critical:hover:not(:disabled) {
+  background-color: var(--button-critical-hover-fill, #000);
+  color: var(--color-type-inverse, #fff);
+}
+
+.gap-button--critical:active:not(:disabled) {
+  background-color: var(--color-fill-accent, #031ba1);
+  color: var(--color-type-inverse, #fff);
+}
+
+.gap-button--critical:disabled {
+  background-color: var(--color-fill-disabled, #ededed);
+  color: var(--color-type-disabled, #ccc);
+  cursor: not-allowed;
+}
+
+/* — Primary (outlined, white bg, gray border) — */
+
+.gap-button--primary {
+  background-color: var(--button-primary-fill, #fff);
+  color: var(--button-primary-font, #000);
+  border: var(--button-primary-border-width, 2px) solid
+    var(--button-primary-border-color, #ccc);
+}
+
+.gap-button--primary:hover:not(:disabled) {
+  background-color: var(--button-primary-hover-fill, #031ba1);
+  color: var(--button-primary-hover-font, #fff);
+  border-color: var(--button-primary-pressed-border-color, #000);
+}
+
+.gap-button--primary:active:not(:disabled) {
+  background-color: var(--button-primary-pressed-fill, #fff);
+  color: var(--button-primary-pressed-font, #000);
+  border-color: var(--button-primary-pressed-border-color, #000);
+}
+
+.gap-button--primary:disabled {
+  background-color: var(--color-fill-default, #fff);
+  color: var(--color-type-disabled, #ccc);
+  border-color: var(--color-border-disabled, #ededed);
+  cursor: not-allowed;
+}
+
+/* — Secondary (filled black, white text) — */
+
+.gap-button--secondary {
+  background-color: var(--button-secondary-fill, #000);
+  color: var(--button-secondary-font, #fff);
+  border: var(--border-width-1, 1px) solid var(--button-secondary-border, #000);
+}
+
+.gap-button--secondary:hover:not(:disabled) {
+  background-color: var(--button-secondary-hover-fill, #031ba1);
+  color: var(--button-secondary-hover-font, #fff);
+  border-color: var(--button-secondary-hover-border, #031ba1);
+}
+
+.gap-button--secondary:active:not(:disabled) {
+  background-color: var(--button-secondary-hover-fill, #031ba1);
+  color: var(--button-secondary-font, #fff);
+  border-color: var(--button-secondary-hover-border, #031ba1);
+}
+
+.gap-button--secondary:disabled {
+  background-color: var(--button-secondary-disabled-fill, #ededed);
+  color: var(--button-secondary-disabled-font, #ccc);
+  border-color: var(--color-fill-disabled, #ededed);
+  cursor: not-allowed;
+}
+
+/* — Loading state — */
+
+.gap-button--loading {
+  pointer-events: none;
+}
+
+.gap-button-label {
+  display: inline-block;
+}
+
+.gap-button-loader {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 24px;
+}
+
+.gap-button-loader-dot {
+  display: block;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: gap-button-pulse 1.2s ease-in-out infinite;
+}
+
+.gap-button-loader-dot--1 {
+  width: 3px;
+  height: 3px;
+  animation-delay: 0s;
+}
+
+.gap-button-loader-dot--2 {
+  width: 4.5px;
+  height: 4.5px;
+  animation-delay: 0.15s;
+}
+
+.gap-button-loader-dot--3 {
+  width: 6px;
+  height: 6px;
+  animation-delay: 0.3s;
+}
+
+@keyframes gap-button-pulse {
+  0%, 80%, 100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* =============================================================================
+ * COMPONENT — CHECKBOX
+ * States: default, error, disabled × unchecked / checked
+ * ============================================================================= */
+
+.gap-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-s, 8px);
+  cursor: pointer;
+}
+
+.gap-checkbox--disabled {
+  cursor: not-allowed;
+}
+
+/* Visually-hidden native input */
+.gap-checkbox-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+/* Custom box */
+.gap-checkbox-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.gap-checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: var(--border-width-1, 1px) solid var(--selection-input-border, #000);
+  border-radius: var(--selection-input-checkbox-border-radius, 0px);
+  background-color: var(--selection-input-fill, #fff);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  box-sizing: border-box;
+}
+
+.gap-checkbox-checkmark {
+  display: none;
+  color: #fff;
+  width: 16px;
+  height: 12px;
+}
+
+/* Checked */
+.gap-checkbox-input:checked + .gap-checkbox-box {
+  background-color: var(--selection-input-selected-fill, #595959);
+  border-color: var(--selection-input-border-selected, #000);
+}
+
+.gap-checkbox-input:checked + .gap-checkbox-box .gap-checkbox-checkmark {
+  display: block;
+}
+
+/* Focus ring */
+.gap-checkbox-input:focus-visible + .gap-checkbox-box {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+/* Error */
+.gap-checkbox--error .gap-checkbox-box {
+  border-color: var(--color-border-error, #d00000);
+}
+
+.gap-checkbox--error .gap-checkbox-input:checked + .gap-checkbox-box {
+  background-color: var(--color-fill-error, #d00000);
+  border-color: var(--color-border-error, #d00000);
+}
+
+.gap-checkbox--error .gap-checkbox-label {
+  color: var(--color-type-error, #d00000);
+}
+
+/* Disabled */
+.gap-checkbox--disabled .gap-checkbox-box {
+  border-color: var(--selection-input-border-disabled, #ededed);
+  cursor: not-allowed;
+}
+
+.gap-checkbox--disabled .gap-checkbox-input:checked + .gap-checkbox-box {
+  background-color: var(--selection-input-disabled-fill, #ededed);
+  border-color: var(--selection-input-border-disabled, #ededed);
+}
+
+.gap-checkbox--disabled .gap-checkbox-label {
+  color: var(--color-type-disabled, #ccc);
+}
+
+/* Label */
+.gap-checkbox-label {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  cursor: inherit;
+  user-select: none;
+}
+
+/* CheckboxGroup */
+.gap-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl, 24px);
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.gap-checkbox-group-legend {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  color: var(--color-type-primary, #000);
+  padding: 0;
+  margin-bottom: var(--spacing-s, 8px);
+}
+
+/* =============================================================================
+ * COMPONENT — CHIP
+ * Removable filter tag with optional color swatch
+ * ============================================================================= */
+
+.gap-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-utk-s, 8px);
+  min-height: 32px;
+  min-width: 48px;
+  padding: var(--spacing-utk-s, 8px) var(--spacing-utk-m, 12px);
+  background-color: var(--chips-default, rgba(231, 231, 231, 0.3));
+  border: 0px solid var(--chips-default-border-color, rgba(231, 231, 231, 0.3));
+  border-radius: var(--chips-border-radius, 0px);
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.gap-chip:hover {
+  border-width: var(--border-width-1, 1px);
+  border-color: var(--chips-hover-border, rgba(231, 231, 231, 0.3));
+  padding: calc(var(--spacing-utk-s, 8px) - 1px) calc(var(--spacing-utk-m, 12px) - 1px);
+}
+
+.gap-chip:focus-within {
+  background-color: var(--chips-focused, #ccc);
+  border-width: var(--border-width-1, 1px);
+  border-color: var(--chips-hover-border, rgba(231, 231, 231, 0.3));
+  padding: calc(var(--spacing-utk-s, 8px) - 1px) calc(var(--spacing-utk-m, 12px) - 1px);
+}
+
+.gap-chip:active {
+  background-color: var(--chips-active, #afafaf);
+}
+
+.gap-chip-swatch {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+}
+
+.gap-chip-label {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: 16px;
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--1, 0.24px);
+  line-height: normal;
+  color: var(--chips-font-color, #031ba1);
+  white-space: nowrap;
+}
+
+.gap-chip-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--chips-icon-color, #031ba1);
+}
+
+.gap-chip-dismiss:focus-visible {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+.gap-chip-dismiss-icon {
+  width: 9px;
+  height: 9px;
+}
+
+/* — ChipGroup — */
+
+.gap-chip-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-m, 12px);
+  align-items: flex-start;
+}
+
+.gap-chip-group-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-bottom: var(--border-width-1, 1px) solid var(--chips-link-color, #000);
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 16px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--chips-link-color, #000);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.gap-chip-group-clear:hover {
+  opacity: 0.7;
+}
+
+.gap-chip-group-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 8px;
+  align-items: center;
+}
+
+/* =============================================================================
+ * COMPONENT — DIVIDER
+ * Variants: default (dark), subtle (light)
+ * ============================================================================= */
+
+.gap-divider {
+  width: 100%;
+  border: none;
+  border-top-style: solid;
+  border-top-width: var(--divider-border-width, 2px);
+  margin: 0;
+}
+
+.gap-divider--default {
+  border-top-color: var(--divider-color, #595959);
+}
+
+.gap-divider--subtle {
+  border-top-color: var(--color-border-subtle, #ccc);
+}
+
+/* =============================================================================
+ * COMPONENT — HANDLE
+ * Circular drag thumb for sliders / range controls
+ * Sizes: large (24px), small (20px)
+ * ============================================================================= */
+
+.gap-handle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+}
+
+.gap-handle:active {
+  cursor: grabbing;
+}
+
+.gap-handle--large {
+  width: 24px;
+  height: 24px;
+}
+
+.gap-handle--small {
+  width: 20px;
+  height: 20px;
+}
+
+.gap-handle-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 100px;
+  background: transparent;
+  transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
+  pointer-events: none;
+}
+
+.gap-handle:hover .gap-handle-ring {
+  width: 48px;
+  height: 48px;
+  background-color: var(--color-fill-handle-hover, #757575);
+  opacity: 0.3;
+}
+
+.gap-handle:active .gap-handle-ring {
+  width: 48px;
+  height: 48px;
+  background-color: var(--color-fill-handle-hover, #757575);
+  opacity: 0.5;
+}
+
+.gap-handle-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: var(--shadow-high, 2px 4px 8px rgba(0, 0, 0, 0.08));
+  pointer-events: none;
+}
+
+.gap-handle--large .gap-handle-thumb {
+  width: 24px;
+  height: 24px;
+}
+
+.gap-handle--small .gap-handle-thumb {
+  width: 20px;
+  height: 20px;
+}
+
+/* =============================================================================
+ * COMPONENT — LINK
+ * Variants: inline (underlined, blue), subtle (no underline, gray)
+ * ============================================================================= */
+
+.gap-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 16px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  border-bottom-style: solid;
+  border-bottom-width: 0px;
+}
+
+/* — Inline: underlined blue link — */
+
+.gap-link--inline {
+  color: var(--color-type-link, #031ba1);
+  border-bottom-width: var(--border-width-1, 1px);
+  border-bottom-color: var(--color-type-link, #031ba1);
+}
+
+.gap-link--inline:hover,
+.gap-link--inline:active {
+  color: var(--link-hover, #031ba1);
+  border-bottom-color: var(--link-hover, #031ba1);
+}
+
+.gap-link--inline:visited {
+  color: var(--color-type-visited, #757575);
+  border-bottom-color: var(--color-type-visited, #757575);
+}
+
+/* — Subtle: no underline, gray text — */
+
+.gap-link--subtle {
+  color: var(--color-type-subtle, #757575);
+  border-bottom-width: 0px;
+  border-bottom-color: transparent;
+}
+
+.gap-link--subtle:hover,
+.gap-link--subtle:active {
+  color: var(--link-hover, #031ba1);
+  border-bottom-width: var(--border-width-1, 1px);
+  border-bottom-color: var(--link-hover, #031ba1);
+}
+
+.gap-link--subtle:visited {
+  color: var(--color-type-visited, #757575);
+}
+
+/* Focus */
+.gap-link:focus-visible {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+ * COMPONENT — PRICE
+ * Layouts: inline, stacked  |  States: regular, sale (with optional range)
+ * ============================================================================= */
+
+.gap-price {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-price-small-font-size, 16px);
+  font-weight: var(--text-price-small-font-weight, 400);
+  letter-spacing: var(--text-price-small-letter-spacing, 0.32px);
+  line-height: normal;
+}
+
+.gap-price--inline {
+  flex-direction: row;
+  gap: var(--spacing-2xs, 4px);
+}
+
+.gap-price--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2xs, 4px);
+}
+
+.gap-price-current {
+  color: var(--color-type-primary, #000);
+}
+
+.gap-price-original {
+  color: var(--product-price-strikethrough, #757575);
+  text-decoration: line-through;
+}
+
+.gap-price-details {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs, 4px);
+}
+
+.gap-price-discount {
+  color: var(--product-price-percent-off-font, #595959);
+  font-size: var(--text-price-percent-off-font-size, 16px);
+  font-weight: var(--text-price-percent-off-font-weight, 400);
+  letter-spacing: var(--text-price-percent-off-letter-spacing, 0.32px);
+}
+
+.gap-price-sale {
+  color: var(--color-type-sale, #e10000);
+}
+
+.gap-price-range {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-3xs, 2px);
+}
+
+.gap-price-range-separator {
+  color: var(--color-type-primary, #000);
+}
+
+.gap-price-range-end {
+  color: var(--color-type-primary, #000);
+}
+
+/* =============================================================================
+ * COMPONENT — RADIO
+ * States: default, error, disabled × unselected / selected
+ * ============================================================================= */
+
+.gap-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs, 4px);
+  cursor: pointer;
+}
+
+.gap-radio--disabled {
+  cursor: not-allowed;
+}
+
+.gap-radio-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+.gap-radio-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.gap-radio-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: var(--border-width-1, 1px) solid var(--selection-input-border, #000);
+  border-radius: 50%;
+  background-color: var(--selection-input-fill, #fff);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  box-sizing: border-box;
+}
+
+.gap-radio-circle::after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+}
+
+/* Selected */
+.gap-radio-input:checked + .gap-radio-circle {
+  border-color: var(--selection-input-border-selected, #000);
+}
+
+.gap-radio-input:checked + .gap-radio-circle::after {
+  background-color: var(--selection-input-selected-fill, #595959);
+}
+
+/* Focus ring */
+.gap-radio-input:focus-visible + .gap-radio-circle {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+/* Error */
+.gap-radio--error .gap-radio-circle {
+  border-color: var(--color-border-error, #d00000);
+}
+
+.gap-radio--error .gap-radio-input:checked + .gap-radio-circle::after {
+  background-color: var(--color-fill-error, #d00000);
+}
+
+.gap-radio--error .gap-radio-label {
+  color: var(--color-type-error, #d00000);
+}
+
+/* Disabled */
+.gap-radio--disabled .gap-radio-circle {
+  border-color: var(--selection-input-border-disabled, #ededed);
+}
+
+.gap-radio--disabled .gap-radio-input:checked + .gap-radio-circle::after {
+  background-color: var(--selection-input-disabled-fill, #ededed);
+}
+
+.gap-radio--disabled .gap-radio-label {
+  color: var(--color-type-disabled, #ccc);
+}
+
+/* Label */
+.gap-radio-label {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  cursor: inherit;
+  user-select: none;
+}
+
+/* RadioGroup */
+.gap-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl, 24px);
+  padding: var(--spacing-utk-l, 16px) 0;
+  border: none;
+  margin: 0;
+}
+
+.gap-radio-group-legend {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  color: var(--color-type-primary, #000);
+  padding: 0;
+  margin-bottom: var(--spacing-s, 8px);
+}
+
+/* =============================================================================
+ * COMPONENT — SWITCH
+ * Pill-shaped toggle: off (gray handle) / on (blue handle)
+ * ============================================================================= */
+
+.gap-switch {
+  display: inline-flex;
+  align-items: center;
+  width: 54px;
+  padding: var(--spacing-3xs, 2px);
+  border: none;
+  border-radius: var(--switch-border-radius, 999px);
+  cursor: pointer;
+  gap: var(--spacing-3xs, 2px);
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+}
+
+.gap-switch--off {
+  background-color: var(--switch-subtle, #ededed);
+  justify-content: flex-start;
+}
+
+.gap-switch--on {
+  background-color: var(--switch-action, #ededed);
+  justify-content: flex-end;
+}
+
+.gap-switch--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.gap-switch-thumb {
+  display: block;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: var(--shadow-high, 2px 4px 8px rgba(0, 0, 0, 0.08));
+  transition: background-color 0.2s ease;
+}
+
+.gap-switch--off .gap-switch-thumb {
+  background-color: var(--switch-handle-off-fill, #757575);
+}
+
+.gap-switch--on .gap-switch-thumb {
+  background-color: var(--switch-handle-on-fill, #031ba1);
+}
+
+.gap-switch-label {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: 1;
+  user-select: none;
+}
+
+.gap-switch--off .gap-switch-label {
+  color: var(--color-type-primary, #000);
+}
+
+.gap-switch--on .gap-switch-label {
+  color: var(--color-type-inverse, #fff);
+}
+
+.gap-switch:focus-visible {
+  outline: var(--border-width-2-focus, 2px) solid var(--color-border-accent, #031ba1);
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+ * COMPONENT — BOPIS SWITCH
+ * Store Pickup toggle with header, description, and store link
+ * ============================================================================= */
+
+.gap-bopis-switch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m, 16px);
+  padding-bottom: var(--spacing-m, 16px);
+}
+
+.gap-bopis-switch-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+}
+
+.gap-bopis-switch-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gap-bopis-switch-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--color-type-copy, #000);
+}
+
+.gap-bopis-switch-description {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-subhead-font-size, 12px);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  font-weight: var(--font-weight-base, 400);
+  line-height: normal;
+  color: var(--color-type-copy, #000);
+}
+
+.gap-bopis-switch-store {
+  font-size: var(--text-link-regular-font-size, 16px);
+}
+
+/* =============================================================================
+ * COMPONENT — TEXT INPUT
+ * Floating-label input with helper text, error, and character count
+ * ============================================================================= */
+
+.gap-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs, 4px);
+  width: 100%;
+  position: relative;
+}
+
+.gap-text-input-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  height: 44px;
+  padding: 0 var(--spacing-utk-l, 16px);
+  background-color: var(--text-input-fill-default, rgba(231, 231, 231, 0.3));
+  border: var(--border-width-1, 1px) solid
+    var(--text-input-border-default, rgba(231, 231, 231, 0.3));
+  border-radius: var(--border-radius-curved-m, 0px);
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+}
+
+.gap-text-input-input {
+  flex: 1 0 0;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-input-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  padding: 0;
+}
+
+.gap-text-input-input::placeholder {
+  color: var(--text-input-text-default, #595959);
+}
+
+/* Floating label */
+.gap-text-input-floating-label {
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  padding: 0 var(--spacing-2xs, 4px);
+  background-color: var(--text-input-label-fill, rgba(231, 231, 231, 0.3));
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  pointer-events: none;
+}
+
+/* Focused */
+.gap-text-input--focused .gap-text-input-field {
+  border-width: var(--border-width-2, 2px);
+  border-color: var(--text-input-border-focused, #000);
+  padding: 0 calc(var(--spacing-utk-l, 16px) - 1px);
+}
+
+/* Error */
+.gap-text-input--error .gap-text-input-field {
+  border-color: var(--color-border-error, #d00000);
+}
+
+.gap-text-input--error.gap-text-input--focused .gap-text-input-field {
+  border-width: var(--border-width-2, 2px);
+  border-color: var(--color-border-error, #d00000);
+  padding: 0 calc(var(--spacing-utk-l, 16px) - 1px);
+}
+
+.gap-text-input--error .gap-text-input-floating-label {
+  color: var(--color-type-error, #d00000);
+}
+
+.gap-text-input--error .gap-text-input-helper-text {
+  color: var(--color-type-error, #d00000);
+}
+
+/* Disabled */
+.gap-text-input--disabled .gap-text-input-field {
+  background-color: var(--text-input-fill-disabled, #ededed);
+  border-color: var(--text-input-border-disabled, #ededed);
+}
+
+.gap-text-input--disabled .gap-text-input-input {
+  color: var(--text-input-text-disabled, #999);
+  cursor: not-allowed;
+}
+
+.gap-text-input--disabled .gap-text-input-input::placeholder {
+  color: var(--text-input-text-disabled, #999);
+}
+
+.gap-text-input--disabled .gap-text-input-floating-label {
+  color: var(--text-input-text-disabled, #999);
+  background-color: var(--text-input-fill-disabled, #ededed);
+}
+
+/* Helper / assistive text */
+.gap-text-input-helper {
+  display: flex;
+  gap: var(--spacing-utk-l, 16px);
+  align-items: flex-start;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--text-input-helper-text, #000);
+}
+
+.gap-text-input-helper-text {
+  flex: 1 0 0;
+}
+
+.gap-text-input-helper-count {
+  flex-shrink: 0;
+  text-align: right;
+  white-space: nowrap;
+}
+
+
+/* Components */
+/* =============================================================================
+ * COMPONENT — ACCORDION
+ * Vertically stacked expandable/collapsible sections
+ * ============================================================================= */
+
+.gap-accordion {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.gap-accordion-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-l, 24px);
+  padding-bottom: var(--spacing-l, 24px);
+  width: 100%;
+}
+
+.gap-accordion-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s, 8px);
+  width: 100%;
+}
+
+.gap-accordion-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  width: 100%;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+}
+
+.gap-accordion-title-group {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+}
+
+.gap-accordion-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 700);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.28px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  white-space: nowrap;
+}
+
+.gap-accordion-count {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 700);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.28px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  white-space: nowrap;
+}
+
+.gap-accordion-chevron {
+  flex-shrink: 0;
+  color: var(--color-type-primary, #000);
+  transition: transform 0.2s ease;
+}
+
+.gap-accordion-chevron--up {
+  transform: rotate(180deg);
+}
+
+.gap-accordion-subtitle {
+  padding-right: var(--spacing-m, 16px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-subhead-font-size, 14px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.28px);
+  line-height: normal;
+  color: var(--color-type-secondary, #595959);
+}
+
+.gap-accordion-content {
+  width: 100%;
+}
+
+/* =============================================================================
+ * COMPONENT — BREADCRUMB
+ * Horizontal navigation trail showing page hierarchy
+ * ============================================================================= */
+
+.gap-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-utk-l, 16px) 0;
+  padding-left: var(--breadcrumb-horizontal-padding, 0px);
+  width: 100%;
+}
+
+.gap-breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gap-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+}
+
+.gap-breadcrumb-separator {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  white-space: nowrap;
+}
+
+.gap-breadcrumb-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 16px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-link, #031ba1);
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.gap-breadcrumb-link:hover {
+  text-decoration: none;
+}
+
+.gap-breadcrumb-link--current {
+  text-decoration: none;
+}
+
+/* =============================================================================
+ * COMPONENT — DROPDOWN
+ * Custom select with floating label, menu overlay, and keyboard navigation
+ * ============================================================================= */
+
+.gap-dropdown {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.gap-dropdown-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-l, 16px);
+  width: 100%;
+  height: 44px;
+  padding: var(--spacing-utk-s, 8px) var(--spacing-utk-l, 16px);
+  background-color: var(--color-background-default-white, #fff);
+  border: var(--border-width-1, 1px) solid
+    var(--dropdown-border-color, #595959);
+  border-radius: var(--border-radius-curved-m, 0px);
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  color: var(--color-type-primary, #000);
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+}
+
+.gap-dropdown-value {
+  flex: 1 0 0;
+  min-width: 0;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-input-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Empty state — label acts as placeholder */
+.gap-dropdown:not(.gap-dropdown--filled) .gap-dropdown-value {
+  color: var(--color-type-subtle, #757575);
+}
+
+.gap-dropdown-floating-label {
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  padding: 0 var(--spacing-2xs, 4px);
+  background-color: var(--color-background-default-white, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.gap-dropdown-chevron {
+  flex-shrink: 0;
+  color: var(--color-type-primary, #000);
+  transition: transform 0.2s ease;
+}
+
+.gap-dropdown-chevron--up {
+  transform: rotate(180deg);
+}
+
+/* Open state */
+.gap-dropdown--open .gap-dropdown-trigger {
+  border-width: var(--dropdown-selected-border-width, 2px);
+  border-color: var(--dropdown-border-color, #595959);
+  padding: calc(var(--spacing-utk-s, 8px) - 1px)
+    calc(var(--spacing-utk-l, 16px) - 1px);
+}
+
+/* Error state */
+.gap-dropdown--error .gap-dropdown-trigger {
+  border-color: var(--color-border-error, #d00000);
+}
+
+.gap-dropdown--error.gap-dropdown--open .gap-dropdown-trigger {
+  border-width: var(--dropdown-selected-border-width, 2px);
+  border-color: var(--color-border-error, #d00000);
+  padding: calc(var(--spacing-utk-s, 8px) - 1px)
+    calc(var(--spacing-utk-l, 16px) - 1px);
+}
+
+.gap-dropdown--error .gap-dropdown-floating-label {
+  color: var(--color-type-error, #d00000);
+}
+
+/* Disabled state */
+.gap-dropdown--disabled .gap-dropdown-trigger {
+  background-color: var(--color-fill-disabled, #ededed);
+  border-color: var(--color-fill-disabled, #ededed);
+  cursor: not-allowed;
+}
+
+.gap-dropdown--disabled .gap-dropdown-value {
+  color: var(--color-type-subtle, #757575);
+}
+
+.gap-dropdown--disabled .gap-dropdown-floating-label {
+  color: var(--color-type-subtle, #757575);
+  background-color: var(--color-fill-disabled, #ededed);
+}
+
+.gap-dropdown--disabled .gap-dropdown-chevron {
+  color: var(--color-type-subtle, #757575);
+}
+
+/* Dropdown menu */
+.gap-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background-default-white, #fff);
+  border-radius: 0 0 var(--border-radius-curved-m, 0px)
+    var(--border-radius-curved-m, 0px);
+  box-shadow: var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+    var(--drop-shadow-high-blur, 8px) 0px var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+  overflow: auto;
+  max-height: 252px;
+}
+
+.gap-dropdown-option {
+  display: flex;
+  align-items: flex-start;
+  height: 42px;
+  padding: var(--spacing-utk-m, 12px) var(--spacing-utk-l, 16px);
+  box-sizing: border-box;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-input-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  background-color: var(--color-background-default-white, #fff);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.gap-dropdown-option--active {
+  background-color: var(--color-gray-2, #e7e7e7);
+}
+
+.gap-dropdown-option--selected {
+  background-color: var(--dropdown-fill-selected, #031ba1);
+  color: var(--dropdown-font-color, #fff);
+}
+
+.gap-dropdown-option--selected.gap-dropdown-option--active {
+  background-color: var(--dropdown-filled-hover, #031ba1);
+}
+
+/* =============================================================================
+ * COMPONENT — NOTIFICATION
+ * Banner and inline notification messages (info, warning, success, error)
+ * ============================================================================= */
+
+.gap-notification {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  overflow: hidden;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-caption-font-size, 10px);
+  font-weight: var(--text-caption-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+/* Layout — banner */
+.gap-notification--banner {
+  gap: var(--spacing-utk-l, 16px);
+  padding: var(--spacing-utk-l, 16px);
+}
+
+/* Layout — inline (compact) */
+.gap-notification--inline {
+  gap: var(--spacing-utk-s, 8px);
+  padding: var(--spacing-utk-s, 8px);
+}
+
+/* Layout — bare (text only, no background) */
+.gap-notification--bare {
+  gap: 0;
+  padding: var(--spacing-utk-s, 8px);
+}
+
+/* Type backgrounds — banner & inline */
+.gap-notification--warning:not(.gap-notification--bare) {
+  background-color: var(--color-background-warning, #fffbe3);
+}
+
+.gap-notification--success:not(.gap-notification--bare) {
+  background-color: var(--color-background-success, #edf8ed);
+}
+
+.gap-notification--error:not(.gap-notification--bare) {
+  background-color: var(--color-background-error, #fff9f9);
+}
+
+/* Info has no background in Gap 1.0.0 */
+.gap-notification--info:not(.gap-notification--bare) {
+  background-color: transparent;
+}
+
+/* Icon colors by type */
+.gap-notification--info .gap-notification-icon {
+  color: var(--color-type-primary, #000);
+}
+
+.gap-notification--warning .gap-notification-icon {
+  color: var(--color-type-warning, #e7a32e);
+}
+
+.gap-notification--success .gap-notification-icon {
+  color: var(--color-type-success, #13560e);
+}
+
+.gap-notification--error .gap-notification-icon {
+  color: var(--color-type-error, #d00000);
+}
+
+.gap-notification-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+}
+
+.gap-notification-content {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+/* Bare text color overrides */
+.gap-notification--bare.gap-notification--error .gap-notification-content {
+  color: var(--color-type-error, #d00000);
+}
+
+.gap-notification--bare.gap-notification--success .gap-notification-content {
+  color: var(--color-type-success, #13560e);
+}
+
+.gap-notification-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-type-primary, #000);
+}
+
+/* =============================================================================
+ * COMPONENT — PAGINATION
+ * Progressive loading with item count, "View more", and "Back to Top"
+ * ============================================================================= */
+
+.gap-pagination {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-utk-l, 16px);
+  padding: var(--spacing-utk-xl, 24px) 0;
+  width: 100%;
+}
+
+.gap-pagination-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs, 4px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--pagination-font-color, #000);
+  white-space: nowrap;
+}
+
+.gap-pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  min-width: 175px;
+  padding: 0 var(--spacing-utk-xl, 24px);
+  background-color: var(--color-background-default-white, #fff);
+  border: var(--border-width-1, 1px) solid var(--color-type-accent, #000);
+  border-radius: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.gap-pagination-btn-text {
+  flex: 1 0 0;
+  min-width: 0;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-button-font-size, 16px);
+  font-weight: var(--text-button-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-accent, #000);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.gap-pagination-btn:hover {
+  background-color: var(--button-secondary-hover-fill, #031ba1);
+  border-color: var(--button-secondary-hover-border, #031ba1);
+}
+
+.gap-pagination-btn:hover .gap-pagination-btn-text {
+  color: var(--button-secondary-hover-font, #fff);
+  text-decoration: underline;
+}
+
+.gap-pagination-btn:active {
+  background-color: var(--color-background-default-white, #fff);
+  border-color: var(--color-type-accent, #000);
+}
+
+.gap-pagination-btn:active .gap-pagination-btn-text {
+  color: var(--color-type-accent, #000);
+  text-decoration: none;
+}
+
+/* Loading state */
+.gap-pagination-btn--loading {
+  background-color: var(--button-secondary-fill, #000);
+  border-color: var(--button-secondary-border, #000);
+  cursor: default;
+}
+
+.gap-pagination-btn--loading:hover {
+  background-color: var(--button-secondary-fill, #000);
+  border-color: var(--button-secondary-border, #000);
+}
+
+.gap-pagination-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.gap-pagination-dot {
+  display: block;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.gap-pagination-dot--sm {
+  width: 3px;
+  height: 3px;
+}
+
+.gap-pagination-dot--md {
+  width: 4.5px;
+  height: 4.5px;
+}
+
+.gap-pagination-dot--lg {
+  width: 6px;
+  height: 6px;
+}
+
+/* =============================================================================
+ * COMPONENT — POPOVER
+ * Floating overlay card with directional arrow
+ * ============================================================================= */
+
+.gap-popover {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 280px;
+}
+
+.gap-popover-body {
+  background-color: var(--color-background-default-white, #fff);
+  padding: var(--spacing-utk-m, 12px) var(--spacing-utk-l, 16px);
+  box-shadow: var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+    var(--drop-shadow-high-blur, 8px) var(--drop-shadow-high-spread, 0px)
+    var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--1, 12px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--font-letter-spacing--1, 0.24px);
+  line-height: normal;
+  color: var(--color-type-secondary, #595959);
+  position: relative;
+  z-index: 1;
+}
+
+/* Arrow — CSS triangle via borders */
+.gap-popover-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* ------- position: top (arrow points down, below the body) ------- */
+.gap-popover--top .gap-popover-arrow {
+  bottom: -9px;
+  border-width: 9px 9px 0 9px;
+  border-color: var(--color-background-default-white, #fff) transparent
+    transparent transparent;
+}
+
+.gap-popover--top.gap-popover--align-start .gap-popover-arrow {
+  left: 16px;
+}
+
+.gap-popover--top.gap-popover--align-center .gap-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gap-popover--top.gap-popover--align-end .gap-popover-arrow {
+  right: 16px;
+}
+
+/* ------- position: bottom (arrow points up, above the body) ------- */
+.gap-popover--bottom .gap-popover-arrow {
+  top: -9px;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent
+    var(--color-background-default-white, #fff) transparent;
+}
+
+.gap-popover--bottom.gap-popover--align-start .gap-popover-arrow {
+  left: 16px;
+}
+
+.gap-popover--bottom.gap-popover--align-center .gap-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gap-popover--bottom.gap-popover--align-end .gap-popover-arrow {
+  right: 16px;
+}
+
+/* ------- position: right (arrow points left, left of the body) ------- */
+.gap-popover--right .gap-popover-arrow {
+  left: -9px;
+  border-width: 9px 9px 9px 0;
+  border-color: transparent var(--color-background-default-white, #fff)
+    transparent transparent;
+}
+
+.gap-popover--right.gap-popover--align-start .gap-popover-arrow {
+  top: 12px;
+}
+
+.gap-popover--right.gap-popover--align-center .gap-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.gap-popover--right.gap-popover--align-end .gap-popover-arrow {
+  bottom: 12px;
+}
+
+/* ------- position: left (arrow points right, right of the body) ------- */
+.gap-popover--left .gap-popover-arrow {
+  right: -9px;
+  border-width: 9px 0 9px 9px;
+  border-color: transparent transparent transparent
+    var(--color-background-default-white, #fff);
+}
+
+.gap-popover--left.gap-popover--align-start .gap-popover-arrow {
+  top: 12px;
+}
+
+.gap-popover--left.gap-popover--align-center .gap-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.gap-popover--left.gap-popover--align-end .gap-popover-arrow {
+  bottom: 12px;
+}
+
+/* =============================================================================
+ * COMPONENT — SELECTOR SWATCH
+ * Circular color swatches for product color selection
+ * ============================================================================= */
+
+.gap-swatch {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2xs, 4px);
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+}
+
+.gap-swatch-ring {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: var(--spacing-2xs, 4px);
+  border-radius: 999px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.gap-swatch--active .gap-swatch-ring {
+  border-width: 1px;
+  border-color: var(--color-border-accent, #031ba1);
+}
+
+.gap-swatch--active.gap-swatch--focused .gap-swatch-ring {
+  border-width: 2px;
+  border-color: var(--color-border-accent, #031ba1);
+  padding: 3px;
+}
+
+.gap-swatch-circle {
+  position: relative;
+  border-radius: 999px;
+  border: var(--border-width-1, 1px) solid var(--color-border-subtle, #ccc);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Sizes — inner circle diameter */
+.gap-swatch--xl .gap-swatch-circle { width: 36px; height: 36px; }
+.gap-swatch--lg .gap-swatch-circle { width: 32px; height: 32px; }
+.gap-swatch--md .gap-swatch-circle { width: 28px; height: 28px; }
+.gap-swatch--sm .gap-swatch-circle { width: 24px; height: 24px; }
+.gap-swatch--xs .gap-swatch-circle { width: 20px; height: 20px; }
+
+/* Unavailable slash */
+.gap-swatch-slash {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1px;
+  height: 141%;
+  background-color: #000;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+  transform: translateX(-50%) rotate(45deg);
+  transform-origin: top center;
+}
+
+.gap-swatch-label {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  text-align: center;
+  width: 60px;
+}
+
+.gap-swatch-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-utk-s, 8px);
+  align-items: flex-start;
+}
+
+/* =============================================================================
+ * COMPONENT — SELECTOR
+ * Pill-shaped option buttons for size/attribute selection
+ * ============================================================================= */
+
+.gap-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-utk-s, 8px);
+}
+
+.gap-selector-pill {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: var(--spacing-utk-s, 8px) var(--spacing-utk-m, 12px);
+  border: var(--selector-size-border-width, 2px) solid
+    var(--selector-size-border-default, #ccc);
+  border-radius: var(--selector-border-radius, 0px);
+  background-color: var(--selector-size-available-default, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--selector-size-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-label-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--selector-size-font-default, #000);
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+}
+
+.gap-selector-pill--selected {
+  border-color: var(--selector-size-border-selected, #000);
+  background-color: var(--selector-size-available-selected, #fff);
+  color: var(--selector-size-font-selected, #000);
+  font-weight: var(--text-selector-label-selected-font-weight, 400);
+}
+
+.gap-selector-pill:hover:not(.gap-selector-pill--disabled):not(.gap-selector-pill--unavailable) {
+  border-color: var(--selector-size-border-hover, #000);
+  background-color: var(--selector-size-available-hover, #fff);
+  color: var(--selector-size-font-hover, #000);
+}
+
+.gap-selector-pill--disabled {
+  border-color: var(--selector-size-border-disabled, #ededed);
+  background-color: var(--selector-size-unavailable-disabled, #ededed);
+  color: var(--selector-size-font-disabled, #757575);
+  cursor: not-allowed;
+}
+
+.gap-selector-pill--unavailable {
+  background-color: var(--selector-size-unavailable-default, #fff);
+  border-color: var(--selector-size-border-default, #ccc);
+  color: var(--selector-size-font-default, #000);
+  cursor: pointer;
+}
+
+.gap-selector-slash {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1px;
+  height: 141%;
+  background-color: #000;
+  transform: translateX(-50%) rotate(45deg);
+  transform-origin: top center;
+  pointer-events: none;
+}
+
+/* Selector Group */
+.gap-selector-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gap-selector-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--text-selector-header-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-selector-group-title {
+  font-weight: var(--font-weight-base-heavier, 400);
+}
+
+.gap-selector-group-selected {
+  font-weight: var(--font-weight-base, 400);
+}
+
+.gap-selector-group-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-utk-s, 8px);
+}
+
+/* =============================================================================
+ * COMPONENT — FULFILLMENT
+ * Shipping/Pickup tile cards for fulfillment selection
+ * ============================================================================= */
+
+.gap-fulfillment {
+  display: flex;
+  gap: var(--spacing-utk-s, 8px);
+  align-items: stretch;
+  width: 100%;
+}
+
+.gap-fulfillment-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  min-height: 124px;
+  padding: var(--spacing-utk-l, 16px);
+  background-color: var(--color-background-default-white, #fff);
+  border: var(--border-width-1, 1px) solid var(--color-border-subtle, #ccc);
+  border-radius: var(--border-radius-curved-m, 0px);
+  box-sizing: border-box;
+  cursor: pointer;
+  flex: 1 1 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.gap-fulfillment-tile--selected {
+  border-width: var(--border-width-2, 2px);
+  border-color: var(--color-border-accent, #031ba1);
+  padding: calc(var(--spacing-utk-l, 16px) - 1px);
+}
+
+.gap-fulfillment-tile-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  width: 100%;
+  flex: 1 0 0;
+}
+
+.gap-fulfillment-tile-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-header-tile-font-size, 16px);
+  font-weight: var(--text-selector-header-tile-font-weight, 400);
+  letter-spacing: var(--text-selector-header-tile-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-fulfillment-tile-body {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-label-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-label-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-fulfillment-tile-availability {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-label-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-label-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-fulfillment-tile-availability--selected {
+  color: var(--color-type-success, #13560e);
+}
+
+/* =============================================================================
+ * COMPONENT — RANGE SLIDER
+ * Dual-handle slider for selecting a numeric range
+ * ============================================================================= */
+
+.gap-range-slider {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+.gap-range-slider-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--color-gray-3, #999);
+  border-radius: 1px;
+}
+
+.gap-range-slider-fill {
+  position: absolute;
+  height: 100%;
+  background-color: var(--slider-default-color, #595959);
+}
+
+/* Shared native input styling — layered on top of the track */
+.gap-range-slider-input {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  top: 50%;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  outline: none;
+}
+
+.gap-range-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: none;
+  box-shadow: var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+    var(--drop-shadow-high-blur, 8px) var(--drop-shadow-high-spread, 0px)
+    var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+  cursor: pointer;
+  pointer-events: all;
+  position: relative;
+  z-index: 2;
+}
+
+.gap-range-slider-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: none;
+  box-shadow: var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+    var(--drop-shadow-high-blur, 8px) var(--drop-shadow-high-spread, 0px)
+    var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.gap-range-slider-input:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08),
+    var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+      var(--drop-shadow-high-blur, 8px) var(--drop-shadow-high-spread, 0px)
+      var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+}
+
+.gap-range-slider-input:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08),
+    var(--drop-shadow-high-x, 2px) var(--drop-shadow-high-y, 4px)
+      var(--drop-shadow-high-blur, 8px) var(--drop-shadow-high-spread, 0px)
+      var(--drop-shadow-color, rgba(0, 0, 0, 0.08));
+}
+
+/* High thumb gets priority on overlap */
+.gap-range-slider-input--high {
+  z-index: 3;
+}
+
+/* =============================================================================
+ * COMPONENT — PRICE FILTER
+ * Range slider with min/max text inputs and reset link
+ * ============================================================================= */
+
+.gap-price-filter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-utk-xl, 24px);
+  width: 100%;
+  max-width: 342px;
+}
+
+.gap-price-filter-slider {
+  width: 100%;
+}
+
+.gap-price-filter-inputs {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--spacing-utk-l, 16px);
+}
+
+.gap-price-filter-field {
+  position: relative;
+  width: 96px;
+}
+
+.gap-price-filter-field-box {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 var(--spacing-utk-l, 16px);
+  background-color: var(--color-background-default-white, #fff);
+  border: var(--border-width-2, 2px) solid
+    var(--text-input-border-focused, #000);
+  border-radius: var(--border-radius-curved-m, 0px);
+  box-sizing: border-box;
+}
+
+.gap-price-filter-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-input-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  padding: 0;
+  -moz-appearance: textfield;
+}
+
+.gap-price-filter-input::-webkit-inner-spin-button,
+.gap-price-filter-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.gap-price-filter-label {
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  padding: 0 var(--spacing-2xs, 4px);
+  background-color: var(--color-background-default-white, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  pointer-events: none;
+}
+
+.gap-price-filter-reset {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--1, 12px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.32px);
+  line-height: normal;
+  color: var(--color-type-secondary, #595959);
+}
+
+/* =============================================================================
+ * COMPONENT — TABS
+ * Horizontal tab bar for switching between related views
+ * ============================================================================= */
+
+.gap-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s, 8px);
+  align-items: flex-start;
+  width: 100%;
+}
+
+.gap-tabs-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-header-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-header-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-tabs-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.gap-tabs-tab {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-utk-m, 12px);
+  background-color: var(--color-background-default-white, #fff);
+  border: none;
+  border-bottom: var(--border-width-1, 1px) solid
+    var(--tabs-border-color, #ededed);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-label-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-label-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--tabs-font-color, #757575);
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.gap-tabs-tab--selected {
+  border-bottom-width: var(--border-width-2, 2px);
+  border-bottom-color: var(--color-border-accent, #031ba1);
+  color: var(--color-type-accent, #000);
+}
+
+
+/* Templates */
+/* =============================================================================
+ * TEMPLATE — GLOBAL HEADER
+ * Top-level navigation bar with sister brands, promo, account, and bag
+ * ============================================================================= */
+
+.gap-global-header {
+  width: 100%;
+}
+
+.gap-global-header-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  background-color: var(--global-header-brand-bar-bg, #000);
+}
+
+.gap-global-header-brands {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.gap-global-header-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0 var(--spacing-utk-l, 16px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-global-header-brand-bar-font-size, 10px);
+  font-weight: var(--text-global-header-brand-bar-font-weight, 400);
+  letter-spacing: var(--text-global-header-brand-bar-letter-spacing, 0.2px);
+  line-height: normal;
+  color: var(--global-header-brand-bar-font, #999);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.gap-global-header-brand:hover {
+  color: var(--global-header-brand-bar-hover-font, #fff);
+}
+
+.gap-global-header-promo {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-utk-m, 12px);
+  min-height: 48px;
+  padding: 0 var(--spacing-utk-m, 12px);
+}
+
+.gap-global-header-promo-text {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--1, 12px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--font-letter-spacing--1, 0.24px);
+  line-height: normal;
+  color: var(--global-header-edfs-desktop-font, #fff);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.gap-global-header-promo-links {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-m, 12px);
+}
+
+.gap-global-header-promo-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--1, 12px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--font-letter-spacing--1, 0.24px);
+  line-height: normal;
+  color: var(--global-header-edfs-desktop-font, #fff);
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.gap-global-header-promo-link:hover {
+  text-decoration: none;
+}
+
+.gap-global-header-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.gap-global-header-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--global-header-account-icon, #fff);
+}
+
+.gap-global-header-bag {
+  position: relative;
+  color: var(--global-header-bag-desktop-icon, #fff);
+}
+
+.gap-global-header-badge {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background-color: var(--global-header-bag-desktop-icon, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--global-header-bag-desktop-font, #000);
+  text-align: center;
+}
+
+/* =============================================================================
+ * TEMPLATE — GLOBAL FOOTER
+ * Site footer with promotional blocks, nav columns, social links, and legal
+ * ============================================================================= */
+
+.gap-global-footer {
+  width: 100%;
+  background-color: var(--global-footer-background, #fff);
+}
+
+.gap-footer-blocks {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing-utk-2xl, 32px);
+  padding: var(--spacing-utk-2xl, 32px) var(--spacing-utk-l, 16px);
+  max-width: 1264px;
+  margin: 0 auto;
+}
+
+.gap-footer-block {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-m, 12px);
+  align-items: flex-start;
+}
+
+.gap-footer-block:not(:last-child) {
+  padding-right: var(--spacing-utk-2xl, 32px);
+  border-right: 1px solid var(--color-border-default, #ededed);
+}
+
+.gap-footer-block-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: 18px;
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: 0px;
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+}
+
+.gap-footer-block-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-l, 16px);
+  align-items: flex-start;
+}
+
+.gap-footer-block-copy {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 14px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+}
+
+.gap-footer-block-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size-0, 14px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-link, #000);
+  text-decoration: underline;
+}
+
+.gap-footer-block-link:hover {
+  text-decoration: none;
+}
+
+.gap-footer-block-links {
+  display: flex;
+  gap: var(--spacing-utk-l, 16px);
+  align-items: center;
+}
+
+.gap-footer-email-row {
+  display: flex;
+  gap: var(--spacing-utk-s, 8px);
+  align-items: flex-start;
+  width: 100%;
+  max-width: 375px;
+}
+
+.gap-footer-email-input {
+  flex: 1 0 0;
+  min-height: 44px;
+  padding: 0 var(--spacing-utk-l, 16px);
+  border: var(--border-width-default, 1px) solid var(--text-input-border-default, #767676);
+  border-radius: var(--border-radius-curved-m, 6px);
+  background-color: var(--text-input-fill-default, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-text-input-text-font-size, 14px);
+  font-weight: var(--font-weight-base, 400);
+  color: var(--color-type-primary, #000);
+  box-sizing: border-box;
+}
+
+.gap-footer-email-input::placeholder {
+  color: var(--color-type-secondary, #757575);
+}
+
+.gap-footer-email-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 var(--spacing-utk-l, 16px);
+  min-width: 109px;
+  border: none;
+  border-radius: var(--border-radius-curved-m, 6px);
+  background-color: var(--button-primary-fill, #000);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-button-font-size, 14px);
+  font-weight: var(--text-button-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--button-primary-font, #fff);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.gap-footer-nav {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  max-width: 1264px;
+  margin: 0 auto;
+  padding: var(--spacing-utk-3xl, 48px) 0;
+}
+
+.gap-footer-nav-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-m, 12px);
+  align-items: flex-start;
+}
+
+.gap-footer-nav-header {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-global-footer-nav-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--text-global-footer-nav-header-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+  white-space: nowrap;
+}
+
+.gap-footer-nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gap-footer-nav-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-global-footer-links-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-global-footer-links-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-secondary, #757575);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.gap-footer-nav-link:hover {
+  color: var(--color-type-primary, #000);
+  text-decoration: underline;
+}
+
+.gap-footer-social {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  padding-top: var(--spacing-utk-2xs, 4px);
+}
+
+.gap-footer-social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.gap-footer-legal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-xs, 6px);
+  max-width: 1264px;
+  margin: 0 auto;
+  padding-bottom: var(--spacing-utk-3xl, 48px);
+}
+
+.gap-footer-legal-line {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--1, 12px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+}
+
+/* =============================================================================
+ * TEMPLATE — SEARCH INPUT
+ * Header search bar with clear action, divider, and search icon
+ * ============================================================================= */
+
+.gap-search-input {
+  display: flex;
+  align-items: center;
+  min-width: 228px;
+  width: 270px;
+  height: 32px;
+  background-color: var(--search-input-background, rgba(231, 231, 231, 0.3));
+  border-bottom: var(--border-width-default, 1px) solid
+    var(--search-input-border-color, rgba(231, 231, 231, 0.3));
+  box-sizing: border-box;
+}
+
+.gap-search-input--active {
+  border-bottom-color: var(--search-cursor-color, #031ba1);
+}
+
+.gap-search-input-field {
+  flex: 1 0 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-input-search-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-input-search-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  caret-color: var(--search-cursor-color, #031ba1);
+  outline: none;
+}
+
+.gap-search-input-field::placeholder {
+  color: var(--color-type-primary, #000);
+}
+
+.gap-search-input--active .gap-search-input-field::placeholder {
+  color: var(--search-text-color, #000);
+  opacity: 0.4;
+}
+
+.gap-search-input-field::-webkit-search-cancel-button {
+  display: none;
+}
+
+.gap-search-input-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  flex-shrink: 0;
+}
+
+.gap-search-input-clear {
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.gap-search-input-divider {
+  display: block;
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-border-default, #ededed);
+  flex-shrink: 0;
+}
+
+.gap-search-input-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-type-primary, #000);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+ * TEMPLATE — PRODUCT CARD
+ * Product listing card with image, swatches, pricing, and rating
+ * ============================================================================= */
+
+.gap-product-card {
+  display: flex;
+  position: relative;
+}
+
+.gap-product-card--default {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-utk-m, 12px);
+  width: 220px;
+}
+
+.gap-product-card--mini {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-utk-m, 12px);
+  width: 326px;
+}
+
+.gap-product-card-media {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 136 / 181;
+  border-radius: var(--product-image-thumbnail-border-radius, 0px);
+  overflow: hidden;
+}
+
+.gap-product-card-media--mini {
+  width: 60px;
+  height: 80px;
+  aspect-ratio: auto;
+  flex-shrink: 0;
+  border-radius: var(--border-radius-curved-m, 6px);
+}
+
+.gap-product-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gap-product-card-placeholder {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-gray-3, #e7e7e7);
+}
+
+.gap-product-card-badge {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--badge-padding-y, 4px) var(--badge-padding-x, 4px);
+  background-color: var(--badge-fill, #fff);
+  border-radius: var(--badge-border-radius, 0px);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-merchandising-badge-font-size, 12px);
+  font-weight: var(--badge-font-weight, 400);
+  letter-spacing: var(--text-merchandising-badge-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--badge-font-color, #000);
+  white-space: nowrap;
+}
+
+.gap-product-card-swatches {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-utk-3xs, 2px);
+}
+
+.gap-product-card-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border: var(--border-width-default, 1px) solid var(--selector-swatch-border-color, #999);
+  padding: var(--spacing-utk-2xs, 4px);
+  box-sizing: content-box;
+}
+
+.gap-product-card-swatch--active {
+  outline: var(--selector-swatch-border-width-selected, 1px) solid
+    var(--selector-swatch-border-color-selected, #000);
+  outline-offset: 2px;
+}
+
+.gap-product-card-more-swatches {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-card-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-card-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  white-space: nowrap;
+}
+
+.gap-product-card-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  width: 100%;
+}
+
+.gap-product-card-mini-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  flex: 1 1 0;
+}
+
+.gap-product-card-name {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-card-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-card-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-neutral, #595959);
+}
+
+.gap-product-card-price-stacked {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-2xs, 4px);
+  align-items: flex-start;
+}
+
+.gap-product-card-price-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-2xs, 4px);
+}
+
+.gap-product-card-original-price {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-price-small-strikethrough-font-size, 16px);
+  font-weight: var(--text-price-small-strikethrough-font-weight, 400);
+  letter-spacing: var(--text-price-small-strikethrough-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--product-price-strikethrough, #757575);
+  text-decoration: line-through;
+}
+
+.gap-product-card-discount {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-price-percent-off-font-size, 16px);
+  font-weight: var(--text-price-percent-off-font-weight, 400);
+  letter-spacing: var(--text-price-percent-off-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--product-price-percent-off-font, #595959);
+}
+
+.gap-product-card-sale-price {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-price-small-font-size, 16px);
+  font-weight: var(--text-price-small-font-weight, 400);
+  letter-spacing: var(--text-price-small-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-sale, #d00000);
+}
+
+.gap-product-card-flag {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-merchandising-marketing-flag-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-merchandising-marketing-flag-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--product-card-marketing-flag, #757575);
+}
+
+.gap-product-card-rating {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-2xs, 4px);
+}
+
+.gap-product-card-stars {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  color: var(--color-type-primary, #000);
+}
+
+.gap-product-card-review-count {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--font-size--2, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-link, #000);
+  text-decoration: underline;
+}
+
+/* =============================================================================
+ * TEMPLATE — HAMBURGER NAVIGATION
+ * Mobile slide-out drawer with category navigation and utility links
+ * ============================================================================= */
+
+.gap-hamburger-nav {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+}
+
+.gap-hamburger-nav-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-background-transparent-dark, rgba(29, 29, 29, 0.3));
+}
+
+.gap-hamburger-nav-panel {
+  position: relative;
+  z-index: 1;
+  width: 350px;
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: var(--color-background-default-white, #fff);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-xl, 24px);
+}
+
+.gap-hamburger-nav-search {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  height: 44px;
+  margin: 0 var(--spacing-utk-l, 16px);
+  padding: 0 var(--spacing-utk-s, 8px);
+  border: var(--border-width-1, 1px) solid var(--color-border-gray, #ccc);
+  background-color: var(--color-fill-default-white, #fff);
+  box-sizing: border-box;
+}
+
+.gap-hamburger-nav-search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-hamburger-nav-search-input {
+  flex: 1 0 0;
+  border: none;
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-text-input-text-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  color: var(--color-type-primary, #000);
+  outline: none;
+}
+
+.gap-hamburger-nav-search-input::placeholder {
+  color: var(--color-type-subtle, #757575);
+}
+
+.gap-hamburger-nav-search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.gap-hamburger-nav-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-hamburger-nav-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-hamburger-nav-section--secondary {
+  background-color: var(--link-subtle, #f7f7f7);
+  padding-bottom: var(--spacing-utk-xl, 24px);
+}
+
+.gap-hamburger-nav-row {
+  padding: var(--spacing-utk-xl, 24px) var(--spacing-utk-l, 16px) 0;
+}
+
+.gap-hamburger-nav-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-hamburger-nav-nav-title-font-size, 16px);
+  font-weight: var(--text-hamburger-nav-nav-title-font-weight, 400);
+  letter-spacing: var(--text-hamburger-nav-nav-title-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.gap-hamburger-nav-close {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-utk-m, 12px) var(--spacing-utk-s, 8px);
+  border: none;
+  background: none;
+  color: #fff;
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+/* =============================================================================
+ * TEMPLATE — MEGA NAVIGATION
+ * Desktop horizontal nav bar with hover-triggered category dropdowns
+ * ============================================================================= */
+
+.gap-mega-nav {
+  width: 100%;
+  background-color: var(--color-background-default-white, #fff);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--mega-nav-top-padding, 16px) var(--spacing-utk-l, 16px)
+    var(--spacing-m, 16px);
+  gap: var(--spacing-utk-s, 8px);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.gap-mega-nav-utility {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+}
+
+.gap-mega-nav-utility-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 14px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-accent, #000);
+  text-decoration: none;
+}
+
+.gap-mega-nav-utility-link:hover {
+  text-decoration: underline;
+}
+
+.gap-mega-nav-utility-sep {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 14px);
+  color: var(--color-type-accent, #000);
+}
+
+.gap-mega-nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.gap-mega-nav-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.gap-mega-nav-departments {
+  flex: 1 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-utk-2xl, 32px);
+  padding: 0 var(--spacing-utk-xl, 24px);
+}
+
+.gap-mega-nav-dept {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-mega-nav-department-link-font-size, 16px);
+  font-weight: var(--text-mega-nav-department-link-font-weight, 400);
+  letter-spacing: var(--text-mega-nav-department-link-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-accent, #000);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.gap-mega-nav-dept:hover,
+.gap-mega-nav-dept--active {
+  text-decoration: underline;
+}
+
+.gap-mega-nav-dept--sale {
+  color: var(--color-type-sale, #d00000);
+}
+
+.gap-mega-nav-search {
+  flex-shrink: 0;
+}
+
+.gap-mega-nav-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: var(--color-fill-default-white, #fff);
+  padding: var(--spacing-utk-l, 16px) var(--spacing-utk-l, 16px)
+    var(--spacing-utk-2xl, 32px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.gap-mega-nav-dropdown-inner {
+  display: flex;
+  gap: var(--spacing-utk-2xl, 32px);
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.gap-mega-nav-category {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-m, 12px);
+  max-width: 208px;
+}
+
+.gap-mega-nav-category-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-mega-nav-category-header-font-size, 16px);
+  font-weight: var(--text-mega-nav-category-header-font-weight, 400);
+  letter-spacing: var(--text-mega-nav-category-header-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+}
+
+.gap-mega-nav-category-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-2xs, 4px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gap-mega-nav-category-link {
+  display: block;
+  padding: var(--spacing-utk-2xs, 4px) 0;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-subhead-font-size, 12px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--mega-nav-link-font-color, #757575);
+  text-decoration: none;
+}
+
+.gap-mega-nav-category-link:hover {
+  color: var(--color-type-primary, #000);
+  text-decoration: underline;
+}
+
+.gap-mega-nav-marketing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  width: 208px;
+  flex-shrink: 0;
+}
+
+.gap-mega-nav-marketing-img-wrapper {
+  width: 100%;
+  aspect-ratio: 87 / 122;
+  border-radius: var(--product-image-thumbnail-border-radius, 0px);
+  overflow: hidden;
+}
+
+.gap-mega-nav-marketing-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gap-mega-nav-marketing-link {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 14px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-link, #000);
+  text-decoration: underline;
+}
+
+.gap-mega-nav-marketing-link:hover {
+  text-decoration: none;
+}
+
+/* =============================================================================
+ * TEMPLATE — FILTER & SORT
+ * Horizontal filter chips, active filter tags, and a slide-out filter drawer
+ * ============================================================================= */
+
+.gap-filter-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-s, 8px);
+  width: 100%;
+}
+
+.gap-filter-chips {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  flex-wrap: wrap;
+}
+
+.gap-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-utk-2xs, 4px);
+  padding: var(--spacing-utk-s, 8px) var(--spacing-utk-m, 12px);
+  border: var(--border-width-default, 1px) solid var(--color-border-default, #ededed);
+  border-radius: var(--border-radius-curved-m, 6px);
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-selector-label-font-size, 16px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-selector-label-letter-spacing, 0.32px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.gap-filter-chip--active {
+  border-color: var(--color-border-accent, #031ba1);
+  border-width: var(--border-width-2, 2px);
+}
+
+.gap-filter-chip-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gap-filter-active-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  flex-wrap: wrap;
+}
+
+.gap-filter-clear-all {
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-link-regular-font-size, 14px);
+  font-weight: var(--text-link-regular-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--color-type-link, #000);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.gap-filter-active-tags {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-utk-s, 8px);
+  flex-wrap: wrap;
+}
+
+.gap-filter-active-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-utk-2xs, 4px);
+  padding: var(--spacing-utk-xs, 6px) var(--spacing-utk-s, 8px);
+  border: var(--border-width-default, 1px) solid var(--color-border-accent, #031ba1);
+  border-radius: var(--border-radius-curved-m, 6px);
+  background-color: var(--color-background-default-white, #fff);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-subhead-font-size, 12px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.gap-filter-result-count {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-caption-font-size, 10px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--font-letter-spacing--2, 0.2px);
+  line-height: normal;
+  color: var(--color-type-secondary, #757575);
+}
+
+/* Filter Drawer */
+
+.gap-filter-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.gap-filter-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-background-transparent-dark, rgba(29, 29, 29, 0.3));
+}
+
+.gap-filter-drawer {
+  position: relative;
+  z-index: 1;
+  width: 320px;
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: var(--color-background-default-white, #fff);
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-filter-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-utk-xl, 24px) var(--spacing-utk-l, 16px);
+}
+
+.gap-filter-drawer-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-dialog-header-font-size, 20px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--text-dialog-header-letter-spacing, 0.2px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+  margin: 0;
+}
+
+.gap-filter-drawer-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-type-primary, #000);
+  cursor: pointer;
+}
+
+.gap-filter-drawer-body {
+  flex: 1 0 0;
+  overflow-y: auto;
+  padding: 0 var(--spacing-utk-l, 16px);
+}
+
+.gap-filter-drawer-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.gap-filter-drawer-section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-utk-l, 16px) 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  gap: var(--spacing-utk-s, 8px);
+}
+
+.gap-filter-drawer-section-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-utk-2xs, 4px);
+}
+
+.gap-filter-drawer-section-title {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-header-font-size, 16px);
+  font-weight: var(--font-weight-base-heavier, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--color-type-primary, #000);
+}
+
+.gap-filter-drawer-section-count {
+  font-weight: var(--font-weight-base, 400);
+}
+
+.gap-filter-drawer-section-subtitle {
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-subhead-font-size, 12px);
+  font-weight: var(--font-weight-base, 400);
+  letter-spacing: var(--text-subhead-letter-spacing, 0.24px);
+  line-height: normal;
+  color: var(--color-type-secondary, #757575);
+}
+
+.gap-filter-drawer-chevron {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.gap-filter-drawer-chevron--up {
+  transform: rotate(180deg);
+}
+
+.gap-filter-drawer-section-content {
+  padding-bottom: var(--spacing-utk-l, 16px);
+}
+
+.gap-filter-drawer-footer {
+  padding: var(--spacing-utk-l, 16px);
+}
+
+.gap-filter-drawer-apply {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 44px;
+  padding: 0 var(--button-padding-horizontal, 48px);
+  border: var(--button-primary-border-width, 0px) solid
+    var(--button-primary-border-color, #000);
+  border-radius: var(--button-border-radius, 0px);
+  background-color: var(--button-primary-fill, #000);
+  font-family: var(--font-family-base, "Gap Sans", sans-serif);
+  font-size: var(--text-button-font-size, 14px);
+  font-weight: var(--text-button-font-weight, 400);
+  letter-spacing: var(--font-letter-spacing-0, 0.28px);
+  line-height: normal;
+  color: var(--button-primary-font, #fff);
+  cursor: pointer;
+}
+