*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    background-color: var(--sl-ivory);
    color: var(--sl-charcoal);
    font-family: var(--sl-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Native/instant, not smooth: a global smooth-scroll makes the browser
       animate every single wheel/trackpad tick, and rapid successive
       ticks (ordinary fast scrolling) each restart or fight that
       animation — reading as laggy, resistant scrolling site-wide. No
       anchor-scroll feature in this theme relies on this being smooth
       (confirmed: nothing calls scrollIntoView() or scrolls to a hash),
       so there's no targeted replacement needed. */
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
/* ── Header ── */
.sl-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    color: var(--sl-header-text, #211E1A);
    background-color: var(--sl-header-bg, #F7F2EA);
    background-color: color-mix(
      in srgb,
      var(--sl-header-bg, #F7F2EA) calc(var(--sl-header-opacity, 0.96) * 100%),
      transparent
    );
    backdrop-filter: var(--sl-header-blur, blur(10px));
    -webkit-backdrop-filter: var(--sl-header-blur, blur(10px));
    border-bottom: 1px solid var(--sl-header-border, #DED6CA);
    box-shadow: none;
  }
.sl-site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    -moz-column-gap: clamp(1.5rem, 3vw, 3.5rem);
         column-gap: clamp(1.5rem, 3vw, 3.5rem);
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
    height: var(--sl-header-height-desktop, 66px);
    min-width: 0;
  }
.sl-site-header__left,
  .sl-site-header__right {
    display: flex;
    align-items: center;
    min-width: 0;
  }
.sl-site-header__left {
    display: none;
  }
.sl-site-header__right {
    justify-content: flex-end;
  }
.sl-header-menu-toggle,
  .sl-header-bag {
    color: var(--sl-header-text, #211E1A);
  }
.sl-header-menu-toggle {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
.sl-header-menu-toggle__mark {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
  }
.sl-header-menu-toggle__bar {
    display: block;
    width: var(--sl-header-hamburger-size, 21px);
    height: 1px;
    background: currentColor;
    border-radius: 0.5px;
  }
.sl-header-menu-toggle__bar:last-child {
    width: calc(var(--sl-header-hamburger-size, 21px) * 0.72);
  }
.sl-header-menu-toggle__label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--sl-font-sans);
    line-height: 1;
  }
.sl-header-menu-toggle:hover,
  .sl-header-bag:hover {
    opacity: 0.68;
  }
.sl-header-menu-toggle:focus-visible,
  .sl-header-bag:focus-visible,
  .sl-menu-drawer__close:focus-visible,
  .sl-menu-drawer__nav a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sl-header-text, #211E1A) 72%, var(--sl-header-bg, #F7F2EA));
    outline-offset: 4px;
  }
.sl-header-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: start;
    min-width: 0;
    height: 100%;
  }
.sl-header-brand a,
  .sl-header-brand .custom-logo-link {
    font-family: var(--sl-font-serif);
    font-size: 22px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sl-header-text, #211E1A);
    font-weight: 600;
    transition: opacity 0.2s ease;
    text-decoration: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
  }
.sl-header-brand .custom-logo-link,
  .sl-header-brand__text-link,
  .sl-header-brand__logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
.sl-header-brand .custom-logo-link:hover,
  .sl-header-brand__text-link:hover {
    opacity: 1;
  }
.sl-header-brand__text {
    display: block;
    color: var(--sl-header-text, #211E1A);
    font-size: var(--sl-header-logo-size, 22px);
    letter-spacing: 0.22em;
    font-weight: 600;
    line-height: 1;
    filter: none;
    transform: none;
  }
.sl-header-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 54px;
    opacity: 1;
    filter: none;
    transform: none;
    will-change: auto;
    image-rendering: auto;
  }
/* ── Primary Nav ── */
.sl-primary-nav {
    min-width: 0;
    justify-self: center;
  }
.sl-primary-nav__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
.sl-primary-nav__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-header-text, #211E1A);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }
.sl-primary-nav__menu a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.24s ease;
  }
.sl-primary-nav__menu a:hover {
    opacity: 0.68;
  }
.sl-primary-nav__menu a:hover::after,
  .sl-primary-nav__menu a:focus-visible::after,
  .sl-primary-nav__menu .current-menu-item > a::after,
  .sl-primary-nav__menu .current_page_item > a::after {
    transform: scaleX(1);
    transform-origin: left;
  }
.sl-primary-nav__menu a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sl-header-text, #211E1A) 72%, var(--sl-header-bg, #F7F2EA));
    outline-offset: 3px;
  }
/* ── Hero ── */
.sl-header-bag {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    position: relative;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
.sl-header-bag__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
.sl-header-bag__icon {
    width: var(--sl-header-bag-size, 24px);
    height: var(--sl-header-bag-size, 24px);
    display: block;
  }
.sl-header-bag__label {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
.sl-header-bag__count {
    position: absolute;
    top: -4px;
    right: -7px;
  }
@media (max-width: 1023px) {
    .sl-site-header__inner {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      -moz-column-gap: 0;
           column-gap: 0;
      height: var(--sl-header-height-mobile, 62px);
    }

    .sl-site-header__left {
      display: flex;
      justify-content: flex-start;
    }

    .sl-header-menu-toggle {
      display: inline-flex;
    }

    .sl-header-brand {
      justify-self: center;
    }

    .sl-primary-nav {
      display: none;
    }

    .sl-header-brand a,
    .sl-header-brand .custom-logo-link {
      letter-spacing: 0.17em;
    }

    .sl-header-brand img,
    .sl-header-brand .custom-logo {
      display: block;
      height: auto;
      width: auto;
      max-width: 108px;
      max-height: 50px;
      transform: none;
      filter: none;
      opacity: 1;
      will-change: auto;
      image-rendering: auto;
      -o-object-fit: contain;
         object-fit: contain;
    }

    .sl-header-bag__label {
      display: none;
    }

    .sl-header-menu-toggle__label {
      display: none;
    }
  }
/* ── Homepage hero header overlay ─────────────────────────
     Front page only: header starts transparent over the hero
     video and gains its ivory/frosted surface once scrolled. */
body.home.sl-hero-transparent-header-enabled .sl-main.sl-home,
  body.front-page.sl-hero-transparent-header-enabled .sl-main.sl-home {
    margin-top: calc(-1 * (var(--sl-header-height-desktop, 66px) + 1px));
  }
@media (max-width: 1023px) {
    body.home.sl-hero-transparent-header-enabled .sl-main.sl-home,
    body.front-page.sl-hero-transparent-header-enabled .sl-main.sl-home {
      margin-top: calc(-1 * (var(--sl-header-height-mobile, 62px) + 1px));
    }
  }
body.home .sl-site-header,
  body.front-page .sl-site-header {
    transition: background-color 320ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease;
  }
body.home.sl-hero-transparent-header-enabled .sl-site-header:not(.sl-header--scrolled),
  body.front-page.sl-hero-transparent-header-enabled .sl-site-header:not(.sl-header--scrolled) {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }
body.home.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-light .sl-site-header:not(.sl-header--scrolled) :is(.sl-header-menu-toggle, .sl-header-bag, .sl-header-brand a, .sl-header-brand .custom-logo-link, .sl-header-brand__text, .sl-primary-nav__menu a),
  body.front-page.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-light .sl-site-header:not(.sl-header--scrolled) :is(.sl-header-menu-toggle, .sl-header-bag, .sl-header-brand a, .sl-header-brand .custom-logo-link, .sl-header-brand__text, .sl-primary-nav__menu a) {
    color: #F7F2EA;
    transition: color 320ms ease;
  }
body.home.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-dark .sl-site-header:not(.sl-header--scrolled) :is(.sl-header-menu-toggle, .sl-header-bag, .sl-header-brand a, .sl-header-brand .custom-logo-link, .sl-header-brand__text, .sl-primary-nav__menu a),
  body.front-page.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-dark .sl-site-header:not(.sl-header--scrolled) :is(.sl-header-menu-toggle, .sl-header-bag, .sl-header-brand a, .sl-header-brand .custom-logo-link, .sl-header-brand__text, .sl-primary-nav__menu a) {
    color: var(--sl-header-text, #211E1A);
    transition: color 320ms ease;
  }
body.home.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-light .sl-site-header:not(.sl-header--scrolled) .sl-header-brand img,
  body.front-page.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-light .sl-site-header:not(.sl-header--scrolled) .sl-header-brand img {
    filter: brightness(0) invert(1);
    transition: filter 320ms ease;
  }
body.home.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-dark .sl-site-header:not(.sl-header--scrolled) .sl-header-brand img,
  body.front-page.sl-hero-transparent-header-enabled.sl-hero-transparent-header-tone-dark .sl-site-header:not(.sl-header--scrolled) .sl-header-brand img {
    filter: none;
    transition: filter 320ms ease;
  }
body.home.sl-hero-transparent-header-enabled .sl-site-header.sl-header--scrolled,
  body.front-page.sl-hero-transparent-header-enabled .sl-site-header.sl-header--scrolled {
    background-color: color-mix(in srgb, var(--sl-header-bg, #F7F2EA) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(43, 36, 31, 0.08);
    border-bottom-color: var(--sl-header-border, #DED6CA);
  }
.sl-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-color: var(--sl-ivory);
    padding: var(--sl-section-pad) var(--sl-gutter);
    text-align: center;
  }
.sl-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
  }
.sl-hero__eyebrow {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 1.875rem;
  }
.sl-hero__heading {
    font-family: var(--sl-font-serif);
    font-size: clamp(2.625rem, 6.5vw, 4.75rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--sl-charcoal);
    margin-bottom: 1.875rem;
    letter-spacing: -0.015em;
  }
.sl-hero__sub {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--sl-stone);
    margin-bottom: 2.75rem;
    max-width: 500px;
  }
/* ── Button ── */
.sl-btn {
    display: inline-block;
    padding: 0.9rem 2.625rem;
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sl-ivory);
    background-color: var(--sl-charcoal);
    border: 1px solid var(--sl-charcoal);
    transition: background-color 0.28s ease, color 0.28s ease;
    cursor: pointer;
  }
.sl-btn:hover {
    background-color: transparent;
    color: var(--sl-charcoal);
  }
/* ── Editorial Section ── */
.sl-editorial {
    padding: var(--sl-section-pad) var(--sl-gutter);
    background-color: var(--sl-white);
  }
.sl-editorial__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
/* ── Section Header ── */
.sl-section-header {
    margin-bottom: 4rem;
    text-align: center;
  }
.sl-section-header__label,
  .sl-section-heading__eyebrow {
    display: block;
    margin: 0 0 1.25rem;
    font-family: var(--sl-font-sans);
    font-size: var(--sl-section-eyebrow-size-mobile, 0.625rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--sl-section-eyebrow-color, var(--sl-stone));
  }
.sl-section-header__title,
  .sl-section-heading__title {
    margin: 0;
    font-family: var(--sl-font-serif);
    font-size: var(--sl-section-heading-size-mobile, clamp(1.875rem, 3.5vw, 2.875rem));
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--sl-section-heading-color, var(--sl-charcoal));
  }
/* ── Editorial Grid ── */
.sl-editorial__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px;
  }
/* ── Card ── */
.sl-card {
    background-color: var(--sl-warm-gray);
    overflow: hidden;
  }
.sl-card__media {
    aspect-ratio: 4 / 5;
    background-color: var(--sl-taupe);
    opacity: 0.28;
    transition: opacity 0.45s ease;
  }
.sl-card:hover .sl-card__media {
    opacity: 0.42;
  }
.sl-card__body {
    padding: 1.5rem 1.5rem 1.875rem;
  }
.sl-card__name {
    font-family: var(--sl-font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
  }
.sl-card__note {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--sl-stone);
  }
/* ── Post Loop ── */
.sl-loop {
    padding: var(--sl-section-pad) var(--sl-gutter);
    background-color: var(--sl-ivory);
  }
.sl-loop__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    display: grid;
    gap: 3rem;
  }
.sl-post {
    border-bottom: 1px solid var(--sl-border);
    padding-bottom: 3rem;
  }
.sl-post:last-child {
    border-bottom: none;
  }
.sl-post__title {
    font-family: var(--sl-font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.875rem;
    letter-spacing: -0.01em;
  }
.sl-post__title a {
    transition: color 0.2s ease;
  }
.sl-post__title a:hover {
    color: var(--sl-stone);
  }
.sl-post__excerpt {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
  }
/* ── Footer ── */
.sl-footer {
    padding: 2.75rem var(--sl-gutter);
    border-top: 1px solid var(--sl-border);
    background-color: var(--sl-ivory);
  }
/* ═══════════════════════════════════════════════════════════
     PHASE 2 — WooCommerce
  ═══════════════════════════════════════════════════════════ */
/* ── WooCommerce Notices ── */
.sl-wc-notices {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: 1rem var(--sl-gutter) 0;
  }
.woocommerce-message a.\!button,
  .woocommerce-info a.\!button {
    font-size: 0.65rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--sl-charcoal) !important;
    border-bottom: 1px solid var(--sl-charcoal) !important;
    padding-bottom: 1px !important;
    margin-left: 1rem !important;
    background: none !important;
    box-shadow: none !important;
  }
.woocommerce-message a.button,
  .woocommerce-info a.button {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-charcoal);
    border-bottom: 1px solid var(--sl-charcoal);
    padding-bottom: 1px;
    margin-left: 1rem;
    background: none;
    box-shadow: none;
  }
.woocommerce-message a.\!button,
  .woocommerce-info a.\!button {
    font-size: 0.65rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--sl-charcoal) !important;
    border-bottom: 1px solid var(--sl-charcoal) !important;
    padding-bottom: 1px !important;
    margin-left: 1rem !important;
    background: none !important;
    box-shadow: none !important;
  }
/* ── Shop Hero ── */
.sl-shop-hero {
    background-color: var(--sl-ivory);
    padding: clamp(3rem, 6vw, 6rem) var(--sl-gutter) clamp(2.5rem, 5vw, 5rem);
    text-align: center;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-shop-hero__inner {
    max-width: 680px;
    margin: 0 auto;
  }
.sl-shop-hero__eyebrow {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 1.25rem;
  }
.sl-shop-hero__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--sl-charcoal);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
  }
.sl-shop-hero__desc {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
    margin-bottom: 0.875rem;
  }
.sl-shop-hero__sub {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--sl-taupe);
  }
/* ── Filter Bar ── */
.sl-shop-bar {
    border-bottom: 1px solid var(--sl-border);
    background-color: var(--sl-white);
  }
.sl-shop-bar__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: 0.875rem var(--sl-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
/* ── Product Grid ── */
.sl-shop-grid-section {
    background-color: var(--sl-white);
    padding: clamp(2.5rem, 5vw, 5rem) var(--sl-gutter);
  }
.sl-shop-grid-inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    list-style: none;
    padding: 0;
    margin: 0 0 4rem;
  }
@media (min-width: 1400px) {
    .sl-product-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
@media (max-width: 900px) {
    .sl-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (max-width: 560px) {
    .sl-product-grid {
      grid-template-columns: 1fr;
    }
  }
/* ── Product Card ── */
.sl-pcard {
    display: flex;
    flex-direction: column;
  }
.sl-pcard__image-link {
    display: block;
    overflow: hidden;
  }
.sl-pcard__media {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: var(--sl-warm-gray);
    overflow: hidden;
  }
.sl-pcard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
.sl-pcard__img--primary {
    z-index: 1;
  }
.sl-pcard__img--hover {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
.sl-pcard:hover .sl-pcard__img--hover {
    opacity: 1;
  }
.sl-pcard__img-el {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
  }
.sl-pcard:hover .sl-pcard__img--primary .sl-pcard__img-el {
    transform: scale(1.04);
  }
.sl-pcard__no-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sl-warm-gray);
  }
.sl-pcard__no-image span {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-taupe);
  }
.sl-pcard__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-charcoal);
    background-color: var(--sl-ivory);
    padding: 0.25rem 0.5rem;
  }
.sl-pcard__body {
    padding: 1.125rem 0 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
.sl-pcard__title {
    font-family: var(--sl-font-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
.sl-pcard__title a {
    transition: color 0.2s ease;
  }
.sl-pcard__title a:hover {
    color: var(--sl-stone);
  }
.sl-pcard__price {
    margin-bottom: 0.625rem;
  }
.sl-pcard__price .price {
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    font-weight: 400;
  }
.sl-pcard__price .price del {
    color: var(--sl-taupe);
    margin-right: 0.375rem;
    font-weight: 400;
  }
.sl-pcard__price .price ins {
    text-decoration: none;
    color: var(--sl-charcoal);
  }
.sl-pcard__link {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-stone);
    border-bottom: 1px solid transparent;
    width: -moz-fit-content;
    width: fit-content;
    transition: color 0.2s ease, border-color 0.2s ease;
    padding-bottom: 1px;
    margin-top: auto;
  }
.sl-pcard:hover .sl-pcard__link {
    color: var(--sl-charcoal);
    border-bottom-color: var(--sl-charcoal);
  }
.sl-pcard__add {
    position: relative;
  }
.sl-pcard__add.loading,
  .sl-pcard__add[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
  }
.sl-pcard__add.loading::after,
  .single_add_to_cart_button.loading::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.5rem;
    border: 1px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    vertical-align: -0.1em;
    animation: sl-cart-spin 0.7s linear infinite;
  }
.sl-pcard__add.added {
    color: var(--sl-color-accent);
    border-bottom-color: var(--sl-color-accent);
  }
.sl-pcard .added_to_cart.wc-forward {
    display: none;
  }
@keyframes sl-cart-spin {
    to { transform: rotate(360deg); }
  }
/* ── Empty State ── */
.sl-shop-empty {
    text-align: center;
    padding: clamp(4rem, 8vw, 8rem) 1rem;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
.sl-shop-empty__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.375rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
  }
.sl-shop-empty__text {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
  }
/* ── Pagination ── */
.sl-pagination {
    margin-top: 1rem;
    text-align: center;
  }
.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
.woocommerce-pagination ul li a,
  .woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--sl-stone);
    border: 1px solid var(--sl-border);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
.woocommerce-pagination ul li a:hover {
    background-color: var(--sl-charcoal);
    color: var(--sl-ivory);
    border-color: var(--sl-charcoal);
  }
.woocommerce-pagination ul li span.current {
    background-color: var(--sl-charcoal);
    color: var(--sl-ivory);
    border-color: var(--sl-charcoal);
  }
.woocommerce-pagination ul li span.\!current {
    background-color: var(--sl-charcoal) !important;
    color: var(--sl-ivory) !important;
    border-color: var(--sl-charcoal) !important;
  }
/* ── Single Product Page ── */
.sl-single {
    background-color: var(--sl-ivory);
  }
.sl-single__notices {
    padding-top: 2rem;
  }
.sl-product {
    display: flex;
    flex-direction: column;
  }
/* 50/50 Split */
.sl-product__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 6rem);
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: clamp(2.5rem, 4vw, 4.5rem) var(--sl-gutter);
    align-items: start;
  }
@media (max-width: 860px) {
    .sl-product__layout {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }
/* ── Gallery ── */
.sl-gallery {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
.sl-gallery__primary {
    width: 100%;
    background-color: var(--sl-warm-gray);
    overflow: hidden;
  }
.sl-gallery__primary-img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.sl-gallery__stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
.sl-gallery__thumb {
    background-color: var(--sl-warm-gray);
    overflow: hidden;
  }
.sl-gallery__thumb-img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
.sl-gallery__thumb:hover .sl-gallery__thumb-img {
    transform: scale(1.03);
  }
.sl-gallery__empty {
    aspect-ratio: 4 / 5;
    background-color: var(--sl-warm-gray);
    display: flex;
    align-items: center;
    justify-content: center;
  }
.sl-gallery__empty span {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-taupe);
  }
/* ── Metadata Column ── */
.sl-product__meta-col {
    min-width: 0;
  }
.sl-product__meta-sticky {
    position: sticky;
    top: calc(72px + 2rem);
  }
@media (max-width: 860px) {
    .sl-product__meta-sticky {
      position: static;
    }
  }
.sl-product__eyebrow {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 0.875rem;
    transition: color 0.2s ease;
  }
.sl-product__eyebrow:hover {
    color: var(--sl-charcoal);
  }
.sl-product__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.625rem, 2.75vw, 2.375rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--sl-charcoal);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
  }
.sl-product__price {
    margin-bottom: 1.375rem;
  }
.sl-product__price .price {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: 0.01em;
  }
.sl-product__price .price del {
    font-size: 0.9375rem;
    color: var(--sl-taupe);
    margin-right: 0.5rem;
  }
.sl-product__price .price ins {
    text-decoration: none;
  }
.woocommerce-variation-price .price {
    font-size: 1.125rem;
    color: var(--sl-charcoal);
  }
.sl-product__short-desc {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sl-stone);
    margin-bottom: 1.75rem;
    border-top: 1px solid var(--sl-border);
    padding-top: 1.25rem;
  }
.sl-product__short-desc p {
    margin-bottom: 0.75em;
  }
.sl-product__short-desc p:last-child {
    margin-bottom: 0;
  }
/* ── Add to Cart Area ── */
.sl-product__atc {
    margin-bottom: 1.25rem;
  }
/* Variation table */
.variations .label {
    padding: 0 0 0.375rem;
  }
.variations .label label {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
  }
.variations .value {
    padding: 0;
  }
/* Quantity */
.quantity {
    display: none;
  }
.cart .quantity {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
  }
.quantity .qty {
    width: 64px;
    height: 48px;
    border: 1px solid var(--sl-border);
    background-color: var(--sl-white);
    color: var(--sl-charcoal);
    font-size: 0.9375rem;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease;
  }
.quantity .qty::-webkit-outer-spin-button,
  .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
.quantity .qty:focus-visible {
    border-color: var(--sl-charcoal);
  }
/* Add to Cart Button */
.single_add_to_cart_button.button,
  button.single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 1.0625rem 2rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sl-ivory);
    background-color: var(--sl-charcoal);
    border: 1px solid var(--sl-charcoal);
    cursor: pointer;
    transition: background-color 0.28s ease, color 0.28s ease;
    text-align: center;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    margin-top: 0.5rem;
  }
.single_add_to_cart_button.\!button {
    display: block !important;
    width: 100% !important;
    padding: 1.0625rem 2rem !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: var(--sl-ivory) !important;
    background-color: var(--sl-charcoal) !important;
    border: 1px solid var(--sl-charcoal) !important;
    cursor: pointer !important;
    transition: background-color 0.28s ease, color 0.28s ease !important;
    text-align: center !important;
    -moz-appearance: none !important;
         appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin-top: 0.5rem !important;
  }
.single_add_to_cart_button.button:hover,
  button.single_add_to_cart_button:hover {
    background-color: transparent;
    color: var(--sl-charcoal);
  }
.single_add_to_cart_button.\!button:hover {
    background-color: transparent !important;
    color: var(--sl-charcoal) !important;
  }
.single_add_to_cart_button.button:focus-visible,
  button.single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
.single_add_to_cart_button.\!button:focus-visible {
    outline: 2px solid var(--sl-stone) !important;
    outline-offset: 2px !important;
  }
.single_add_to_cart_button.button.loading,
  button.single_add_to_cart_button.loading {
    opacity: 0.65;
    pointer-events: none;
  }
.single_add_to_cart_button.\!button.loading {
    opacity: 0.65 !important;
    pointer-events: none !important;
  }
.single_add_to_cart_button.button.added,
  button.single_add_to_cart_button.added {
    opacity: 0.65;
  }
.single_add_to_cart_button.\!button.added {
    opacity: 0.65 !important;
  }
/* Out-of-stock state */
.stock.out-of-stock {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--sl-stone);
    margin-bottom: 1rem;
  }
/* ── Trust Notes ── */
.sl-product__trust {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--sl-border);
    margin-top: 0.25rem;
  }
.sl-product__trust li {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-stone);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.sl-product__trust li::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background-color: var(--sl-taupe);
    flex-shrink: 0;
  }
/* ── Accordions ── */
.sl-product__accordions-wrap {
    border-top: 1px solid var(--sl-border);
    background-color: var(--sl-white);
    padding: 0 var(--sl-gutter);
  }
.sl-product__accordions-inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-accordions {
    border-bottom: 1px solid var(--sl-border);
  }
.sl-accordion {
    border-top: 1px solid var(--sl-border);
  }
.sl-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.375rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--sl-charcoal);
    font-family: inherit;
    outline: none;
  }
.sl-accordion__trigger:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
.sl-accordion__trigger span {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sl-charcoal);
    transition: color 0.2s ease;
  }
.sl-accordion__trigger:hover span {
    color: var(--sl-stone);
  }
.sl-accordion__icon {
    flex-shrink: 0;
    color: var(--sl-stone);
    transition: transform 0.3s ease;
  }
.sl-accordion--open .sl-accordion__icon {
    transform: rotate(180deg);
  }
.sl-accordion__panel {
    overflow: hidden;
  }
.sl-accordion__panel[hidden] {
    display: none;
  }
.sl-accordion__content {
    padding-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
.sl-accordion__content p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--sl-stone);
  }
.sl-accordion__care-note {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--sl-stone);
    font-style: italic;
    border-top: 1px solid var(--sl-border);
    padding-top: 0.875rem;
    margin-top: 0.25rem;
  }
/* ── Specs Table ── */
.sl-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--sl-border);
  }
.sl-specs__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-specs__row:last-child {
    border-bottom: none;
  }
.sl-specs__label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-stone);
    padding: 0.75rem 1rem;
    background-color: var(--sl-warm-gray);
    border-right: 1px solid var(--sl-border);
    font-weight: 500;
  }
.sl-specs__value {
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    padding: 0.75rem 1rem;
    line-height: 1.6;
  }
/* ── Product Missing Fallback ── */
.sl-product-missing {
    max-width: 480px;
    margin: clamp(4rem, 10vw, 10rem) auto;
    text-align: center;
    padding: 0 var(--sl-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
.sl-product-missing p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sl-stone);
  }
/* ═══════════════════════════════════════════════════════════
     PHASE 3 — Cart Drawer, Cart Page, Checkout
  ═══════════════════════════════════════════════════════════ */
/* ── Header: cart trigger ── */
.sl-cart-trigger {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-header-text, #211E1A);
    font-weight: 500;
    transition: opacity 0.2s ease;
    text-decoration: none;
  }
