/** Shopify CDN: Minification failed

Line 4191:0 Expected ")" to go with "("

**/
/* ==========================================================================
   HAMPTONS BLUE: DESIGN SYSTEM TOKENS & UTILITIES (DESIGN.md Aligned)
   ========================================================================== */
/* AUDIT PASS NOTES (see accompanying diagnostic report for full detail):
   - Fixed 3 hard syntax errors (stray `; !important;`, `##` color, `;;`)
   - Fixed a sitewide broken color function: rgb()/rgba(var(--color-foreground))
     and rgb(var(--color-background)) were passing a HEX string where an RGB
     TRIPLET was required, silently killing the whole declaration (39 spots,
     including the global :focus-visible ring). Repointed to the existing
     -rgb triplet tokens.
   - Added inline var() fallbacks for 94 design tokens (spacing/type-scale/
     radii/colors) that are referenced here but not defined in this file —
     they're expected to come from the theme's settings-schema-generated
     CSS. Fallbacks only engage if that layer is ever missing, so they
     never fight real theme settings.
   - Consolidated the duplicate `h1, .h1` selector block.
   - Added missing generic font-family fallbacks; fixed a redundant
     4-value padding shorthand.
   ========================================================================== */

:root {
  /* ── Core Hamptons Blue Editorial Commerce Tokens (hb-design-system.md) ── */
  --ink:                #0F1D2E; /* Charcoal Ink: replaces pure digital black */
  --charcoal-ink:       #0F1D2E;
  --off-white:          #F7F7F4; /* Percale White: primary canvas substrate */
  --percale-white:      #F7F7F4;
  --white:              #FFFFFF;
  --marine:             #1B3A5C; /* Mill Blue Deep */
  --mill-blue-deep:     #1B3A5C;
  --mill-blue-hover:    #062445;
  --cobalt-accent:      #0D4A8F;
  --primary-navy:       #002248;
  --sand-linen:         #F7F7F4; /* Sand Linen: warm earthen neutral */
  --shingle-stone:      #E3DCD1; /* Shingle Stone: hairline structural dividers */
  --salt-mist:          #EEF2F6; /* Salt Mist: cool soft recess */
  --slate-graphite:     #7B5819; /* Slate Graphite: secondary/body text */
  --portugal-terracotta: #7B5819; /* Portugal Terracotta: kiln stamps & badges */
  --cornflower:         #0D4A8F;
  --pale-wash:          #EEF2F6;
  --brass:              #A9803E /* Repointed legacy brass to Terracotta accent */
  --brass-light:        #E8DFCD;
  --muted:              #4E555C;

  /* ── Spacing Tokens from hb-design-system.md ── */
  --space-gutter:         1.5rem;
  --space-gutter-desktop: 2.5rem;
  --space-margin:         1.25rem;
  --space-margin-desktop: 4rem;
  --space-xs:             0.375rem;
  --space-sm:             0.75rem;
  --space-md:             1.25rem;
  --space-lg:             2.25rem;
  --space-xl:             4rem;
  --container-max-width:  1440px;

  /* ── Typography Design Tokens from hb-design-system.md ── */
  --font-heading:         'ivyora-display' , Georgia, serif;
  --font-heading-weight:  500;
  --font-heading-style:   normal;

  --font-heading:         'ivyora-text' , Georgia, serif;
  --font-heading-weight:  400;
  --font-heading-style:   normal;

  --font-body:            'ivyora-text', Georgia, serif;
  --font-body-weight:     300;
  --font-body-style:      normal;

  --font-ui:              'Adamina', Georgia, serif;
  --font-caption:         'Adamina', Georgia, serif;
  --font-accent-weight:   400;
  --font-accent-style:    normal;

  /* Theme settings aliases for full codebase compatibility */
  --font-heading-family:  var(--font-heading);
  --font-body-family:     var(--font-body);
  --font-accent-family:   var(--font-ui);
  --font-label-family:    var(--font-ui);
  --font-caps:            'Adamina', Georgia, serif;
  --font-serif-display:   'ivyora-display', Georgia, serif;
  --font-serif-body:      'ivyora-text', Georgia, serif;

  /* ── Palette Tokens mapped from hb-design-system.md ── */
  --color-primary:                  #1B3A5C;
  --color-primary-dark:             #1B3A5C;
  --color-secondary:                #0F1D2E;
  --color-secondary-dark:           #4C463A;
  --color-tertiary:                 #7B5819;
  --color-background:               #f7f7f7;
  --color-foreground:               #1B3A5C;

  /* ── Surfaces & Outlines from hb-design-system.md ── */
  --color-surface:                  #F7F7F4;
  --color-surface-dim:              #DAD9DF;
  --color-surface-bright:           #F9F9FE;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low:    #F4F3F8;
  --color-surface-container:        #EEEDF2;
  --color-surface-container-high:   #E8E8ED;
  --color-surface-container-highest:#E2E2E7;
  --color-on-surface:               #1A1C1F;
  --color-on-surface-variant:       #43474F;
  --color-outline:                  #737780;
  --color-outline-variant:          #C3C6D1;
  --color-error:                    #BA1A1A;

  /* ── RGB Triplets for CSS rgba() Functions ── */
  --color-foreground-rgb:           26, 29, 32;
  --color-background-rgb:           253, 251, 247;
  --color-button-background:        8, 55, 107;

  /* ── Aliases Aligned to hb-design-system.md ── */
  --bg-canvas:          var(--percale-white);
  --bg-alabaster:       var(--percale-white);
  --bg-mist:            var(--salt-mist);
  --bg-slate-light:     var(--cobalt-accent);
  --bg-navy:            var(--mill-blue-deep);

  --text-primary:       var(--charcoal-ink);
  --text-heading:       var(--charcoal-ink);
  --text-muted:         var(--slate-graphite);
  --text-accent:        var(--portugal-terracotta);
  --text-inverse:       var(--percale-white);

  --btn-primary-bg:     var(--mill-blue-deep);
  --btn-primary-hover:  var(--mill-blue-hover);
  --btn-outline-border: var(--mill-blue-deep);

  --border-color:       var(--shingle-stone);

  /* ── Stacking Scale ── */
  --z-base:              0;
  --z-raised:            10;
  --z-sticky:            100;
  --z-dropdown:          200;
  --z-overlay:           400;
  --z-modal:             500;
  --z-skip-link:         600;

  /* ── Glassmorphism Tokens ── */
  --glass-background:   rgba(253, 251, 247, 0.88);
  --glass-backdrop-blur: blur(11px);
  --glass-border:       1px solid #E3DCD1;
}

/* ==========================================================================
   TYPOGRAPHY OVERRIDES - HB-DESIGN-SYSTEM.MD SPECIFICATION
   ========================================================================== */

/* 1. Headings: loretta-display, 400, normal, tracking -0.01em */
h1, .h1 {
  font-family: 'ivyora-display' !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
}
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6,
.h0, .hxl, .hxxl, .dialog-title,
.text-family-heading, .nav-logo {
  font-family: 'ivyora-display' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
}

/* 2. Paragraphs / Body text: ivyora-text, 300, normal */
body, p, .text-body, .text-std, .h-body {
  font-family: "ivyora-text", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: inherit;
}

.product-title-body {
  font-family: "ivyora-text", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

/* 3. Labels, Captions, Buttons, Navigation Links: Adamina, 400, normal */
button, .button, .ui-nav-element, nav a, .nav-links a, .header__menu-item,
.link--underlined, .product-form__input,
div[role=button], .shopify-challenge__button,
.account-sub-navigation, .text-family-accent {
  font-family: 'Adamina', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

label, .label, .section-label,
.caption, .caption-large, .caption-note,
.text-small, .text-micro, small {
  font-family: 'Adamina', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  opacity: 1 !important;
  color: var(--slate-graphite) !important;
  font-size: 11px !important;
  line-height: 16px;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.eyebrow {
  font-family: 'Adamina', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--cobalt-accent) !important;
}

/* GLASSMORPHISM UTILITY */
.glass-panel {
  background: var(--glass-background);
  backdrop-filter: var(--glass-backdrop-blur);
  -webkit-backdrop-filter: var(--glass-backdrop-blur);
  border: var(--glass-border);
}

/* Base Resets & Global Typography */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  /* Layout */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  /* Colour & typography */
  background-color: var(--off-white);
  color: var(--ink);
  font-family: "ivyora-text", Georgia, serif;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) {
  .wrap {
    padding: 0 20px;
  }
}

/* Custom Horizon Rule Divider */
.horizon {
  height: 1px;
  max-width: 1320px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent 0%, var(--marine) 15%, var(--brass) 50%, var(--marine) 85%, transparent 100%);
  opacity: 0.4;
}