.sl-cart-trigger:hover {
    opacity: 0.65;
  }
.sl-cart-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sl-header-count-size, 16px);
    height: var(--sl-header-count-size, 16px);
    padding: 0 4px;
    font-size: var(--sl-header-count-font-size, 9px);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sl-header-bg, #F7F2EA);
    background-color: color-mix(in srgb, var(--sl-header-text, #211E1A) 88%, transparent);
    border-radius: 999px;
    line-height: 1;
    transition: opacity 0.2s ease;
  }
.sl-cart-trigger__count[data-count="0"] {
    display: none;
  }
/* ── Drawer backdrop ── */
.sl-menu-drawer {
    position: fixed;
    inset: 0;
    z-index: 210;
    visibility: hidden;
    pointer-events: none;
  }
.sl-menu-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
  }
.sl-menu-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 30, 26, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
  }
.sl-menu-drawer.is-open .sl-menu-drawer__backdrop {
    opacity: 1;
  }
.sl-menu-drawer__surface {
    position: relative;
    z-index: 1;
    width: 380px;
    max-width: calc(100vw - 2rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
      var(--sl-header-bg, #F7F2EA);
    color: var(--sl-header-text, #211E1A);
    border-right: 1px solid var(--sl-header-border, #DED6CA);
    box-shadow: 16px 0 36px rgba(33, 30, 26, 0.08);
    transform: translateX(-100%);
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  }
.sl-menu-drawer.is-open .sl-menu-drawer__surface {
    transform: translateX(0);
  }
.sl-menu-drawer__header {
    min-height: var(--sl-header-height-desktop, 66px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--sl-header-border, #DED6CA);
  }
.sl-menu-drawer__brand {
    display: flex;
    align-items: center;
    min-width: 0;
  }
.sl-menu-drawer__brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    color: inherit;
  }
.sl-menu-drawer__brand-logo {
    display: block;
    width: auto;
    height: 32px;
    max-height: 36px;
    max-width: 160px;
  }
.sl-menu-drawer__brand-text {
    font-family: var(--sl-font-serif);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--sl-header-text, #211E1A);
  }
.sl-menu-drawer__close {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
  }
.sl-menu-drawer__close span {
    position: absolute;
    width: 18px;
    height: 1px;
    background: currentColor;
  }
.sl-menu-drawer__close span:first-child {
    transform: rotate(45deg);
  }
.sl-menu-drawer__close span:last-child {
    transform: rotate(-45deg);
  }
.sl-menu-drawer__nav {
    padding: 1.25rem 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
.sl-menu-drawer__accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--sl-header-border, #DED6CA) 76%, transparent);
  }
.sl-menu-drawer__group {
    border-bottom: 1px solid color-mix(in srgb, var(--sl-header-border, #DED6CA) 74%, transparent);
  }
.sl-menu-drawer__shop-all,
  .sl-menu-drawer__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sl-header-border, #DED6CA) 74%, transparent);
    background: transparent;
    font-family: var(--sl-font-serif);
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--sl-header-text, #211E1A);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
  }
.sl-menu-drawer__trigger {
    justify-content: space-between;
    gap: 1rem;
  }
.sl-menu-drawer__shop-all:hover,
  .sl-menu-drawer__trigger:hover {
    opacity: 0.66;
  }
.sl-menu-drawer__shop-all:focus-visible,
  .sl-menu-drawer__trigger:focus-visible,
  .sl-menu-drawer__sublink:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sl-header-text, #211E1A) 72%, var(--sl-header-bg, #F7F2EA));
    outline-offset: -2px;
  }
.sl-menu-drawer__chevron {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform 0.28s ease;
  }
.sl-menu-drawer__trigger[aria-expanded="true"] .sl-menu-drawer__chevron {
    transform: rotate(90deg);
  }
.sl-menu-drawer__panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.22s ease;
  }
.sl-menu-drawer__panel.is-open {
    opacity: 1;
  }
.sl-menu-drawer__panel[hidden] {
    display: none;
  }
.sl-menu-drawer__panel-inner {
    padding: 0.125rem 0 0.75rem;
  }
.sl-menu-drawer__sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0 0.4rem calc(0.75rem + var(--sl-drawer-link-depth, 0) * 0.75rem);
    font-family: var(--sl-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-header-text, #211E1A) 78%, var(--sl-header-bg, #F7F2EA));
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }
.sl-menu-drawer__sublink:hover {
    padding-left: calc(1rem + var(--sl-drawer-link-depth, 0) * 0.75rem);
    color: var(--sl-header-text, #211E1A);
  }
.sl-menu-drawer__sublink--view-all {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--sl-header-text, #211E1A) 60%, var(--sl-header-bg, #F7F2EA));
  }
.sl-menu-drawer__note {
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--sl-header-border, #DED6CA);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.7;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-header-text, #211E1A) 64%, var(--sl-header-bg, #F7F2EA));
  }
@media (max-width: 640px) {
    .sl-menu-drawer__surface {
      width: min(86vw, 340px);
      max-width: calc(100vw - 1rem);
    }

    .sl-menu-drawer__header {
      min-height: var(--sl-header-height-mobile, 60px);
    }

    .sl-menu-drawer__nav {
      padding: 1.5rem 1.25rem;
    }

    .sl-menu-drawer__note {
      padding-right: 1.25rem;
      padding-left: 1.25rem;
    }
  }
.sl-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(44, 44, 44, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
.sl-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
/* ── Drawer panel ── */
.sl-mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 380px);
    background-color: var(--sl-white);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--sl-border);
  }
.sl-mini-cart.is-open {
    transform: translateX(0);
  }
@media (min-width: 1024px) {
    .sl-mini-cart {
      width: 420px;
    }
  }
/* ── Drawer header ── */
.sl-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--sl-border);
    flex-shrink: 0;
  }
.sl-drawer-header__left {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
  }
.sl-drawer-title {
    font-family: var(--sl-font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: 0.01em;
  }
.sl-drawer-header__count {
    font-size: 0.6875rem;
    color: var(--sl-stone);
    letter-spacing: 0.06em;
  }
.sl-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sl-stone);
    transition: color 0.2s ease;
    flex-shrink: 0;
    outline: none;
  }
.sl-drawer-close:hover { color: var(--sl-charcoal); }
.sl-drawer-close:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
/* ── Error bar ── */
.sl-drawer-error {
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    color: #b91c1c;
    background-color: #fef2f2;
    border-bottom: 1px solid #fecaca;
    flex-shrink: 0;
  }
/* ── Scrollable items area ── */
.sl-drawer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.2s ease;
  }
.sl-drawer-scroll.is-loading {
    opacity: 0.45;
    pointer-events: none;
  }
/* ── Drawer item ── */
.sl-drawer-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--sl-border);
    position: relative;
    align-items: flex-start;
  }
.sl-drawer-item:last-child {
    border-bottom: none;
  }
.sl-drawer-item.is-removing {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
.sl-drawer-item__img-link,
  .sl-drawer-item__img {
    flex-shrink: 0;
    width: 72px;
    height: 90px;
    overflow: hidden;
    background-color: var(--sl-warm-gray);
    display: block;
  }
.sl-drawer-item__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.sl-drawer-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
  }
.sl-drawer-item__name {
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
.sl-drawer-item__name a {
    transition: color 0.2s ease;
  }
.sl-drawer-item__name a:hover { color: var(--sl-stone); }
.sl-drawer-item__meta {
    font-size: 0.75rem;
    color: var(--sl-stone);
    line-height: 1.55;
  }
.sl-drawer-item__meta dl { display: flex; flex-direction: column; gap: 0; }
.sl-drawer-item__meta dt { display: none; }
.sl-drawer-item__meta dd { margin: 0; }
.sl-drawer-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
/* Drawer qty controls */
.sl-drawer-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--sl-border);
    height: 32px;
  }
.sl-drawer-qty__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sl-charcoal);
    font-size: 1.125rem;
    transition: background-color 0.15s ease;
    outline: none;
    flex-shrink: 0;
  }
.sl-drawer-qty__btn:hover { background-color: var(--sl-warm-gray); }
.sl-drawer-qty__btn:focus-visible { outline: 2px solid var(--sl-stone); outline-offset: -2px; }
.sl-drawer-qty__val {
    font-size: 0.8125rem;
    color: var(--sl-charcoal);
    min-width: 28px;
    text-align: center;
    border-left: 1px solid var(--sl-border);
    border-right: 1px solid var(--sl-border);
    line-height: 32px;
    display: block;
  }
.sl-drawer-qty__solo {
    font-size: 0.75rem;
    color: var(--sl-stone);
    letter-spacing: 0.04em;
  }
.sl-drawer-item__price {
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    font-weight: 400;
    text-align: right;
  }
/* Remove button */
.sl-drawer-item__remove {
    position: absolute;
    top: 1.125rem;
    right: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sl-taupe);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    outline: none;
  }
.sl-drawer-item__remove:hover { color: var(--sl-charcoal); }
.sl-drawer-item__remove:focus-visible { outline: 2px solid var(--sl-stone); outline-offset: 2px; }
/* ── Drawer empty state ── */
.sl-drawer-empty {
    padding: 3rem 1.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
.sl-drawer-empty__title {
    font-family: var(--sl-font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--sl-charcoal);
  }
.sl-drawer-empty__text {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--sl-stone);
    max-width: 280px;
  }
.sl-drawer-empty__cta {
    margin-top: 0.5rem;
  }
/* Boost specificity so [hidden] beats display:flex on these drawer elements */
.sl-drawer-footer[hidden],
  .sl-drawer-empty[hidden] {
    display: none;
  }
.sl-cart-drawer--empty .sl-drawer-footer { display: none; }
.sl-cart-drawer--has-items #sl-drawer-empty-state { display: none; }
/* ── Drawer footer ── */
.sl-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sl-border);
    padding: 1.375rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--sl-white);
  }
.sl-drawer-subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
.sl-drawer-subtotal-label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-stone);
  }
#sl-drawer-subtotal {
    font-size: 1rem;
    color: var(--sl-charcoal);
    font-weight: 400;
  }
.sl-drawer-shipping-note {
    font-size: 0.6875rem;
    color: var(--sl-taupe);
    letter-spacing: 0.04em;
    text-align: center;
  }
.sl-drawer-checkout-btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.9375rem;
  }
.sl-drawer-bag-link {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-stone);
    text-align: center;
    display: block;
    transition: color 0.2s ease;
  }
.sl-drawer-bag-link:hover { color: var(--sl-charcoal); }
/* ─── Cart Page ──────────────────────────────────────────── */
.sl-cart {
    background-color: var(--sl-ivory);
    min-height: 70vh;
    padding: clamp(3rem, 6vw, 5rem) var(--sl-gutter);
  }
.sl-cart__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-cart__page-header {
    margin-bottom: 3rem;
    text-align: center;
  }
.sl-cart__eyebrow {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 0.75rem;
  }
.sl-cart__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
  }
/* 2-column layout */
.sl-cart__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
@media (max-width: 960px) {
    .sl-cart__layout { grid-template-columns: 1fr; }
  }
/* Items list */
.sl-cart__items-list {
    display: flex;
    flex-direction: column;
  }
/* Cart item */
.sl-cart-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--sl-border);
    align-items: flex-start;
  }
.sl-cart-item:first-child { border-top: 1px solid var(--sl-border); }
.sl-cart-item__img {
    flex-shrink: 0;
    width: 100px;
    height: 125px;
    background-color: var(--sl-warm-gray);
    overflow: hidden;
  }
.sl-cart-item__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.sl-cart-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.sl-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
  }
.sl-cart-item__info { flex: 1; min-width: 0; }
.sl-cart-item__name {
    font-family: var(--sl-font-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 0.25rem;
    line-height: 1.4;
  }
.sl-cart-item__name a { transition: color 0.2s ease; }
.sl-cart-item__name a:hover { color: var(--sl-stone); }
.sl-cart-item__meta {
    font-size: 0.8125rem;
    color: var(--sl-stone);
    line-height: 1.6;
    margin-bottom: 0.375rem;
  }
.sl-cart-item__meta dl { margin: 0; }
.sl-cart-item__meta dt { display: none; }
.sl-cart-item__meta dd { margin: 0; }
.sl-cart-item__unit-price {
    font-size: 0.875rem;
    color: var(--sl-stone);
  }
.sl-cart-item__remove-link {
    font-size: 1.125rem;
    color: var(--sl-taupe);
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s ease;
  }
.sl-cart-item__remove-link:hover { color: var(--sl-charcoal); }
.sl-cart-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
.sl-cart-item__qty .quantity { display: flex; align-items: center; margin: 0; }
.sl-cart-item__qty .qty {
    width: 56px;
    height: 40px;
    border: 1px solid var(--sl-border);
    background: var(--sl-white);
    color: var(--sl-charcoal);
    font-size: 0.9375rem;
    text-align: center;
    -moz-appearance: textfield;
  }
.sl-cart-item__qty .qty::-webkit-outer-spin-button,
  .sl-cart-item__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.sl-cart-item__qty .qty:focus-visible { outline: none; border-color: var(--sl-charcoal); }
.sl-cart-item__subtotal {
    font-size: 1rem;
    color: var(--sl-charcoal);
    font-weight: 400;
  }
/* Cart actions row */
.sl-cart__actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0 0;
    flex-wrap: wrap;
  }
.sl-coupon { display: flex; flex-direction: column; gap: 0.375rem; }
.sl-coupon__label {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
  }
.sl-coupon__row { display: flex; gap: 0.5rem; }
.sl-coupon__input {
    height: 40px;
    padding: 0 0.875rem;
    border: 1px solid var(--sl-border);
    background: var(--sl-white);
    color: var(--sl-charcoal);
    font-size: 0.875rem;
    width: 180px;
    outline: none;
    transition: border-color 0.2s ease;
  }
.sl-coupon__input:focus-visible { border-color: var(--sl-charcoal); }
.sl-coupon__apply-btn {
    height: 40px;
    padding: 0 1.25rem;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sl-charcoal);
    background: transparent;
    border: 1px solid var(--sl-charcoal);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    outline: none;
  }
.sl-coupon__apply-btn:hover { background: var(--sl-charcoal); color: var(--sl-ivory); }
.sl-coupon__apply-btn:focus-visible { outline: 2px solid var(--sl-stone); outline-offset: 2px; }
.sl-cart__update-btn {
    height: 40px;
    padding: 0 1.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--sl-stone);
    background: transparent;
    border: 1px solid var(--sl-border);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    outline: none;
    white-space: nowrap;
  }
.sl-cart__update-btn:hover { border-color: var(--sl-charcoal); color: var(--sl-charcoal); }
.sl-cart__update-btn:focus-visible { outline: 2px solid var(--sl-stone); outline-offset: 2px; }
/* Cart summary / totals */
.sl-cart__summary-col { min-width: 0; }
.sl-cart__summary-sticky {
    position: sticky;
    top: calc(72px + 2rem);
    background-color: var(--sl-white);
    border: 1px solid var(--sl-border);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
@media (max-width: 960px) {
    .sl-cart__summary-sticky { position: static; }
  }
.sl-cart__summary-title {
    font-family: var(--sl-font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
  }
/* WooCommerce cart_totals overrides */
.cart_totals .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
  }
.cart_totals .shop_table tr {
    border-bottom: 1px solid var(--sl-border);
  }
.cart_totals .shop_table tr:last-child { border-bottom: none; }
.cart_totals .shop_table th,
  .cart_totals .shop_table td {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    background: none;
    border: none;
    text-align: left;
    vertical-align: middle;
  }
.cart_totals .shop_table td { text-align: right; }
.cart_totals .shop_table .order-total th,
  .cart_totals .shop_table .order-total td {
    font-size: 1rem;
    padding-top: 1rem;
    font-weight: 400;
  }
.cart_totals .shop_table th:first-child {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
  }
/* Shipping calculator in totals */
/* Checkout button from cart totals */
.sl-cart__trust-note {
    font-size: 0.6875rem;
    color: var(--sl-taupe);
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 1rem;
    line-height: 1.6;
  }
/* Empty cart */
.sl-cart-empty {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sl-section-pad) var(--sl-gutter);
  }
.sl-cart-empty__inner {
    text-align: center;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
.sl-cart-empty__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
  }
.sl-cart-empty__text {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sl-stone);
  }
/* ─── Checkout Page ──────────────────────────────────────── */
.sl-checkout {
    background-color: var(--sl-ivory);
    padding: clamp(3rem, 6vw, 5rem) var(--sl-gutter);
  }
.sl-checkout__layout {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }
@media (max-width: 1024px) {
    .sl-checkout__layout { grid-template-columns: 1fr; }
  }
/* Details column */
.sl-checkout__details-header { margin-bottom: 2rem; }
.sl-checkout__section-title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
  }
.sl-checkout__section-sub {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--sl-stone);
  }
/* WooCommerce form rows */
.form-row { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; }
.form-row-wide,
  .form-row.notes,
  .form-row.woocommerce-additional-fields {
    grid-column: 1 / -1;
  }
.form-row-first { grid-column: 1; }
.form-row-last  { grid-column: 2; }
.form-row label {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    display: block;
    margin-bottom: 0.4375rem;
  }
.form-row label .required {
    color: var(--sl-stone);
    font-weight: 400;
    margin-left: 2px;
    text-decoration: none;
    font-style: normal;
  }
.form-row input.input-text,
  .form-row select,
  .form-row textarea {
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid var(--sl-border);
    background-color: transparent;
    color: var(--sl-charcoal);
    font-size: 0.9375rem;
    font-family: var(--sl-font-sans);
    outline: none;
    transition: border-color 0.2s ease;
    border-radius: 0;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
  }
.form-row input.input-text:focus,
  .form-row select:focus,
  .form-row textarea:focus {
    border-bottom-color: var(--sl-charcoal);
  }
.form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239C9085' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 1.25rem;
    cursor: pointer;
  }
.form-row textarea {
    resize: vertical;
    min-height: 100px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
.form-row.validate-required.woocommerce-invalid input,
  .form-row.validate-required.woocommerce-invalid select {
    border-bottom-color: #b91c1c;
  }
/* Account creation block */
#createaccount + p, .woocommerce-account-fields { margin-top: 0.5rem; }
/* Checkout summary column */
.sl-checkout__summary-col { min-width: 0; }
.sl-checkout__summary-sticky {
    position: sticky;
    top: calc(72px + 2rem);
    background-color: var(--sl-white);
    border: 1px solid var(--sl-border);
    padding: 2rem;
  }
@media (max-width: 1024px) {
    .sl-checkout__summary-sticky { position: static; }
  }
/* Order review table */
.woocommerce-checkout-review-order-table .cart_item td {
    padding: 0.875rem 0;
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    border-bottom: 1px solid var(--sl-border);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    vertical-align: middle;
  }
.woocommerce-checkout-review-order-table .cart_item td:last-child { text-align: right; }
.woocommerce-checkout-review-order-table .cart-subtotal td,
  .woocommerce-checkout-review-order-table .order-total td,
  .woocommerce-checkout-review-order-table .cart-subtotal th,
  .woocommerce-checkout-review-order-table .order-total th {
    padding: 0.75rem 0;
    border: none;
    font-size: 0.875rem;
    color: var(--sl-charcoal);
    background: none;
  }
.woocommerce-checkout-review-order-table .order-total th,
  .woocommerce-checkout-review-order-table .order-total td {
    font-size: 1rem;
    border-top: 1px solid var(--sl-border);
    padding-top: 1rem;
  }
.woocommerce-checkout-review-order-table .cart-subtotal th,
  .woocommerce-checkout-review-order-table .shipping th {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
  }
.woocommerce-checkout-review-order-table .cart-subtotal td,
  .woocommerce-checkout-review-order-table .shipping td { text-align: right; }
/* Product name + quantity in review */
/* Payment section */
#payment {
    margin-top: 1.25rem;
  }
/* Place order button */
#place_order {
    display: block;
    width: 100%;
    padding: 1.0625rem;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    color: var(--sl-ivory);
    background-color: var(--sl-charcoal);
    border: 1px solid var(--sl-charcoal);
    cursor: pointer;
    transition: background-color 0.28s ease, color 0.28s ease;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    outline: none;
  }
#place_order:hover {
    background-color: transparent;
    color: var(--sl-charcoal);
  }
#place_order:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
/* Checkout trust notes */
.sl-checkout__trust {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    list-style: none;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sl-border);
  }
.sl-checkout__trust li {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-stone);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.sl-checkout__trust li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 1px;
    background-color: var(--sl-taupe);
    flex-shrink: 0;
  }
/* ── Reduced-motion support ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sl-mini-cart,
    .sl-drawer-backdrop,
    .sl-pcard__img-el,
    .sl-pcard__img--hover,
    .wc-proceed-to-checkout .checkout-button,
    .sl-btn,
    #place_order {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     PHASE 4 — Homepage, Footer Enhancement
  ═══════════════════════════════════════════════════════════ */
/* ── Scroll reveal (scoped to .js-loaded to avoid flash) ── */
.js-loaded [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
  }
.js-loaded [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
.js-loaded [data-reveal][data-delay="1"] { transition-delay: 0.14s; }
.js-loaded [data-reveal][data-delay="2"] { transition-delay: 0.28s; }
.js-loaded [data-reveal][data-delay="3"] { transition-delay: 0.42s; }
.js-loaded [data-reveal][data-delay="4"] { transition-delay: 0.56s; }
/* ── Button outline variant ─────────────────────────────── */
.sl-btn--outline {
    background-color: transparent;
    color: var(--sl-charcoal);
    border-color: var(--sl-charcoal);
  }
.sl-btn--outline:hover {
    background-color: var(--sl-charcoal);
    color: var(--sl-ivory);
  }
.sl-btn:focus-visible,
  .sl-btn--outline:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 3px;
  }
/* ── Homepage hero (full-bleed overlay) ─────────────────── */
.sl-home-hero {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-color: var(--sl-warm-gray); /* visible while image loads */
  }
/* Absolute full-bleed background media layer */
.sl-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
/* CSS composition fallback — fills entire hero section */
.sl-hero__media--composition .sl-home-hero__composition {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    box-shadow: none;
  }
/* Top-left safe-zone gradient — near-white, angles away from content corner */
.sl-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      120deg,
      rgba(252, 250, 247, 0.68) 0%,
      rgba(252, 250, 247, 0.50) 26%,
      rgba(252, 250, 247, 0.20) 50%,
      rgba(252, 250, 247, 0.04) 68%,
      rgba(252, 250, 247, 0.00) 80%
    );
  }
/* Content wrapper — full width, constrains inner block width */
.sl-hero__content-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--sl-max-width) + 2 * var(--sl-gutter));
    margin: 0 auto;
    padding: clamp(4rem, 7vw, 6rem) var(--sl-gutter);
  }
/* Left-aligned editorial content column */
.sl-hero__content {
    max-width: 520px;
  }
.sl-hero__eyebrow {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sl-stone) 40%, var(--sl-charcoal));
    margin-bottom: 1.375rem;
  }
.sl-hero__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(2.75rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.0;
    color: #171412;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    max-width: 12ch;
  }
.sl-hero__copy {
    font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
    line-height: 1.78;
    color: color-mix(in srgb, var(--sl-stone) 25%, var(--sl-charcoal));
    max-width: 400px;
    margin-bottom: 1.75rem;
  }
.sl-hero__actions {
    display: flex;
    align-items: center;
  }
/* Compact hero CTA — specificity 0-2-0 beats Phase 2 .sl-btn min-height overrides */
.sl-hero__actions .sl-btn {
    padding: 0.6875rem 1.875rem;
    min-height: auto;
  }
/* CSS textile composition (no-image fallback) */
.sl-home-hero__composition {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--sl-warm-gray);
  }
.sl-home-hero__fabric {
    position: absolute;
  }
.sl-home-hero__fabric--back {
    inset: 0;
    background-color: var(--sl-warm-gray);
  }
.sl-home-hero__fabric--main {
    top: 9%;
    left: 9%;
    right: 0;
    bottom: 0;
    background-color: var(--sl-white);
    box-shadow: -2px -2px 32px rgba(44, 44, 44, 0.06);
  }
.sl-home-hero__fabric--fold {
    bottom: 0;
    left: 9%;
    right: 20%;
    height: 28%;
    background-color: var(--sl-taupe);
    opacity: 0.15;
  }
.sl-home-hero__fabric--stripe {
    top: 38%;
    left: 14%;
    right: 6%;
    height: 1px;
    background-color: var(--sl-border);
  }
.sl-home-hero__fabric--shadow {
    top: 58%;
    left: 14%;
    right: 6%;
    height: 1px;
    background-color: var(--sl-border);
    opacity: 0.6;
  }
/* Mobile: content top-left, ~80px from hero top */
@media (max-width: 900px) {
    .sl-home-hero {
      min-height: 580px;
      align-items: flex-start;
    }

    /* Left-side gradient — near-white, matches desktop direction */
    .sl-hero__overlay {
      background: linear-gradient(
        to right,
        rgba(252, 250, 247, 0.74) 0%,
        rgba(252, 250, 247, 0.56) 36%,
        rgba(252, 250, 247, 0.20) 66%,
        rgba(252, 250, 247, 0.00) 88%
      );
    }

    .sl-hero__bg-img {
      -o-object-position: center top;
         object-position: center top;
    }

    /* 5rem ≈ 80px from top — top-left content position */
    .sl-hero__content-wrap {
      padding: 5rem var(--sl-gutter) clamp(2rem, 4vw, 3rem);
    }

    .sl-hero__content {
      max-width: 100%;
    }

    .sl-hero__title {
      font-size: clamp(2.375rem, 8vw, 3.25rem);
    }

    .sl-hero__copy {
      max-width: 100%;
      margin-bottom: 1.375rem;
    }

    /* Mobile CTA: 13px 22px per brief */
    .sl-hero__actions .sl-btn {
      padding: 0.8125rem 1.375rem;
    }
  }
@media (max-width: 480px) {
    .sl-home-hero {
      min-height: 560px;
    }

    /* 4.5rem ≈ 72px — proportional to smaller hero height */
    .sl-hero__content-wrap {
      padding-top: 4.5rem;
    }

    .sl-hero__title {
      font-size: clamp(2.25rem, 9.5vw, 2.75rem);
    }
  }
/* Homepage hero: admin-controlled media, slider position, overlay, and type. */
.sl-home-hero.sl-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: var(--sl-hero-height-desktop);
    padding: 0;
    overflow: hidden;
    background: #FFFFFF;
    text-align: left;
    isolation: isolate;
  }