/* ==========================================================================
   NAVIGATION & SUB-CATEGORY PILLS
   ========================================================================== */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  gap: 30px;
}

@media (max-width: 800px) {
  .nav-links { display: none; }
}

.subcat-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 22px 0 6px;
  scrollbar-width: none;
}

.subcat-row::-webkit-scrollbar {
  display: none;
}

.subcat-pill {
  flex: none;
  padding: 10px 20px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--white) !important;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Adamina', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subcat-pill:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.subcat-pill.active {
  background: var(--pale-wash) !important;
  border-color: var(--marine);
  color: var(--marine);
  font-weight: 600;
}

/* ==========================================================================
   PLP FILTER & SORT BAR
   ========================================================================== */

.filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--off-white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-left {
  display: flex;
  gap: 14px;
  align-items: center;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  font-family: 'Adamina', Georgia, serif;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--marine);
}

.filter-count {
  font-size: 12.5px;
  color: var(--muted);
  font-family: 'Adamina', Georgia, serif;
}

.sort-select {
  font-size: 11px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: 'ivyora-text', Georgia, serif;
  color: var(--ink);
}

.active-filters {
  display: flex;
  gap: 8px;
  padding: 14px 0 0;
  flex-wrap: wrap;
}

.active-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 7px 11px;
  background: var(--pale-wash);
  color: var(--marine);
  font-weight: 600;
  font-family: 'Adamina', Georgia, serif;
}

.active-chip .x {
  cursor: pointer;
  opacity: 0.6;
}

.clear-all {
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 7px 4px;
  cursor: pointer;
  font-family: 'Adamina', Georgia, serif;
  text-transform: uppercase;
}

/* ==========================================================================
   PRODUCT GRID & CARDS
   ========================================================================== */

.grid-section {
  padding: 32px 0 0;
  background-color: var(--percale-white);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px; /* Desktop grid: 28px–32px gutters */
}

@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 18px; /* Mobile grid: 18px gutters */
  }
}

.p-card {
  position: relative;
}

.p-card-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  background: linear-gradient(155deg, #e7edf1 0%, #d7e1e8 55%, #c7d5df 100%);
}

.p-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 45%);
  transition: opacity 0.4s ease;
}

.p-card:hover .p-card-img::after {
  opacity: 0;
}

.p-card-img::before {
  content: 'in a place setting';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Adamina', Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 29, 32, 0.4);
  background: linear-gradient(155deg, #dfe7ea 0%, #c9d6de 55%, #b3c5d1 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.p-card:hover .p-card-img::before {
  opacity: 1;
}

.p-card-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  background: var(--portugal-terracotta);
  color: var(--white);
  font-family: 'Adamina', Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 10px;
  font-weight: 600;
  border-radius: 0;
}

.p-card-size {
  position: absolute;
  bottom: 11px;
  right: 11px;
  z-index: 2;
  background: rgba(253, 251, 247, 0.88);
  color: var(--ink);
  font-family: 'Adamina', Georgia, serif;
  font-size: 10px;
  padding: 4px 9px;
  letter-spacing: 0.04em;
  border-radius: 0;
}

.p-card-stars {
  color: var(--cobalt-accent);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.p-card-name {
  font-family: 'loretta-display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.3;
  color: var(--ink);
}

.p-card-price {
  font-size: 14px;
  color: var(--muted);
  font-family: "ivyora-text", Georgia, serif;
  font-weight: 300;
  line-height: 1.3;
}

.p-card-price .was {
  text-decoration: line-through;
  color: rgba(15, 29, 46, 0.32);
  margin-right: 7px;
}

/* ==========================================================================
   STORY BREAK INLINE EDITORIAL COMPONENT
   ========================================================================== */

.story-break {
  margin: 56px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--ink);
  color: var(--off-white);
  overflow: hidden;
}

@media (max-width: 840px) {
  .story-break { grid-template-columns: 1fr; }
}

.story-img {
  aspect-ratio: 16/10;
  background: linear-gradient(150deg, #233b52, #16283a);
}

.story-text {
  padding: 44px 48px;
}

@media (max-width: 768px) {
  .story-text { padding: 32px 24px; }
}

.story-text .eyebrow {
  color: var(--brass-light);
  margin-bottom: 16px;
}

.story-text h3 {
  color: var(--off-white);
  font-family: 'loretta-display', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  margin-bottom: 14px;
}

.story-text p {
  font-family: 'ivyora-text', Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 245, 242, 0.7);
  max-width: 44ch;
}

/* ==========================================================================
   COLLECTION SWITCHER COMPONENT
   ========================================================================== */

.switcher {
  padding: 56px 0 64px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-family: 'loretta-display', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  margin: 0;
}

.switch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

@media (max-width: 980px) {
  .switch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .switch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.switch-tile {
  text-decoration: none;
  color: inherit;
  display: block;
}

.switch-tile-img {
  aspect-ratio: 1/1.1;
  margin-bottom: 10px;
  background: linear-gradient(150deg, #e9eef1, #cddae2);
  overflow: hidden;
}

.switch-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.switch-tile:hover .switch-tile-img img {
  transform: scale(1.03);
}

.switch-tile-name {
  font-family: 'Adamina', Georgia, serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Motion Controls: Strictly enforce 300-400ms transitions, ban spring/bounce effects */
/* Scoped to interactive elements only — wildcard `*` caused global transition bleed */
a, button, .button, .btn, input, select, textarea,
.p-card, .p-card-img, .subcat-pill, .filter-btn, .mega-menu-panel {
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* BASE — :root tokens and body layout merged into the rules above */

.section {
    background: #ffffff;
}

.section-alt {
    background: var(--color-section, #F5F3F3);
}

.card,
.product-card,
.collection-card {
    background: #ffffff;
    border: 1px solid #D5CFBF;
}

/* h1-h6 color removed here — consolidated into the h1-h6 rule above (D3) */

.rte :where(p, li) {
    color: var(--color-text, var(--text-primary));
}

.rte a {
    color: var(--color-primary);
}

.rte a:hover {
    color: var(--color-primary-dark);
}

/* Button styles — consolidated into the master component block near end of file (D4, D5) */

.badge,
.sale-badge,
.icon-highlight {
    color: #3B6C9C;
}

hr,
.divider {
    border-color: #D5CFBF;
}


.no-js:not(html) {
  display: none !important;
}

html.no-js .no-js:not(html) {
  display: block !important;
}


.no-js-inline {
  display: none !important;
}

html.no-js .no-js-inline {
  display: inline-block !important;
}

html.no-js .no-js-hidden {
  display: none !important;
}

.isolate {
  position: relative;
  z-index: 0;
}

.global-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--color-foreground-rgb), 0.5);
  border-radius: var(--media-radius, 0px);
}

.global-image-placeholder .image-placeholder {
  width: 80px;
  height: 80px;
}

.global-image-placeholder .image-placeholder-lifestyle {
  width: auto;
  height: 85%;
  position: relative;
  z-index: 1;
}

.global-image-placeholder .image-placeholder-five {
  height: 90%;
  position: absolute;
  top: 0;  
}

.global-image-placeholder .image-placeholder-two {
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.global-image-placeholder .horizon {
  display: block !important;
  background: rgba(0,0,0,0.0);
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.drawer-close-button {
  appearance: none;
  border: 0;
  outline: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: none;
  cursor: pointer;
}

.drawer-close-button .icon {
  width: 1rem;
  height: 1rem;
}

.page-width, .page-width-narrow, .page-width-medium, .page-width-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-width-medium {
  max-width: 90rem;
}

.page-width-narrow, .page-width--narrow {
  max-width: 70rem;
}

.page-width-extra-narrow {
  max-width: 55rem;
  margin: 0 auto;
  padding: 0 20px;
}

.page-width-dt {
  margin: 0 auto;
  max-width: 1320px;
}

.page-width-desktop {
  max-width: 1320px;
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .page-width, .page-width-medium {
    padding: 0 32px;
  }
  .page-width-narrow, .page-width--narrow {
    padding: 0 5rem;
  }
  .page-width-desktop {
    padding: 0;
  }
  .page-width-grid {
    padding: 0 32px;
  }
}

@media screen and (min-width: 1025px) {
  .page-width, .page-width-medium {
    padding: 0 32px;
  }
  .page-width-desktop {
    max-width: 1320px;
    padding: 0 32px;
  }
  .page-width-dt {
    margin: 0 auto;
    padding: 0 32px;
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin, 64px));
  }
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%); /* [DEP-02] clip: rect() is deprecated — replaced with clip-path */
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.elem-hidden {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-pane {
  display: block !important;
}

.body-lock-scroll {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: var(--z-skip-link, 600);
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: #F5F5F2;
}


/* TYPOGRAPHY - BODY */

.text-body {
  font-size: var(--font-body-base-size-mobile, 1.4rem);
  letter-spacing: 0;
  line-height: 1.5;
  font-family: 'ivyora-text', Georgia, serif;
  font-style: normal;
  font-weight: 300;
  color: inherit;
}

.text-micro {font-size: 1.3rem;}
.text-small {font-size: max(1.3rem, calc(var(--font-body-base-size-mobile, 1.4rem) - 1px));}
.text-std, .text-body {font-size: max(1.4rem, var(--font-body-base-size-mobile, 1.4rem));}
.text-large {font-size: calc(var(--font-body-base-size-mobile, 1.4rem) + 2px);}
.text-xl {font-size: calc(var(--font-body-base-size-mobile, 1.4rem) + 6px);}
.text-xxl {font-size: calc(var(--font-body-base-size-mobile, 1.4rem) + 8px);}
.text-xxxl {font-size: calc(var(--font-body-base-size-mobile, 1.4rem) + 11px);}

.ui-nav-element {font-size: var(--font-ui-size-mobile, 1.2rem);}

@media screen and (max-width: 749px) {
  body, .text-std, .text-body {
    font-size: max(1.4rem, var(--font-body-base-size-mobile, 1.4rem));
    line-height: 1.5;
  }
  .caption,
  .caption-note,
  .section-label,
  .text-small,
  .text-micro,
  small {
    font-size: 11px;
    line-height: 1.5;
  }
}

@media only screen and (min-width: 750px) {
  body, .text-std, .text-body {font-size: var(--font-body-base-size-tablet, 1.5rem);}
  .text-small {font-size: calc(var(--font-body-base-size-tablet, 1.5rem) - 2px);}
  .text-large {font-size: calc(var(--font-body-base-size-tablet, 1.5rem) + 4px);}
  .text-xl {font-size: calc(var(--font-body-base-size-tablet, 1.5rem) + 8px);}
  .text-xxl {font-size: calc(var(--font-body-base-size-tablet, 1.5rem) + 16px);}
  .text-xxxl {font-size: calc(var(--font-body-base-size-tablet, 1.5rem) + 20px);}
}

@media only screen and (min-width: 1025px) {
  body {font-size: var(--font-body-base-size-desktop, 1.6rem);}
  .text-micro {font-size: 1.1rem}
  .text-small {font-size: calc(var(--font-body-base-size-desktop, 1.6rem) - 2px);}
  .text-std, .text-body {font-size: var(--font-body-base-size-desktop, 1.6rem);}
  .text-large {font-size: calc(var(--font-body-base-size-desktop, 1.6rem) + 4px);}
  .text-xl {font-size: calc(var(--font-body-base-size-desktop, 1.6rem) + 8px);}
  .text-xxl {font-size: calc(var(--font-body-base-size-desktop, 1.6rem) + 18px);}
  .text-xxxl {font-size: calc(var(--font-body-base-size-desktop, 1.6rem) + 36px);}
  .ui-nav-element {font-size: var(--font-ui-size-desktop, 1.3rem);}
}

.text-weight-light {
  font-weight: 300 !important;
}

.text-weight-std {
  font-weight: 400;
}

.text-weight-bold {
  font-weight: 600;
}

.text-italic {
  font-style: italic;
}

.text-underlined {
  text-decoration: underline; /* [BUG-05] Corrected — was erroneously set to none */
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 1px;
}

.text-fade-fifty {opacity: 0.5}
.text-fade-sixty {opacity: 0.6}
.text-fade-seventy {opacity: 0.7}
.text-fade-eighty {opacity: 0.8}
.text-fade-ninety {opacity: 0.9}

.icon {
  width: 20px;
  height: 20px;
}

.divider-bullet {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

.hxl {
  font-size: var(--font-hxl-size-mobile, 3.2rem);
  letter-spacing: var(--font-h1-ls, 0.01em);
  text-transform: var(--font-h1-case, none);
}

.h0 {
  font-size: var(--font-h0-size-mobile, 2.8rem);
  letter-spacing: var(--font-h1-ls, 0.01em);
  text-transform: var(--font-h1-case, none);
}

h1, .h1 {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: var(--font-h1-size-mobile, 2.4rem);
  margin-bottom: 1rem;
  letter-spacing: var(--font-h1-ls, 0.01em);
  text-transform: var(--font-h1-case, none);
  color: inherit !important;
}

h2, .h2 {
  font-size: var(--font-h2-size-mobile, 2rem);
  margin-bottom: 1rem;
  letter-spacing: var(--font-h2-ls, 0.01em);
  text-transform: var(--font-h2-case, none);
}

h3, .h3 {
  font-size: var(--font-h3-size-mobile, 1.8rem);
  margin-bottom: 0.5rem;
  letter-spacing: var(--font-h3-ls, 0.01em);
  text-transform: var(--font-h3-case, none);
}

h4, .h4 {
  font-size: var(--font-h4-size-mobile, 1.6rem);
  margin-bottom: 0.5rem;
  text-transform: none;
}

h5, .h5 {
  font-size: var(--font-h5-size-mobile, 1.4rem);
  margin-bottom: 0rem;
  text-transform: none;
}

h6, .h6 {
  font-size: var(--font-h6-size-mobile, 1.2rem);
  margin-bottom: 0;
  opacity: 0.7;
  text-transform: uppercase;
}

.align-center h1, .align-center .h1, .align--center h1, .align--center .h1, .align--center .h0, .align--center .hxl, .align-center h2, .align--center h2, .align--center .h2, .align-center h3, .align-center .h3 {
  margin-left: calc(var(--font-h1-ls, 0.01em));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: var(--font-hxl-size-tablet, 4.4rem);
  }
  .h0 {
    font-size: var(--font-h0-size-tablet, 3.8rem);
  }
  h1, .h1 {
    font-size: var(--font-h1-size-tablet, 3rem);
  }  
  h2, .h2 {
    font-size: var(--font-h2-size-tablet, 2.4rem);
  }
  h3, .h3 {
    font-size: var(--font-h3-size-tablet, 2rem);
  }
  h4, .h4 {
    font-size: var(--font-h4-size-tablet, 1.7rem);
  }
  h5, .h5 {
    font-size: var(--font-h5-size-tablet, 1.5rem);
  }
  h6, .h6 {
    font-size: var(--font-h6-size-tablet, 1.3rem);
  }  
}

@media only screen and (min-width: 1025px) {
  .hxl {
    font-size: var(--font-hxl-size-desktop, 5.6rem);
  }
  .h0 {
    font-size: var(--font-h0-size-desktop, 4.8rem);
  }
  h1, .h1 {
    font-size: var(--font-h1-size-desktop, 3.6rem);
  }
  h2, .h2 {
    font-size: var(--font-h2-size-desktop, 2.8rem);
  }
  h3, .h3 {
    font-size: var(--font-h3-size-desktop, 2.2rem);
  }
  h4, .h4 {
    font-size: var(--font-h4-size-desktop, 1.8rem);
  }
  h5, .h5 {
    font-size: var(--font-h5-size-desktop, 1.6rem);
  }
  h6, .h6 {
    font-size: var(--font-h6-size-desktop, 1.4rem);
  }
}


/* TYPOGRAPHY - OTHER */

.dialog-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: var(--dialog-title-size-mobile, 2rem);
}

@media only screen and (min-width: 750px) {
  .dialog-title {
    font-size: var(--dialog-title-size-tablet, 2.2rem);
  }  
}

@media only screen and (min-width: 1025px) {
  .dialog-title {
    font-size: var(--dialog-title-size-desktop, 2.4rem);
  }  
}


.rich-text__caption, .caption {
  font-family: "ivyora-text", serif !important;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 300;
  color: #0F1D2E;
}

.caption-note {
  font-family: "ivyora-text", serif !important;
  text-transform: uppercase;
  font-size: max(1.3rem, var(--font-caption-size-mobile, 1.3rem));
}

@media screen and (min-width: 1025px) {
  .section-label {
    font-size: var(--font-caption-size-desktop, 1.1rem);
  }
  .caption, .caption-note {
    font-size: var(--font-caption-size-desktop, 1.1rem);
  }
}

blockquote {
  font-style: normal;
  color: rgba(var(--color-foreground-rgb), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground-rgb), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.align-center {
  margin: 0 auto;
  text-align: center;
}

.text-align-center {
  text-align: center;
}

.text-align-left, .align-left {
  text-align: left;
}

.text-align-right, .align-right {
  text-align: right;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold, 600);
}


/* COLOR SCHEMES */

.color-scheme-bg-body {
  background: var(--color-base-background, #ffffff);
}

.color-scheme-fg-white {
  color: #ffffff;
}

.color-scheme-bg-white {
  background: #ffffff;
}

.color-scheme-fg-01 {
  color: var(--color-accent-one, #1B365D);
}

.color-scheme-fg-02 {
  color: var(--color-accent-two, #3B6C9C);
}

.color-scheme-fg-03 {
  color: var(--color-accent-three, #c5a059);
}

.color-scheme-fg-04 {
  color: var(--color-accent-four, #D5E3FF);
}

.color-scheme-fg-success {
  color: var(--color-success, #1E7A4C);
}

.color-scheme-fg-sale {
  color: var(--color-price-sale, #BA1A1A);
}

.color-scheme-fg-body {
  color: var(--color-foreground);
}

.color-scheme-bg-01 {
  background: var(--color-bg-one, #FFFFFF);
}

.color-scheme-bg-02 {
  background: var(--color-bg-two, #fafafa);
}

.color-scheme-bg-03 {
  background: var(--color-bg-three, #F5F5F2);
}

.color-scheme-bg-04 {
  background: var(--color-bg-four, #1B3A5C);
}

.light {
  opacity: 0.7;
}

.color-scheme-fg-body .button-color-scheme--match-section .button--solid {
  background: rgba(var(--color-foreground-rgb), 1);
}

.color-scheme-fg-01 .button-color-scheme--match-section .button--solid {
  background: var(--color-accent-one, #1B365D);
}

.color-scheme-fg-02 .button-color-scheme--match-section .button--solid {
  background: var(--color-accent-two, #3B6C9C);
}

.color-scheme-fg-03 .button-color-scheme--match-section .button--solid {
  background: var(--color-accent-three, #c5a059);
}

.color-scheme-fg-04 .button-color-scheme--match-section .button--solid {
  background: var(--color-accent-four, #D5E3FF);
}

.color-scheme-bg-body .button-color-scheme--match-section .button--solid {
  color: var(--color-base-background, #ffffff); /* [BUG-07] Fallback was semi-transparent #ffffffa6 (8-digit hex, limited support) */
}

.color-scheme-bg-01 .button-color-scheme--match-section .button--solid {
  color: var(--color-bg-one, #ffffff);
}

.color-scheme-bg-02 .button-color-scheme--match-section .button--solid {
  color: var(--color-bg-two, #ffffff);
}

.color-scheme-bg-03 .button-color-scheme--match-section .button--solid {
  color: var(--color-bg-three, #ffffff);
}

.color-scheme-bg-04 .button-color-scheme--match-section .button--solid {
  color: var(--color-bg-four, #1B3A5C);
}

.button-color-scheme--match-section .button--outline {
  color: inherit;
  border-color: inherit;
}

.color-foreground {
  color: rgb(var(--color-foreground-rgb));
}

/* [BUG-04] .button--solid standalone overrides removed — consolidated into master HB button block (~line 3407).
   The 8-digit hex #ffffffa6 was unsupported in IE11/Safari <12.1 and conflicted with that block's #FFFFFF !important. */

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground-rgb), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground-rgb), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link, .customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: none;
  text-underline-offset: 0.3rem;
  color: inherit;
  background-color: transparent;
  font-family: "ivyora-text", serif;
}

.link--text {
  color: inherit;
}

.link--text:hover {
  color: inherit;
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground-rgb), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground-rgb), 0.04);
  color: rgba(var(--color-foreground-rgb), 0.55);
  fill: rgba(var(--color-foreground-rgb), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

/* Animation duration tokens — defined in the main :root block above (D1) */

.underlined-link,
.customer a {
  color: inherit;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 1px;
}

.underlined-link:hover,
.customer a:hover {
  color: inherit;
  text-decoration-thickness: 1px;
}

.icon-arrow {
  width: 1.5rem;
}


/* BASE DETAILS SUMMARY */

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.8rem;
  width: 0.8rem;
  right: 1.5rem;
  top: calc(50% - 0.4rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 200;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 200;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 200;
  }
}



/* BASE FOCUS */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 1) !important;
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background-rgb)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground-rgb), 0.3);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 1) !important;
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background-rgb)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground-rgb), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground-rgb), 0.3);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground-rgb), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}


/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none:not(:focus-visible) {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background-rgb)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground-rgb), 0.3);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground-rgb), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background-rgb)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground-rgb), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}