.sl-home-hero .sl-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
.sl-hero__picture,
  .sl-hero__image,
  .sl-hero__video,
  .sl-hero__media-composition {
    display: block;
    width: 100%;
    height: 100%;
  }
.sl-hero__image,
  .sl-hero__video {
    max-width: none;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
.sl-hero--media-video .sl-hero__video {
    position: absolute;
    inset: 0;
  }
.sl-hero__media-composition {
    background: var(--sl-warm-gray);
  }
.sl-hero__media-composition .sl-home-hero__composition {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    box-shadow: none;
  }
.sl-home-hero .sl-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--sl-hero-overlay-strength);
    pointer-events: none;
  }
.sl-hero--clickable {
    cursor: pointer;
  }
.sl-hero__click-target {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    cursor: pointer;
  }
.sl-hero__click-target:focus,
  .sl-hero__click-target:focus-visible {
    outline: 3px solid var(--sl-color-accent);
    outline-offset: -6px;
  }
.sl-hero--overlay-none .sl-hero__overlay {
    opacity: 0;
  }
.sl-hero--overlay-light .sl-hero__overlay {
    --sl-hero-overlay-color: rgba(255, 253, 249, 0.98);
  }
.sl-hero--overlay-dark .sl-hero__overlay {
    --sl-hero-overlay-color: rgba(23, 20, 18, 0.96);
  }
.sl-hero--overlay-full .sl-hero__overlay {
    background: var(--sl-hero-overlay-color);
  }
.sl-hero--overlay-left .sl-hero__overlay {
    background: linear-gradient(to right, var(--sl-hero-overlay-color) 0%, transparent 78%);
  }
.sl-hero--overlay-right .sl-hero__overlay {
    background: linear-gradient(to left, var(--sl-hero-overlay-color) 0%, transparent 78%);
  }
.sl-hero--overlay-top .sl-hero__overlay {
    background: linear-gradient(to bottom, var(--sl-hero-overlay-color) 0%, transparent 78%);
  }
.sl-hero--overlay-bottom .sl-hero__overlay {
    background: linear-gradient(to top, var(--sl-hero-overlay-color) 0%, transparent 78%);
  }
.sl-hero--overlay-top-left .sl-hero__overlay {
    background: linear-gradient(135deg, var(--sl-hero-overlay-color) 0%, transparent 72%);
  }
.sl-hero--overlay-bottom-left .sl-hero__overlay {
    background: linear-gradient(45deg, var(--sl-hero-overlay-color) 0%, transparent 72%);
  }
.sl-home-hero .sl-hero__content-wrap {
    position: absolute;
    left: var(--sl-hero-content-x-desktop);
    top: var(--sl-hero-content-y-desktop);
    z-index: 3;
    display: block;
    width: min(var(--sl-hero-content-width-desktop), calc(100% - 48px));
    min-height: 0;
    max-width: calc(100% - 48px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
    transform: translate(var(--sl-hero-content-shift-x-desktop), var(--sl-hero-content-shift-y-desktop));
  }
.sl-home-hero.sl-hero--card-enabled .sl-hero__content-wrap {
    width: min(var(--sl-hero-card-final-width-desktop), calc(100% - 48px));
  }
.sl-home-hero .sl-hero__content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
.sl-home-hero.sl-hero--card-enabled .sl-hero__content {
    width: 100%;
    max-width: 100%;
    padding: var(--sl-hero-card-final-padding-y-desktop) var(--sl-hero-card-final-padding-x-desktop);
    background: var(--sl-hero-card-bg);
    border-radius: var(--sl-hero-card-radius);
    box-shadow: 0 18px 44px rgba(43, 36, 31, 0.12);
  }
.sl-home-hero.sl-hero--card-enabled.sl-hero--card-blur-enabled .sl-hero__content {
    /* autoprefixer: ignore next */
    -webkit-backdrop-filter: blur(var(--sl-hero-card-blur));
    backdrop-filter: blur(var(--sl-hero-card-blur));
  }
.sl-home-hero .sl-hero__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--sl-hero-eyebrow-color);
    font-family: "Montserrat", var(--sl-font-sans), sans-serif;
    font-size: var(--sl-hero-eyebrow-size-desktop);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
.sl-home-hero .sl-hero__title {
    max-width: 12ch;
    margin-bottom: 16px;
    color: var(--sl-hero-heading-color);
    text-shadow: none;
    font-family: "Cormorant Garamond", var(--sl-font-serif), serif;
    font-size: var(--sl-hero-heading-size-desktop);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }
.sl-home-hero .sl-hero__copy {
    max-width: 42ch;
    margin-bottom: 0;
    color: var(--sl-hero-copy-color);
    font-family: "Montserrat", var(--sl-font-sans), sans-serif;
    font-size: var(--sl-hero-copy-size-desktop);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -0.01em;
  }
.sl-home-hero .sl-hero__actions {
    display: flex;
    align-items: center;
    justify-content: var(--sl-hero-button-align);
    width: 100%;
    margin-top: 0;
  }
.sl-home-hero.sl-hero--card-enabled .sl-hero__eyebrow,
  .sl-home-hero.sl-hero--card-enabled .sl-hero__title {
    margin-bottom: var(--sl-hero-card-content-gap-desktop);
  }
.sl-home-hero.sl-hero--card-enabled .sl-hero__actions {
    margin-top: 0;
  }
.sl-home-hero .sl-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sl-hero-button-width-desktop);
    max-width: 100%;
    min-height: var(--sl-hero-button-height-desktop);
    margin-top: var(--sl-hero-button-top-space);
    padding: 8px 22px;
    border-radius: var(--sl-hero-button-radius-desktop);
    background: var(--sl-hero-cta-bg);
    border: 1px solid transparent;
    box-shadow: 0 10px 22px rgba(43, 36, 31, 0.16);
    color: var(--sl-hero-cta-text);
    font-family: "Montserrat", var(--sl-font-sans), sans-serif;
    font-size: var(--sl-hero-button-text-size-desktop);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: normal;
  }
.sl-home-hero .sl-hero__cta::after {
    content: none;
    display: none;
  }
.sl-home-hero .sl-hero__cta:hover {
    background: var(--sl-hero-cta-bg);
    color: var(--sl-hero-cta-text);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(43, 36, 31, 0.16);
  }
@media (prefers-reduced-motion: reduce) {
    .sl-home-hero .sl-hero__cta:hover {
      transform: none;
    }

  }
@media (max-width: 900px) {
    .sl-home-hero.sl-hero {
      min-height: var(--sl-hero-height-mobile);
    }

    .sl-home-hero .sl-hero__content-wrap {
      left: var(--sl-hero-content-x-mobile);
      top: var(--sl-hero-content-y-mobile);
      width: min(var(--sl-hero-content-width-mobile), calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      padding: 0;
      transform: translate(var(--sl-hero-content-shift-x-mobile), var(--sl-hero-content-shift-y-mobile));
    }

    .sl-home-hero.sl-hero--card-enabled .sl-hero__content-wrap {
      width: min(var(--sl-hero-card-final-width-mobile), calc(100vw - 32px));
    }

    .sl-home-hero .sl-hero__content {
      width: 100%;
      max-width: 100%;
    }

    .sl-home-hero.sl-hero--card-enabled .sl-hero__content {
      width: 100%;
      max-width: 100%;
      padding: var(--sl-hero-card-final-padding-y-mobile) var(--sl-hero-card-final-padding-x-mobile);
      background: var(--sl-hero-card-bg);
      border-radius: var(--sl-hero-card-radius);
      box-shadow: 0 14px 30px rgba(43, 36, 31, 0.08);
    }

    .sl-home-hero .sl-hero__eyebrow {
      font-size: var(--sl-hero-eyebrow-size-mobile);
      margin-bottom: 10px;
    }

    .sl-home-hero .sl-hero__title {
      font-size: var(--sl-hero-heading-size-mobile);
      line-height: 1.02;
      margin-bottom: 12px;
    }

    .sl-home-hero .sl-hero__copy {
      max-width: 100%;
      margin-bottom: 0;
      font-size: var(--sl-hero-copy-size-mobile);
    }

    .sl-home-hero .sl-hero__actions {
      margin-top: 0;
    }

    .sl-home-hero.sl-hero--card-enabled .sl-hero__eyebrow,
    .sl-home-hero.sl-hero--card-enabled .sl-hero__title {
      margin-bottom: var(--sl-hero-card-content-gap-mobile);
    }

    .sl-home-hero.sl-hero--card-enabled .sl-hero__actions {
      margin-top: 0;
    }

    .sl-home-hero .sl-hero__cta {
      background: var(--sl-hero-cta-bg);
      color: var(--sl-hero-cta-text);
      border: 1px solid transparent;
      box-shadow: 0 10px 22px rgba(43, 36, 31, 0.16);
      width: var(--sl-hero-button-width-mobile);
      max-width: 100%;
      min-height: var(--sl-hero-button-height-mobile);
      margin-top: var(--sl-hero-button-top-space);
      border-radius: var(--sl-hero-button-radius-mobile);
      padding: 8px 18px;
      font-size: var(--sl-hero-button-text-size-mobile);
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: none;
      white-space: normal;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

  }
/* ── Shop by Category (Customizer-driven carousel) ──────── */
/* Reusable modern heading system for homepage commerce sections. */
.sl-section-heading {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
.sl-section-heading--left {
    margin-left: 0;
    margin-right: auto;
    align-items: flex-start;
    text-align: left;
  }
.sl-section-heading--center {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    text-align: center;
  }
/* Kept only as a visual fallback for previously saved Shop settings. */
.sl-section-heading--right {
    margin-left: auto;
    margin-right: 0;
    align-items: flex-end;
    text-align: right;
  }
.sl-section-heading__content { width: 100%; }
.sl-section-heading__subtext {
    max-width: 48ch;
    margin: 1rem 0 0;
    font-family: var(--sl-font-sans);
    font-size: var(--sl-section-subtext-size-mobile, 14px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--sl-section-subtext-color, #4C4038);
  }
.sl-section-heading--center .sl-section-heading__subtext { margin-inline: auto; }
.sl-section-heading--right .sl-section-heading__subtext { margin-left: auto; margin-right: 0; }
@media (min-width: 768px) {
    .sl-section-heading__eyebrow { font-size: var(--sl-section-eyebrow-size-desktop, 12px); }
    .sl-section-heading__title { font-size: var(--sl-section-heading-size-desktop, 38px); }
    .sl-section-heading__subtext { font-size: var(--sl-section-subtext-size-desktop, 16px); }
  }
.sl-shop-category {
    --sl-section-eyebrow-size-desktop: var(--sl-shop-category-eyebrow-size-desktop, 12px);
    --sl-section-eyebrow-size-mobile: var(--sl-shop-category-eyebrow-size-mobile, 11px);
    --sl-section-heading-size-desktop: var(--sl-shop-category-heading-size-desktop, 38px);
    --sl-section-heading-size-mobile: var(--sl-shop-category-heading-size-mobile, 30px);
    --sl-section-subtext-size-desktop: var(--sl-shop-category-subtext-size-desktop, 16px);
    --sl-section-subtext-size-mobile: var(--sl-shop-category-subtext-size-mobile, 14px);
    --sl-section-eyebrow-color: var(--sl-shop-category-eyebrow-color, #B39273);
    --sl-section-heading-color: var(--sl-shop-category-heading-color, #2B241F);
    --sl-section-subtext-color: var(--sl-shop-category-subtext-color, #4C4038);
    /* Desktop-only (1024px+, see below) — exactly five complete cards at
       rest, regardless of how many real categories exist. The card-width
       formula always divides by a fixed 5/4, never the real count, so
       fewer-than-five categories keep the SAME per-card width as a full
       five-card row (see [data-desktop-fits="true"] further down) instead
       of stretching to fill the row. */
    --category-desktop-visible: 5;
    --category-desktop-gap: clamp(18px, 1.8vw, 30px);
    position: relative;
    background-color: transparent;
    padding-top: var(--sl-shop-category-padding-top-mobile, 32px);
    padding-bottom: var(--sl-shop-category-padding-bottom-mobile, 56px);
    overflow: hidden;
    /* Query container for the five-card width formula (see .track at
       1024px+ below) — declared HERE, on the section, not on the
       full-bleed scroller itself. Confirmed live: the scroller's own
       width comes from margin:calc(50% - 50vw), and vw is defined
       against the initial containing block, which in every mainstream
       browser INCLUDES the width the page's own vertical scrollbar
       occupies — 15px wider, in the exact case measured, than
       document.documentElement.clientWidth (the real, paintable page
       width). A card-width formula based on cqw measured against the
       scroller inherits that same 15px-too-generous basis, which was
       just wide enough that a sixth card's own edge peeked a few px
       into the visible row instead of sitting fully outside it — this
       section, by contrast, is an ordinary block element with no vw
       involved anywhere in its own width, so 100cqw measured against IT
       already reflects the true, scrollbar-safe width the exact same
       way .sl-video-rail's own content-cap formula relies on. */
    container-type: inline-size;
  }
@media (min-width: 768px) {
    .sl-shop-category {
      padding-top: var(--sl-shop-category-padding-top-desktop, 64px);
      padding-bottom: var(--sl-shop-category-padding-bottom-desktop, 56px);
    }
  }
.sl-shop-category__inner {
    max-width: calc(var(--sl-max-width) + (2 * var(--sl-gutter)));
    margin: 0 auto;
    padding-inline: var(--sl-gutter);
  }
.sl-shop-category--empty .sl-shop-category__inner {
    max-width: 760px;
  }
.sl-shop-category__empty {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px dashed color-mix(in srgb, var(--sl-color-accent, #9A6F4D) 42%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--sl-white, #FFFFFF) 72%, var(--sl-warm-gray, #F4F1EE));
    color: var(--sl-color-muted, #9C9085);
    font-family: var(--sl-font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
  }
.sl-shop-category__empty p {
    margin: 0;
  }
.sl-shop-category__header {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
/* Plain native horizontal scroll — no JS-driven scroll position changes
     other than the invisible infinite-loop boundary reset. touch-action/
     overscroll-behavior keep touch drags smooth and contained to this axis
     only. Snap is "proximity" (not "mandatory") so the loop's silent
     scrollLeft correction never fights a hard snap point mid-gesture.
     scroll-behavior is "auto", not "smooth" — smooth is a hint meant for
     JS-triggered scrollTo(), and forcing it onto finger-driven touch
     scrolling can fight the OS's own momentum/snap physics on mobile,
     reading as a jerky handoff right as a swipe settles.
     overflow-y: hidden can't simply become visible here — CSS coerces a
     visible cross-axis back to auto the instant the scroll axis
     (overflow-x) isn't visible too, so it would still clip, just less
     predictably. The real fix is giving the clipped area enough room:
     padding-block is sized to clear the selected card's own shadow bleed
     (the dominant layer is 0 22px 54px — roughly 76px below and 32px
     above the *scaled* card edge, plus the scale growth itself on top of
     that), not just the transform's scale growth alone like it was
     originally sized for — that's what was cutting the shadow's soft
     tail off in a hard, straight line. Recomputed (not just eyeballed)
     whenever the shadow recipe itself changes — a stronger shadow needs
     more clearance, not the same amount. */
.sl-shop-category__scroller {
    margin-inline: calc(var(--sl-gutter) * -1);
    padding-inline: var(--sl-gutter);
    padding-block: clamp(2.875rem, 4.5vw, 3.25rem) clamp(5.75rem, 8vw, 6.25rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--sl-gutter);
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
.sl-shop-category__scroller::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
.sl-shop-category__track {
    display: flex;
    /* Min lowered 14px->10px for a tighter mobile rhythm; desktop is
       unaffected since its 3vw already exceeds the 22px max regardless
       of this floor. */
    gap: clamp(10px, 3vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* ── One canonical transform/opacity system, full stop ──────────
     Everything that moves or fades a card — the one-time early reveal,
     desktop-only hover lift, and continuous scroll-linked grow effect —
     lives here, on the item, as ONE transform and ONE
     opacity. Each system only ever contributes a variable; nothing but
     this rule ever writes transform/opacity directly, so there is no
     second competing transform rule anywhere to fight it. Reveal and
     focus opacity combine multiplicatively, while reveal-y and hover lift
     remain additive inside the same translateY. The base transition stays
     short for the scroll-linked focus effect; only the temporary early
     reveal state below uses the slower entrance timing. JS
     recalculates --sl-card-focus-t continuously every scroll frame (see
     assets/js/theme.js), so most of the time this transition is only a
     light smoothing pass over an already-continuous target, not the
     thing carrying the motion — a long transition here would fight that
     continuous update and lag visibly behind the finger during a swipe. */
.sl-shop-category__item {
    flex: 0 0 auto;
    width: min(var(--sl-shop-category-card-size-mobile, 250px), calc(100vw - (2 * var(--sl-gutter))));
    scroll-snap-align: start;
    position: relative;
    z-index: 1;
    --sl-card-reveal-opacity: 1;
    --sl-card-reveal-y: 0px;
    --sl-card-reveal-scale: 1;
    transform: translateY(calc(var(--sl-card-reveal-y, 0px) + var(--sl-card-hover-lift-y, 0px))) scale(calc(var(--sl-card-reveal-scale, 1) * var(--sl-card-focus-scale, 1)));
    opacity: calc(var(--sl-card-reveal-opacity, 1) * var(--sl-card-focus-opacity, 1));
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease-out;
  }
/* data-reveal is also used by the theme's generic section reveal. Keep
     Shop by Category itself fully visible so only its cards participate in
     this dedicated, earlier reveal lifecycle. */
.js-loaded .sl-shop-category[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
/* Cards are hidden only after this section's JS has installed its early
     observer. The no-JS and completed states remain explicitly neutral, in
     addition to the safe defaults on .sl-shop-category__item above. */
body.sl-js-ready .sl-shop-category[data-reveal="pending"] .sl-shop-category__item {
    --sl-card-reveal-opacity: 0;
    --sl-card-reveal-y: 28px;
    --sl-card-reveal-scale: 0.965;
    opacity: 0;
    transform: translateY(28px) scale(0.965);
  }
body.sl-js-ready .sl-shop-category[data-reveal="done"] .sl-shop-category__item,
  body:not(.sl-js-ready) .sl-shop-category__item {
    --sl-card-reveal-opacity: 1;
    --sl-card-reveal-y: 0px;
    --sl-card-reveal-scale: 1;
  }
/* This class exists only while the pending → done transition is playing.
     Removing it after the last stagger restores the fast base transition,
     so selected-card scaling remains responsive during ordinary swipes. */
body.sl-js-ready .sl-shop-category.is-cards-revealing[data-reveal="done"] .sl-shop-category__item {
    transition: opacity 660ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--sl-card-index, 0) * 60ms);
  }
/* Raised so the growing card paints over its neighbors instead of
     being partially covered by whichever sibling comes later in the DOM. */
.sl-shop-category__item.is-shopcat-selected {
    z-index: 2;
  }
/* ── Selected Card Position: left vs center layout ──────────────
     Left is the base rule's scroll-snap-align: start above — restated
     explicitly here so both modes read as one deliberate pair rather
     than "center is special-cased, left is just whatever's default."
     Center needs real, physical scrollable room on both sides for the
     first/last real card to ever reach a centered rest position — plain
     CSS padding creates that room (scroll-padding-inline alone only
     shifts where snap alignment measures FROM, it doesn't add any
     scrollable space by itself). Sized off 100vw to match the
     desktop full-bleed scroller from the width fix, so the same "half
     the viewport, minus half a card" math centers correctly whether the
     scroller's own box happens to be full-bleed (desktop) or just
     effectively viewport-width already (mobile). */
.sl-shop-category--selected-left .sl-shop-category__item {
    scroll-snap-align: start;
  }
.sl-shop-category--selected-center .sl-shop-category__item {
    scroll-snap-align: center;
  }
.sl-shop-category--selected-center .sl-shop-category__scroller {
    padding-inline: calc((100vw - var(--sl-shop-category-card-size-mobile, 250px)) / 2);
    scroll-padding-inline: calc((100vw - var(--sl-shop-category-card-size-mobile, 250px)) / 2);
  }
/* The card itself is now just the visual surface — radius, background,
     overflow-clip for the image/overlay, and its own box-shadow (which
     genuinely needs to live here, not on the item, since it must respect
     border-radius). No transform, no opacity: those belong to the item
     alone, per the single-transform-system rule above. */
.sl-shop-category__card {
    --sl-sc-arrow: clamp(28px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.17), var(--sl-shop-category-arrow-size, 48px));
    --sl-sc-icon: clamp(26px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.126), 34px);
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--sl-shop-category-card-radius, 28px);
    overflow: hidden;
    background-color: var(--sl-warm-gray);
    box-shadow: var(--sl-shop-category-card-shadow, 0 7px 16px rgba(43, 36, 31, 0.06), 0 20px 45px rgba(43, 36, 31, 0.073), inset 0 1px 0 rgba(255, 255, 255, 0.18));
    text-decoration: none;
    isolation: isolate;
    transition: box-shadow 220ms ease-out;
  }
/* Glass-like top highlight */
.sl-shop-category__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 24%);
    pointer-events: none;
  }
.sl-shop-category__card:focus-visible {
    outline: 2px solid var(--sl-charcoal);
    outline-offset: -3px;
  }
.sl-shop-category__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
  }
.sl-shop-category__img,
  .sl-shop-category__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
/* Polished gradient fallback — never a letter placeholder */
.sl-shop-category__image--fallback {
    background:
      radial-gradient(120% 120% at 78% 12%, rgba(255, 255, 255, 0.55), transparent 52%),
      linear-gradient(155deg, var(--sl-warm-gray) 0%, var(--sl-taupe) 130%);
  }
.sl-shop-category__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgba(20, 17, 14, 0.64) 0%,
      rgba(20, 17, 14, 0.30) 26%,
      rgba(20, 17, 14, 0) 54%
    );
    pointer-events: none;
  }
.sl-shop-category__meta {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(7px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.037), 10px);
    max-width: calc(100% - var(--sl-sc-arrow) - clamp(24px, 8vw, 40px));
    padding: clamp(12px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.07), 21px);
  }
.sl-shop-category__icon {
    width: var(--sl-sc-icon);
    height: var(--sl-sc-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--sl-white);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(6px);
  }
.sl-shop-category__icon svg {
    width: 50%;
    height: 50%;
  }
.sl-shop-category__name {
    font-family: var(--sl-font-sans);
    font-size: min(var(--sl-shop-category-card-title-size, 22px), calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.10));
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--sl-shop-category-card-title-color, #FFFFFF);
    text-shadow: 0 1px 12px rgba(20, 17, 14, 0.32);
  }
.sl-shop-category__arrow {
    position: absolute;
    right: clamp(10px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.052), 20px);
    bottom: clamp(10px, calc(var(--sl-shop-category-card-size-mobile, 250px) * 0.052), 20px);
    z-index: 4;
    width: var(--sl-sc-arrow);
    height: var(--sl-sc-arrow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--sl-shop-category-arrow-bg, #FFFFFF) calc(var(--sl-shop-category-arrow-opacity, 0.92) * 100%), transparent);
    color: var(--sl-shop-category-arrow-color, #2B241F);
    box-shadow: 0 5px 14px rgba(20, 17, 14, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
.sl-shop-category__arrow svg {
    width: 42%;
    height: 42%;
  }
/* A large negative margin, not a small positive one: the scroller's
     own bottom padding-block (92-100px) still can't shrink without
     risking the selected card's shadow clipping again, so instead the
     footer is pulled UP to sit inside that existing padding zone —
     without touching the padding that keeps the shadow safe at all.
     -84.65px is (mobile) MARGIN_BASE = scale-growth-half minus the
     scroller's own bottom padding — a fixed offset such that adding the
     user's Swipe Indicator Gap slider value (Customizer: "Swipe Indicator
     Gap", plain 0-60 px, default 18) lands the visible gap, measured from
     the SELECTED/scaled card's own edge, at exactly that slider value —
     verified by simulation across the control's full range, including
     confirming it never goes low enough to make the compensating
     padding-bottom above go negative. The footer is a SIBLING of the
     scroller, not its descendant, so this overlap is never subject to
     the scroller's own overflow-y: hidden — that clipping is strictly a
     parent/child relationship, not a sibling one. pointer-events: none
     because this now overlaps the scroller's own touch/scroll area — the
     swipe cue is decorative (aria-hidden, no interactive content) and
     must never intercept a touch or click meant for the carousel
     underneath it. */
/* Negative margin-top pulls the cue back up through the scroller's own
     generous bottom padding (clamp(5.75rem, 8vw, 6.25rem), which exists to
     give the cards' shadows and hover-lift room).

     Two things are compensated for here. First, the constant absorbs that
     bottom padding (92px here) plus the ~13px the cards fall short of it:
     at rest every card sits at 0.88 scale, so its PAINTED bottom edge is
     well above the box the browser lays out, and calibrating against the
     layout box alone leaves a visibly larger gap than the numbers claim.
     Measured, not derived — 45px/48px/56px of real on-screen gap at slider
     0/18/60, verified at 320, 375, 390 and 768.

     Second, the 0.18 multiplier deliberately compresses the Swipe
     Indicator Gap slider. At 1:1 its 0–60 range swings the gap by a full
     60px, so no single calibration could be right at both ends — and with
     the slider parked at 60 the gap reached ~101px, which is most of the
     dead band this section was reported for. Compressed, the entire range
     stays inside ~45–56px: the control still visibly does something, but
     it can no longer reintroduce the empty block. */
.sl-shop-category__footer {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--sl-shop-category-swipe-gap, 18px) * 0.18 - 60px);
    pointer-events: none;
    visibility: hidden;
  }
/* Desktop-only nav (arrows), hidden here at the base/mobile/tablet tier
     — this rule has to come BEFORE its own 1024px+ override below (same
     0,1,0 specificity either way, so source order is what decides which
     one wins at 1024px+; the override needs to be the later one). */
.sl-shop-category__nav {
    display: none;
  }
/* Footer chrome only appears once the row actually overflows */
.sl-shop-category.is-scrollable .sl-shop-category__footer {
    visibility: visible;
  }
/* Infinite mode has no real "end" for a progress line to honestly
     represent, so the finite swipe-cue/progress never appears there —
     higher specificity than .is-scrollable above (two classes vs one)
     wins outright rather than combining with it. Left to JS to keep any
     existing infinite-mode discovery treatment (none currently exists
     beyond the row itself inviting a swipe). */
.sl-shop-category--infinite.is-scrollable .sl-shop-category__footer {
    visibility: hidden;
  }
/* ── Swipe cue: label, then one single functional line — nothing
     else. No decorative lines flanking it, no arrow; a single centered
     track with one moving segment reads as more premium and more
     honestly functional than ornamental dashes around it. */
.sl-shop-category__swipecue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 0.75rem);
  }
.sl-shop-category__swipecue-label {
    font-family: var(--sl-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #A48F81;
  }
/* Track/fill widths as custom properties (not just raw CSS values)
     specifically so the fill's translateX() calc() below always has the
     correct travel distance (track width minus fill width) without
     restating either number a second time — the desktop override further
     down only ever needs to change these two variables, nothing else. */
.sl-shop-category__swipecue-rail {
    --sl-swipecue-track-w: 100px;
    --sl-swipecue-fill-w: 26px;
    position: relative;
    display: block;
    width: var(--sl-swipecue-track-w);
    height: 2px;
    border-radius: 999px;
    background: rgba(43, 36, 31, 0.14);
    overflow: hidden;
  }
/* Fixed-width segment that SLIDES along the rail via transform, driven
     by --sl-shop-category-progress (0–1, set on the section by
     updateSwipeProgress() in theme.js whenever the selected REAL card
     changes — see cloneRealSet()/data-real-index there for how clones
     map back to their original card instead of counting as extra steps).
     transform, not left: composited, not layout-triggering, and this is
     the thing that actually moves now — no scrollLeft-ratio math here at
     all, so it stays correct and functional in infinite mode too, not
     just a fixed decorative rest position. Falls back to 0 (start of the
     rail) if JS never runs. */
.sl-shop-category__swipecue-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sl-swipecue-fill-w);
    height: 100%;
    border-radius: inherit;
    background: #B39273;
    transform: translateX(calc(var(--sl-shop-category-progress, 0) * (var(--sl-swipecue-track-w) - var(--sl-swipecue-fill-w))));
    transition: transform 180ms ease-out;
  }
/* Ambient left-to-right hint sweep. Deliberately on the RAIL's own
     pseudo-element rather than on the fill: the fill's transform is the
     single JS-driven progress indicator (see the comment above), and
     animating it here would fight that system and make the cue lie about
     scroll position. This is a separate, purely decorative highlight
     passing over the track — it says "swipeable" without touching what the
     fill reports. The rail already has position:relative + overflow:hidden,
     so the sweep is clipped to the track. */
.sl-shop-category__swipecue-rail::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(179, 146, 115, 0) 0%, rgba(179, 146, 115, 0.55) 50%, rgba(179, 146, 115, 0) 100%);
    transform: translateX(-100%);
    pointer-events: none;
    animation: sl-swipecue-sweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