/* COMPONENT - GRID */

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing, 18px);
  row-gap: var(--grid-mobile-vertical-spacing, 26px);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing, 28px);
    row-gap: var(--grid-desktop-vertical-spacing, 32px);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing, 18px) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing, 18px) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing, 18px) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing, 28px) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing, 18px) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing, 28px) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing, 28px) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing, 28px) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing, 28px) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing, 28px) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing, 28px) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing, 28px) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
  }
}

@media only screen and (min-width: 1400px) {
  .grid--3-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing, 28px) * 3 / 4);
  }
}


@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing, 18px));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing, 18px) / 2);
  }

  .grid__item, .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing, 18px) - 3rem);
  }

}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 28px) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing, 28px) - 3rem);
  }
}

.grid-std {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(1,1fr);
  column-gap: var(--grid-mobile-horizontal-spacing, 18px);
  row-gap: var(--grid-mobile-horizontal-spacing, 18px);
  /* List reset */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.grid-std li, .grid-std .grid__item {
  width: 100%;
  max-width: none;
}

@media screen and (min-width: 750px) {
  .grid-std {
    grid-template-columns: repeat(3,1fr); 
  }
  .grid-desktop-2-column {
    grid-template-columns: repeat(2,1fr);
  }
}

@media screen and (min-width: 950px) {
  .grid-std {
    grid-template-columns: repeat(4,1fr); 
    column-gap: var(--grid-desktop-horizontal-spacing, 28px);
    row-gap: var(--grid-desktop-horizontal-spacing, 28px);
  }
  .grid-desktop-2-column {
    grid-template-columns: repeat(2,1fr);
  }
  .grid-desktop-3-column {
    grid-template-columns: repeat(3,1fr);
  }
}


@media only screen and (min-width: 750px) {
  .page-width-grid {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .grid-card-spacing-zero {
    gap: 0;
  }
  .grid-card-spacing-ten {
    gap: 10px;
  }
  .grid-card-spacing-twenty {
    gap: 20px;
  }
  .grid-card-spacing-thirty {
    gap: 30px;
  }
  .grid-card-spacing-fourty {
    gap: 40px;
  }  
  .grid-card-spacing-fifty {
    gap: 50px;
  } 
  .grid-card-spacing-sixty {
    gap: 60px;
  }
}


@media only screen and (min-width: 750px) {
  .grid-card-padding-ten > div:first-child {
    padding: 0 10px 0 0;
  }  
  .grid-card-padding-ten > div:last-child {
    padding: 0 0 0 10px;
  }
  .grid-card-padding-twenty > div:first-child {
    padding: 0 20px 0 0;
  }  
  .grid-card-padding-twenty > div:last-child {
    padding: 0 0 0 20px;
  }
  .grid-card-padding-thirty > div:first-child {
    padding: 0 30px 0 0;
  }  
  .grid-card-padding-thirty > div:last-child {
    padding: 0 0 0 30px;
  }
  .grid-card-padding-fourty > div:first-child {
    padding: 0 40px 0 0;
  }  
  .grid-card-padding-fourty > div:last-child {
    padding: 0 0 0 40px;
  }
  .grid-card-padding-fifty > div:first-child {
    padding: 0 50px 0 0;
  }  
  .grid-card-padding-fifty > div:last-child {
    padding: 0 0 0 50px;
  }
  .grid-card-padding-sixty > div:first-child {
    padding: 0 60px 0 0;
  }  
  .grid-card-padding-sixty > div:last-child {
    padding: 0 0 0 60px;
  }
}

@media only screen and (min-width: 750px) {
  .grid-item--half {
    width: 50%;
    box-sizing: border-box;
    padding: 20px;
  }
  .grid-item--third {
    width: 33.3333%;
    box-sizing: border-box;
    padding: 20px;
  }
  .grid-item--fourth {
    width: 25%;
    box-sizing: border-box;
    padding: 20px;
  }  
}


/* COMPONENT - MEDIA */

.media {
  display: block;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.media--background-shade {
  background-color: rgba(0,0,0,0.06);
}

.media--filter-darken {
  filter: brightness(0.98);
}

.media--transparent {
  background-color: transparent;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}



/* BUTTONS */

a:not(.button), a:not(.button):visited {
  color: inherit;
}

.link--underlined {
  text-decoration: none !important;
  text-underline-offset: 0.3rem;
}

.button--primary {
  background: #1B3A5C;
  border: var(--buttons-border-width, 1px) solid rgba(var(--color-button-background),1);
}

.button--secondary {
  --color-button-text: var(--color-outline-button-border, #1B3A5C);
  --color-button: var(--color-background);
  --alpha-button-background: 1;
  border: 1px solid #1B3A5C;
  background: none !important;
}

.button-color-scheme--white .button--solid {
  background: #ffffff;
  color: rgba(var(--color-foreground-rgb),1);
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button [role="button"],
.cart__dynamic-checkout-buttons [role='button'],
.cart__dynamic-checkout-buttons iframe {
  --border-offset: var(--buttons-border-offset, 1px); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity, 1));
  border-radius: var(--buttons-radius, 0px);
  font-weight: 400;
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: 14rem;
  min-height: 4.4rem;
}

.shopify-payment-button__button--branded {
  z-index: auto;
}

.cart__dynamic-checkout-buttons iframe {
  box-shadow: none;
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: var(--buttons-border-width, 1px) solid rgb(var(--color-button-background));
  border-radius: var(--buttons-radius, 0px);
  padding: 0 var(--buttons-horizontal-padding, 2rem);
  height: calc(44px + var(--buttons-padding, 1.8rem));
  cursor: pointer;
  font: inherit;
  font-weight: var(--buttons-font-weight, 400);
  font-size: var(--buttons-font-size-mobile, 1.2rem);
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(var(--color-button-foreground, 255, 255, 255),1);
  transition: box-shadow var(--duration-short, 0.3s) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button-background),1);
  line-height: 1;
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before,
.shopify-payment-button [role="button"]:before,
.cart__dynamic-checkout-buttons [role='button']:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius, 0px);
  box-shadow: none;
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width, 1px);
  right: var(--buttons-border-width, 1px);
  bottom: var(--buttons-border-width, 1px);
  left: var(--buttons-border-width, 1px);
  z-index: 1;
  border-radius: var(--buttons-radius, 0px);
  box-shadow: none;
  transition: box-shadow var(--duration-short, 0.3s) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: none;
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity, 1);
}