@keyframes sl-swipecue-sweep {
    0%        { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
  }
/* ── Selected-card grow effect (scroll-linked, opt-in) ──────────
     Continuous, not binary: JS writes --sl-card-focus-t (0–1, how close
     this card is to the anchor point) on every item every scroll frame —
     never just a single "winner" — and this rule turns that into a
     scale/opacity that slides smoothly between the side and selected
     values instead of popping between two fixed states. At t=0 this
     resolves to exactly the side value, at t=1 exactly the selected
     value, so the Customizer numbers mean the same thing they always
     did. JS separately toggles .is-shopcat-selected on only the single
     nearest card for the shadow/arrow/title accents below — those are
     threshold cues, not the thing carrying the grow motion, so they can
     stay a simple switch. Inert unless .sl-shop-category--focus-fx is
     present (Customizer toggle) and JS is ready; falls back to flat 1/1
     sizing otherwise, identical to the effect being off. */
body.sl-js-ready .sl-shop-category--focus-fx .sl-shop-category__item {
    --sl-card-focus-scale: calc(var(--sl-shop-category-side-card-scale, 0.88) + var(--sl-card-focus-t, 0) * (var(--sl-shop-category-active-card-scale, 1.06) - var(--sl-shop-category-side-card-scale, 0.88)));
    --sl-card-focus-opacity: calc(var(--sl-shop-category-side-card-opacity, 0.90) + var(--sl-card-focus-t, 0) * (1 - var(--sl-shop-category-side-card-opacity, 0.90)));
  }
/* Soft, layered, non-boxy depth — never a single hard dark rectangle.
     Side cards get a flatter, lower-key shadow; the selected card gets a
     broader low-opacity glow plus a closer tighter shadow plus a subtle
     top rim-light, so it visibly floats rather than just "gets bigger."
     Warm brown tones throughout (never flat black), matching the rest of
     this section's shadow palette. */
body.sl-js-ready .sl-shop-category--focus-fx .sl-shop-category__item .sl-shop-category__card {
    box-shadow: 0 12px 30px rgba(43, 36, 31, 0.09), 0 4px 12px rgba(43, 36, 31, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
/* Selected-card shadow lives on a pseudo-element of the ITEM, not the
     card: the card has overflow:hidden (needed to clip its own image to
     the rounded corner), and a pseudo-element's box-shadow is clipped by
     its own element's overflow — so it would never actually render if it
     lived on the card. The item has no such constraint. Continuous, not
     binary: opacity follows the same --sl-card-focus-t every card's
     scale/opacity already read, so this stronger shadow fades smoothly
     in and out and layers on top of the card's always-present soft base
     shadow above, instead of instantly swapping whenever
     .is-shopcat-selected changes. That instant swap — multiplied by
     rapid class flicker when two cards sit almost equidistant from the
     anchor — is what read as a glitch rather than a blend. border-radius
     matches the card's own so the shadow follows the rounded shape
     instead of poking out as a rectangle. pointer-events: none so this
     purely decorative layer never intercepts clicks meant for the card
     link underneath it. */
body.sl-js-ready .sl-shop-category--focus-fx .sl-shop-category__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--sl-shop-category-card-radius, 28px);
    box-shadow: 0 22px 54px rgba(43, 36, 31, 0.18), 0 10px 24px rgba(43, 36, 31, 0.10), 0 2px 8px rgba(43, 36, 31, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    opacity: var(--sl-card-focus-t, 0);
    transition: opacity 180ms ease-out;
    pointer-events: none;
  }
/* ── Loop-reset transition freeze ──────────────────────────────
     is-shopcat-loop-jumping (see beginLoopJump()/endLoopJump() in
     theme.js) is present for exactly one frame right as the infinite
     carousel teleports scrollLeft back by one real-set width — every
     visible card swaps for its pixel-identical clone/real counterpart
     and --sl-card-focus-t gets rewritten for the whole set in that same
     tick. Left alone, the item's transform/opacity transition, the
     card's own box-shadow transition, the selected-shadow's opacity
     transition above, and the swipecue-fill's transform transition
     would all ease toward those rewritten values instead of snapping to
     them — that easing, not the teleport itself, is what read as a
     visible glitch rather than an invisible wrap. Forcing transition:
     none for just that one frame makes any such rewrite land instantly,
     identical to the state on either side of it; the class comes off
     the very next frame, so ordinary scroll-linked motion is completely
     untouched. */
.sl-shop-category.is-shopcat-loop-jumping .sl-shop-category__item,
  .sl-shop-category.is-shopcat-loop-jumping .sl-shop-category__card,
  .sl-shop-category.is-shopcat-loop-jumping .sl-shop-category__item::after,
  .sl-shop-category.is-shopcat-loop-jumping .sl-shop-category__swipecue-fill {
    transition: none !important;
  }
/* Small, tasteful "this one's selected" accents layered on top of the
     shadow — never a bounce, never a second transform. The arrow nudges
     slightly larger and the title gains a touch more contrast so the
     selected card reads as clearly chosen, not just scaled up. */
body.sl-js-ready .sl-shop-category--focus-fx .sl-shop-category__item.is-shopcat-selected .sl-shop-category__arrow {
    transform: scale(1.08);
  }
body.sl-js-ready .sl-shop-category--focus-fx .sl-shop-category__item.is-shopcat-selected .sl-shop-category__name {
    text-shadow: 0 1px 16px rgba(20, 17, 14, 0.4);
  }
/* Desktop: larger cards + proportional arrow/title, hover motion */
@media (min-width: 1024px) {
    /* Full-bleed clip boundary: dedicated mask, separate from the
       scrolling viewport — same reason and same architecture as
       .sl-video-rail__mask elsewhere in this file. This used to be the
       scroller's own margin (full-bleed) plus padding-inline (side-space
       inset), both on the one overflow-x:auto element — but padding is
       never a clip boundary (confirmed repeatedly in this build): a
       sixth card whose real edge crossed into that padding-right
       "cushion" still painted there, since overflow only clips at the
       padding box's own outer edge, not at the content-box edge the
       padding visually suggests. The inset now lives here as margin on
       the element that actually clips (overflow:clip below), so a card
       past the intended five has nowhere left to bleed into — its edge
       either sits inside this box (visible, correct) or outside it
       (clipped, correct), with no padding no-man's-land in between.
       50cqw not 50vw for the same reason as before: vw includes the
       page's own scrollbar width, cqw (resolved against .sl-shop-category,
       the established container) doesn't, and this box needs to agree
       exactly with the five-card formula below, which is also cqw-based. */
    .sl-shop-category__mask {
      position: relative;
      overflow: clip;
      isolation: isolate;
      margin-left: calc((50% - 50cqw) + var(--sl-shop-category-desktop-side-space, 32px));
      margin-right: calc((50% - 50cqw) + var(--sl-shop-category-desktop-side-space, 32px));
    }

    @supports not (overflow: clip) {
      .sl-shop-category__mask {
        overflow: hidden;
      }
    }

    /* The scroller now just fills 100% of the mask's own (already
       correctly inset and clip-bounded) box — no margin or padding of
       its own at this tier, so there is no cushion left for anything to
       bleed into. Both explicit 0 (not omitted): the mobile base rule's
       margin-inline:calc(var(--sl-gutter) * -1) and padding-inline
       shorthand would otherwise silently carry through to desktop
       widths — confirmed live: without resetting margin-inline here
       too, the scroller kept its mobile negative margin, pulling it (and
       every card inside) --sl-gutter px left of the mask's own edge. */
    .sl-shop-category__scroller {
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-left: 0;
    }

    /* Center mode needs real, scrollABLE room on both sides for the
       first/last real card to ever reach a centered rest position — the
       fixed five-card mask above is deliberately the opposite of that
       (a tight box with no slack), so center mode overrides it back to
       a plain full-bleed box (no side-space narrowing) and puts the
       centering room back as padding on the SCROLLER inside, same as
       before this turn. This is intentionally not the same fix as the
       default mode above: center mode isn't part of the "exactly five,
       no fragment" requirement (it has no fixed card count to guarantee
       at all — the whole rail scrolls to center whichever card is
       selected), so the padding-isn't-a-clip-boundary issue doesn't
       apply the same way here. Higher specificity than the plain
       .sl-shop-category__mask/__scroller rules, so these win outright. */
    .sl-shop-category--selected-center .sl-shop-category__mask {
      margin-left: calc(50% - 50cqw);
      margin-right: calc(50% - 50cqw);
    }

    .sl-shop-category--selected-center .sl-shop-category__scroller {
      padding-inline: calc((100cqw - var(--category-five-card-width, 290px)) / 2);
      scroll-padding-inline: calc((100cqw - var(--category-five-card-width, 290px)) / 2);
    }

    /* Exactly five complete cards at rest, at ANY real category count —
       the fixed 5 / 4-gaps in this formula never reference the real
       count, so it's the same width whether there are 2 categories or
       20; only how the leftover row space is distributed differs (see
       [data-desktop-fits="true"] below). Was a flat Customizer pixel
       value (--sl-shop-category-card-size-desktop) before — that control
       still works for the 768–1023px tablet tier below, but at desktop
       specifically a fixed size can't also guarantee "exactly five, no
       partial sixth," so this tier now derives width from the container
       instead. 100cqw here resolves against .sl-shop-category (the
       container — see that rule's own comment for why, not the
       full-bleed scroller), so — unlike the scroller, which already
       excludes its own padding-inline from its content box — this is
       the section's FULL width, and both the side-space padding AND the
       four gaps have to be subtracted explicitly to get "what's actually
       left for cards," doubling the side-space term for the left AND
       right edge. */
    .sl-shop-category__track {
      gap: var(--category-desktop-gap);
      --category-five-card-width: calc(
        (100cqw - (var(--sl-shop-category-desktop-side-space, 32px) * 2) - (var(--category-desktop-gap) * 4))
        / 5
      );
    }

    .sl-shop-category__item {
      flex: 0 0 var(--category-five-card-width);
      width: auto;
      max-width: none;
    }

    /* Five or fewer real categories: the row already has leftover space
       (the five-card formula above always assumes five), so distribute
       it BETWEEN cards instead of leaving it as dead space after the
       last one. gap:0 is deliberate — space-between already supplies its
       own even spacing from the leftover room, and an explicit gap on
       top would double up with it. Degrades correctly at every count:
       1 lands at the start (space-between's own behavior for a single
       item), 2 sit at opposite ends, 3-5 distribute evenly between —
       all while keeping the exact --category-five-card-width per card,
       never stretched. data-desktop-fits is rendered by PHP from the
       real, validated category count (<=5) — never a runtime scroll
       measurement, since this formula makes "does it fit" a build-time
       fact, not something to detect after layout. */
    .sl-shop-category[data-desktop-fits="true"] .sl-shop-category__track {
      width: 100%;
      justify-content: space-between;
      gap: 0;
    }

    .sl-shop-category__card {
      --sl-sc-arrow: clamp(32px, calc(var(--category-five-card-width) * 0.16), var(--sl-shop-category-arrow-size, 48px));
      --sl-sc-icon: clamp(28px, calc(var(--category-five-card-width) * 0.106), 34px);
    }

    .sl-shop-category__meta {
      gap: clamp(8px, calc(var(--category-five-card-width) * 0.031), 10px);
      padding: clamp(14px, calc(var(--category-five-card-width) * 0.065), 21px);
    }

    .sl-shop-category__arrow {
      right: clamp(12px, calc(var(--category-five-card-width) * 0.052), 20px);
      bottom: clamp(12px, calc(var(--category-five-card-width) * 0.052), 20px);
    }

    .sl-shop-category__name {
      font-size: min(var(--sl-shop-category-card-title-size, 22px), calc(var(--category-five-card-width) * 0.085));
    }

    .sl-shop-category__swipecue-label {
      font-size: 12px;
    }

    .sl-shop-category__swipecue-rail {
      --sl-swipecue-track-w: 130px;
      --sl-swipecue-fill-w: 32px;
    }

    /* The mobile/tablet "Swipe to Explore" cue and its finite progress
       line never appear on desktop — five complete cards are already
       fully visible at rest (or the whole set is, at ≤5 categories), and
       when more than five exist, the arrow buttons below take over as
       the desktop-appropriate discovery/navigation affordance instead. */
    .sl-shop-category__footer {
      display: none;
    }

    /* Desktop nav: real buttons, centered below the rail — same
       restrained treatment and position as the video rail's own
       prev/next pair. Rendered by PHP only when the real category count
       exceeds five (see the template); CSS here only ever needs to hide
       it below 1024px and at ≤5 categories, both already handled by not
       being in the DOM at all in the ≤5 case, and by this whole block
       being scoped to 1024px+ for the mobile/tablet case. */
    .sl-shop-category__nav {
      /* PHP only ever renders this when the real category count exceeds
         five, but infinite mode has its own, already-approved discovery
         treatment (continuous scroll, no finite ends) — a "one step"
         arrow control doesn't apply there, so it stays hidden whenever
         infinite is on regardless of count, the same as the progress
         cue above. */
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: calc(var(--sl-shop-category-swipe-gap, 18px) * 0.18 - 67px);
    }

    .sl-shop-category__arrow-btn {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(43, 36, 31, 0.14);
      border-radius: 999px;
      background-color: #FFFFFF;
      color: #2B241F;
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(20, 17, 14, 0.08);
      transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    }

    .sl-shop-category__arrow-btn svg {
      width: 18px;
      height: 18px;
    }

    @media (hover: hover) and (pointer: fine) {
      .sl-shop-category__arrow-btn:not(:disabled):hover {
        background-color: #F3EEE6;
      }
    }

    .sl-shop-category__arrow-btn:focus-visible {
      outline: 2px solid var(--sl-charcoal, #2B241F);
      outline-offset: 2px;
    }

    .sl-shop-category__arrow-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .sl-shop-category--infinite .sl-shop-category__nav {
      display: none;
    }
  }
/* One unscoped hover rule, in all cases: it only ever contributes the
     lift variable (consumed by the item's single transform above) plus a
     shadow on the card surface, never a full transform string, so it
     composes cleanly with the reveal/focus system instead of overwriting
     it. Triggered on the item (not the card) so the same element that
     owns the transform also owns the variable — custom properties don't
     flow upward from a child's :hover to its parent. */
@media (hover: hover) and (pointer: fine) {
    .sl-shop-category__item:hover {
      --sl-card-hover-lift-y: -6px;
    }

    .sl-shop-category__item:hover .sl-shop-category__card {
      box-shadow: var(--sl-shop-category-card-shadow-hover, 0 9px 18px rgba(43, 36, 31, 0.075), 0 24px 50px rgba(43, 36, 31, 0.093), inset 0 1px 0 rgba(255, 255, 255, 0.20));
    }

    .sl-shop-category__item:hover .sl-shop-category__img,
    .sl-shop-category__item:hover .sl-shop-category__video {
      transform: scale(1.06);
    }

    .sl-shop-category__item:hover .sl-shop-category__arrow {
      transform: translateX(3px);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .sl-shop-category__item,
    .sl-shop-category__card,
    .sl-shop-category__img,
    .sl-shop-category__video,
    .sl-shop-category__arrow {
      transition: none;
    }

    /* The sweep is purely decorative, so it is removed outright rather than
       parked mid-track — the rail and its JS-driven progress fill both stay
       fully visible and functional. */
    .sl-shop-category__swipecue-rail::after {
      content: none;
    }

    /* Wins the transform/opacity property outright regardless of what
       --sl-card-focus-scale resolves to elsewhere — no grow effect, no
       side-card dimming, full stop. */
    .sl-shop-category__item {
      transform: none;
      opacity: 1;
    }

    .sl-shop-category__scroller {
      scroll-behavior: auto;
    }

    .sl-shop-category__swipecue-fill {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     Homepage discovery canvas.
     ONE background shared by Shop by Category → Editorial Bridge →
     marquee → Bestsellers. Each of those sections previously painted its
     own background (#FFFFFF for categories, #FFFDF8 for Bestsellers),
     which is what drew the visible white-to-ivory horizontal line between
     them: two flat fills meeting at an exact pixel row.

     The blend is deliberately stretched over the whole stack rather than
     eased across a short band at the junction. This wrapper is roughly
     2200–3000px tall in practice, so 0%→40% is a ~900–1200px ramp — far
     past the 500–700px minimum needed for the eye to stop resolving an
     edge. A short gradient would just move the seam, not remove it.

     Both end stops are rich white so the canvas meets its neighbours
     (announcement bar above, Rooms in Texture below, both effectively
     white) with no perceptible step at either boundary.
     ═══════════════════════════════════════════════════════════ */
.sl-discovery {
    --ss-rich-white: #FCFBF8;
    --ss-warm-ivory: #F7F2EA;
    position: relative;
    background-image: linear-gradient(
      180deg,
      var(--ss-rich-white) 0%,
      var(--ss-warm-ivory) 40%,
      var(--ss-warm-ivory) 66%,
      var(--ss-rich-white) 100%
    );
  }
/* Belt-and-braces: any section dropped into this wrapper later inherits
     the canvas instead of cutting its own band out of it. The individual
     section rules are also set to transparent at their own definitions —
     this is the guarantee, not the mechanism. */
.sl-discovery > * {
    background-color: transparent;
  }
/* ═══════════════════════════════════════════════════════════
     Shoppable Product Videos — Step 1 of the campaign system.
     A horizontally scrollable rail of vertical product-video cards.
     No background/card/border of its own — same as its neighbours,
     reads as sitting directly on the shared .sl-discovery canvas.

     Layout is fully reusable: nothing campaign-specific (colour, copy,
     imagery) is hardcoded here — all of that comes from the Customizer.
     ═══════════════════════════════════════════════════════════ */
.sl-video-rail {
    position: relative;
    /* overflow:hidden here contains the desktop scroller's full-bleed
       negative-margin trick below — same reason Shop by Category's own
       section rule carries it. */
    overflow: hidden;
    /* Query container for the N-visible-cards width formula (see
       .sl-video-rail__scroller/.sl-video-rail__item at 768px+): this
       element (unlike the scroller) has no horizontal padding of its
       own, so 100cqw measured from here is the true unconstrained
       available width — decoupled from the scroller's own padding,
       which matters because a container query unit measured on a
       PADDED element only ever returns that element's CONTENT box
       (confirmed live: a 1265px-wide padded probe measured 1185px via
       cqw, not 1265px), and computing available card width from a
       padding-coupled reference is what caused a visible 5th-card
       sliver in an earlier pass of this build (see the scroller's own
       comment below for the full account). */
    container-type: inline-size;
    /* 8px here + Shop by Category's own ~56px padding-bottom (untouched)
       lands the gap above this section's header at ~64px on mobile.
       Desktop overrides both sides with Customizer-driven spacing below. */
    padding: 8px 0 64px;
  }
/* No background of its own, deliberately (a prior pass here added one —
     removed after live inspection confirmed the real cause of the
     "grey rectangular container" complaint: .sl-discovery, the shared
     wrapper this section sits inside alongside Shop by Category and the
     countdown banner, already carries its own tuned cross-section
     gradient (confirmed live: linear-gradient through #FCFBF8 →
     #F7F2EA → #FCFBF8). Painting a SECOND, separately-opaque gradient on
     this section on top of that created a hard rectangular seam exactly
     where the two disagreed — which is what actually read as a grey box
     and a segmented transition, not a real "grey" color anywhere. Fully
     transparent here lets the one, already-smooth shared gradient show
     through uninterrupted, same as this section's neighbours. */
.sl-video-rail__inner {
    /* Its own configurable container (Customizer: Section Max Width /
       Desktop Side Gutter) — deliberately wider than the shared
       --sl-max-width/--sl-gutter tokens used elsewhere on the site, so
       four cards can be substantially larger on big desktop screens.
       Mobile padding stays a fixed 18px (tighter than the fluid gutter)
       regardless, restored to the desktop gutter at 768px+ below. */
    max-width: var(--focus-max-width, 1560px);
    margin: 0 auto;
    padding: 0 18px;
  }
.sl-video-rail__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }
.sl-video-rail__head-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 620px;
  }
/* Right-side group: "View all" + the prev/next nav (when present).
     Always rendered (unlike .nav, which only exists for 2+ slots) so
     "View all" has a consistent right-hand slot regardless of slot
     count. margin-left:auto keeps it pinned right even when .head wraps
     it onto its own line below a long heading at narrow widths. */
.sl-video-rail__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
  }
/* Heading Alignment (Customizer). Left is the default and needs no
     modifier class — the rules above already put the text on the left
     with the nav arrows on the right, side by side.

     Center/Right switch .head from a row to a column instead of trying
     to center the text block in whatever space is left beside a nav
     that stays pinned to one side — with the nav present, that would
     only center it relative to the leftover space, not the section.
     Stacking (text block, then nav below, both sharing the same
     alignment) reads as a single coherent block at any width instead. */
.sl-video-rail__head--align-center,
  .sl-video-rail__head--align-right {
    flex-direction: column;
  }
.sl-video-rail__head--align-center .sl-video-rail__head-text {
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }
.sl-video-rail__head--align-center .sl-video-rail__description {
    margin-left: auto;
    margin-right: auto;
  }
.sl-video-rail__head--align-center .sl-video-rail__actions {
    align-self: center;
    margin-left: 0;
  }
.sl-video-rail__head--align-right .sl-video-rail__head-text {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
  }
.sl-video-rail__head--align-right .sl-video-rail__description {
    margin-left: auto;
    margin-right: 0;
  }
.sl-video-rail__head--align-right .sl-video-rail__actions {
    align-self: flex-end;
    margin-left: 0;
  }
.sl-video-rail__eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
/* "Short refined teal rule before the text" — a small fixed accent,
     not a Customizer color of its own: it always matches the eyebrow
     color so the two read as one accent treatment, not two separately-
     tunable pieces that could drift apart. */
.sl-video-rail__rule {
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--focus-eyebrow-color, #2F6F68);
  }
.sl-video-rail__eyebrow {
    font-family: var(--sl-font-sans);
    font-size: var(--focus-eyebrow-size, 13px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--focus-eyebrow-color, #2F6F68);
  }
.sl-video-rail__heading {
    /* No top margin when the eyebrow is hidden: the sibling rule below
       restores the gap only when .eyebrow-row actually precedes it, so
       hiding the eyebrow removes its spacing completely instead of
       leaving a stray gap. */
    margin: 0;
    font-family: var(--sl-font-serif);
    /* Both ends of the fluid clamp are Customizer-driven (defaults 34px
       mobile / 50px desktop, brought down from an earlier 38/56 pass).
       Live measurement showed the heading was one of several stacking
       contributors to the section's total vertical span exceeding real
       desktop viewport heights — see .sl-video-rail__media's own comment
       on the card aspect-ratio default for the full diagnosis. Still a
       genuinely large, editorial heading — just no longer competing with
       the cards below it for attention, or for vertical room. */
    font-size: clamp(var(--focus-heading-size-mobile, 34px), 3.25vw, var(--focus-heading-size-desktop, 50px));
    font-weight: 500;
    /* Tight, display-serif line-height — correct at this scale; a looser
       value here reads as uncontrolled on a large serif display face. */
    line-height: 1.02;
    color: #2F241D;
    /* Hard two-line ceiling — a long campaign heading must not be able
       to stretch this section's height on a narrow phone. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.sl-video-rail__eyebrow-row + .sl-video-rail__heading {
    margin-top: 14px;
  }
.sl-video-rail__description {
    margin: 14px 0 0;
    max-width: 520px;
    font-family: var(--sl-font-sans);
    font-size: var(--focus-desc-size, 16px);
    font-weight: 400;
    line-height: 1.55;
    color: #4C4038;
  }
/* Restrained editorial CTA: sentence case (never uppercase, unlike the
     per-card "View Product" micro-label below) so it reads as a quiet
     link, not another shouty eyebrow-style tag. */
.sl-video-rail__viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-family: var(--sl-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: #2B241F;
    text-decoration: none;
    white-space: nowrap;
  }
.sl-video-rail__viewall:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 3px;
  }
/* The one restrained accent in this whole header: a small coastal
     teal, only on the arrow glyph, never on the link text itself. */
.sl-video-rail__viewall-arrow {
    display: inline-flex;
    color: #3D6B63;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
.sl-video-rail__viewall-arrow svg {
    width: 16px;
    height: 16px;
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__viewall:hover .sl-video-rail__viewall-arrow {
      transform: translateX(3px);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .sl-video-rail__viewall-arrow {
      transition: none;
    }
  }
/* Nav row: its own centered strip BELOW the rail (not beside "View
     all" any more) — reuses .sl-video-rail__inner's own container/gutter
     rules via the shared class on the same element (see the template),
     so it lands on the exact same grid as the heading. Hidden entirely
     on mobile (desktop-only nav, same as before), shown at 768px below. */
.sl-video-rail__navrow {
    display: none;
  }
.sl-video-rail__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
/* Soft ivory-on-hover rather than inverting to a solid dark fill — a
     fully dark hover on small interactive controls previously read as
     harsh and disconnected from the rest of the palette on the bag
     button, so the same soft treatment is used here. All five visual
     properties are Customizer-driven; defaults match the original
     fixed values exactly. */
.sl-video-rail__arrow {
    width: var(--focus-arrow-size, 48px);
    height: var(--focus-arrow-size, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--focus-arrow-border, #DBD5CD);
    border-radius: var(--focus-arrow-radius, 999px);
    background: var(--focus-arrow-bg, #FFFFFF);
    color: var(--focus-arrow-color, #2B241F);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  }
.sl-video-rail__arrow svg {
    width: var(--focus-arrow-icon-size, 18px);
    height: var(--focus-arrow-icon-size, 18px);
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__arrow:not(:disabled):hover {
      background: var(--focus-arrow-hover-bg, #F3EEE6);
      color: var(--focus-arrow-hover-color, #2B241F);
    }
  }
.sl-video-rail__arrow:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 2px;
  }
.sl-video-rail__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }
/* Mobile: 16px fixed outer edge (deliberately narrower than the
     header's fluid --sl-gutter) so the rail runs closer to the screen
     edge than the contained header text above it — more room for the
     "one full card + a peek of the next" swipe affordance. */
/* Dedicated clipping mask, separate from the scrolling viewport below.
     Added alongside the arrow-transition rewrite in assets/js/theme.js,
     which fixes the actual verified cause of the outgoing card flashing
     back into view (the card's WAAPI fade and the scrollLeft tween were
     two independent clocks that could finish a frame or more apart,
     letting a still-onscreen card revert to full opacity before the
     scroll caught up — see that file's own comment). This mask is the
     belt to that fix's suspenders: a plain, non-scrolling ancestor with
     overflow:clip has no scroll-container state of its own to be out of
     sync with an animation in the first place, so it stays a hard,
     unconditional clip boundary regardless of how the transition inside
     it is driven — including if the parallax/tilt or a future change
     ever re-introduces a second timing source. isolation:isolate keeps
     the animated cards in their own stacking context so they can never
     paint above neighbouring sections either. */
.sl-video-rail__mask {
    position: relative;
    overflow: clip;
    isolation: isolate;
  }
@supports not (overflow: clip) {
    .sl-video-rail__mask {
      overflow: hidden;
    }
  }
.sl-video-rail__scroller {
    margin-top: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Browsers auto-adjust a scrollable element's own scrollLeft to
       compensate for layout shifts inside it (CSS Scroll Anchoring) —
       confirmed live: resizing the viewport (which changes every card's
       own width, since it's Customizer/viewport-driven) silently moved
       this rail's scroll position by dozens of pixels with no user
       interaction at all. That's exactly the "unexpected jump after
       resize" the transition system must avoid, so it's turned off
       here specifically rather than left to the browser's default. */
    overflow-anchor: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    /* pan-x alone made a touch/pen gesture that STARTS on the rail commit
       to horizontal-only, unable to continue into a vertical page scroll
       mid-gesture. Widened so touch drags can go either way (or pinch);
       trackpad two-finger scrolling is a separate input path (wheel
       events, not touch) and isn't affected by touch-action at all —
       that was fixed by removing the wheel listener in theme.js instead. */
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    /* Explicit (matches the default, stated for clarity): reaching
       either end of the rail must never trap vertical page scrolling. */
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 16px 28px;
    /* Written per-frame by the scroll-velocity motion controller (see
       assets/js/theme.js); every card shell/shadow/media below inherits
       these via plain CSS custom-property inheritance, so the rail
       needs exactly one scroll listener, not one per card. Declared
       here as the at-rest defaults so everything is fully static
       before JS runs and under prefers-reduced-motion (where the
       script never touches them at all). */
    --rail-shadow-x: 0px;
    --rail-shadow-stretch: 1;
    --rail-shadow-opacity: 1;
    --rail-card-tilt: 0deg;
    --rail-card-lift: 0px;
    --rail-media-x: 0px;
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__scroller {
      cursor: grab;
    }

    .sl-video-rail__scroller.is-rail-dragging {
      cursor: grabbing;
    }
  }
.sl-video-rail__scroller::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
.sl-video-rail__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--focus-card-gap-mobile, 14px);
    margin: 0;
    padding: 0;
    list-style: none;
    /* Mobile has no re-centering behavior at all — it keeps its own
       fixed "one full card + a peek of the next" swipe treatment
       regardless of Card Size — Mobile, unaffected by anything below.
       The 768px+ desktop/tablet tier below explicitly OVERRIDES width
       and margin with its own calculated values for the Card Size —
       Desktop re-centering behavior (see that block's own comment for
       why justify-content:center and width:fit-content were both tried
       here first and both measurably broke containment before this). */
  }
/* clamp(210px, 66vw, 250px) — smaller than the section's first pass,
     which ran up to 340px and read as too large. Still leaves a clearly
     visible portion of the next card at common phone widths without
     stretching to fill the screen at either end of the clamp. Mobile
     sizing is otherwise untouched by the N-visible-cards system below
     (768px+ only) — this is the one approved mobile card treatment,
     proportionally resized by the Card Size — Mobile Customizer control
     (real width, not transform:scale() — that would leave the original
     hit area and gaps behind and clip the resized card against its
     neighbours). Default 100% (a *1 multiplier) leaves it byte-for-byte
     unchanged. */
.sl-video-rail__item {
    flex: 0 0 auto;
    width: calc(clamp(210px, 66vw, 250px) * var(--focus-card-scale-mobile, 1));
    scroll-snap-align: start;
    /* Outer shell: owns positioning, the contact shadow below, and all
       3D card movement (hover lift + scroll-driven lift/tilt). Deliberately
       NOT overflow:hidden — .card's own border-radius clipping lives one
       level in, so the shadow here and on .card can both bleed past the
       rounded corners instead of being cut off by the same box that
       clips the media. z-index:0 gives it its own local stacking context
       (via position + a non-auto z-index) so the -1 contact-shadow
       pseudo-element below is scoped to this card alone, never compared
       against neighbouring cards.

       One canonical transform, same rule the rest of this theme follows
       for cards with more than one motion source (see Shop by Category):
       hover and scroll-driven lift only ever contribute a variable each,
       combined additively, so neither can silently overwrite the other. */
    --hover-lift: 0px;
    position: relative;
    z-index: 0;
    transform:
      translateY(calc(-1 * (var(--rail-card-lift, 0px) + var(--hover-lift, 0px))))
      rotate(var(--rail-card-tilt, 0deg));
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
/* While the rail is actively scrolling (class toggled by theme.js),
     shell/shadow/media motion all update near-instantly instead of
     easing — they must track velocity responsively during motion; the
     idle-settle transitions below only apply once input has stopped. */
.sl-video-rail__scroller.is-rail-motion-active .sl-video-rail__item {
    transition: none;
  }
/* Contact shadow: a small, heavily-blurred puddle anchored to the
     shell's bottom edge, carrying the scroll-driven directional trail
     motion (--rail-shadow-x/-stretch/-opacity, written by theme.js).
     Inset tightened 12%→24% and blur reduced 11px→7px — live inspection
     at the previous values showed this shadow's own blur bleed reaching
     far enough past each card's edge to nearly touch the next card
     across the rail's own gap, which combined with the card's own
     box-shadow below into what read as one continuous grey slab under
     all four cards instead of four individually-grounded ones. Tighter
     here keeps the scroll-trail motion feature itself intact while
     confining its footprint to well within each card's own width. */
.sl-video-rail__item::after {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: -4px;
    height: 10px;
    border-radius: 50%;
    background: rgba(47, 36, 29, 0.10);
    /* Static, never animated: changing blur radius forces the browser to
       re-rasterize the blur every frame it changes, which is measurably
       more expensive than a transform/opacity change and was a real
       contributor to scroll jank. Speed is now expressed only through
       transform (translate/stretch) and a restrained opacity dip below —
       both compositor-only, no repaint. */
    filter: blur(7px);
    /* translate3d (not translate) so this stays on its own GPU layer —
       it's repainted every scroll frame while the rail is moving.
       scaleX stretches the puddle horizontally at speed, as though it's
       smearing slightly in the direction of travel; transform-origin
       stays centered (the default) so it grows evenly within the
       already-centered 12%/12% inset rather than sliding sideways. */
    transform: translate3d(var(--rail-shadow-x, 0px), 0, 0) scaleX(var(--rail-shadow-stretch, 1));
    opacity: var(--rail-shadow-opacity, 1);
    pointer-events: none;
    z-index: -1;
    /* Default (idle-settle) timing — this is what carries the "shadow
       eases back underneath the card" motion once scrolling stops. */
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
/* No transition at all while actively scrolling (not just a shorter
     one) — a transition of any length fights a value that's already
     being rewritten every animation frame, which is what previously
     read as delayed, "rubbery" motion. The 500ms settle above only ever
     applies once scrolling has genuinely stopped. */
.sl-video-rail__scroller.is-rail-motion-active .sl-video-rail__item::after {
    transition: none;
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__item:hover {
      /* Requested range 4-6px — 5px sits in the middle. */
      --hover-lift: 5px;
    }
  }
.sl-video-rail__card {
    position: relative;
    display: block;
    border-radius: var(--focus-card-radius, 30px);
    overflow: hidden;
    background: #F7F2EA;
    text-decoration: none;
    /* A single, much lighter two-layer shadow (was three layers running
       up to 0.22/0.30 alpha with 22-34px blur) — live inspection showed
       the old recipe's darkness and reach, combined with the separate
       .item::after contact shadow alongside it, was the main source of
       the "grey slab behind the whole rail" complaint. --focus-card-
       shadow-rest is computed in inc/enqueue.php from the Card Shadow
       Strength Customizer control (0 disables it outright — see that
       file for the exact mapping). */
    box-shadow: var(--focus-card-shadow-rest, 0 2px 5px rgba(45, 34, 27, 0.035), 0 10px 24px rgba(45, 34, 27, 0.065));
    transition: box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__card:hover {
      box-shadow: var(--focus-card-shadow-hover, 0 4px 8px rgba(45, 34, 27, 0.045), 0 14px 28px rgba(45, 34, 27, 0.08));
    }
  }
.sl-video-rail__card:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 3px;
  }
/* Fixed aspect-ratio box, independent of the video/image's own intrinsic
     size — this is what prevents layout shift while media loads. Default
     lowered from 4/5.15 to 4/5 (still selectable in the Customizer choice
     list either way): live measurement of the full heading+cards+arrows
     composition found the card row alone was ~65% of the section's total
     vertical span (444.7px of 681.9px), the single largest contributor to
     "heading, cards and arrows feel like three separate screens" on real
     desktop viewport heights — most of that span is a fixed cost (item
     width is already Customizer/viewport-driven, not something this pass
     touches), so the aspect ratio was the one safe, pre-approved lever
     left to pull. A merchant who has already chosen a ratio is unaffected
     — only the default for a fresh install changes. */
.sl-video-rail__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--focus-card-aspect, 4 / 5);
    /* Parallax: shifts opposite the card shell's own tilt/shadow-trail
       direction, as a separate, slightly "looser" layer inside the
       frame. .card's own overflow:hidden clips this, so the small
       (max ~4px) displacement never escapes the rounded corners. Not a
       filter, not applied to the <video>/<img> itself — a plain
       transform on the wrapper, safe to animate during playback. */
    transform: translate3d(var(--rail-media-x, 0px), 0, 0);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
.sl-video-rail__scroller.is-rail-motion-active .sl-video-rail__media {
    transition: none;
  }
.sl-video-rail__video,
  .sl-video-rail__poster-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
@media (hover: hover) and (pointer: fine) {
    .sl-video-rail__card:hover .sl-video-rail__video,
    .sl-video-rail__card:hover .sl-video-rail__poster-img {
      /* Capped at the requested 1.025 (was 1.03) — a deliberately more
         restrained hover scale for the larger, more editorial cards. */
      transform: scale(1.025);
    }
  }
/* Neutral branded fallback — the last tier of the media priority chain
     (custom video > custom image > WooCommerce product image > this),
     used only when a repeater item genuinely has none of the above. A
     quiet on-brand motif rather than a broken-image look or a stretched
     generic placeholder graphic. */
.sl-video-rail__fallback-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F2EA;
    color: #B39273;
  }
.sl-video-rail__fallback-art svg {
    width: 28%;
    height: 28%;
  }
/* Inset bumped 12px → 15px (was tuned against a 26px card radius;
     now 30px) so the badge's own rounded pill sits clear of the card's
     larger corner curve rather than brushing against it. */
.sl-video-rail__discount,
  .sl-video-rail__soldout {
    position: absolute;
    top: 15px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: var(--sl-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
.sl-video-rail__discount {
    left: 15px;
    border: 1px solid rgba(47, 36, 29, 0.08);
    background: rgba(255, 255, 255, 0.85);
    color: #2B241F;
  }
.sl-video-rail__soldout {
    right: 15px;
    background: rgba(43, 36, 31, 0.82);
    color: #FFFFFF;
  }
/* Scrim + info sit ABOVE the media (not below it, as a separate card
     body) — an overlay is what the brief calls for, and it keeps the
     card as one uninterrupted vertical video surface. */
/* Reduced from 60% → 50%: with the overlay text now more compact
     (smaller font/padding below), it needs less of the card height
     behind it for legibility, and a shorter scrim leaves more of the
     video itself uncovered. */
/* Stronger and more graduated than a plain 2-stop fade: dark enough at
     the very bottom to guarantee white text stays readable over bright
     product photography, but tapering to fully transparent by 72% up
     the card instead of washing the whole image — a uniform tint would
     have muddied the product photo itself, which this avoids. */
.sl-video-rail__scrim {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 62%;
    /* Bottom stop nudged 0.82 → 0.86 — "stronger but restrained": the
       larger cards carry more real product photography behind the text
       now, so a slightly firmer floor keeps the price/title reliably
       readable without darkening the rest of the gradient's shape. */
    background: linear-gradient(
      to top,
      rgba(25, 19, 15, 0.86) 0%,
      rgba(25, 19, 15, 0.52) 38%,
      rgba(25, 19, 15, 0.12) 72%,
      transparent 100%
    );
    pointer-events: none;
  }
.sl-video-rail__info {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px 16px;
    color: #FFFFFF;
  }
/* One compact size across all breakpoints (no separate desktop
     override) — the cards themselves no longer scale up as much between
     mobile and desktop, so a single smaller size reads consistently at
     every width instead of needing its own per-tier value. */
.sl-video-rail__name {
    font-family: var(--sl-font-serif);
    font-size: 14px;
    font-weight: 500;
    /* Two lines, not one: a single line was clipping longer real
       product names mid-word with no visual indication anything was
       cut off. line-height fixes the clamped box to a known two-line
       height regardless of exact font metrics, so it reads as a
       deliberate two-line title area, not a cramped truncation. */
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.sl-video-rail__price {
    margin-top: 5px;
    font-family: var(--sl-font-sans);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
.sl-video-rail__price del {
    margin-right: 6px;
    font-size: 0.82em;
    font-weight: 400;
    opacity: 0.65;
    text-decoration: line-through;
  }
.sl-video-rail__price ins {
    font-weight: 600;
    text-decoration: none;
  }
.sl-video-rail__view {
    margin-top: 8px;
    font-family: var(--sl-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
  }
@media (min-width: 768px) {
    .sl-video-rail {
      /* Both sides now Customizer-driven (defaults 40px/84px land the
         88-120px-combined-with-Shop-by-Category and 72-96px targets
         respectively — see inc/customizer.php and inc/enqueue.php). */
      padding: var(--focus-padding-top-desktop, 40px) 0 var(--focus-padding-bottom-desktop, 72px);
      /* Declared once, here, on the shared ancestor of .inner and .mask
         below, specifically so both can reference the SAME resolved
         value via inheritance instead of each repeating the clamp()
         expression — two textually-identical-but-separate copies is
         exactly the "value defined in more than one place" pattern that
         has silently drifted apart elsewhere in this build before. The
         Customizer's "Desktop Side Gutter" number is this clamp's
         CEILING (reached only at very wide viewports); it narrows
         fluidly toward 28px via 4vw below that. vw (not cqw) is fine
         here specifically because — unlike percentages/scroll-padding —
         it has no per-property resolution quirk; it always means the
         real viewport, everywhere it's used. */
      --focus-resolved-gutter: clamp(28px, 4vw, var(--focus-gutter-desktop, 72px));
    }

    /* Restores this section's own (Customizer-driven) gutter at 768px+
       — the fixed 18px above is a mobile-only tightening toward the
       scroller's own edge. */
    .sl-video-rail__inner {
      padding: 0 var(--focus-resolved-gutter);
    }

    /* Nav row: its own centered strip BELOW the rail (moved out from
       beside "View all" — see the template), sharing .inner's own
       container/gutter via the same class on one element so it lands on
       the exact grid as the heading and the first/last card. */
    .sl-video-rail__navrow {
      display: flex;
      justify-content: center;
      margin-top: var(--focus-nav-gap-above-desktop, 22px);
    }

    .sl-video-rail__mask {
      /* The left inset lives here now, as a real position offset (margin)
         on the element that actually clips — NOT as padding-left on the
         scroller inside it. This looks like a purely cosmetic move but
         fixes a real, recurring bug: padding is never a clip boundary
         (confirmed repeatedly this build), so with the inset as padding,
         "one card + one gap" navigation left the outgoing card's own
         trailing edge sitting at (inset − gap) — 40px − 22px = 18px in
         this theme's own default values — which is POSITIVE, i.e. still
         inside the mask's [0, width] clip box, on every single "next"
         click, not just the first. A visible sliver of the previous card
         was permanently left peeking out from under the new first card.
         Moving the SAME inset value onto the mask's own margin-left
         means the mask's box now BEGINS at that inset — so the outgoing
         card's trailing edge (still at the same physical viewport
         position as before) now falls before the mask's own left edge
         and is finally, actually clipped, every time. --focus-inset-left
         and --focus-content-cap are declared here (rather than on the
         scroller) purely because this is now the more logical home for
         them — being cqw-based, not plain "%", they resolve correctly
         for any descendant regardless of which ancestor declares them
         (see the scroller's own comment, still relevant, on why cqw and
         not "%" is required here at all). */
      margin-left: var(--focus-inset-left);
      width: var(--focus-content-cap);
      /* --focus-resolved-gutter is declared once, on .sl-video-rail
         itself (see above) — inherited here, not redeclared, so this
         can never disagree with .sl-video-rail__inner's own padding. */
      --focus-inset-left: calc(max(0px, (100cqw - var(--focus-max-width, 1560px)) / 2) + var(--focus-resolved-gutter, 40px));
      --focus-content-cap: calc(min(100cqw, var(--focus-max-width, 1560px)) - (var(--focus-resolved-gutter, 40px) * 2));
    }

    .sl-video-rail__scroller {
      margin-top: var(--focus-heading-gap-desktop, 28px);
      /* Explicit 0 (not just "omitted") — the mobile base rule's
         padding:4px 16px 28px shorthand sets left/right too, and a media
         query only overrides properties it actually declares; leaving
         these out here let the mobile 16px silently carry through to
         desktop widths (caught live). .sl-video-rail__mask now owns both
         the width AND the left inset (as its own margin-left, not
         padding — see the mask's own comment for why that distinction is
         the actual containment fix). Left/right padding is no longer a
         flat 0 here — see the Card Size — Desktop re-centering comment
         below, on this same selector, for why and how it's computed;
         scroll-padding-left is set to the SAME value there too (not left
         at 0) — see that comment for why plain padding alone measured
         out to be insufficient on its own. */
      scroll-padding-left: var(--focus-center-pad, 0px);
      padding-top: 4px;
      /* Unchanged at 40px — this is shadow-clearance room for the
         cards' own contact/directional shadow inside the scroller's
         overflow-y:hidden, not the gap to the next section (that's
         .sl-video-rail's own bottom padding, corrected separately). */
      padding-bottom: 40px;
    }

    /* Exactly-N-visible-cards width formula (tablet tier, 768–1023px,
       using the Tablet Visible Cards / Tablet Card Gap Customizer
       settings). --focus-n/--focus-gap are redefined (not re-declared)
       at 1024px/1280px below; because custom properties inherit,
       .sl-video-rail__item's own formula — written once, here — picks
       up the new values automatically, no JS involved. The Card Size —
       Desktop control multiplies the per-card result at the very end,
       after gaps are already subtracted, so the gaps themselves stay
       fixed and only the cards actually resize — "maintain four equal
       cards and three equal gaps" exactly. */
    .sl-video-rail__scroller {
      --focus-n: var(--focus-visible-cards-tablet, 2);
      --focus-gap: var(--focus-card-gap-tablet, 18px);
      /* Re-centering for Card Size — Desktop below 100%: FOUR approaches
         were tried here, in order. (1) justify-content:center on this
         overflow-x:auto flex row measured live to inflate its own
         scrollWidth even with no real overflow, pushing card 1 before
         the mask's own left edge — broke containment. (2)
         width:fit-content on .sl-video-rail__track didn't shrink-wrap to
         its children's true content width at all (measured 1409px
         against an expected ~1123px). (3) an explicit calc() width plus
         margin:0 auto on the track DID compute the right width/margin
         (verified live) but moved card 1 away from local x:0 — and
         scroll-snap-align:start's whole job is to force card 1 flush
         against the scrollport's edge, so the browser was synchronously
         re-snapping scrollLeft back to card 1's real offset (measured
         live: 93px) on every load, undoing the centering; no JS-side
         scrollLeft correction could beat this (confirmed live: setting
         scrollLeft to anything from 0–100 snapped straight back to 93 in
         the same synchronous tick). (4) padding-left/-right on the
         SCROLLER instead of margin on the track measured out identically
         broken (snapped to 83px, the padding amount, instead of 93px) —
         because scroll-snap-align:start's target is the snapport's true
         edge (its padding-BOX origin, i.e. scrollLeft:0), which sits
         BEFORE the container's own padding, not after it; the browser
         doesn't distinguish "gap from margin" vs "gap from padding" and
         scrolls past either one by default.
         The fix scroll-snap actually provides for exactly this — "a
         gap before the snap target is intentional, don't scroll past
         it" — is scroll-padding, a distinct property from the
         scroller's own padding. Combining both (real padding-left/-right
         here for the visible gap, PLUS scroll-padding-left set to the
         same value on this same selector, above) tells scroll-snap that
         scrollLeft:0 — where the padding is already showing and card 1
         sits right after it — IS the aligned position, so it has no
         reason to move away from it. Verified live. At 100%+ (every
         pre-existing configuration, and any Card Size setting at or
         above 100%) max(0px, …) floors --focus-center-pad at 0 and
         nothing changes; below 100% the row is genuinely narrower and
         this centers it. */
      --focus-track-natural-width: calc(
        ((var(--focus-content-cap) - (var(--focus-gap) * (var(--focus-n) - 1))) * var(--focus-card-scale-desktop, 1))
        + (var(--focus-gap) * (var(--focus-n) - 1))
      );
      --focus-center-pad: max(0px, calc((var(--focus-content-cap) - var(--focus-track-natural-width)) / 2));
      padding-left: var(--focus-center-pad);
      padding-right: var(--focus-center-pad);
    }

    .sl-video-rail__item {
      width: calc(
        (
          (var(--focus-content-cap) - (var(--focus-gap) * (var(--focus-n) - 1)))
          / var(--focus-n)
        ) * var(--focus-card-scale-desktop, 1)
      );
      max-width: none;
    }

    /* No explicit width/margin needed: .sl-video-rail__scroller's own
       padding (above) already narrows its content box to exactly
       --focus-track-natural-width, and a block-level flex container's
       width:auto fills its containing block's content box by default —
       so the track lands at the right width for free. It still has no
       overflow:hidden of its own (confirmed earlier in this file), so if
       there ARE more than N items, they simply extend past the track's
       own box without being clipped by it — .sl-video-rail__scroller
       (the actual overflow-x:auto element) is what continues to see and
       scroll through the true, full content regardless of what width
       this element itself claims. */
    .sl-video-rail__track {
      gap: var(--focus-gap);
    }
  }
@media (min-width: 1024px) {
    /* 1024–1279px: one fewer than the Visible Cards — Desktop setting,
       floored at 3 — "3 if 4 would be cramped" without needing a
       separate Customizer control for this one in-between band. The
       full desktop count returns at 1280px below. Gap is fluid, same
       pattern as the gutter above: the Customizer number is this
       clamp's ceiling, narrowing toward 20px via 1.5vw below that. */
    .sl-video-rail__scroller {
      --focus-n: max(3, var(--focus-visible-cards, 4) - 1);
      --focus-gap: clamp(20px, 1.5vw, var(--focus-card-gap-desktop, 26px));
    }
  }
@media (min-width: 1280px) {
    .sl-video-rail__scroller {
      --focus-n: var(--focus-visible-cards, 4);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .sl-video-rail__video,
    .sl-video-rail__poster-img,
    .sl-video-rail__item,
    .sl-video-rail__item::after,
    .sl-video-rail__media {
      transition: none;
    }

    /* Movement off, depth kept: the lift is fully disabled, but the
       card's own directional shadow (and its hover-strengthened variant
       on .sl-video-rail__card, left untouched here) still applies. */
    .sl-video-rail__item:hover {
      transform: none;
    }

    .sl-video-rail__scroller {
      scroll-behavior: auto;
    }
  }
/* ═══════════════════════════════════════════════════════════
     Campaign Sale Countdown — Step 2 of the campaign system.
     One rounded split banner (media + countdown/offer content). No
     background/card of its own at the SECTION level — same as its
     neighbours on the shared canvas — but the BANNER itself is a
     visually distinct rounded surface, the same relationship the video
     rail has between its (background-free) section and its (rounded,
     shadowed) individual cards.
     ═══════════════════════════════════════════════════════════ */
.sl-countdown {
    position: relative;
    /* No top padding: the video rail's own bottom padding (64px mobile /
       96px desktop) already lands inside the 56–72px / 88–104px "above
       this section" targets, so adding more here would stack two gaps
       into one, oversized one. Bottom padding is this section's own —
       it's what supplies the gap to the marquee below (Bestsellers,
       like the rail, has no top padding of its own). */
    padding: 0 0 56px;
    /* Query container for the desktop banner's own width formula below
       (1024px+) — same technique and same reason as .sl-video-rail: a
       cqw value measured here is this element's true, unconstrained
       available width, decoupled from .sl-countdown__inner's own
       max-width/padding (which the banner's new formula deliberately
       bypasses so it can grow past .inner's old ~1184px cap). */
    container-type: inline-size;
  }
/* Wider than the standard --sl-max-width container (same technique as
     Shop by Category's own __inner): at ≥1280px viewports, --sl-max-width
     alone plus this element's own gutter padding was capping the
     content box at ~1184px, well under the banner's 1240–1280px target,
     because the padding was being subtracted from an already-capped
     width instead of from the wider box this allows. Below ~1280px this
     has no effect at all — the viewport itself is already the binding
     constraint, same as before. */
/* Matches .sl-video-rail__inner's container exactly (max-width alone,
     not +2*gutter) so the offer banner's outer edges land at the same
     inset as the heading/cards above it — previously ~48px narrower an
     inset at 1440px+ (a mismatch nothing else in this file has), which
     read as the banner belonging to a different grid than the rail. */
.sl-countdown__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
  }
.sl-countdown__banner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 1260px;
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
    background: var(--sl-countdown-bg, #FFFCF8);
    color: var(--sl-countdown-text, #2B241F);
    /* Was a 3-layer shadow reaching to 34-54px blur / 0.30-0.32 alpha —
       live inspection confirmed this specific rule as the exact cause of
       the "broad, dark, detached" bottom shadow / "sits inside a grey
       box" complaint (no grey background exists anywhere on this banner
       or its ancestors; the shadow's own reach and darkness was reading
       as one). Replaced with a single, much tighter two-layer shadow.
       --sl-countdown-shadow-rest is computed in inc/enqueue.php from the
       Sale Banner Shadow Strength control (0 disables it outright). */
    box-shadow: var(--sl-countdown-shadow-rest, 0 3px 8px rgba(45, 34, 27, 0.035), 0 14px 32px rgba(45, 34, 27, 0.07));
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
@media (hover: hover) and (pointer: fine) {
    .sl-countdown__banner:hover {
      transform: translateY(-4px);
      box-shadow: var(--sl-countdown-shadow-hover, 0 4px 10px rgba(45, 34, 27, 0.045), 0 18px 38px rgba(45, 34, 27, 0.085));
    }
  }
.sl-countdown__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
  }
/* A "soft dissolve" gradient here (transparent to the banner's own
     near-white background) was tried in an earlier pass to blend the
     image-into-content seam on mobile — live inspection confirmed this
     was the exact, sole cause of an unwanted white overlay creeping up
     over the bottom ~46px of the photo, read as a floating white strip
     or a second panel rather than a clean boundary. There was never a
     separate white background involved anywhere else — removing this
     one rule is the complete fix. The image now runs cleanly to where
     the content panel begins (still bounded by the outer banner's own
     rounded corners + overflow:hidden). Desktop was never affected —
     media/content sit side by side there with no horizontal seam. */
.sl-countdown__video,
  .sl-countdown__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.sl-countdown__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px 26px;
  }
/* No media uploaded: the content column takes the full banner width
     and centers itself, so the layout still reads as one balanced,
     deliberate composition rather than a split layout missing a half. */
.sl-countdown__banner--no-media .sl-countdown__content {
    align-items: center;
    text-align: center;
    padding: 40px 24px;
  }
/* ── Text over image: media fills the whole card, content is
     bottom-anchored on top of it behind a directional gradient scrim.
     One shared content/countdown markup — only the positioning and
     background change; nothing is duplicated. ── */
.sl-countdown__banner--layout-overlay {
    aspect-ratio: 1 / 1;
  }
.sl-countdown__banner--layout-overlay .sl-countdown__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
.sl-countdown__banner--layout-overlay .sl-countdown__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    justify-content: flex-end;
    padding: 24px 24px 28px;
    /* Controlled directional gradient, not a uniform tint: strong at the
       bottom (where the text sits), fully transparent by 76% up, so the
       upper portion of the image stays fully readable. Strength is the
       Customizer "Overlay Strength" slider (0.30-0.90); the mid-stop
       scales with it via calc() so one control moves the whole gradient
       proportionally rather than just its peak. */
    background: linear-gradient(
      to top,
      rgba(22, 17, 14, var(--sl-countdown-overlay-strength, 0.7)) 0%,
      rgba(22, 17, 14, calc(var(--sl-countdown-overlay-strength, 0.7) * 0.53)) 42%,
      rgba(22, 17, 14, 0) 76%
    );
  }
.sl-countdown__banner--overlay-align-center .sl-countdown__content {
    align-items: center;
    text-align: center;
  }
.sl-countdown__banner--layout-overlay .sl-countdown__eyebrow,
  .sl-countdown__banner--layout-overlay .sl-countdown__heading,
  .sl-countdown__banner--layout-overlay .sl-countdown__unit-value,
  .sl-countdown__banner--layout-overlay .sl-countdown__unit-label,
  .sl-countdown__banner--layout-overlay .sl-countdown__sep,
  .sl-countdown__banner--layout-overlay .sl-countdown__offer,
  .sl-countdown__banner--layout-overlay .sl-countdown__coupon {
    /* Always warm white over the image regardless of the shared Text
       Color setting (which is tuned for the light Image + Separate Text
       surface) — legibility over a photo can't depend on a per-campaign
       color pick meant for the opposite contrast direction. */
    color: #FFFCF8;
  }
.sl-countdown__banner--layout-overlay .sl-countdown__eyebrow {
    color: var(--sl-countdown-accent, #2F6F68);
  }
.sl-countdown__banner--no-media .sl-countdown__units {
    justify-content: center;
  }
.sl-countdown__banner--no-media .sl-countdown__actions {
    justify-content: center;
  }
.sl-countdown__eyebrow {
    font-family: var(--sl-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-countdown-accent, #B39273);
  }
.sl-countdown__heading {
    margin: 10px 0 0;
    font-family: var(--sl-font-serif);
    font-size: clamp(24px, 5.5vw, 30px);
    font-weight: 500;
    line-height: 1.22;
    /* Three-line ceiling on mobile (spec allows two OR three there),
       tightened to two on desktop below where there's more width per
       line. Prevents a long campaign heading from stretching the
       banner's compact target height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.sl-countdown__offer {
    margin: 8px 0 0;
    max-width: 42ch;
    font-family: var(--sl-font-sans);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.86;
  }
.sl-countdown__timer {
    margin-top: 18px;
    width: 100%;
  }
.sl-countdown__units {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }
.sl-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 34px;
  }
.sl-countdown__unit-value {
    font-family: var(--sl-font-sans);
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
.sl-countdown__unit-label {
    font-family: var(--sl-font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.62;
  }
.sl-countdown__sep {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    opacity: 0.35;
  }
.sl-countdown__expired-message {
    margin: 0;
    font-family: var(--sl-font-sans);
    font-size: 15px;
    font-weight: 500;
  }
/* aria-live region only — never visible, never takes up layout space.
     Kept as a real (if invisible) element rather than injected/removed
     from the DOM at runtime, which some screen readers announce
     inconsistently. */
.sl-countdown__sr-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
.sl-countdown__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
  }
.sl-countdown__cta {
    background-color: var(--sl-countdown-cta-bg, #2B241F);
    border-color: var(--sl-countdown-cta-bg, #2B241F);
    color: var(--sl-countdown-cta-text, #FFFFFF);
  }
.sl-countdown__cta:hover {
    background-color: transparent;
    color: var(--sl-countdown-cta-bg, #2B241F);
  }
/* The standard hover above inverts to transparent + the button's own
     (often dark) text color — fine on the light split-mode surface, but
     over a photo that combination can turn the label nearly invisible.
     A light wash keeps the CTA legible against any image instead. */
.sl-countdown__banner--layout-overlay .sl-countdown__cta:hover {
    background-color: rgba(255, 252, 248, 0.18);
    color: var(--sl-countdown-cta-text, #FFFFFF);
  }
/* Deliberately plain-text-with-dashed-underline rather than a filled
     button — "visually secondary to the main CTA", not a second CTA. */
.sl-countdown__coupon {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--sl-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sl-countdown-text, #2B241F);
    -webkit-text-decoration: underline dashed;
            text-decoration: underline dashed;
    text-underline-offset: 3px;
    opacity: 0.8;
    cursor: pointer;
  }
.sl-countdown__coupon:hover {
    opacity: 1;
  }
@media (min-width: 768px) {
    .sl-countdown {
      /* This is the gap to the NEXT section (the marquee) — 72px sits
         inside the 64–80px desktop target. The gap FROM the video rail
         above is already covered by that section's own ~96px bottom
         padding (untouched), which already lands inside the 88–104px
         target on its own. */
      padding: 0 0 72px;
    }

    .sl-countdown__banner {
      flex-direction: row;
      align-items: stretch;
      /* -40px from the original 400px: within the requested 35-50px
         total-height reduction on its own, before the tighter content
         padding below contributes any further. */
      min-height: 360px;
      border-radius: 32px;
    }

    /* Media Position = Right. row-reverse rather than a source-order
       change, so media stays first in the DOM and therefore still comes
       first when the layout stacks back to a single column on mobile. */
    .sl-countdown__banner--media-right {
      flex-direction: row-reverse;
    }

    .sl-countdown__media {
      flex: 0 0 56%;
      aspect-ratio: auto;
    }

    .sl-countdown__content {
      flex: 1 1 44%;
      min-width: 0;
      justify-content: center;
      padding: 34px 44px;
    }

    .sl-countdown__banner--no-media .sl-countdown__content {
      flex: 1 1 100%;
      padding: 48px;
    }

    /* Text over image: a proper wide editorial-banner ratio at desktop
       widths rather than mobile's near-square card, with a floor so a
       very wide/short viewport never squeezes the overlay content. */
    .sl-countdown__banner--layout-overlay {
      aspect-ratio: 21 / 9;
      min-height: 360px;
    }

    .sl-countdown__banner--layout-overlay .sl-countdown__content {
      padding: 40px 56px;
    }

    .sl-countdown__heading {
      font-size: clamp(28px, 2.4vw, 34px);
      -webkit-line-clamp: 2;
    }

    .sl-countdown__offer {
      font-size: 15px;
    }

    .sl-countdown__unit {
      min-width: 42px;
    }

    .sl-countdown__unit-value {
      font-size: 26px;
    }

    .sl-countdown__unit-label {
      font-size: 10px;
    }

    .sl-countdown__sep {
      font-size: 22px;
    }
  }
@media (min-width: 1024px) {
    .sl-countdown {
      /* Fixed tokens for the banner's own width formula below —
         deliberately separate from the shared --sl-max-width/--sl-gutter
         (used across many other sections) so enlarging this one banner
         can never affect anything else that also reads those tokens.
         100cqw here is this section's true, unconstrained width,
         decoupled from .sl-countdown__inner's own now-disabled max-width
         below (same technique .sl-video-rail__mask uses for its own
         content-cap, and for the same reason). Two SEPARATE ceilings,
         not one — an earlier pass here combined them into one
         "safe-width" var that already had the 1560px cap baked in, which
         measured live to make Sale Banner Size — Desktop's growth
         (>100%) inert at literally every viewport (1024–1920px):
         scaling that pre-capped value past 1560 just got re-clamped
         straight back to 1560 by its own definition, every time.
         --sale-margin-safe-width is the true, scale-INDEPENDENT ceiling
         (never violated, at any scale) — the most the banner can ever be
         while preserving equal left/right margins. --sale-banner-max-width
         is scaled BEFORE the two are compared, so growth has real
         headroom to reach at wide viewports where the 1560px ceiling —
         not the margin — is what's actually binding (confirmed live:
         1920px now reaches 1761px at 115%, was inert/1560px before). */
      --sale-page-gutter: clamp(28px, 4vw, 72px);
      --sale-banner-max-width: 1560px;
      --sale-banner-desktop-height: clamp(500px, 37vw, 610px);
      --sale-margin-safe-width: calc(100cqw - (var(--sale-page-gutter) * 2));
    }

    /* Pass-through at this tier: the banner now computes its own width
       directly from the section's cqw (below), so .inner's own
       max-width/padding — sized for the OLD, narrower banner — would
       otherwise still cap it right back down to ~1184px. */
    .sl-countdown__inner {
      max-width: none;
      padding: 0;
    }

    .sl-countdown__banner {
      /* Sale Banner Size — Desktop (Customizer, 85–115%, default 100%)
         scales the MAX-WIDTH ceiling, then that result is compared
         against the margin-safe ceiling — never the other way around —
         so growth always has real headroom to reach on wide viewports
         (1560px × 1.15 = 1794px, confirmed live: 1920px reaches 1761px,
         the margin-safe ceiling there, at 115%) while still never
         exceeding --sale-margin-safe-width at ANY scale, on ANY
         viewport (confirmed live: 1024px stays at ~927px even at 115% —
         genuinely no room to grow there without shrinking a page
         margin, which this must never do). Shrinking (scale < 1) is
         always visible everywhere, for the same reason in reverse.
         Never transform:scale() — this is the banner's REAL width, so
         the image/content panels inside it (still sized in flex-basis %
         of the banner, unchanged below) grow along with it for free. */
      width: min(
        var(--sale-margin-safe-width),
        calc(var(--sale-banner-max-width) * var(--sale-banner-scale-desktop, 1))
      );
      /* The base rule's own max-width:1260px (sized for the OLD, narrower
         banner) would otherwise still cap the new, larger width right
         back down — confirmed live at 1440px (rendered exactly 1260px
         instead of the ~1325px the formula above computes). */
      max-width: none;
      margin-inline: auto;
      /* Height has no equivalent margin/overflow constraint, so the
         scale applies to it directly. */
      min-height: calc(var(--sale-banner-desktop-height) * var(--sale-banner-scale-desktop, 1));
    }
  }
@media (prefers-reduced-motion: reduce) {
    .sl-countdown__cta,
    .sl-countdown__banner {
      transition: none;
    }

    .sl-countdown__banner:hover {
      transform: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     Bestsellers — lightweight premium product listing.
     Broad full-bleed marquee, the shared SOULSHORE heading system, and an
     unboxed curated product grid (2-column mobile / 4×2 desktop).
     Products are curated through eight ordered Product ID slots.
     ═══════════════════════════════════════════════════════════ */
.sl-bestsellers {
    --sl-section-eyebrow-size-desktop: var(--sl-bs-eyebrow-size-desktop, 12px);
    --sl-section-eyebrow-size-mobile: var(--sl-bs-eyebrow-size-mobile, 11px);
    --sl-section-heading-size-desktop: var(--sl-bs-heading-size-desktop, 38px);
    --sl-section-heading-size-mobile: var(--sl-bs-heading-size-mobile, 30px);
    --sl-section-subtext-size-desktop: var(--sl-bs-subtext-size-desktop, 16px);
    --sl-section-subtext-size-mobile: var(--sl-bs-subtext-size-mobile, 14px);
    --sl-section-eyebrow-color: var(--sl-bs-accent, #B39273);
    --sl-section-heading-color: var(--sl-bs-text, #2B241F);
    --sl-section-subtext-color: var(--sl-bs-muted, #4C4038);
    position: relative;
    /* Transparent on purpose — the shared .sl-discovery canvas owns the
       background across this whole stretch of the page. padding-top is 0
       so the marquee sits flush against the Editorial Bridge above it
       (no white gap between them); the section's real top spacing now
       lives on __inner, i.e. BELOW the marquee where it belongs. */
    background-color: transparent;
    padding-top: 0;
    padding-bottom: var(--sl-bs-pad-bottom-mobile, 72px);
    overflow: hidden;
  }
@media (min-width: 768px) {
    .sl-bestsellers {
      padding-bottom: var(--sl-bs-pad-bottom-desktop, 72px);
    }
  }
/* ── Broad commerce marquee (soft champagne satin ribbon) ────
     No edge mask/fade here on purpose — a transparent-to-opaque mask over
     a solid background reads as a pale overlay at both edges. The ribbon
     is a clean solid strip, full width, no fade left or right.

     One smooth gradient stretched across the full bar, NOT tiled/repeated.
     An earlier version repeated a gradient tile via background-size +
     repeat-x to avoid a single flat-looking stretch — but that tile's
     first and last stops were different colors, so every repeat boundary
     butted two dissimilar tones together, producing a hard seam every
     tile-width (read as "segmented"/"patchy blocks", worse than the
     stretch it was meant to fix). The fix this time is a lower-contrast
     palette (all pale warm champagne/ivory tones, no dark bronze/gold
     extremes) — stops this close in lightness read as a gentle continuous
     sheen even stretched 0%–100% across a wide bar, so no tiling is
     needed and there is no seam to hide. The Marquee Background Color
     setting drives the two "base" stops; the highlight/shadow/secondary
     tones stay fixed so the ribbon always reads as one coherent blend
     rather than degrading into a mismatched gradient if the base is
     changed to something very different. position:relative here anchors
     the moving shine layer (::after) below. */
.sl-bestsellers__marquee {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--sl-bestsellers-marquee-height-mobile, 60px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--sl-bestsellers-marquee-bg, #E9DCC8);
  }
/* Explicit, higher-specificity guard: .sl-discovery > * (0,1,0) sets
     every direct child of the homepage canvas to transparent so Shop by
     Category/Bridge/Bestsellers all show the shared gradient through.
     The marquee is a GRANDCHILD of .sl-discovery (nested inside
     .sl-bestsellers), so that rule was never actually reaching it — the
     rule above already wins on source order alone. This selector
     (0,2,0) makes that win structural instead of incidental, so the
     marquee can't lose its own background to a future canvas-level rule
     no matter how the stylesheet gets reordered. */
.sl-discovery .sl-bestsellers__marquee {
    background-color: var(--sl-bestsellers-marquee-bg, #E9DCC8);
  }
@media (min-width: 768px) {
    .sl-bestsellers__marquee { height: var(--sl-bestsellers-marquee-height-desktop, 78px); }
  }
/* Background Type: "solid" uses only the background-color above (Marquee
     Background Color); "gradient" layers this 3-stop blend on top of it
     from the three Marquee Gradient Start/Middle/End pickers. Kept to 3
     stops on purpose — a single smooth run, no hard-looking segments. */
/* Slow diagonal shine sweep — a soft, low-opacity highlight passing over
     the ribbon, not a hard white stripe or a constant glitter shimmer.
     z-index keeps it above the ribbon background but below the scrolling
     text (.sl-bestsellers__marquee-track, given its own stacking context
     below) so it reads as light catching the ribbon's surface, never as
     something obscuring the words. ease-in-out + alternate (rather than a
     one-directional loop) gives a slow "breathing" sweep instead of a
     conveyor-belt or disco-strobe feel.

     Opacity at each stop is calc()'d from Marquee Shine Strength (0–40) so
     the whole sweep can be dialed up/down or off from the Customizer
     without ever needing a hard-edged block: strength=14 (default)
     reproduces the original fixed 0.18/0.38/0.16 sweep almost exactly;
     min(1, …) keeps it a valid alpha at the top of the range. */
.sl-bestsellers__marquee::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(
      120deg,
      transparent 0%,
      rgb(255 255 255 / min(1, calc(var(--sl-bestsellers-marquee-shine-strength, 14) * 0.0125))) 45%,
      rgb(255 255 255 / min(1, calc(var(--sl-bestsellers-marquee-shine-strength, 14) * 0.025))) 50%,
      rgb(255 255 255 / min(1, calc(var(--sl-bestsellers-marquee-shine-strength, 14) * 0.0125))) 55%,
      transparent 100%
    );
    background-size: 55% 100%;
    background-repeat: no-repeat;
    background-position: -55% 0;
    pointer-events: none;
    animation: sl-bs-marquee-shine 7.5s ease-in-out infinite alternate;
  }
/* Marquee Shine Enable (off): no shine layer at all, not just opacity 0 —
     content:none removes the pseudo-element's box entirely. */
.sl-bestsellers__marquee--no-shine::after {
    content: none;
  }
@keyframes sl-bs-marquee-shine {
    from { background-position: -55% 0; }
    to   { background-position: 155% 0; }
  }
.sl-bestsellers__marquee-track {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    animation: sl-bs-marquee var(--sl-bs-marquee-duration, 56s) linear infinite;
    animation-direction: var(--sl-bs-marquee-direction, normal);
  }
@media (hover: hover) and (pointer: fine) {
    .sl-bestsellers__marquee:hover .sl-bestsellers__marquee-track { animation-play-state: paused; }
  }
/* Padding/gap are deliberately generous (em-based, so they scale with the
     text-size setting) — cramped phrase spacing was part of what made the
     ribbon read as small/basic rather than premium. */
.sl-bestsellers__marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    padding: 0 1.5em;
    font-family: var(--sl-font-sans);
    font-size: var(--sl-bestsellers-marquee-text-size-mobile, 13px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-bestsellers-marquee-text, #5A4330);
  }
@media (min-width: 768px) {
    .sl-bestsellers__marquee-item { font-size: var(--sl-bestsellers-marquee-text-size-desktop, 16px); }
  }
/* The • / ✦ separator reads in the separator color, distinct from the
     surrounding phrase text. */
.sl-bestsellers__marquee-sep {
    color: var(--sl-bestsellers-marquee-separator, #5A4330);
  }
.sl-bestsellers__marquee-icon {
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    color: var(--sl-bestsellers-marquee-separator, #5A4330);
  }
/* Icon style: "minimal" tints the marker in the ribbon text color instead
     of the separator color; "none" omits the icon in the template entirely. */
.sl-bestsellers__marquee--icon-minimal .sl-bestsellers__marquee-icon {
    color: var(--sl-bestsellers-marquee-text, #5A4330);
  }
.sl-bestsellers__marquee-icon svg { width: 100%; height: 100%; }
@keyframes sl-bs-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
/* ── Inner + compact heading ─────────────────────────────── */
/* padding-top is the single source of the marquee → Bestsellers gap
     (the section itself no longer carries any top padding, so this is the
     only thing separating the ribbon from the heading). The Customizer's
     Padding Top Mobile/Desktop values drive it, so the control still works
     — it just now measures from below the marquee instead of above it. */
.sl-bestsellers__inner {
    position: relative;
    z-index: 1;
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: var(--sl-bs-pad-top-mobile, 60px) var(--sl-gutter) 0;
  }
@media (min-width: 768px) {
    .sl-bestsellers__inner {
      padding-top: var(--sl-bs-pad-top-desktop, 80px);
    }
  }
/* Zero: __inner's padding-top above is the whole gap. Stacking another
     28–52px margin here on top of it is what previously made the space
     under the marquee read as an empty band. */
.sl-bestsellers__head {
    margin-top: 0;
  }
/* ── Product grid ────────────────────────────────────────── */
/* Row gap is deliberately wider than column gap — tight columns read as
     one continuous row, generous row spacing is what actually separates
     "clean premium grid" from "khichdi" spacing. Row gap is column gap
     plus a fixed offset rather than its own Customizer control, so the two
     stay proportional without adding another setting. */
.sl-bestsellers__grid {
    margin-top: clamp(20px, 2.5vw, 32px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    -moz-column-gap: var(--sl-bestsellers-grid-gap-mobile, 16px);
         column-gap: var(--sl-bestsellers-grid-gap-mobile, 16px);
    row-gap: calc(var(--sl-bestsellers-grid-gap-mobile, 16px) + 30px);
  }
@media (min-width: 768px) {
    .sl-bestsellers__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      -moz-column-gap: var(--sl-bestsellers-grid-gap-desktop, 36px);
           column-gap: var(--sl-bestsellers-grid-gap-desktop, 36px);
      row-gap: calc(var(--sl-bestsellers-grid-gap-desktop, 36px) + 16px);
    }
  }
/* ── Product card ────────────────────────────────────────── */
/* max-width + justify-self let the Card Width setting shrink a card
     below its grid column's natural width (centering it in the cell)
     without changing the 2-up/4-up column count itself. */
.sl-bestsellers__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: var(--sl-bestsellers-card-width-mobile, 165px);
    justify-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
@media (min-width: 768px) {
    .sl-bestsellers__card {
      max-width: var(--sl-bestsellers-card-width-desktop, 260px);
    }
  }
@media (hover: hover) and (pointer: fine) {
    .sl-bestsellers__card:hover .sl-bestsellers__card-media {
      box-shadow: var(--sl-bs-card-shadow-hover, 0 10px 24px rgba(43, 36, 31, 0.055));
    }
    .sl-bestsellers__card:hover .sl-bestsellers__card-img img { transform: scale(1.03); }
  }
/* ── Product Card Style: Plain vs Floating ──────────────────
     Read from data-card-style on the <section>, set in the Customizer via
     sl_bestsellers_card_style. Plain (default) is the existing unboxed
     look — restated explicitly here (rather than relying only on the base
     .sl-bestsellers__card rule above) so the toggle is self-contained and
     stays correct even if the base rule changes later. Floating adds a
     soft card surface: background, hairline border, lift shadow, rounded
     corners, and clips the image to those corners via overflow:hidden. */
.sl-bestsellers[data-card-style="plain"] .sl-bestsellers__card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
/* Card Surface Color defaults to the same tone as the section canvas
     (#FFFDF8) rather than pure white — a card whose surface color
     differs from its background is what made it look like a separate
     pasted box instead of a piece of the same canvas gently lifted up.
     Border and shadow are both softened to match (thinner-reading alpha,
     shorter/gentler shadow) for the same reason. */
.sl-bestsellers[data-card-style="floating"] .sl-bestsellers__card {
    background: var(--sl-bestsellers-card-surface, #FFFDF8);
    border: 1px solid rgba(47, 36, 29, 0.07);
    box-shadow: var(--sl-bestsellers-card-shadow, 0 12px 28px rgba(47, 36, 29, 0.055));
    border-radius: var(--sl-bestsellers-card-radius, 18px);
    overflow: hidden;
  }
.sl-bestsellers__card-media {
    position: relative;
    display: block;
    border-radius: var(--sl-bestsellers-card-radius, 18px);
    box-shadow: var(--sl-bs-card-shadow, 0 5px 16px rgba(43, 36, 31, 0.035));
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
  }
/* Floating cards clip the image with the card's own rounded corner, not
     a second nested radius — flattening the image's own radius avoids a
     visible double-rounded seam where image meets card edge. */
.sl-bestsellers[data-card-style="floating"] .sl-bestsellers__card-media {
    border-radius: 0;
    box-shadow: none;
  }
/* Vertical product shot, not a marketplace landscape crop — this ratio
     (and the Customizer default it falls back to) was the main cause of
     the "horizontal rectangle" look. Image Height acts as a ceiling, not a
     forced height: aspect-ratio still shapes the image day-to-day, this
     only steps in if that would otherwise render taller than the cap. */
/* Mobile uses Image Height as a floor (min-height): at default Card
     Width + Image Ratio the natural aspect-ratio height sits under it, so
     a max-height ceiling here would never actually be visible — min-height
     is what makes "Image Height (Mobile)" a control that does something.
     Desktop keeps the max-height ceiling from before, but its default
     (310px) now sits BELOW the natural aspect-ratio height at the default
     Card Width (~325px), so the ceiling actively crops here rather than
     sitting inert above it. */
.sl-bestsellers__card-img {
    display: block;
    width: 100%;
    aspect-ratio: var(--sl-bs-img-ratio, 4 / 5);
    min-height: var(--sl-bestsellers-image-height-mobile, 210px);
    overflow: hidden;
    background: #F7F2EA;
  }
@media (min-width: 768px) {
    .sl-bestsellers__card-img {
      max-height: var(--sl-bestsellers-image-height-desktop, 310px);
    }
  }
.sl-bestsellers__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: var(--sl-bestsellers-image-fit, cover);
       object-fit: var(--sl-bestsellers-image-fit, cover);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
.sl-bestsellers__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(47, 36, 29, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #2B241F;
    font-family: var(--sl-font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
.sl-bestsellers__wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(47, 36, 29, 0.10);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #2B241F;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
.sl-bestsellers__wishlist svg {
    width: 15px;
    height: 15px;
  }
.sl-bestsellers__wishlist:hover {
    background: #FFFFFF;
    color: #8B6F47;
    transform: scale(1.04);
  }
.sl-bestsellers__wishlist:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 2px;
  }
.sl-bestsellers__card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 4px 0;
  }
/* Plain has no card surface to pad away from, so it keeps the top-only
     gap above. Floating gets real inset on all sides (Product Text
     Padding) so title/price don't touch the card's edges. */
.sl-bestsellers[data-card-style="floating"] .sl-bestsellers__card-body {
    padding: var(--sl-bestsellers-product-text-padding, 9px);
  }
/* Serif, same family as the section's own SOULSHORE heading (Rooms in
     Texture uses the identical --sl-font-serif token) — a plain-sans bold
     title was reading as marketplace, not editorial. */
.sl-bestsellers__card-title {
    margin: 0;
    font-family: var(--sl-font-serif);
    font-size: min(16px, var(--sl-bs-title-size, 19px));
    font-weight: 500;
    line-height: 1.25;
    color: #2B241F;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.sl-bestsellers__card-title a { color: inherit; text-decoration: none; }
.sl-bestsellers__card-title a:hover { color: #8B6F47; }
/* margin-top is the title-to-rating gap — rating now sits directly under
     the product title, before price/action (Title / Rating / Price+MRP). */
.sl-bestsellers__rating {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    margin-top: var(--sl-bestsellers-product-info-gap, 6px);
    color: #4C4038;
    font-family: var(--sl-font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }
.sl-bestsellers__stars {
    position: relative;
    display: inline-block;
    width: 5.35em;
    overflow: hidden;
    color: #C8BDAF;
    font-family: Arial, sans-serif;
    font-size: 1em;
    letter-spacing: 0.07em;
    line-height: 1;
    white-space: nowrap;
  }
.sl-bestsellers__stars::before {
    content: "\2605\2605\2605\2605\2605";
  }
.sl-bestsellers__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sl-bs-rating-width, 0%);
    overflow: hidden;
    color: #8B6F47;
    white-space: nowrap;
  }
.sl-bestsellers__rating-value {
    color: #4C4038;
    font-weight: 500;
  }
.sl-bestsellers__review-count {
    color: rgba(76, 64, 56, 0.72);
  }
/* margin-top is the rating-to-price gap (falls back to title-to-price
     when Show Rating is off and this row directly follows the title). */
.sl-bestsellers__purchase-row {
    display: flex;
    /* flex-end (not center): price-row can wrap to 2 lines when an MRP is
       shown, and bottom-aligning keeps the bag button sitting level with
       the price itself instead of drifting to the vertical center of a
       taller 2-line block. */
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    margin-top: var(--sl-bestsellers-product-info-gap, 6px);
  }
.sl-bestsellers__price-row {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }
.sl-bestsellers__price {
    font-family: var(--sl-font-sans);
    font-size: min(16px, var(--sl-bs-price-size, 18px));
    font-weight: 600;
    line-height: 1.2;
    color: #2B241F;
  }
.sl-bestsellers__mrp {
    color: rgba(76, 64, 56, 0.55);
    font-family: var(--sl-font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: line-through;
  }
.sl-bestsellers__card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
.sl-bestsellers__card-foot .added_to_cart.wc-forward {
    display: none;
  }
/* Soft ivory/taupe bag button — stays within the same warm espresso/ivory
     family at rest, on hover, and on press; never inverts to a solid dark
     fill or a white icon, which is what previously made it feel harsh and
     disconnected from the section's palette. The :active scale gives
     instant tactile feedback the moment the button is pressed, independent
     of how long the AJAX request actually takes. */
.sl-bestsellers__bag-add {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(47, 36, 29, 0.10);
    border-radius: 50%;
    background: #F3EEE6;
    color: #2F241D;
    box-shadow: 0 8px 18px rgba(47, 36, 29, 0.08);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
  }
.sl-bestsellers__bag-add svg {
    width: 16px;
    height: 16px;
    transition: opacity 0.2s ease;
  }
@media (hover: hover) and (pointer: fine) {
    .sl-bestsellers__bag-add:hover {
      background: #E8DED0;
      color: #2F241D;
      transform: translateY(-1px);
    }
  }
.sl-bestsellers__bag-add:active {
    transform: scale(0.96);
  }
.sl-bestsellers__bag-add:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 2px;
  }
.sl-bestsellers__bag-add.loading {
    pointer-events: none;
    opacity: 0.72;
  }
.sl-bestsellers__bag-add.loading svg {
    opacity: 0;
  }
/* Centered via top/left/transform — the earlier version was missing this
     entirely, so the spinner rendered off in a top-left corner instead of
     in the middle of the button. A loading indicator that isn't clearly
     visible reads as "nothing is happening", which is a large part of why
     the click felt slow even though the request itself was quick. */
.sl-bestsellers__bag-add.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sl-cart-spin 650ms linear infinite;
  }
/* Added (success) state returns to the same soft rest palette (never a
     louder/darker treatment) — only the slightly stronger border marks it
     as a distinct, calm confirmation rather than plain idle rest. */
.sl-bestsellers__bag-add.added {
    background: #F3EEE6;
    color: #2F241D;
    border-color: rgba(47, 36, 29, 0.22);
  }
@media (min-width: 768px) {
    .sl-bestsellers__discount {
      top: 12px;
      left: 12px;
      font-size: 11px;
    }

    .sl-bestsellers__wishlist {
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
    }

    .sl-bestsellers__wishlist svg {
      width: 16px;
      height: 16px;
    }

    .sl-bestsellers__card-body {
      padding: 10px 4px 0;
    }

    .sl-bestsellers__card-title {
      font-size: var(--sl-bs-title-size, 19px);
    }

    .sl-bestsellers__rating {
      font-size: 13px;
    }

    .sl-bestsellers__price {
      font-size: var(--sl-bs-price-size, 18px);
    }

    .sl-bestsellers__mrp {
      font-size: 13px;
    }

    .sl-bestsellers__bag-add {
      width: 40px;
      height: 40px;
    }

    .sl-bestsellers__bag-add svg {
      width: 18px;
      height: 18px;
    }
  }
/* ── Customizer-only empty state (never shown to customers) ── */
.sl-bestsellers__empty {
    margin-top: clamp(24px, 3vw, 36px);
    padding: 48px 28px;
    border: 1px dashed rgba(43, 36, 31, 0.25);
    border-radius: 18px;
    text-align: center;
    font-family: var(--sl-font-sans);
    font-size: 0.92rem;
    color: var(--sl-bs-muted, #4C4038);
  }
.sl-bestsellers__empty p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .sl-bestsellers__marquee-track { animation: none; }

    /* Shine sweep stops moving but the gold gradient itself stays fully
       visible — a static shine layer parked mid-ribbon, not hidden. */
    .sl-bestsellers__marquee::after {
      animation: none;
      background-position: 50% 0;
    }

    .sl-bestsellers__card-media,
    .sl-bestsellers__card-img img,
    .sl-bestsellers__wishlist,
    .sl-bestsellers__bag-add,
    .sl-bestsellers__bag-add svg {
      transition: none;
    }

    .sl-bestsellers__bag-add.loading::after {
      animation: none;
    }
  }
/* ── Category editorial grid ────────────────────────────── */
.sl-cat-grid {
    background-color: var(--sl-white);
    padding: var(--sl-section-pad) var(--sl-gutter);
  }
.sl-cat-grid__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-cat-grid__header {
    margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
  }
/* Asymmetric 4-column: outer narrower, inner wider */
.sl-cat-grid__cards {
    display: grid;
    grid-template-columns: 2fr 3fr 3fr 2fr;
    gap: 2px;
    align-items: end;
  }
@media (max-width: 900px) {
    .sl-cat-grid__cards {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(1rem, 3vw, 1.75rem);
      align-items: start;
    }
  }
@media (max-width: 480px) {
    .sl-cat-grid__cards {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
.sl-cat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    outline: none;
  }
.sl-cat-card:focus-visible .sl-cat-card__media {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
.sl-cat-card__media {
    overflow: hidden;
    background-color: var(--sl-warm-gray);
    flex-shrink: 0;
  }
/* Outer cards: portrait-ish. Inner cards: taller. */
.sl-cat-card--1 .sl-cat-card__media,
  .sl-cat-card--4 .sl-cat-card__media { aspect-ratio: 2 / 3; }
.sl-cat-card--2 .sl-cat-card__media,
  .sl-cat-card--3 .sl-cat-card__media { aspect-ratio: 3 / 5; }
@media (max-width: 900px) {
    .sl-cat-card--1 .sl-cat-card__media,
    .sl-cat-card--2 .sl-cat-card__media,
    .sl-cat-card--3 .sl-cat-card__media,
    .sl-cat-card--4 .sl-cat-card__media { aspect-ratio: 3 / 4; }
  }
.sl-cat-card__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.sl-cat-card:hover .sl-cat-card__img { transform: scale(1.04); }
.sl-cat-card__no-img {
    width: 100%;
    height: 100%;
    background-color: var(--sl-warm-gray);
  }
.sl-cat-card__body {
    padding: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    transition: transform 0.35s ease;
  }
.sl-cat-card:hover .sl-cat-card__body { transform: translateY(-4px); }
.sl-cat-card__name {
    font-family: var(--sl-font-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: 0.01em;
    display: block;
  }
.sl-cat-card__count {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--sl-stone);
    display: block;
  }
/* ── Featured products ──────────────────────────────────── */
.sl-featured-products {
    background-color: var(--sl-ivory);
    padding: var(--sl-section-pad) var(--sl-gutter);
  }
.sl-featured-products__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-featured-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    list-style: none;
    padding: 0;
    margin: 0 0 3.5rem;
  }
@media (max-width: 1024px) {
    .sl-featured-products__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (max-width: 480px) {
    .sl-featured-products__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  }
.sl-featured-products__cta {
    text-align: center;
  }
.sl-featured-products__empty {
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
  }
.sl-featured-products__empty-title {
    font-family: var(--sl-font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
  }
.sl-featured-products__empty-note {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
    max-width: 480px;
  }
/* ── Editorial story ────────────────────────────────────── */
.sl-story {
    background-color: var(--sl-white);
    padding: var(--sl-section-pad) var(--sl-gutter);
    overflow: hidden;
  }
.sl-story__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 7vw, 9rem);
    align-items: center;
  }
@media (max-width: 860px) {
    .sl-story__inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .sl-story__visual {
      max-height: 380px;
    }
  }
.sl-story__eyebrow {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 1.5rem;
  }
.sl-story__heading {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.875rem, 3.5vw, 2.875rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
  }
.sl-story__body {
    font-size: 1rem;
    line-height: 1.88;
    color: var(--sl-stone);
    margin-bottom: 1.375rem;
  }
.sl-story__secondary {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sl-taupe);
  }
/* CSS-only textile visual */
.sl-story__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
  }
.sl-story__panel {
    position: absolute;
  }
.sl-story__panel--back {
    inset: 0;
    background-color: var(--sl-warm-gray);
  }
.sl-story__panel--mid {
    top: 10%;
    left: 10%;
    right: 0;
    bottom: 0;
    background-color: var(--sl-white);
    box-shadow: -3px -3px 28px rgba(44, 44, 44, 0.05);
  }
.sl-story__panel--front {
    top: 28%;
    left: 20%;
    right: 10%;
    bottom: 18%;
    background-color: var(--sl-taupe);
    opacity: 0.08;
  }
.sl-story__stripe {
    position: absolute;
    left: 15%;
    right: 10%;
    height: 1px;
    background-color: var(--sl-border);
  }
.sl-story__stripe--1 { top: 38%; }
.sl-story__stripe--2 { top: 58%; opacity: 0.55; }
/* ── Material care ──────────────────────────────────────── */
.sl-care {
    background-color: var(--sl-ivory);
    padding: var(--sl-section-pad) var(--sl-gutter);
  }
.sl-care__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-care__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background-color: var(--sl-border);
    border: 1px solid var(--sl-border);
  }
@media (max-width: 760px) {
    .sl-care__grid { grid-template-columns: 1fr; }
  }
.sl-care__card {
    background-color: var(--sl-ivory);
    padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid var(--sl-border);
  }
.sl-care__mark {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--sl-taupe);
    flex-shrink: 0;
  }
.sl-care__title {
    font-family: var(--sl-font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: 0.01em;
  }
.sl-care__text {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
  }
/* ── Trust strip ────────────────────────────────────────── */
.sl-trust {
    background-color: var(--sl-white);
    border-top: 1px solid var(--sl-border);
    padding: clamp(1.75rem, 3vw, 2.625rem) var(--sl-gutter);
  }
.sl-trust__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
  }
.sl-trust__list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
@media (max-width: 600px) {
    .sl-trust__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      justify-items: start;
    }
  }
.sl-trust__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
.sl-trust__mark {
    display: block;
    width: 16px;
    height: 1px;
    background-color: var(--sl-taupe);
    flex-shrink: 0;
  }
.sl-trust__label {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    white-space: nowrap;
  }
/* ── Premium footer (overrides Phase 1 .sl-footer) ─────── */
.sl-footer {
    padding: 0;
    background-color: var(--sl-charcoal);
    border-top: none;
  }
.sl-footer-main {
    width: 100%;
  }
.sl-footer-main__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: 0 var(--sl-gutter);
  }
.sl-footer-main__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
@media (max-width: 1024px) {
    .sl-footer-main__grid {
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4vw, 3rem);
    }
  }
@media (max-width: 560px) {
    .sl-footer-main__grid {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }
  }
.sl-footer-brand {
    display: inline-block;
    font-family: var(--sl-font-serif);
    font-size: 1.0625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sl-ivory);
    font-weight: 400;
    opacity: 0.88;
    transition: opacity 0.2s ease;
    margin-bottom: 1.25rem;
    text-decoration: none;
  }
.sl-footer-brand:hover { opacity: 0.6; }
.sl-footer-brand:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 3px;
  }
.sl-footer-col--brand { display: flex; flex-direction: column; }
.sl-footer-col__title {
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    margin-bottom: 1.375rem;
  }
.sl-footer-col__text {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sl-taupe);
  }
.sl-footer-col__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8125rem;
  }
.sl-footer-col__list li a {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sl-taupe);
    transition: color 0.2s ease;
    text-decoration: none;
  }
.sl-footer-col__list li a:hover { color: var(--sl-ivory); }
.sl-footer-col__list li a:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
.sl-footer-col__note {
    font-size: 0.875rem;
    color: var(--sl-stone);
    line-height: 1.7;
  }
/* Footer bottom bar */
.sl-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.625rem 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
@media (max-width: 560px) {
    .sl-footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }
.sl-footer-bottom__copy {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--sl-stone);
  }
.sl-footer-bottom__tagline {
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-stone);
    opacity: 0.55;
  }
/* ── Phase 4 reduced-motion additions ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .js-loaded [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .sl-cat-card__img,
    .sl-cat-card__body,
    .sl-footer-brand {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     PHASE 5 — My Account, Pages, 404
  ═══════════════════════════════════════════════════════════ */
/* ── My Account shell layout ────────────────────────────── */
.sl-account {
    background-color: var(--sl-ivory);
    min-height: 60vh;
  }
.sl-account__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) var(--sl-gutter);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
@media (max-width: 860px) {
    .sl-account__inner {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }
.sl-account__sidebar {
    position: sticky;
    top: 6rem;
  }
@media (max-width: 860px) {
    .sl-account__sidebar { position: static; }
  }
.sl-account__content {
    min-width: 0;
  }
/* ── Account navigation ─────────────────────────────────── */
.sl-account-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
@media (max-width: 860px) {
    .sl-account-nav__list {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.25rem;
    }
  }
.sl-account-nav__item {
    border-bottom: 1px solid var(--sl-border);
  }
.sl-account-nav__item:first-child {
    border-top: 1px solid var(--sl-border);
  }
@media (max-width: 860px) {
    .sl-account-nav__item,
    .sl-account-nav__item:first-child {
      border: none;
    }
  }
.sl-account-nav__link {
    display: block;
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-stone);
    text-decoration: none;
    transition: color 0.2s ease;
  }
.sl-account-nav__link:hover {
    color: var(--sl-charcoal);
  }
.sl-account-nav__item.is-active .sl-account-nav__link,
  .sl-account-nav__link[aria-current="page"] {
    color: var(--sl-charcoal);
    font-weight: 500;
  }
@media (max-width: 860px) {
    .sl-account-nav__link {
      padding: 0.5rem 0.875rem;
      background-color: var(--sl-warm-gray);
      border-radius: 2px;
    }
    .sl-account-nav__item.is-active .sl-account-nav__link,
    .sl-account-nav__link[aria-current="page"] {
      background-color: var(--sl-charcoal);
      color: var(--sl-ivory);
    }
  }
/* ── Login / register split ─────────────────────────────── */
.sl-login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }
@media (max-width: 860px) {
    .sl-login-split {
      grid-template-columns: 1fr;
      min-height: auto;
    }
  }
.sl-login-split__brand {
    background-color: var(--sl-charcoal);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
  }
@media (max-width: 860px) {
    .sl-login-split__brand {
      display: none;
    }
  }
.sl-login-split__brand-inner {
    max-width: 360px;
  }
.sl-login-split__eyebrow {
    display: block;
    font-size: 0.5625rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sl-taupe);
    margin-bottom: 2.5rem;
  }
.sl-login-split__heading {
    font-family: var(--sl-font-serif);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--sl-ivory);
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
  }
.sl-login-split__sub {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sl-taupe);
    margin-bottom: 2.5rem;
  }
.sl-login-split__trust {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
  }
.sl-login-split__trust li {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sl-stone);
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
.sl-login-split__trust li::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--sl-stone);
    flex-shrink: 0;
  }
.sl-login-split__forms {
    background-color: var(--sl-white);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
  }
.sl-login-split__forms-inner {
    width: 100%;
    max-width: 440px;
  }
/* ── Login tab switcher ──────────────────────────────────── */
.sl-login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-login-tab {
    background: none;
    border: none;
    padding: 0.625rem 0;
    margin-right: 1.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-stone);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
  }
.sl-login-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--sl-charcoal);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
.sl-login-tab--active,
  .sl-login-tab[aria-selected="true"] {
    color: var(--sl-charcoal);
    font-weight: 500;
  }
.sl-login-tab--active::after,
  .sl-login-tab[aria-selected="true"]::after {
    transform: scaleX(1);
  }
.sl-login-tab:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 3px;
  }
.sl-login-panel--only .sl-login-panel__title {
    font-family: var(--sl-font-serif);
    font-size: 1.625rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
  }
/* ── Login form meta row ─────────────────────────────────── */
.sl-login-form__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
.sl-login-form__remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--sl-stone);
    cursor: pointer;
  }
.sl-login-form__remember input[type="checkbox"] {
    accent-color: var(--sl-charcoal);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
.sl-login-form__lost {
    font-size: 0.8125rem;
    color: var(--sl-stone);
    text-decoration: none;
    transition: color 0.2s ease;
  }
.sl-login-form__lost:hover { color: var(--sl-charcoal); }
.sl-login-form__lost:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
/* ── Account forms (shared) ──────────────────────────────── */
.sl-account-form {
    max-width: 620px;
  }
.sl-account-form--centered {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
  }
.sl-account-form--centered .woocommerce-form-row,
  .sl-account-form--centered .form-row {
    text-align: left;
  }
.sl-account-form__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 0.625rem;
  }
.sl-account-form__subtitle {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
    margin-bottom: 2rem;
  }
.sl-account-form__section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sl-border);
  }
.sl-account-form__section:first-of-type {
    margin-top: 1.5rem;
    border-top: none;
    padding-top: 0;
  }
.sl-account-form__section-title {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    margin-bottom: 1.25rem;
  }
.sl-account-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
@media (max-width: 540px) {
    .sl-account-form__row { grid-template-columns: 1fr; }
  }
.sl-account-form__hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--sl-stone);
    margin-top: 0.375rem;
    line-height: 1.55;
  }