.button:focus:not(:focus-visible),
.button.focused:not(:focus-visible),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible),
.shopify-payment-button [role="button"]:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused),
.shopify-payment-button [role="button"]:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-foreground, 255, 255, 255), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: var(--buttons-font-size-mobile, 1.2rem);
  letter-spacing: 0.15em;
  line-height: 1;
}

@media only screen and (min-width: 1025px) {
  .button,
  .button-label,
  .shopify-challenge__button,
  .customer button {
    font-size: var(--buttons-font-size-desktop, 1.2rem);
  }  
}

.button--tertiary {
  color: inherit;
  font-size: 1.2rem;
  background: none;
  border: 0;
  text-decoration: none;
}

.button--inline-no-style {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.button--inline-underline {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 2px;
}

.button--small {
  padding: 1.2rem 2rem;
}


/* Shopify Accelerated Checkout Sep 2024 Update */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: calc(44px + var(--buttons-padding, 1.8rem));
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius, 0px);
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-skeleton-background-color: #D5CFBF;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}

shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: calc(44px + var(--buttons-padding, 1.8rem));
  --shopify-accelerated-checkout-button-inline-size: calc(44px + var(--buttons-padding, 1.8rem));
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius, 0px);
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-inline-alignment: flex-start;
  --shopify-accelerated-checkout-row-gap: 8px;
  --shopify-accelerated-checkout-skeleton-background-color: #D5CFBF;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button--filled-inverse {
  background: #ffffff;
  color: rgb(var(--color-button-background));
  border: var(--buttons-border-width, 1px) solid #ffffff;
}


.button--link {
  color: rgba(var(--color-outline-button-text, 15, 29, 46),1) !important;
  background: none;
  padding: 0;
  font-size: inherit;
  min-width: 0;
  text-decoration: none;
  text-underline-offset: 3px;
}

.button-color-scheme--white .button--primary {
  background: #ffffff !important;
  color: rgba(var(--color-foreground-rgb),1) !important;
}

.button-color-scheme--white .button--outline {
  border: var(--buttons-border-width, 1px) solid #ffffff !important;
  color: #ffffff !important;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground-rgb));
  }
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading-overlay__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading-overlay__spinner .path {
  stroke: rgb(var(--color-button-foreground, 255, 255, 255));
}

.button.button--outline.loading > .loading-overlay__spinner .path {
  stroke: rgb(var(--color-outline-button-text, 15, 29, 46)) !important;
}

.button:focus-visible {
  outline: 2px solid rgba(var(--color-foreground-rgb),1) !important;
}


.slider-arrow-left, .slider-arrow-right {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  width: 48px;
  height: 48px;
  background: rgba(var(--color-tertiary-button-background, 213, 227, 255),1);
  color: rgba(var(--color-tertiary-button-color, 15, 29, 46),1);
  border-radius: var(--pagination-radius, 0px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-tertiary-button-background, 213, 227, 255));
  position: absolute;
}

.slider-arrow-left .icon, .slider-arrow-right .icon {
  color: inherit;
  width: 11px;
  height: 11px;
}

.slider-arrow-left .icon {
  transform: rotate(90deg);
}

.slider-arrow-right .icon {
  transform: rotate(-90deg);
}

.slider-mobile-pagination-container {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slider-mobile-pagination-container-animating {
  max-width: 70px;
}

.slider-mobile-pagination-container-animating:has(.slider-pagination-style-lines) {
  max-width: 120px;
}

.slider-mobile-pagination {
  margin: 0 auto;
  margin-top: 3rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  column-gap: 5px;
  row-gap: 5px;
  flex-wrap: wrap;
  transition: transform 0.15s ease;
  width: max-content;
  font-size: 0;
}

.slider-mobile-pagination-container.align-left, .slider-mobile-pagination-container.align-right {
  margin-left: var(--page-margin-mobile, 20px);
  margin-right: var(--page-margin-mobile, 20px);
}

.slider-mobile-pagination-container.align-left .slider-mobile-pagination {
  margin: 0;
  margin-top: 3rem;
  margin-bottom: 1rem;
  justify-content: flex-start;  
}

.slider-mobile-pagination-container.align-right .slider-mobile-pagination {
  margin: 0;
  margin-top: 3rem;
  margin-bottom: 1rem;
  justify-content: flex-end;
}

.section-inner:has(.section-footer) .slider-mobile-pagination {
  margin-bottom: 2rem;
}

.slider-mobile-pagination.slider-pagination-style-bullets {
  column-gap: 8px;
}

.pagination-marker {
  width: 20px;
  height: 2px;
  background: rgba(var(--color-foreground-rgb),1);
  opacity: 0.3;
}

.slider-pagination-style-bullets .pagination-marker {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  border: 1px solid;
  background: none;
}

.pagination-marker.active {
  opacity: 0.8;
  background: rgba(var(--color-foreground-rgb),1);
  transition: 0.2s linear;
}

.slider-pagination-style-bullets .pagination-marker.active {
  opacity: 0.5;
}

.pagination-marker:empty {
  display: block;
}

@media only screen and (min-width: 750px) {
  .slider-mobile-pagination-container {
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
  }
}

/* FORMS */

.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: var(--font-ui-size-mobile, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0rem;
}

.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background-rgb));
  color: rgb(var(--color-foreground-rgb));
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--inputs-radius, 0px);
  height: 4.4rem;
  min-height: calc(44px + var(--buttons-padding, 1.8rem));
  min-width: 8rem;
  position: relative;
  border: var(--inputs-border-width, 1px) solid rgba(var(--color-foreground-rgb),var(--inputs-border-opacity, 1));
}

.field__input, .field input {
  height: auto;
}

.field__input:focus {
  border: var(--inputs-border-width, 1px) solid rgba(var(--color-foreground-rgb),1);
  outline: 0;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  color: rgba(var(--color-foreground-rgb), 1);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: none;
  outline: 0;
  border-radius: var(--inputs-radius, 0px);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: none;
  outline: 0;
  border-radius: var(--inputs-radius, 0px);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.8rem;
  width: 0.8rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.4rem);
  right: calc(var(--inputs-border-width, 1px) + 1.6rem);
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: 1.2;
  padding: 0 1rem;
  margin: var(--inputs-border-width, 1px);
}

@media only screen and (min-width: 1025px) {
  .customer .field input,
  .customer select,
  .field__input,
  .form__label,
  .select__select {
    font-size: var(--font-ui-size-desktop, 1.3rem);
  }  
}

.select__select:focus-visible {
  outline-offset: -1px;
}

/* Field */

input:focus:not(:focus-visible), .field__input:focus:not(:focus-visible) {
  outline: none;
}

.field {
  position: relative;
  width: 100%;
}

.customer .field {
  text-align: left;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem 1rem;
}

.field__label,
.customer .field label {
  position: relative;
  display: block;
  font-size: var(--font-ui-size-mobile, 1.2rem);
  margin-bottom: 0.8rem;
  pointer-events: none;
  color: rgba(var(--color-foreground-rgb), 1);
  letter-spacing: 0rem;
  line-height: 1.5;
}

@media only screen and (min-width: 1025px) {
  .field__label,
  .customer .field label {
    font-size: var(--font-ui-size-desktop, 1.3rem);
  }  
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

::placeholder {
  color: inherit !important;
  opacity: 0.6;
}

::-ms-input-placeholder {
  color: inherit !important;
  opacity: 0.6;
}

input::placeholder {
  overflow: visible;
}

input:focus::placeholder, textarea:focus::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > svg {
  height: 2rem;
  width: 2rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

.field textarea:focus:not(:focus-visible),
.field .text-area:focus:not(:focus-visible),
.field input[type='text']:focus:not(:focus-visible),
.field input[type='email']:focus:not(:focus-visible),
.field input[type='password']:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* Text area */

.text-area {
  min-height: 10rem;
  resize: vertical;
  padding: 1rem;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

input[type='text'], textarea, input[type='tel'], input[type='email'], input[type='password'], .text-area {
  font-family: var(--font-body-family) !important;
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);  
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: var(--color-foreground);
  position: relative;
  width: 132px;
  display: flex;
  border-radius: var(--variant-pills-radius, 0px);
  min-height: 44px;
  border: var(--variant-pills-border-width, 1px) solid #CECECE;
}

.quantity__input {
  color: #0F1D2E;
  font-size: 1.1rem;
  opacity: 1;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: 4.4rem;
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F1D2E;
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width, 1px));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width, 1px));
}

.quantity__button svg {
  width: 0.9rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-base-background-rgb, 255, 255, 255));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-base-background-rgb, 255, 255, 255));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-base-background-rgb, 255, 255, 255)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-base-background-rgb, 255, 255, 255)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  appearance: textfield; /* [DEP-03] Standard property added — -moz-appearance is a legacy vendor prefix */
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 1.2rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

product-info .loading-overlay:not(.hidden) ~ *,
.quantity__rules-cart .loading-overlay:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 5;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--popup-background-color, #FFFFFF);
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.section-header.shopify-section-group-header-group {
  z-index: 4;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: 0;
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

.no-js .predictive-search {
  display: none;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgba(var(--color-foreground-rgb), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}


.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 0;
  border-radius: var(--badge-corner-radius, 0px);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem;
  text-align: center;
  background-color: var(--badge-bg-color, #A9803E);
  color: var(--badge-txt-color, #FFFFFF);
  word-break: break-word;
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
}

.global-media-settings {
  border-radius: var(--media-radius, 0px);
}

.global-product-card-media-settings {
  border-radius: var(--media-radius, 0px);
  background: var(--product-card-media-bg-col, #E7EDF1);  
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video {
  border-radius: var(--media-radius, 0px);
}


/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing, 18px));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing, 18px);
    padding-bottom: var(--grid-mobile-vertical-spacing, 26px);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing, 28px));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing, 28px);
      padding-bottom: var(--grid-desktop-vertical-spacing, 32px);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing, 18px);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing, 26px);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing, 32px);
    }
  }
}



/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role="button"]:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role="button"]:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}


/* SECTIONS */

.section-container {
  position: relative;
}

.section-header-std-padding {
  margin-bottom: var(--section-header-vertical-spacing-mobile, 32px);
}

.section-heading--inline {
  margin-bottom: var(--section-header-vertical-spacing-mobile, 32px);
}

@media only screen and (min-width: 1025px) {
  .section-header-std-padding, .section-heading--inline {
    margin-bottom: var(--section-header-vertical-spacing-desktop, 48px);
  }
}

.section-border {
  margin: 0;
  padding: 0;
}

.section-border-color-dark {
  background-color: #d9d9d9;
}

.section-border-color-light {
  background-color: rgba(255,255,255,0.15);
}

.section-border-width-normal {
  margin-left: var(--page-margin-mobile, 20px);
  margin-right: var(--page-margin-mobile, 20px);
}

@media only screen and (min-width: 750px) {
  .section-border-width-normal {
    margin-left: var(--page-margin-tablet, 48px);
    margin-right: var(--page-margin-tablet, 48px);
  }  
}

@media only screen and (min-width: 1025px) {
  .section-border-width-normal {
    margin-left: var(--page-margin-desktop, 64px);
    margin-right: var(--page-margin-desktop, 64px);
  }  
}

.section-button--position-top {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.section-button--position-inline {
  margin-top: var(--section-footer-vertical-spacing-mobile, 40px);
}

.section-button--position-footer {
  margin-top: var(--section-footer-vertical-spacing-mobile, 40px);
}

.section-footer {
  margin-top: var(--section-footer-vertical-spacing-mobile, 40px);
  box-sizing: border-box;
}

.section-viewall-button {
  margin-top: var(--section-footer-vertical-spacing-mobile, 40px);
}

@media only screen and (min-width: 750px) {
  .section-viewall-button {
    margin-top: var(--section-footer-vertical-spacing-desktop, 64px);
  }
  .section-footer {
    margin-top: var(--section-footer-vertical-spacing-desktop, 64px);
  }  
}

@media only screen and (min-width: 1025px) {
  .section-heading--inline {
    margin-bottom: var(--section-header-vertical-spacing-desktop, 48px);
  }
  .section-button--position-inline {
    margin-top: var(--section-footer-vertical-spacing-desktop, 64px);
  }
  .section-button--position-footer {
    margin-top: var(--section-footer-vertical-spacing-desktop, 64px);
  }
  .section-footer {margin-top: var(--section-footer-vertical-spacing-desktop, 64px);}  
}


.section-footer .button--outline {
  background: none !important;
}

.button-color-scheme--inverse .button--filled {
  background-color: rgb(var(--color-button-foreground, 255, 255, 255));
  color: rgb(var(--color-button-background));
  border: var(--buttons-border-width, 1px) solid rgb(var(--color-button-foreground, 255, 255, 255));
}

.button-color-scheme--inverse .button--outline {
  background: none;
  color: rgb(var(--color-button-foreground, 255, 255, 255));
  border: var(--buttons-border-width, 1px) solid rgb(var(--color-button-foreground, 255, 255, 255));
}

.buttons-layout-stacked {
  display: flex;
  flex-direction: column;
  width: fit-content;
  row-gap: 11px;
}

.align-center .buttons-layout-stacked {
  margin: 0 auto;
}

.buttons-layout-stacked .button {
  margin: 0 auto;
  width: 100%;
}


/* POLICY PAGES */

.shopify-policy__title {
  margin-bottom: 4rem;
}

.shopify-policy__container {
  padding-top: 80px;
  padding-bottom: 60px;
  max-width: 750px; 
}

.shopify-policy__body {
  margin-bottom: 6rem;
}

@media only screen and (min-width: 750px) {
  .shopify-policy__body {
    margin-bottom: 8rem;
  }  
}

/* Outer Card Wrapper */
.card-product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 0.125rem;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Content Container */
.card-product--content {
  padding: 1.5rem; /* p-6 */
}

.card-product--content > * + * {
  margin-top: 1rem; /* space-y-4 */
}

/* Image Container */
.card-product--image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.125rem;
  background-color: var(--color-surface, #f8f9fa);
  transition: transform 700ms ease-out; /* [PERF-03] Was 'all' — restricting to transform keeps animation on compositor thread */
}

.card-product--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease-out; /* [PERF-03] Was 'all' */
}

.card-product:hover .card-product--image img {
  transform: scale(1.05);
}

.multicolumn-grid-item-image {
  position: relative;
  transition: transform 700ms ease-out; /* [PERF-03] Was 'all' */
  border: 1px solid #d9d9d9 !important; 
  overflow: hidden;
}