.sl-account-form__submit {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sl-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
.sl-account-form--centered .sl-account-form__submit {
    justify-content: center;
    border-top: none;
    padding-top: 1rem;
  }
.sl-account-form__fields .form-row {
    margin-bottom: 0.75rem;
  }
/* ── Account dashboard ───────────────────────────────────── */
.sl-account-dashboard__header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-account-dashboard__greeting {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
  }
.sl-account-dashboard__meta {
    font-size: 0.875rem;
    color: var(--sl-stone);
  }
.sl-account-dashboard__meta a {
    color: var(--sl-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--sl-border);
    transition: border-color 0.2s ease;
  }
.sl-account-dashboard__meta a:hover {
    border-color: var(--sl-charcoal);
  }
.sl-account-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--sl-border);
    border: 1px solid var(--sl-border);
  }
@media (max-width: 640px) {
    .sl-account-cards { grid-template-columns: 1fr; }
  }
.sl-account-card {
    background-color: var(--sl-white);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
.sl-account-card:hover {
    background-color: var(--sl-warm-gray);
  }
.sl-account-card:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: -2px;
  }
.sl-account-card__label {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-charcoal);
    font-weight: 500;
  }
.sl-account-card__note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sl-stone);
  }
/* ── Orders table ────────────────────────────────────────── */
.sl-account-orders {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
.sl-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
.sl-orders-table__head {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    border-bottom: 1px solid var(--sl-border);
    white-space: nowrap;
  }
.sl-orders-table__row {
    border-bottom: 1px solid var(--sl-border);
    transition: background-color 0.15s ease;
  }
.sl-orders-table__row:hover {
    background-color: var(--sl-warm-gray);
  }
.sl-orders-table__cell {
    padding: 1rem;
    color: var(--sl-charcoal);
    vertical-align: middle;
  }
.sl-orders-table__cell a {
    color: var(--sl-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--sl-border);
    transition: border-color 0.2s ease;
  }
.sl-orders-table__cell a:hover {
    border-color: var(--sl-charcoal);
  }
.sl-orders-table__action {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.875rem !important;
    margin-right: 0.5rem;
  }
.sl-account-orders-empty {
    padding: clamp(3rem, 6vw, 6rem) 0;
    text-align: center;
  }
.sl-account-orders-empty__title {
    font-family: var(--sl-font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
  }
.sl-account-orders-empty__note {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
    max-width: 400px;
    margin: 0 auto 2rem;
  }
.sl-orders-pagination {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
  }
.sl-orders-pagination__list {
    list-style: none;
    display: flex;
    gap: 0.5rem;
  }
.sl-orders-pagination__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--sl-charcoal);
    text-decoration: none;
    border: 1px solid var(--sl-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
.sl-orders-pagination__link:hover {
    background-color: var(--sl-warm-gray);
    border-color: var(--sl-taupe);
  }
.sl-orders-pagination__link:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 2px;
  }
/* ── Order detail ────────────────────────────────────────── */
.sl-order-detail__header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-order-detail__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
  }