.multicolumn-grid-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease-out; /* [PERF-03] Was 'all' */
}

.multicolumn-grid-item-image:hover img,
.multicolumn-card:hover .multicolumn-grid-item-image img {
  transform: scale(1.05);
}


/* .link--underlined: text-decoration rule — consolidated into the earlier .link--underlined block (D7) */

.card-product--price {
  font-size: 16px !important;
  font-family: var(--font-body);
  font-weight: 300 !important;
  color: #0F1D2E;
  padding-top: 5px;
}

.card-product--title {
  font-size: 16px !important; /* corrected to spec: Adamina 14px for card titles */
  font-family: var(--font-ui); /* was ivyora-text — fixed to Adamina per DESIGN.md (R5) */
  letter-spacing: 0.02em;
  color: #0F1D2E;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HAMPTONS BLUE MASTER COMPONENTS & UI RULES
   ========================================================================== */

/* 1. BUTTONS: Primary, Secondary, & Text Link */
.button:not(.button--secondary):not(.button--outline):not(.button--link),
.button--primary,
.product-form__submit,
.customer button:not(.button--secondary):not(.button--outline):not(.button--link),
.btn:not(.button--secondary):not(.button--outline) {
  background-color: #1B365D !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  transition: background-color 0.35s ease, color 0.35s ease;
}

.button:not(.button--secondary):not(.button--outline):not(.button--link):hover,
.button--primary:hover,
.product-form__submit:hover,
.customer button:not(.button--secondary):not(.button--outline):not(.button--link):hover,
.btn:not(.button--secondary):not(.button--outline):hover {
  background-color: #1B365D !important;
  color: #FFFFFF !important;
  border: none !important;
}

.button:not(.button--secondary):not(.button--outline):not(.button--link):hover *,
.button--primary:hover *,
.product-form__submit:hover * {
  color: var(--off-white) !important;
}

.button--secondary,
.button--outline {
  background: transparent !important;
  border: 1px solid var(--text-heading) !important;
  color: var(--text-heading) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}

.button--secondary:hover,
.button--outline:hover {
  background: transparent !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.button--secondary:hover *,
.button--outline:hover * {
  color: #FFFFFF !important;
}

.button--link,
.cta-underline,
a.text-link,
a.link {
  color: var(--ink) !important;
  text-decoration: none !important;
  /* Underline via ::after pseudo-element — border-bottom removed to prevent double-underline (E3) */
  transition: border-color 0.35s ease, color 0.35s ease;
}

.button--link:hover,
.cta-underline:hover,
a.text-link:hover,
a.link:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--btn-primary-hover) !important;
}

/* 2. LIGHTING MIMICRY & PRODUCT CARDS */
.p-card,
.product-card,
.card,
.card-wrapper,
.card-product,
.collection-card,
.article-card,
.multicolumn-card,
.multicolumn-grid-item-image {
  background-color: var(--white) !important;
  border: 1px solid #D5CFBF !important;
  border-radius: 0 !important;
  box-shadow: none !important; /* No drop shadows; studio lighting mimicry used instead */
}

.p-card-img,
.product-card .media,
.card__media,
.media--adapt,
.media--square,
.card-wrapper .media {
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
  background: linear-gradient(155deg, #e7edf1 0%, #d7e1e8 55%, #c7d5df 100%);
}

/* Studio light source from top-left at 30% 25% */
.p-card-img::after,
.product-card .media::after,
.card__media::after,
.card-wrapper .media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%);
  transition: opacity 0.35s ease;
}

.p-card:hover .p-card-img::after,
.product-card:hover .media::after,
.card-wrapper:hover .card__media::after {
  opacity: 0.15;
}

.p-card-img img,
.p-card img,
.product-card .media img,
.product-card img,
.card__media img,
.card-wrapper .media img,
.card-wrapper img,
.card img,
.card-product img,
.multicolumn-card__image-wrapper img,
.multicolumn-grid-item-image img,
.multicolumn-card img,
.collection-card img,
.article-card img,
.product-media-component img,
.product__media img,
.product__media-item img,
.product__media-wrapper img,
.product__media-container img,
.product-media-container img,
.product__modal-opener img,
.main-product--section .media img,
.product-main-top-section .media img,
.thumbnail img,
.thumbnail-list img,
.product-gallery img,
.product-single__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 700ms ease-out !important; /* [PERF-03] Was 'all' — compositor-only now, no layout/paint cost */
}

.p-card:hover .p-card-img img,
.p-card:hover img,
.product-card:hover .media img,
.product-card:hover img,
.card-wrapper:hover .card__media img,
.card-wrapper:hover .media img,
.card-wrapper:hover img,
.card:hover .card__media img,
.card:hover img,
.card-product:hover img,
.multicolumn-card:hover img,
.multicolumn-grid-item-image:hover img,
.collection-card:hover img,
.article-card:hover img,
.product-media-component:hover img,
.product__media:hover img,
.product__media-item:hover img,
.product__media-wrapper:hover img,
.product__media-container:hover img,
.product-media-container:hover img,
.product__modal-opener:hover img,
.main-product--section .media:hover img,
.product-main-top-section .media:hover img,
.thumbnail:hover img,
.thumbnail-list__item:hover img,
.product-gallery:hover img,
.product-single__media:hover img {
  transform: scale(1.05);
}

/* 3. INPUT FIELDS, SELECTS, & LABELS */
.field__input,
.select__select,
.customer .field input,
.customer select,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='number'],
textarea,
select {
  border-radius: 0 !important; /* Sharp 1px borders */
  border: 1px solid var(--line) !important;
  background-color: var(--white) !important;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color 0.35s ease;
}

.field__input:focus,
.field__input:active,
.select__select:focus,
.select__select:active,
.customer .field input:focus,
.customer select:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
  border-color: var(--ink) !important;
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
input[type='text']:focus-visible,
input[type='email']:focus-visible,
input[type='password']:focus-visible,
input[type='tel']:focus-visible,
input[type='number']:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0.2rem solid var(--color-primary) !important;
  outline-offset: 0.2rem;
  box-shadow: none;
}

.form__label,
.field__label,
.product-form__input .form__label,
.customer .field label,
label.form__label {
  font-family: var(--font-ui); /* was 'ivyora-text' — fixed to Adamina per DESIGN.md UI label spec (R6) */
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted); /* was var(--brass) which is now Refined Midnight — muted steel is correct for labels */
  display: block;
  margin-bottom: 8px;
}

/* 4. CHIPS & TAGS */
.subcat-pill,
.filter-btn,
.active-chip,
.chip,
.tag,
.badge,
.p-card-tag,
.variant-pill {
  border-radius: 0 !important; /* Sharp edges */
  border: 1px solid var(--line);
  background: var(--pale-wash);
  color: var(--ink);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.subcat-pill:hover,
.filter-btn:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.subcat-pill.active,
.filter-btn.active,
.active-chip,
.chip.active,
.tag.active {
  background: var(--pale-wash) !important;
  border-color: var(--marine) !important;
  color: var(--marine) !important;
  font-weight: 600;
}
/* CSS Easing and Intent-Lock Transition Rule */
.mega-menu-panel {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.995);
  transform-origin: top center;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 280ms;
}

/* [MAINT-05] :focus-within added — keyboard users can now open the mega menu (WCAG 2.1 AA SC 2.1.1) */
.navigation-trigger:hover .mega-menu-panel,
.navigation-trigger:focus-within .mega-menu-panel {
  opacity: 1;
  visibility: visible;
}

/* Accessible touch standards on smaller items */
.mobile-nav-node {
  min-height: 48px;
  padding-top: 11px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
}
.cta-underline {
  position: relative;
}
.cta-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.cta-underline:hover::after {
  transform: scaleX(0);
}

/* Horizon Divider Component */
.horizon-divider {
  position: relative;
  width: 100%;
  max-width: 1320px;
  height: 1px;
  margin: 32px auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--marine) 15%,
    var(--brass) 50%,
    var(--marine) 85%,
    transparent 100%
  );
  opacity: 0.5;
}

.horizon-divider::before,
.horizon-divider::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  background-color: var(--brass);
  transform: translateY(-50%);
}

.horizon-divider::before {
  left: 15%;
}

.horizon-divider::after {
  right: 15%;
}

/* Mobile PDP Responsive Padding Alignment (< 750px) */
@media screen and (max-width: 749px) {
  .main-product--section .product-main-top-section,
  .product-main-top-section {
    padding-left: var(--page-margin-mobile, 20px) !important;
    padding-right: var(--page-margin-mobile, 20px) !important;
    box-sizing: border-box !important;
  }
}