.sl-order-detail__status {
    font-size: 0.875rem;
    color: var(--sl-stone);
  }
.sl-order-detail__notes {
    list-style: none;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
.sl-order-detail__note {
    padding: 0.875rem 1rem;
    background-color: var(--sl-warm-gray);
    border-left: 2px solid var(--sl-taupe);
  }
.sl-order-detail__note-text {
    font-size: 0.9375rem;
    color: var(--sl-charcoal);
    margin-bottom: 0.25rem;
  }
.sl-order-detail__note-time {
    font-size: 0.75rem;
    color: var(--sl-stone);
  }
.sl-order-detail__content {
    margin-bottom: 2.5rem;
  }
.sl-order-detail__back {
    padding-top: 2rem;
    border-top: 1px solid var(--sl-border);
  }
/* ── Generic page template ───────────────────────────────── */
.sl-page {
    background-color: var(--sl-ivory);
  }
.sl-page__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 7rem) var(--sl-gutter);
  }
.sl-page-content__header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--sl-border);
  }
.sl-page-content__title {
    font-family: var(--sl-font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
.sl-page-content__body {
    max-width: 72ch;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--sl-charcoal);
  }
.sl-page-content__body p { margin-bottom: 1.25em; }
.sl-page-content__body h2,
  .sl-page-content__body h3 {
    font-family: var(--sl-font-serif);
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-top: 2em;
    margin-bottom: 0.75em;
  }
.sl-page-content__body h2 { font-size: 1.625rem; }
.sl-page-content__body h3 { font-size: 1.25rem; }
.sl-page-content__body a {
    color: var(--sl-charcoal);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
.sl-page-content__body ul,
  .sl-page-content__body ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
  }
/* ── 404 page ────────────────────────────────────────────── */
.sl-404 {
    background-color: var(--sl-ivory);
    display: flex;
    align-items: center;
    min-height: 72vh;
  }
.sl-404__inner {
    max-width: var(--sl-max-width);
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 9rem) var(--sl-gutter);
    text-align: center;
  }
.sl-404__code {
    display: block;
    font-family: var(--sl-font-serif);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sl-stone);
    margin-bottom: 2rem;
  }
.sl-404__heading {
    font-family: var(--sl-font-serif);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 400;
    color: var(--sl-charcoal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.375rem;
  }
.sl-404__sub {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--sl-stone);
    max-width: 480px;
    margin: 0 auto 2.5rem;
  }
.sl-404__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
/* ── Phase 5 reduced-motion additions ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sl-account-card,
    .sl-account-nav__link,
    .sl-login-tab,
    .sl-login-tab::after,
    .sl-orders-table__row,
    .sl-login-form__lost {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     CUSTOMIZATION PHASE 1 — Global Beauty Pass
     Additive refinements only. No architecture changes.
  ═══════════════════════════════════════════════════════════ */
/* ── Horizontal scroll prevention ───────────────────────── */
body {
    overflow-x: hidden;
  }
/* ── Button system refinement ────────────────────────────── */
.sl-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    vertical-align: middle;
  }
/* Larger tap target on small screens */
@media (max-width: 640px) {
    .sl-btn {
      min-height: 48px;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
/* WooCommerce native buttons inherit tap target */
.woocommerce-button.button,
  #place_order,
  .wc-proceed-to-checkout .checkout-button,
  .woocommerce-Button.button {
    min-height: 44px;
  }
.woocommerce-button.\!button,
  .woocommerce-Button.\!button {
    min-height: 44px !important;
  }
/* ── Consistent global focus states ─────────────────────── */
:focus-visible {
    outline: 2px solid var(--sl-stone);
    outline-offset: 3px;
  }
/* Inputs: focus via border (already styled per-phase) */
input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: none;
  }
/* ── Nav link active/current state ──────────────────────── */
/* ── Form input consistency across all account/login forms ─ */
.woocommerce-EditAccountForm .input-text,
  .woocommerce-ResetPassword .input-text,
  .woocommerce-form-login .input-text,
  .woocommerce-form-register .input-text,
  .woocommerce-form-coupon .input-text,
  .woocommerce-checkout .input-text {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--sl-border);
    border-radius: 0;
    font-family: var(--sl-font-sans);
    font-size: 0.9375rem;
    color: var(--sl-charcoal);
    padding: 0.75rem 0;
    width: 100%;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    outline: none;
  }