/* NOTE: !important overrides in the master component block above are intentional.
   This is a Shopify theme pattern — they ensure HB styles win over theme-injected CSS.
   Any future overrides will also require !important. (R8) */
.product-form__submit {
  background-color: var(--btn-primary-bg) !important; /* E5: was #0f2d46, now uses token */
}
.product-form__submit:hover {
  background-color: var(--btn-primary-hover) !important; /* E5: was locked to same as resting state, now uses hover token */
}
/* [MAINT-03] Responsive breakpoints added — was hardcoded 80px with no mobile override (caused PDP content overflow on mobile) */
.product-main-section-layout-standard,
.product-main-info-section {
  padding-left: var(--page-margin-mobile, 20px);
}
@media screen and (min-width: 750px) {
  .product-main-section-layout-standard,
  .product-main-info-section {
    padding-left: 40px;
  }
}
@media screen and (min-width: 1025px) {
  .product-main-section-layout-standard,
  .product-main-info-section {
    padding-left: 80px;
  }
}
.product-media-component {
  max-width: 800px;
  overflow: hidden;
}

/* Product Detail Page (PDP) Image Hover Transitions */
.product-media-component,
.main-product--section .media,
.product-main-top-section .media,
.product__media,
.product__media-item,
.product__media-wrapper,
.product__media-container,
.product-media-container,
.product__modal-opener,
.thumbnail-list__item,
.thumbnail {
  overflow: hidden;
}

.product-media-component img,
.main-product--section .media img,
.main-product--section img,
.product-main-top-section .media img,
.product-main-top-section img,
.product__media img,
.product__media-item img,
.product__media-wrapper img,
.product__media-container img,
.product-media-container img,
.product__modal-opener img,
.thumbnail-list img,
.thumbnail img,
.product-gallery img,
.product-single__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 700ms ease-out !important; /* [PERF-03] Was 'all' */
}

.product-media-component:hover img,
.main-product--section .media:hover img,
.main-product--section:hover .product-media-component img,
.product-main-top-section .media:hover img,
.product__media:hover img,
.product__media-item:hover img,
.product__media-wrapper:hover img,
.product__media-container:hover img,
.product-media-container:hover img,
.product__modal-opener:hover img,
.thumbnail-list__item:hover img,
.thumbnail:hover img,
.product-gallery:hover img,
.product-single__media:hover img {
  transform: scale(1.05);
}


.link-label {
  color: var(--text-muted);
}
.link-label:hover {
  color: var(--text-accent);
}

.price-item {
  color: #1A2432 !important;
  font-family: "ivyora-text", Georgia, serif !important;
  padding-bottom: 10px;
}

.product__tax {
  color: #A9803E !important;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.quantity__label {
  font-size: 11px;
  font-family: "ivyora-text", Georgia, serif !important;
  letter-spacing: 0.1em;
}
.swatch-option-name {
  font-size: 11px;
  font-family: "ivyora-text", Georgia, serif !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Creates a transparent hover bridge between the navigation link and dropdown menu */
.header-nav-desktop-dd-panel::before {
  content: "";
  position: absolute;
  top: -20px; /* Bridge the invisible gap between header link and panel */
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

.footer-newsletter-legal-note {
  font-size: 11px !important;
  color: #ffffffa6 !important;
  letter-spacing: 0.05em !important;
}

.footer-block-linklist-column {
  font-family: 'Adamina', Georgia, serif !important;
  font-size: 11px !important;
  color: #ffffffa6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.footer-linklist-heading {
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-size: 12px !important;
  font-family: 'Adamina', Georgia, serif !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.sub-footer-copyright{
  color: #ffffff !important;
  font-family: 'ivyora-text', Georgia, serif !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
}
.dd-nav-column-heading {
  color: var(--portugal-terracotta, #1A1D20 !important;
  font-size: 11px !important;
  font-family: 'Adamina', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding-top: 10px !important;
}

/* ==========================================================================
   HAMPTONS BLUE DESIGN SYSTEM UTILITIES (hb-design-system.md Aligned)
   ========================================================================== */

/* Spacing Variables from hb-design-system.md */
:root {
  --gutter: 1.5rem;
  --gutter-desktop: 2.5rem;
  --gutter-mobile: 1.25rem;
  --margin: 1.25rem;
  --margin-desktop: 4rem;
  --margin-mobile: 1.25rem;
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2.25rem;
  --space-xl: 4rem;
}

/* Flexbox & Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }

/* Grid & Columns */
.tw-grid { display: grid; }
.tw-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
.gap-gutter {
  gap: var(--gutter, 1.5rem);
}
@media (min-width: 1024px) {
  .gap-gutter {
    gap: var(--gutter-desktop, 2.5rem);
  }
}
.gap-2 { gap: 0.5rem; }
.gap-space-sm { gap: var(--space-sm, 0.75rem); }

/* Aspect Ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[4\/5\],
[class*="aspect-[4/5]"] {
  aspect-ratio: 4 / 5 !important;
}

/* Backgrounds & Colors */
.bg-white { background-color: var(--white, #ffffff); }
.bg-percale { background-color: var(--percale-white, #FDFBF7); }
.bg-sand-linen { background-color: var(--sand-linen, #F3EFEA); }
.bg-surface { background-color: var(--color-surface, #F9F9FE); }
.text-ink { color: var(--charcoal-ink, #1A1D20); }
.text-marine { color: var(--mill-blue-deep, #08376B); }
.text-muted { color: var(--slate-graphite, #4E555C); }

/* Borders & Spacing */
.border { border: 1px solid var(--shingle-stone, #E3DCD1); }
.border-line { border-color: var(--shingle-stone, #E3DCD1); }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-line\/60,
[class*="border-line/60"] {
  border-color: rgba(227, 220, 209, 0.6);
}
.pt-space-xs { padding-top: var(--space-xs, 0.375rem); }
.p-4 { padding: 1rem; }
.p-space-md { padding: var(--space-md, 1.25rem); }

/* Gradient Overlays */
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops, transparent));
}
.from-ink\/30,
[class*="from-ink/30"] {
  --tw-gradient-from: rgba(26, 29, 32, 0.35);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-stops: var(--tw-gradient-from, rgba(26, 29, 32, 0.35)), transparent, var(--tw-gradient-to, transparent);
}
.to-transparent {
  --tw-gradient-to: transparent;
}

/* Typography */
.font-title-card {
  font-family: 'loretta-display', Georgia, serif !important;
}
.text-title-card {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
.tracking-tight {
  letter-spacing: -0.01em !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-normal {
  font-weight: 400 !important;
}

/* Transitions & Animations */
.transition-all { transition-property: all; }
.transition-transform { transition-property: transform; }
.transition-opacity { transition-property: opacity; }
.transition-colors { transition-property: color, background-color, border-color; }
.duration-300 { transition-duration: 300ms; }
.duration-700 { transition-duration: 700ms; }
.opacity-0 { opacity: 0; }

/* Group Hover Utilities */
.group:hover .group-hover\:opacity-100,
.group:hover [class*="group-hover:opacity-100"] {
  opacity: 1 !important;
}
.group:hover .group-hover\:scale-105,
.group:hover [class*="group-hover:scale-105"],
.multicolumn-grid-item-image:hover img,
.group:hover .multicolumn-grid-item-image img {
  transform: scale(1.05);
}
.group:hover .group-hover\:text-marine,
.group:hover [class*="group-hover:text-marine"] {
  color: var(--marine, #1B3A5C) !important;
}
.hover\:shadow-lg {
  transition: box-shadow 300ms ease, border-color 300ms ease;
}
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 25px -5px rgba(15, 29, 46, 0.1), 0 8px 10px -6px rgba(15, 29, 46, 0.05);
}

/* Grid Cards & Icon Badges Utilities */
.p-8 {
  padding: 2rem !important;
}
.space-y-4 > * + * {
  margin-top: 1rem !important;
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow-md,
.hover\:shadow-md {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:shadow-md:hover,
[class*="hover:shadow-md"]:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}
.transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 300ms !important;
}
.w-10 {
  width: 2.5rem !important;
}
.h-10 {
  height: 2.5rem !important;
}
.bg-pale-wash {
  background-color: var(--pale-wash, #DCE6EE) !important;
}
.shopping-info-item .w-10.h-10 svg,
.shopping-info-item .w-10.h-10 .icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--marine, #1B3A5C) !important;
  fill: currentColor !important;
}

/* Product Grid Sections Background */
.product-grid-section,
.featured-collection-section,
.product-grid-container,
.main-collection-product-grid-section,
.section-related-products,
.related-products {
  background-color: #ffffff !important;
}