.woocommerce-EditAccountForm .input-text:focus,
  .woocommerce-ResetPassword .input-text:focus,
  .woocommerce-form-login .input-text:focus,
  .woocommerce-form-register .input-text:focus,
  .woocommerce-form-coupon .input-text:focus {
    border-bottom-color: var(--sl-charcoal);
  }
/* Form labels in account/login contexts */
.woocommerce-EditAccountForm .form-row label,
  .woocommerce-ResetPassword .form-row label,
  .woocommerce-form-login .form-row label,
  .woocommerce-form-register .form-row label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-stone);
    font-weight: 500;
    margin-bottom: 0.375rem;
  }
/* ── Content link treatment ──────────────────────────────── */
.sl-page-content__body a:not([class]),
  .woocommerce-order-details a:not([class]),
  .sl-order-detail__content a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--sl-taupe);
    transition: text-decoration-color 0.18s ease;
  }
.sl-page-content__body a:not([class]):hover,
  .woocommerce-order-details a:not([class]):hover,
  .sl-order-detail__content a:not([class]):hover {
    text-decoration-color: var(--sl-charcoal);
  }
/* ── Accent color utility classes ────────────────────────── */
/* ── Mobile typography and spacing refinements ───────────── */
@media (max-width: 480px) {
    /* Hero title: already sized in main overlay block at 480px */

    /* Section headers stay legible */
    .sl-section-header__title {
      font-size: clamp(1.5rem, 7vw, 2rem);
    }

    /* 404 heading contained */
    .sl-404__heading {
      font-size: clamp(1.625rem, 8vw, 2.5rem);
    }

    /* Account dashboard cards single column on smallest screens */
    .sl-account-cards {
      grid-template-columns: 1fr;
    }

    /* Orders table scrolls horizontally on narrow screens */
    .sl-account-orders {
      overflow-x: auto;
    }

    /* Drawer doesn't clip at edges */
    .sl-mini-cart {
      max-width: 100%;
    }
  }
@media (max-width: 360px) {
    /* Extra small: reduce gutter slightly */
    :root {
      --sl-gutter: 1rem;
    }
  }
/* ── Accent color on order status badges ─────────────────── */
/* ── Customization Phase 1 reduced-motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sl-btn,
    .woocommerce-EditAccountForm .input-text,
    .woocommerce-form-login .input-text,
    .woocommerce-form-register .input-text,
    .sl-page-content__body a:not([class]),
    .woocommerce-order-details a:not([class]) {
      transition: none;
    }
  }
/* ═══════════════════════════════════════════════════════════
     CUSTOMIZATION PHASE 2 — Brand Visual Refinement Pass
     Additive only. No architecture changes. Colors via CSS vars.
     Recommended palette (set via Appearance → Customize → Colors):
     Background #FFFFFF · Surface #F7F2EA · Text #211E1A
     Muted #766F67 · Border #DED6CA · Accent #2F6F68
  ═══════════════════════════════════════════════════════════ */
/* ── PART 1: Global visual identity lock ─────────────────── */
/* Body base text follows system token */
body { color: var(--sl-color-text); }
/* Hero: warm-gray fallback while image loads — overlay provides final appearance */
.sl-home-hero { background-color: var(--sl-warm-gray); }
.sl-shop-hero {
    background-color: var(--sl-color-surface);
    border-bottom-color: var(--sl-color-border);
  }
/* Product image placeholders: warm surface */
.sl-pcard__media,
  .sl-pcard__no-image,
  .sl-gallery__primary,
  .sl-gallery__thumb {
    background-color: var(--sl-color-surface);
  }
/* WooCommerce order status marks: suppress browser-default yellow */
mark.order-status { background: transparent; }
/* ── PART 2: Hero beauty pass ─────────────────────────────── */
/* Hero actions: single CTA, no gap needed */
/* CSS textile: defined fold layer depth */
.sl-home-hero__fabric--fold { opacity: 0.15; }
/* ── PART 3: Category grid beauty pass ────────────────────── */
/* Count: editorial uppercase tracking with muted system token */
.sl-cat-card__count {
    color: var(--sl-color-muted);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
/* Section header label: muted system token */
.sl-section-header__label { color: var(--sl-color-muted); }
/* Category card hover: name underline reveal */
.sl-cat-card:hover .sl-cat-card__name {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--sl-color-border);
  }
/* ── PART 4: Featured product row polish ──────────────────── */
/* Featured context: slightly more typographic presence */
.sl-featured-products .sl-pcard__title {
    font-size: 1.0625rem;
    line-height: 1.38;
  }
/* View Details link hover: accent underline */
.sl-pcard:hover .sl-pcard__link {
    border-bottom-color: var(--sl-color-accent);
  }
/* ── PART 5: Shop and PDP visual consistency ──────────────── */
/* PDP title: tighter tracking and leading */
.sl-product__title {
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
/* Sale/current price: accent color for clarity */
.sl-product__price .price ins,
  .sl-pcard__price .price ins {
    color: var(--sl-color-accent);
  }
/* Accordion trigger hover: accent */
.sl-accordion__trigger:hover span { color: var(--sl-color-accent); }
/* ── PART 6: Cart/checkout/account harmony ────────────────── */
/* WC notices: warmer surface background */
/* Order summary panels: surface background */
.sl-cart__summary-sticky {
    background-color: var(--sl-color-surface);
    border-color: var(--sl-color-border);
  }
.sl-checkout__summary-sticky {
    background-color: var(--sl-color-surface);
    border-color: var(--sl-color-border);
  }
/* Account cards: inset accent bar + surface on hover */
.sl-account-card:hover {
    background-color: var(--sl-color-surface);
    box-shadow: inset 3px 0 0 var(--sl-color-accent);
  }
/* Order status completed: accent tint */
mark.order-status.status-completed { color: var(--sl-color-accent); }
/* ── PART 7: Mobile beauty pass ───────────────────────────── */
@media (max-width: 1024px) {
    .sl-checkout__details-header { margin-bottom: 1.5rem; }
  }
@media (max-width: 640px) {
    .sl-login-split__forms {
      padding: clamp(2.5rem, 7vw, 4rem) clamp(1.25rem, 5vw, 2.5rem);
    }

    .sl-account__inner {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
  }
@media (max-width: 480px) {
    .sl-trust__list {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }
  }
/* ── PART 8: Micro-interactions ───────────────────────────── */
/* Buttons: physical press feedback */
.sl-btn:active { transform: scale(0.985); }
.wc-proceed-to-checkout .checkout-button:active,
  #place_order:active,
  .single_add_to_cart_button.button:active,
  .sl-coupon__apply-btn:active {
    transform: scale(0.985);
  }

  .single_add_to_cart_button.\!button:active {
    transform: scale(0.985) !important;
  }
/* Cart item image: hover zoom */
.sl-cart-item__img { overflow: hidden; }
.sl-cart-item__img img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
.sl-cart-item:hover .sl-cart-item__img img { transform: scale(1.04); }
/* Gallery thumbs: consistent easing curve */
.sl-gallery__thumb-img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
/* Drawer: smooth scroll inside panel */
.sl-drawer-scroll { scroll-behavior: smooth; }
/* ── Phase 2 reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sl-btn:active,
    .wc-proceed-to-checkout .checkout-button:active,
    #place_order:active,
    .single_add_to_cart_button.button:active,
    .sl-coupon__apply-btn:active {
      transform: none;
    }

    .sl-cart-item__img img,
    .sl-gallery__thumb-img {
      transition: none;
    }
    
    .single_add_to_cart_button.\!button:active {
      transform: none !important;
    }
  }
/* ═══════════════════════════════════════════════════════════
     CONTENT & IMAGE QA PHASE — Real-content presentation fixes
     Additive only. Issues found from live product/category audit.
  ═══════════════════════════════════════════════════════════ */
/* ── Gallery: consistent aspect ratios for fabric photography */
/* Primary image: fixed portrait ratio across all products */
.sl-gallery__primary { aspect-ratio: 4 / 5; }
/* Height must be explicit so object-fit: cover fills container */
.sl-gallery__primary-img { height: 100%; }
/* Thumbnails: matching portrait ratio in 2-col stack */
.sl-gallery__thumb { aspect-ratio: 4 / 5; }
.sl-gallery__thumb-img { height: 100%; }
/* Single gallery image: span both columns, slightly wider ratio */
.sl-gallery__stack > *:only-child {
    grid-column: 1 / -1;
    aspect-ratio: 8 / 5;
  }
/* ── Product card title: overflow protection ──────────────── */
.sl-pcard__title {
    overflow-wrap: break-word;
    word-break: break-word;
  }
/* ── PDP title: overflow protection ──────────────────────── */
.sl-product__title {
    overflow-wrap: break-word;
    word-break: break-word;
  }
/* ── Cart and drawer item names ────────────────────────────── */
.sl-cart-item__name,
  .sl-drawer-item__name {
    overflow-wrap: break-word;
    word-break: break-word;
  }
/* ── Category card name ────────────────────────────────────── */
.sl-cat-card__name {
    overflow-wrap: break-word;
    word-break: break-word;
  }
/* ── Specs table: long attribute values ────────────────────── */
.sl-specs__value {
    overflow-wrap: break-word;
    word-break: break-word;
  }
/* ── Product description body (inside "About this piece" accordion) */
.sl-accordion__desc-body {
    font-size: 0.9375rem;
    line-height: 1.82;
    color: var(--sl-stone);
  }
.sl-accordion__desc-body p {
    margin-bottom: 0.875em;
  }
.sl-accordion__desc-body p:last-child {
    margin-bottom: 0;
  }
.sl-accordion__desc-body ul,
  .sl-accordion__desc-body ol {
    padding-left: 1.25rem;
    margin-bottom: 0.875em;
  }
.sl-accordion__desc-body li {
    margin-bottom: 0.25em;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sl-stone);
  }
.sl-accordion__desc-body h2,
  .sl-accordion__desc-body h3,
  .sl-accordion__desc-body h4 {
    font-family: var(--sl-font-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--sl-charcoal);
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
  }
.sl-accordion__desc-body strong,
  .sl-accordion__desc-body b {
    font-weight: 500;
    color: var(--sl-charcoal);
  }
/* ── Out-of-stock / disabled Add to Bag state ──────────────── */
.single_add_to_cart_button.button[disabled],
  button.single_add_to_cart_button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
.single_add_to_cart_button.\!button[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
/* ── Content QA reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sl-gallery__primary-img,
    .sl-gallery__thumb-img {
      transition: none;
    }
  }
/* -- ANNOUNCEMENT SYSTEM v3 -- 3D silk ribbon */
.sl-announcement {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--sl-announcement-height-mobile, 36px);
    overflow: hidden;
    background-color: var(--sl-announcement-bg, #2f6f68);
    background-image:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, calc(var(--sl-announcement-depth, 3) * 0.036)) 0%,
        transparent 40%
      ),
      linear-gradient(
        to top,
        rgba(0, 0, 0, calc(var(--sl-announcement-depth, 3) * 0.018)) 0%,
        transparent 40%
      );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, calc(var(--sl-announcement-depth, 3) * 0.045)),
      inset 0 -1px 0 rgba(0, 0, 0, calc(var(--sl-announcement-depth, 3) * 0.022)),
      0 calc(var(--sl-announcement-depth, 3) * 0.5px) calc(var(--sl-announcement-depth, 3) * 1.4px)
        rgba(0, 0, 0, calc(var(--sl-announcement-depth, 3) * 0.025));
    color: var(--sl-announcement-text, #ffffff);
  }
.sl-announcement__sheen {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(
        ellipse 60% 90% at 50% 0%,
        color-mix(in srgb, var(--sl-announcement-accent, #f7f2ea) 7%, transparent),
        transparent
      ),
      linear-gradient(
        108deg,
        transparent 24%,
        color-mix(in srgb, var(--sl-announcement-accent, #f7f2ea) 9%, transparent) 42%,
        color-mix(in srgb, var(--sl-announcement-accent, #f7f2ea) 14%, transparent) 50%,
        color-mix(in srgb, var(--sl-announcement-accent, #f7f2ea) 9%, transparent) 58%,
        transparent 76%
      );
    opacity: calc(var(--sl-announcement-depth, 3) / 5);
    pointer-events: none;
    z-index: 0;
  }
.sl-announcement__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sl-container, 1280px);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
  }
/* Track base */
.sl-announcement__track {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
/* Mobile track hidden by default — revealed at mobile breakpoint */
.sl-announcement__track--mobile {
    display: none;
  }
/* Item */
.sl-announcement__item {
    font-family: var(--sl-announcement-font-family, var(--sl-font-sans));
    font-size: var(--sl-announcement-font-size-desktop, 11px);
    font-weight: 600;
    letter-spacing: var(--sl-announcement-letter-spacing, 0.18em);
    text-transform: uppercase;
    text-align: center;
    color: var(--sl-announcement-text, #ffffff);
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
  }
/* Separator used in marquee groups */
.sl-ann-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 0.8em;
    flex-shrink: 0;
    color: var(--sl-announcement-text, #ffffff);
    opacity: 0.5;
    font-size: 0.6em;
    line-height: 1;
  }
/* Screen-reader-only text for marquee bars */
.sl-announcement__marquee-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* Rotating mode */
.sl-announcement--rotating .sl-announcement__track--desktop {
    display: grid;
    place-items: center;
    width: 100%;
  }
.sl-announcement--rotating .sl-announcement__item {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
.sl-announcement--rotating .sl-announcement__item.is-active {
    opacity: 1;
  }
/* Marquee mode */
.sl-announcement__viewport {
    overflow: hidden;
    width: 100%;
    min-width: 0;
  }
.sl-announcement--marquee .sl-announcement__inner {
    max-width: none;
    padding: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
.sl-announcement--marquee .sl-announcement__track--desktop {
    display: flex;
    align-items: center;
    width: -moz-max-content;
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-start;
    transform: translate3d(0, 0, 0);
  }
.sl-announcement__marquee-track {
    display: flex;
    align-items: center;
    width: -moz-max-content;
    width: max-content;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }
.sl-announcement--has-mobile .sl-announcement__track--mobile.sl-announcement__marquee-track {
    display: none;
  }
.sl-announcement__marquee-track.is-ready {
    animation: sl-ann-marquee var(--sl-marquee-duration, 24s) linear infinite;
  }
.sl-announcement--marquee .sl-announcement__group,
  .sl-announcement__marquee-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
/* Pause on hover / keyboard focus */
.sl-announcement--marquee:hover .sl-announcement__marquee-track,
  .sl-announcement--marquee:focus-within .sl-announcement__marquee-track {
    animation-play-state: paused;
  }
@keyframes sl-ann-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--sl-marquee-distance, 0px)), 0, 0); }
  }
/* Desktop height */
@media (min-width: 641px) {
    .sl-announcement { height: var(--sl-announcement-height-desktop, 38px); }
  }
/* Mobile breakpoint — swap tracks and apply mobile font size */
@media (max-width: 640px) {
    .sl-announcement__item,
    .sl-announcement__marquee-sr {
      font-size: var(--sl-announcement-font-size-mobile, 10px);
    }

    /* Hide desktop track, show mobile track */
    .sl-announcement--has-mobile .sl-announcement__track--desktop { display: none; }
    .sl-announcement--has-mobile .sl-announcement__track--mobile  { display: flex; align-items: center; justify-content: center; }

    /* Rotating on mobile: grid layout */
    .sl-announcement--has-mobile.sl-announcement--rotating .sl-announcement__track--mobile {
      display: grid;
      place-items: center;
      width: 100%;
    }

    /* Marquee on mobile: flex + animation */
    .sl-announcement--has-mobile.sl-announcement--marquee .sl-announcement__track--mobile {
      display: flex;
      align-items: center;
      width: -moz-max-content;
      width: max-content;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* Very narrow screens: ease letter-spacing to prevent overflow */
@media (max-width: 390px) {
    .sl-announcement__item,
    .sl-announcement__marquee-sr {
      letter-spacing: calc(var(--sl-announcement-letter-spacing, 0.18em) * 0.8);
    }
  }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sl-announcement--rotating .sl-announcement__item {
      transition: none;
    }
    /* Marquee: stop animation, show readable static text instead */
    .sl-announcement--marquee .sl-announcement__inner {
      max-width: var(--sl-container, 1280px);
      padding: 0 1.25rem;
      justify-content: center;
    }
    .sl-announcement--marquee .sl-announcement__track,
    .sl-announcement--marquee .sl-announcement__marquee-track {
      display: none;
      animation: none;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }
    .sl-announcement__marquee-sr {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: nowrap;
      font-family: var(--sl-announcement-font-family, var(--sl-font-sans));
      font-size: var(--sl-announcement-font-size-desktop, 11px);
      font-weight: 600;
      letter-spacing: var(--sl-announcement-letter-spacing, 0.18em);
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      color: var(--sl-announcement-text, #ffffff);
    }
    .sl-menu-drawer__backdrop,
    .sl-menu-drawer__surface,
    .sl-menu-drawer__panel,
    .sl-menu-drawer__chevron,
    .sl-menu-drawer__shop-all,
    .sl-menu-drawer__trigger,
    .sl-menu-drawer__sublink {
      transition: none;
    }
  }
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ─── Brand Tokens ──────────────────────────────────────── */
:root {
  /* Phase 1–5 palette tokens */
  --sl-ivory:      #FAFAF8;
  --sl-white:      #FFFFFF;
  --sl-charcoal:   #2C2C2C;
  --sl-stone:      #9C9085;
  --sl-taupe:      #C5BAB0;
  --sl-warm-gray:  #F4F1EE;
  --sl-border:     #E8E4E0;

  --sl-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --sl-font-serif: 'Playfair Display', Georgia, serif;
  --sl-section-pad: clamp(4rem, 8vw, 9rem);
  --sl-max-width:   1280px;
  --sl-gutter:      clamp(1.25rem, 4vw, 3rem);

  /* ── Customization Phase 1 system tokens ──────────────
     These are overridden by wp_add_inline_style when
     Customizer color settings are changed.              */
  --sl-color-bg:      #ffffff;
  --sl-color-surface: #f4f1ee;
  --sl-color-text:    #2c2c2c;
  --sl-color-muted:   #9c9085;
  --sl-color-border:  #e8e4e0;
  --sl-color-accent:  #9a6f4d;

  /* Homepage hero Customizer tokens */
  --sl-hero-eyebrow-color: #7E6F66;
  --sl-hero-heading-color: #171412;
  --sl-hero-copy-color: #5F544D;
  --sl-hero-card-overall-size: 1;
  --sl-hero-text-overall-size: 1;
  --sl-hero-text-size-desktop: 1;
  --sl-hero-text-size-mobile: 0.9;
  --sl-hero-text-card-influence: 1;
  --sl-hero-eyebrow-size: 12px;
  --sl-hero-heading-size: 56px;
  --sl-hero-copy-size: 16px;
  --sl-hero-button-size: 12px;
  --sl-hero-button-width: 180px;
  --sl-hero-button-height: 46px;
  --sl-hero-button-radius: 18px;
  --sl-hero-button-text-size: 12px;
  --sl-hero-button-width-desktop: 180px;
  --sl-hero-button-height-desktop: 46px;
  --sl-hero-button-radius-desktop: 18px;
  --sl-hero-button-text-size-desktop: 12px;
  --sl-hero-button-width-mobile: 140px;
  --sl-hero-button-height-mobile: 41px;
  --sl-hero-button-radius-mobile: 20px;
  --sl-hero-button-text-size-mobile: 11px;
  --sl-hero-button-align: flex-start;
  --sl-hero-button-top-space: 18px;
  --sl-hero-eyebrow-size-desktop: 12px;
  --sl-hero-heading-size-desktop: 56px;
  --sl-hero-copy-size-desktop: 16px;
  --sl-hero-button-size-desktop: 12px;
  --sl-hero-eyebrow-size-mobile: 9.9px;
  --sl-hero-heading-size-mobile: 30.6px;
  --sl-hero-copy-size-mobile: 11.7px;
  --sl-hero-button-size-mobile: 11px;
  --sl-hero-content-width-desktop: 520px;
  --sl-hero-content-width-mobile: 340px;
  --sl-hero-height-desktop: 680px;
  --sl-hero-height-mobile: 590px;
  --sl-hero-overlay-strength: 0.38;
  --sl-hero-card-bg-rgb: 247, 242, 234;
  --sl-hero-card-opacity: 0.60;
  --sl-hero-card-bg: rgba(247, 242, 234, 0.60);
  --sl-hero-card-radius: 28px;
  --sl-hero-card-blur: 0px;
  --sl-hero-content-x-desktop: 8%;
  --sl-hero-content-y-desktop: 50%;
  --sl-hero-content-x-mobile: 5%;
  --sl-hero-content-y-mobile: 52%;
  --sl-hero-content-shift-x-desktop: -8%;
  --sl-hero-content-shift-y-desktop: -50%;
  --sl-hero-content-shift-x-mobile: -5%;
  --sl-hero-content-shift-y-mobile: -52%;
  --sl-hero-content-offset-x-desktop: 0px;
  --sl-hero-content-offset-y-desktop: 0px;
  --sl-hero-content-offset-x-mobile: 0px;
  --sl-hero-content-offset-y-mobile: 0px;
  --sl-hero-card-width-desktop: 520px;
  --sl-hero-card-padding-x-desktop: 36px;
  --sl-hero-card-padding-y-desktop: 34px;
  --sl-hero-card-final-width-desktop: 520px;
  --sl-hero-card-final-padding-x-desktop: 36px;
  --sl-hero-card-final-padding-y-desktop: 34px;
  --sl-hero-card-width-mobile: 305px;
  --sl-hero-card-padding-x-mobile: 18px;
  --sl-hero-card-padding-y-mobile: 20px;
  --sl-hero-card-final-width-mobile: 305px;
  --sl-hero-card-final-padding-x-mobile: 18px;
  --sl-hero-card-final-padding-y-mobile: 20px;
  --sl-hero-card-content-gap-desktop: 18px;
  --sl-hero-card-content-gap-mobile: 14px;
  --sl-hero-cta-bg: #2B241F;
  --sl-hero-cta-text: #FFFFFF;

  /* Spacing / shape system */
  --sl-radius-soft:   2px;
  --sl-radius-card:   0px;
  --sl-shadow-soft:   0 1px 4px 0 rgba(44, 44, 44, 0.06);
  --sl-container:     1280px;
  --sl-section-y:     clamp(4rem, 8vw, 9rem);
}

/* ─── Base ──────────────────────────────────────────────── */

/* ─── Components ────────────────────────────────────────── */