/* ==========================================================================
   KELKINI — home page brand layer over Bootstrap 5.3
   Load AFTER bootstrap.min.css and bootstrap-icons.css.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --k-shell:#FBF8F3; --k-sand:#F1EAE0; --k-dune:#E2D8CB; --k-line:#DCD2C5;
  --k-noir:#1C1B18;
  /* dark grounds are driftwood browns site-wide (the old sea greens are retired) */
  --k-sea:var(--k-drift); --k-sea-deep:var(--k-drift-deep);
  --k-ink-soft:#3A3833; --k-muted:#8C857A;
  --k-on-dark:#FBF8F3; --k-on-dark-muted:rgba(251,248,243,.74); --k-on-dark-line:rgba(251,248,243,.18);
  --k-gold:#C1A17A; --k-gold-dark:#A8845C; --k-sale:#A8443B;
  --k-drift:#4A3627; --k-drift-deep:#2E2119;
  /* shallow lagoon: sky-blue water over a sand shelf, used for the marquee band and the list band */
  --k-lagoon:#2A7A94; --k-lagoon-deep:#1B5C74; --k-lagoon-shallow:#5FAEC2;
  --k-lagoon-bed:#E2D2B2;   /* smooth pale sand under the water */
  /* clear water over a sand bed: the water layer is translucent, so the sand ripples below show through
     - strongest at the top (where text sits), thinning towards the shallows at the bottom */
  --k-lagoon-grad:linear-gradient(180deg,rgba(18,96,122,.92) 0%,rgba(31,135,164,.8) 42%,rgba(72,182,199,.56) 76%,rgba(135,216,216,.34) 100%);

  --k-scrim:linear-gradient(180deg,rgba(46,33,25,0) 34%,rgba(46,33,25,.7) 100%);
  --k-scrim-flat:rgba(46,33,25,.3);

  --k-font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
  --k-font-sans:'Manrope','Helvetica Neue',Arial,sans-serif;

  /* H1 56-72px desktop · H2 40-52px desktop (both step down on phones) */
  --k-fs-d1:clamp(2.75rem,5vw,4.5rem);
  --k-fs-d2:clamp(2.125rem,3.6vw,3.25rem);
  --k-fs-h3:clamp(1.5rem,2.2vw,2rem);
  --k-fs-h4:clamp(1.2rem,1.6vw,1.4rem);
  --k-fs-lede:clamp(1rem,1.2vw,1.125rem);
  --k-fs-body:1rem; --k-fs-sm:.875rem; --k-fs-label:.75rem; --k-fs-micro:.6875rem;
  --k-fw-body:400; --k-fw-medium:500; --k-fw-ui:600;
  --k-track:.12em; --k-track-wide:.18em;

  --k-section-y:clamp(72px,9vw,140px);
  --k-section-y-sm:clamp(48px,6vw,88px);
  /* Page edge, site-wide. Every page runs to 20px from the viewport edge and keeps growing
     until 1920px, then caps and centres — so nothing ever stretches past the design width.
     Change these two and the whole site moves; never hard-code a gutter or a container width. */
  --k-canvas:1920px;
  --k-edge:20px;

  --k-gutter:var(--k-edge);
  --k-grid-gap:clamp(12px,1.6vw,24px);

  --k-container:var(--k-canvas);
  --k-header-h:76px;
  --k-radius-pill:999px;

  --k-ease:cubic-bezier(.22,.61,.36,1);
  --k-ease-out:cubic-bezier(.16,1,.3,1);
  --k-dur-1:220ms; --k-dur-2:520ms; --k-dur-3:900ms;

  --k-z-sticky:900; --k-z-header:1000; --k-z-toast:1090;

  /* Bootstrap remap */
  --bs-body-bg:var(--k-shell); --bs-body-color:var(--k-noir);
  --bs-body-font-family:var(--k-font-sans); --bs-body-font-size:var(--k-fs-body);
  --bs-body-font-weight:400; --bs-body-line-height:1.7;
  --bs-heading-color:var(--k-noir); --bs-border-color:var(--k-line);
  --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0;
  --bs-border-radius-xl:0; --bs-border-radius-2xl:0; --bs-border-radius-pill:var(--k-radius-pill);
  --bs-primary:#1C1B18; --bs-primary-rgb:28,27,24;
  --bs-link-color:var(--k-noir); --bs-link-hover-color:var(--k-gold-dark); --bs-link-decoration:none;
  --bs-focus-ring-color:rgba(193,161,122,.55); --bs-focus-ring-width:2px;
  --bs-gutter-x:var(--k-grid-gap);
  --bs-emphasis-color:var(--k-noir); --bs-secondary-color:var(--k-muted);
}
@media (max-width:991.98px){ :root{ --k-header-h:62px; } }

/* ------------------------------------------------------------------ 2. BASE */
*{-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{background:var(--k-shell);color:var(--k-noir);font-family:var(--k-font-sans);font-weight:var(--k-fw-body);overflow-x:hidden;}

/* DM Serif Display ships one weight (400) - never synthesise bold */
h1,h2,h3,.k-display{font-family:var(--k-font-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--k-noir);}
h4,h5,h6{font-family:var(--k-font-sans);line-height:1.25;font-weight:var(--k-fw-ui);}

.k-d1{font-size:var(--k-fs-d1);max-width:15ch;}
.k-d2{font-size:var(--k-fs-d2);max-width:20ch;}
.k-d2--sm{font-size:2rem;}   /* quieter section headline, e.g. "Pieces we can't keep in stock" */
.k-h3{font-size:var(--k-fs-h3);}
.k-h4{font-size:var(--k-fs-h4);}
.k-em{font-style:italic;}
/* Image-filled headline (opt-in, for special headlines only - never on every h2).
   The shell/sand strip is clipped to the letters; one strip per line (size = line-height) keeps it crisp.
   Use on light grounds. Browsers without background-clip:text keep solid noir text. */
.k-text-texture{color:var(--k-noir);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .k-text-texture{background:url("../img/heading-background.webp") 0 0 / auto 1.1em repeat;line-height:1.1;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
  .k-text-texture .k-em{-webkit-text-fill-color:transparent;}
}

.k-lede{font-size:var(--k-fs-lede);font-weight:var(--k-fw-body);line-height:1.7;color:var(--k-ink-soft);max-width:50ch;}
.k-body{max-width:62ch;}
.k-meta{font-size:var(--k-fs-sm);color:var(--k-muted);}

a{transition:color var(--k-dur-1) var(--k-ease);}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--k-gold);outline-offset:3px;}
::selection{background:var(--k-gold);color:var(--k-shell);}

/* ------------------------------------------------------ 3. LAYOUT PRIMITIVES */
.container-k{width:100%;max-width:var(--k-container);margin-inline:auto;padding-inline:var(--k-gutter);}
.k-section{padding-block:var(--k-section-y);}
.k-section--sm{padding-block:var(--k-section-y-sm);}

.k-ground-shell{background:var(--k-shell);}
.k-ground-sand{background:var(--k-sand);}
.k-ground-noir{background:var(--k-noir);color:var(--k-on-dark);}
.k-ground-sea{background:var(--k-sea);color:var(--k-on-dark);}
.k-ground-sea-deep{background:var(--k-sea-deep);color:var(--k-on-dark);}
/* shallow water: deepest at the top (keeps text legible), sunlit turquoise low down */
.k-ground-lagoon,
.k-band.k-ground-lagoon{color:var(--k-on-dark);
  background-color:var(--k-lagoon-bed);
  background-image:var(--k-lagoon-grad),var(--k-tex-ripple);
  background-size:cover,1100px 420px;
  background-position:center,0 0;}
.k-ground-lagoon h1,.k-ground-lagoon h2,.k-ground-lagoon h3{color:var(--k-on-dark);}
.k-ground-lagoon .k-lede,.k-ground-lagoon .k-meta{color:var(--k-on-dark-muted);}
.k-ground-lagoon .k-eyebrow{color:#F3E6CD;}
.k-ground-lagoon .k-eyebrow::before,.k-ground-lagoon .k-eyebrow--center::after{background:#F3E6CD;}
.k-ground-lagoon .k-link{color:var(--k-on-dark);}
.k-ground-lagoon .k-rule{background:var(--k-on-dark-line);}
.k-ground-noir h1,.k-ground-noir h2,.k-ground-noir h3,
.k-ground-sea h1,.k-ground-sea h2,.k-ground-sea h3,
.k-ground-sea-deep h1,.k-ground-sea-deep h2,.k-ground-sea-deep h3{color:var(--k-on-dark);}
.k-ground-noir .k-lede,.k-ground-sea .k-lede,.k-ground-sea-deep .k-lede,
.k-ground-noir .k-meta,.k-ground-sea .k-meta,.k-ground-sea-deep .k-meta{color:var(--k-on-dark-muted);}

.k-rule{height:1px;background:var(--k-line);border:0;opacity:1;}
.k-ground-sea .k-rule,.k-ground-sea-deep .k-rule,.k-ground-noir .k-rule{background:var(--k-on-dark-line);}

/* ------------------------------------------------- 4. LABELS + SECTION HEADS */
.k-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-muted);margin-bottom:16px;}
.k-eyebrow::before{content:"";width:32px;height:1px;background:var(--k-gold);flex:none;}
.k-eyebrow--center{justify-content:center;}
.k-eyebrow--center::after{content:"";width:32px;height:1px;background:var(--k-gold);flex:none;}
.k-ground-sea .k-eyebrow,.k-ground-sea-deep .k-eyebrow,.k-ground-noir .k-eyebrow,.k-hero .k-eyebrow{color:var(--k-gold);}

.k-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:clamp(32px,5vw,64px);}
.k-section-head--center{flex-direction:column;align-items:center;text-align:center;}
.k-section-head--center .k-d2{margin-inline:auto;}
@media (max-width:767.98px){ .k-section-head{flex-direction:column;align-items:flex-start;gap:16px;} }

/* --------------------------------------------------------- 5. BUTTONS/LINKS */
.btn-k{--k-btn-h:56px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--k-btn-h);padding-inline:40px;border:1px solid transparent;border-radius:0;
  font-family:var(--k-font-sans);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color var(--k-dur-1) var(--k-ease),border-color var(--k-dur-1) var(--k-ease);}
.btn-k::before{content:"";position:absolute;inset:0;background:var(--k-gold-dark);
  transform:translateY(101%);transition:transform var(--k-dur-2) var(--k-ease-out);z-index:0;}
.btn-k:hover::before,.btn-k:focus-visible::before{transform:translateY(0);}
.btn-k > *{position:relative;z-index:1;}
.btn-k--sm{--k-btn-h:46px;padding-inline:26px;}
.btn-k--block{width:100%;}

.btn-k-solid{background:var(--k-noir);color:var(--k-shell);border-color:var(--k-noir);}
.btn-k-solid:hover,.btn-k-solid:focus-visible{color:var(--k-shell);border-color:var(--k-gold-dark);}
.btn-k-outline{background:transparent;color:var(--k-noir);border-color:var(--k-noir);}
.btn-k-outline:hover,.btn-k-outline:focus-visible{color:var(--k-shell);border-color:var(--k-gold-dark);}
.btn-k-light{background:transparent;color:var(--k-on-dark);border-color:rgba(251,248,243,.5);}
.btn-k-light:hover,.btn-k-light:focus-visible{color:var(--k-shell);border-color:var(--k-gold-dark);}

.k-link,.btn-k-link{position:relative;display:inline-block;padding-bottom:4px;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-noir);text-decoration:none;}
.k-link::after,.btn-k-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform var(--k-dur-1) var(--k-ease);}
.k-link:hover::after,.btn-k-link:hover::after{transform:scaleX(0);}
.k-ground-sea .k-link,.k-ground-sea-deep .k-link,.k-ground-noir .k-link{color:var(--k-on-dark);}

/* ---------------------------------------------------- 6. ANNOUNCE + MARQUEE */
.k-announce{background:var(--k-noir);color:var(--k-on-dark);padding-block:9px;overflow:hidden;}
.k-marquee{display:flex;width:max-content;animation:k-slide 76s linear infinite;
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);letter-spacing:var(--k-track-wide);text-transform:uppercase;}
/* each group is >= one viewport wide, the track moves exactly one group (-50%) -> seamless on any screen width.
   Text and diamond are separate items on an even gap, so each diamond sits midway between two phrases. */
.k-marquee__group{display:flex;flex:none;align-items:center;min-width:100vw;justify-content:space-around;gap:22px;}
.k-marquee span{white-space:nowrap;}
.k-marquee i{color:var(--k-gold);font-style:normal;line-height:1;}
@keyframes k-slide{to{transform:translateX(-50%);}}
.k-announce:hover .k-marquee{animation-play-state:paused;}

/* big display marquee band */
.k-band{background:var(--k-noir);color:var(--k-on-dark);padding-block:clamp(28px,4vw,52px);overflow:hidden;}
.k-band__track{display:flex;width:max-content;gap:32px;animation:k-slide 30s linear infinite;   /* same gap across the group seam, so every icon is centred */
  font-family:var(--k-font-display);font-size:clamp(2rem,5vw,3.75rem);font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.1;}
.k-band__track .k-marquee__group{min-width:100vw;gap:32px;}
.k-band__track span{white-space:nowrap;}
.k-band__track i{color:#F3E6CD;font-style:normal;}

/* ----------------------------------------------------------------- 7. HEADER */
.k-header{position:sticky;top:0;z-index:var(--k-z-header);height:var(--k-header-h);display:flex;align-items:center;
  background:var(--k-shell);border-bottom:1px solid transparent;
  transition:height var(--k-dur-2) var(--k-ease),border-color var(--k-dur-2) var(--k-ease),box-shadow var(--k-dur-2) var(--k-ease);}
.k-header.is-solid{border-bottom-color:var(--k-line);box-shadow:0 1px 24px rgba(28,27,24,.05);}
@media (min-width:992px){ .k-header.is-solid{height:74px;} }
.k-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;}
.k-header__left,.k-header__actions{display:flex;align-items:center;gap:clamp(8px,1.4vw,22px);}
.k-header__actions{justify-content:flex-end;}

/* Logo image is a JPG (opaque). `multiply` drops its white plate on our light header.
   If a transparent PNG/SVG logo is supplied later, delete the mix-blend-mode line. */
.k-logo{display:block;height:clamp(38px,4.6vw,58px);width:auto;mix-blend-mode:multiply;
  transition:height var(--k-dur-2) var(--k-ease);}
.k-header.is-solid .k-logo{height:clamp(34px,3.6vw,44px);}
.k-wordmark{font-family:var(--k-font-display);font-size:1.4rem;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;text-indent:.34em;color:var(--k-noir);text-decoration:none;white-space:nowrap;}

.k-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:none;border:0;color:var(--k-noir);font-size:1.1rem;transition:color var(--k-dur-1) var(--k-ease);}
.k-iconbtn:hover{color:var(--k-gold-dark);}
.k-iconbtn__count{position:absolute;top:2px;right:0;min-width:18px;height:18px;display:grid;place-items:center;
  padding-inline:4px;background:var(--k-gold);color:var(--k-noir);border-radius:var(--k-radius-pill);
  font-size:10px;font-weight:var(--k-fw-ui);letter-spacing:0;}

/* ------------------------------------------------------------------ 8. HERO */
/* Mobile-first: portrait video full-bleed behind the copy (native fit on phones). */
.k-hero{position:relative;min-height:calc(100vh - var(--k-header-h));min-height:calc(100svh - var(--k-header-h));display:flex;align-items:flex-end;
  color:var(--k-on-dark);overflow:hidden;background:var(--k-sea-deep);}
.k-hero__media{position:absolute;inset:0;overflow:hidden;}
.k-hero__media video,.k-hero__media img{width:100%;height:100%;object-fit:cover;}
.k-hero__media::after{content:"";position:absolute;inset:0;background:var(--k-scrim);pointer-events:none;}
.k-hero__copy{position:relative;z-index:2;width:100%;padding:clamp(40px,8vw,88px) var(--k-gutter);}
.k-hero__copy-inner{width:100%;max-width:var(--k-container);margin-inline:auto;}
.k-hero__title{font-size:var(--k-fs-d1);color:var(--k-on-dark);max-width:13ch;}
.k-hero__sub{color:var(--k-on-dark-muted);max-width:40ch;margin-top:22px;font-size:var(--k-fs-lede);}
.k-hero__cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;}

.k-hero__mute{position:absolute;right:16px;bottom:16px;z-index:3;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(251,248,243,.45);background:rgba(46,33,25,.35);color:var(--k-on-dark);
  backdrop-filter:blur(6px);transition:background var(--k-dur-1) var(--k-ease);}
.k-hero__mute:hover{background:var(--k-noir);}

/* Desktop: split — copy left on sand, portrait video right at close to native scale
   (a 9:16 clip stretched full-bleed at 1920px would upscale ~2.6x and go soft). */
@media (min-width:992px){
  .k-hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;background:var(--k-sand);}
  .k-hero__media{order:2;position:relative;inset:auto;height:100%;}
  .k-hero__media::after{background:linear-gradient(90deg,rgba(241,234,224,.5) 0,rgba(241,234,224,0) 20%);}
  .k-hero__copy{order:1;display:flex;align-items:center;
    padding-block:clamp(56px,7vw,104px);
    padding-right:clamp(32px,4vw,72px);
    padding-left:max(var(--k-gutter),calc((100vw - var(--k-container))/2 + var(--k-gutter)));}
  .k-hero__copy-inner{margin-inline:0;max-width:none;}
  .k-hero__mute{left:16px;right:auto;}
  .k-hero__title{color:var(--k-noir);}
  .k-hero__sub{color:var(--k-ink-soft);}
  .k-hero .k-eyebrow{color:var(--k-muted);}
}

/* slow ken-burns on the video */
@media (prefers-reduced-motion:no-preference){
  .k-hero__media video,.k-hero__media > img{animation:k-zoom 26s var(--k-ease-out) infinite alternate;}
}
@keyframes k-zoom{from{transform:scale(1.02);}to{transform:scale(1.13);}}

.k-scroll{position:absolute;right:var(--k-gutter);bottom:clamp(48px,7vw,104px);z-index:2;
  writing-mode:vertical-rl;font-size:var(--k-fs-micro);letter-spacing:var(--k-track-wide);
  text-transform:uppercase;color:var(--k-on-dark-muted);text-decoration:none;display:flex;align-items:center;gap:14px;}
.k-scroll::after{content:"";width:1px;height:70px;background:var(--k-on-dark-line);position:relative;overflow:hidden;}
@media (prefers-reduced-motion:no-preference){
  .k-scroll::after{background:linear-gradient(180deg,var(--k-gold) 0 35%,var(--k-on-dark-line) 35% 100%);
    background-size:100% 300%;animation:k-drip 2.4s var(--k-ease) infinite;}
}
@keyframes k-drip{from{background-position:0 -100%;}to{background-position:0 200%;}}
@media (max-width:767.98px){ .k-scroll{display:none;} }

/* ---------------------------------------------------------- 9. PRODUCT CARD */
.k-product{position:relative;}
.k-product__media{position:relative;display:block;aspect-ratio:3/4;background:var(--k-sand);overflow:hidden;}
.k-product__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--k-dur-2) var(--k-ease),transform var(--k-dur-3) var(--k-ease-out);}
.k-product__img--alt{opacity:0;}
.k-product:hover .k-product__img--alt{opacity:1;}
.k-product:hover .k-product__img--main{opacity:0;}
.k-product:hover .k-product__img{transform:scale(1.045);}

.k-badge{display:inline-block;padding:5px 12px;border-radius:var(--k-radius-pill);background:var(--k-noir);
  color:var(--k-shell);font-size:10px;font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-badge--gold{background:var(--k-gold);color:var(--k-noir);}
.k-badge--sale{background:var(--k-sale);}
.k-product__badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:8px;z-index:2;}

.k-product__actions{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:2;
  opacity:0;transform:translateX(10px);transition:opacity var(--k-dur-2) var(--k-ease),transform var(--k-dur-2) var(--k-ease);}
.k-product:hover .k-product__actions,.k-product:focus-within .k-product__actions{opacity:1;transform:none;}
.k-product__action{width:40px;height:40px;display:grid;place-items:center;background:var(--k-shell);border:0;
  color:var(--k-noir);font-size:1rem;transition:background var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease);}
.k-product__action:hover{background:var(--k-noir);color:var(--k-shell);}

.k-product__quickadd{position:absolute;left:0;right:0;bottom:0;padding:15px;border:0;z-index:2;
  background:rgba(251,248,243,.95);color:var(--k-noir);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;transform:translateY(101%);transition:transform var(--k-dur-2) var(--k-ease-out);}
.k-product:hover .k-product__quickadd,.k-product:focus-within .k-product__quickadd{transform:none;}
.k-product__quickadd:hover{background:var(--k-noir);color:var(--k-shell);}
@media (hover:none){
  .k-product__quickadd{display:none;}
  .k-product__actions{opacity:1;transform:none;}
}

.k-product__body{padding-top:10px;}
/* cards show name + price only: no category line, tight stack, small type */
.k-product__title{margin:0;font-family:var(--k-font-sans);font-size:.8125rem;font-weight:var(--k-fw-medium);letter-spacing:0;line-height:1.3;}
.k-product__title a{color:var(--k-noir);text-decoration:none;}
.k-product__title a:hover{color:var(--k-gold-dark);}
.k-product__price{margin:2px 0 0;font-family:var(--k-font-sans);font-size:.8125rem;font-weight:var(--k-fw-medium);letter-spacing:0;line-height:1.3;}
/* quick add overlays the foot of the image on every page: media + button share one grid cell,
   so the button never hangs below the name and price */
.k-product{display:grid;grid-template-columns:100%;}
.k-product__media,.k-product__quickadd{grid-area:1 / 1;}
.k-product__body{grid-area:2 / 1;}
.k-product__quickadd{position:relative;align-self:end;opacity:0;transform:translateY(8px);
  transition:opacity var(--k-dur-2) var(--k-ease),transform var(--k-dur-2) var(--k-ease-out),background var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease);}
.k-product:hover .k-product__quickadd,.k-product:focus-within .k-product__quickadd{opacity:1;transform:none;}
.k-product__price del{color:var(--k-muted);margin-right:8px;}

/* -------------------------------------------- 10. COLLECTION / SPLIT / USP */
.k-collection{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--k-sand);text-decoration:none;}
.k-collection img{width:100%;height:100%;object-fit:cover;transition:transform var(--k-dur-3) var(--k-ease-out);}
.k-collection:hover img{transform:scale(1.06);}
.k-collection::after{content:"";position:absolute;inset:0;background:var(--k-scrim);}
.k-collection__label{position:absolute;left:28px;right:28px;bottom:28px;z-index:2;color:var(--k-on-dark);}
.k-collection__label h3{color:var(--k-on-dark);font-size:var(--k-fs-h4);margin:0 0 10px;font-family:var(--k-font-display);}
.k-collection__label .k-link{color:var(--k-on-dark);}

.k-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,88px);}
.k-split__media{aspect-ratio:4/5;overflow:hidden;background:var(--k-sand);}
.k-split__media img{width:100%;height:100%;object-fit:cover;}
.k-split--reverse .k-split__media{order:2;}
@media (max-width:991.98px){
  .k-split{grid-template-columns:1fr;}
  .k-split--reverse .k-split__media{order:0;}
}

.k-usp__item{text-align:center;padding-inline:20px;}
.k-usp__icon{font-size:1.7rem;color:var(--k-gold);margin-bottom:16px;display:block;}
.k-usp__title{font-family:var(--k-font-sans);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;margin-bottom:10px;color:var(--k-on-dark);}
@media (min-width:768px){ .k-usp__col + .k-usp__col .k-usp__item{border-left:1px solid var(--k-on-dark-line);} }

/* --------------------------------------------------- 11. INSTAGRAM + SIGNUP */
.k-insta{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;}
.k-insta a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--k-sand);}
.k-insta img{width:100%;height:100%;object-fit:cover;transition:transform var(--k-dur-3) var(--k-ease-out);}
.k-insta__ico{position:absolute;inset:0;display:grid;place-items:center;background:var(--k-scrim-flat);
  color:var(--k-on-dark);font-size:1.5rem;opacity:0;transition:opacity var(--k-dur-2) var(--k-ease);}
.k-insta a:hover .k-insta__ico,.k-insta a:focus-visible .k-insta__ico{opacity:1;}
.k-insta a:hover img{transform:scale(1.07);}
@media (max-width:991.98px){ .k-insta{grid-template-columns:repeat(3,1fr);} }

.k-field-underline{width:100%;background:transparent;border:0;border-bottom:1px solid var(--k-line);border-radius:0;
  padding:12px 0;font-family:var(--k-font-sans);font-size:var(--k-fs-body);color:inherit;
  transition:border-color var(--k-dur-1) var(--k-ease);}
.k-field-underline:focus{outline:0;border-bottom-color:var(--k-gold);}
.k-field-underline::placeholder{color:var(--k-muted);}
.k-signup{display:flex;gap:16px;align-items:flex-end;max-width:520px;}
.k-signup .k-field-underline{flex:1;}
@media (max-width:575.98px){ .k-signup{flex-direction:column;align-items:stretch;} }

/* ---------------------------------------------------------------- 12. PANELS */
.offcanvas{background:var(--k-shell);border:0;box-shadow:0 24px 64px rgba(28,27,24,.16);}
.offcanvas-header{padding:22px clamp(24px,4vw,48px);border-bottom:1px solid var(--k-line);}
.offcanvas-title{font-family:var(--k-font-sans);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.offcanvas-body{padding:clamp(28px,4vw,48px);}
.k-nav-panel{width:min(540px,100vw);}
.k-nav-list{list-style:none;margin:0;padding:0;}
.k-nav-list > li + li{margin-top:14px;}
.k-nav-list a{font-family:var(--k-font-display);font-size:var(--k-fs-h3);font-weight:400;color:var(--k-noir);
  text-decoration:none;display:inline-block;transition:color var(--k-dur-1) var(--k-ease),transform var(--k-dur-1) var(--k-ease);}
.k-nav-list a:hover{color:var(--k-gold-dark);transform:translateX(10px);}
.k-nav-sub{list-style:none;padding:0;margin:0;}
.k-nav-sub li + li{margin-top:10px;}
.k-nav-sub a{font-family:var(--k-font-sans);font-size:var(--k-fs-sm);color:var(--k-ink-soft);text-decoration:none;}
.k-nav-sub a:hover{color:var(--k-gold-dark);}
.k-social{display:flex;gap:18px;font-size:1.15rem;}

/* staggered menu reveal */
@media (prefers-reduced-motion:no-preference){
  .k-nav-panel .k-nav-list li{opacity:0;transform:translateY(14px);}
  .k-nav-panel.show .k-nav-list li{animation:k-rise var(--k-dur-2) var(--k-ease-out) forwards;}
  .k-nav-panel.show .k-nav-list li:nth-child(1){animation-delay:.06s}
  .k-nav-panel.show .k-nav-list li:nth-child(2){animation-delay:.11s}
  .k-nav-panel.show .k-nav-list li:nth-child(3){animation-delay:.16s}
  .k-nav-panel.show .k-nav-list li:nth-child(4){animation-delay:.21s}
  .k-nav-panel.show .k-nav-list li:nth-child(5){animation-delay:.26s}
  .k-nav-panel.show .k-nav-list li:nth-child(6){animation-delay:.31s}
  .k-nav-panel.show .k-nav-list li:nth-child(7){animation-delay:.36s}
}
@keyframes k-rise{to{opacity:1;transform:none;}}

.k-cart-panel{width:min(440px,100vw);}

/* ---------------------------------------------------------------- 13. FOOTER */
.k-footer{background:var(--k-sea-deep);color:var(--k-on-dark-muted);padding-top:var(--k-section-y);}
.k-footer h4{font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-on-dark);margin-bottom:22px;}
.k-footer a{color:var(--k-on-dark-muted);text-decoration:none;}
.k-footer a:hover{color:var(--k-gold);}
.k-footer ul{list-style:none;padding:0;margin:0;}
.k-footer li + li{margin-top:12px;}
.k-footer .k-wordmark{color:var(--k-on-dark);font-size:1.6rem;}
.k-footer__bottom{margin-top:var(--k-section-y-sm);padding-block:22px;border-top:1px solid var(--k-on-dark-line);
  font-size:var(--k-fs-micro);letter-spacing:.08em;}
.k-pay{display:flex;gap:14px;font-size:1.5rem;color:var(--k-on-dark-muted);}

.k-totop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;display:grid;place-items:center;
  background:var(--k-noir);color:var(--k-shell);border:0;opacity:0;pointer-events:none;
  transition:opacity var(--k-dur-2) var(--k-ease);z-index:var(--k-z-sticky);}
.k-totop.is-visible{opacity:1;pointer-events:auto;}
.k-totop:hover{background:var(--k-gold-dark);}

/* ------------------------------------------------------------- 14. CAROUSEL */
.k-swiper{overflow:hidden;}
.k-swiper .swiper-slide{height:auto;}
.k-rail{display:flex;align-items:center;gap:24px;margin-top:clamp(28px,4vw,48px);}
.k-rail__bar{flex:1;position:relative;}
.k-rail__bar.swiper-scrollbar{height:1px;background:var(--k-line);border-radius:0;}
.k-rail__bar .swiper-scrollbar-drag{background:var(--k-noir);height:1px;border-radius:0;}
.k-nav-btns{display:flex;gap:8px;}
.k-nav-btns button{width:46px;height:46px;border:1px solid var(--k-line);background:transparent;color:var(--k-noir);
  transition:background var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease),border-color var(--k-dur-1) var(--k-ease);}
.k-nav-btns button:hover:not(:disabled){background:var(--k-noir);border-color:var(--k-noir);color:var(--k-shell);}
.k-nav-btns button:disabled{opacity:.3;cursor:default;}

/* -------------------------------------------------------------- 15. REVEALS */
@media (prefers-reduced-motion:no-preference){
  .k-reveal{opacity:0;transform:translateY(26px);
    transition:opacity var(--k-dur-2) var(--k-ease),transform var(--k-dur-2) var(--k-ease);}
  .k-reveal.is-in{opacity:1;transform:none;}
  /* line-by-line hero entrance */
  .k-hero .k-eyebrow,.k-hero__title,.k-hero__sub,.k-hero__cta{opacity:0;transform:translateY(22px);
    animation:k-rise 900ms var(--k-ease-out) forwards;}
  .k-hero .k-eyebrow{animation-delay:.15s}
  .k-hero__title{animation-delay:.28s}
  .k-hero__sub{animation-delay:.44s}
  .k-hero__cta{animation-delay:.58s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ==========================================================================
   16. SHOP PAGE
   ========================================================================== */

/* ---- page head + breadcrumb ---- */
.k-page-head{padding-block:clamp(28px,4vw,56px) clamp(32px,4vw,64px);}
.k-crumbs{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0;
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-muted);}
.k-crumbs a{color:var(--k-muted);text-decoration:none;}
.k-crumbs a:hover{color:var(--k-noir);}
.k-crumbs li + li::before{content:"/";margin-inline:10px;color:var(--k-line);}

/* ---- toolbar ---- */
.k-toolbar{position:sticky;top:var(--k-header-h);z-index:var(--k-z-sticky);background:var(--k-shell);
  border-block:1px solid var(--k-line);padding-block:14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.k-toolbar .dropdown-menu{border:1px solid var(--k-line);border-radius:0;box-shadow:0 18px 44px rgba(28,27,24,.08);
  font-size:var(--k-fs-sm);padding:8px 0;}
.k-toolbar .dropdown-item{padding:9px 20px;}
.k-toolbar .dropdown-item.active,.k-toolbar .dropdown-item:active{background:var(--k-sand);color:var(--k-noir);}

/* ---- filter rail ---- */
.k-filters .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--k-line);}
.k-filters .accordion-button{background:transparent;padding:20px 0;box-shadow:none;color:var(--k-noir);
  font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-filters .accordion-button:not(.collapsed){background:transparent;color:var(--k-noir);}
.k-filters .accordion-button::after{width:14px;height:14px;background-size:14px;}
.k-filters .accordion-body{padding:0 0 20px;}
.k-filter-opt{display:flex;align-items:center;gap:12px;padding-block:7px;font-size:var(--k-fs-sm);
  color:var(--k-ink-soft);cursor:pointer;margin:0;}
.k-filter-opt input{margin:0;border-radius:0;border-color:var(--k-line);flex:none;}
.k-filter-opt input:checked{background-color:var(--k-noir);border-color:var(--k-noir);}
.k-filter-opt .count{margin-left:auto;color:var(--k-muted);font-size:var(--k-fs-micro);}
.k-filter-clear{background:none;border:0;padding:0;color:var(--k-muted);
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-filter-clear:hover{color:var(--k-noir);}
@media (min-width:992px){ .k-rail-sticky{position:sticky;top:calc(var(--k-header-h) + 76px);} }

/* active filter chips */
.k-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.k-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--k-line);
  background:transparent;font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-noir);}
.k-chip:hover{border-color:var(--k-noir);}

/* ---- pager ---- */
.k-pager{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(40px,5vw,72px);}
.k-pager__nums{display:flex;gap:6px;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);}
.k-pager__nums a{width:40px;height:40px;display:grid;place-items:center;color:var(--k-muted);text-decoration:none;}
.k-pager__nums a:hover{color:var(--k-noir);}
.k-pager__nums a.is-active{color:var(--k-noir);border-bottom:1px solid var(--k-gold);}

.k-empty{text-align:center;padding-block:clamp(56px,8vw,110px);}

/* ==========================================================================
   17. PRODUCT DETAIL
   ========================================================================== */
.k-gallery__main{position:relative;aspect-ratio:3/4;background:var(--k-sand);overflow:hidden;}
.k-gallery__main img{width:100%;height:100%;object-fit:cover;}
.k-gallery__zoom{position:absolute;right:14px;bottom:14px;width:42px;height:42px;display:grid;place-items:center;
  background:rgba(251,248,243,.92);border:0;color:var(--k-noir);}
.k-gallery__zoom:hover{background:var(--k-noir);color:var(--k-shell);}
.k-gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.k-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--k-sand);border:1px solid transparent;
  padding:0;transition:border-color var(--k-dur-1) var(--k-ease);}
.k-thumb img{width:100%;height:100%;object-fit:cover;}
.k-thumb.is-active{border-color:var(--k-noir);}

/* ---- buy box ---- */
.k-buy{max-width:520px;}
@media (min-width:992px){ .k-buy{position:sticky;top:calc(var(--k-header-h) + 28px);} }
@media (min-width:1400px){ .k-buy{max-width:600px;} }
.k-buy__title{font-size:var(--k-fs-h3);margin:6px 0 0;}
.k-buy__price{font-family:var(--k-font-sans);font-size:1.5rem;font-weight:var(--k-fw-medium);margin:14px 0 0;}
.k-buy__price del{color:var(--k-muted);margin-right:10px;}
.k-buy__excerpt{margin-top:18px;color:var(--k-ink-soft);max-width:46ch;}

.k-optlabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-muted);margin-bottom:12px;}
.k-optlabel button{background:none;border:0;padding:0;color:var(--k-noir);
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;}

.k-opts{display:flex;flex-wrap:wrap;gap:8px;}
.k-opt{min-width:132px;flex:1 1 132px;padding:13px 14px;border:1px solid var(--k-line);background:transparent;
  color:var(--k-noir);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:.08em;text-transform:uppercase;text-align:center;
  transition:border-color var(--k-dur-1) var(--k-ease),background var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease);}
.k-opt small{display:block;letter-spacing:.04em;text-transform:none;color:var(--k-muted);font-size:11px;margin-top:3px;}
.k-opt:hover{border-color:var(--k-noir);}
.k-opt.is-active{background:var(--k-noir);border-color:var(--k-noir);color:var(--k-shell);}
.k-opt.is-active small{color:rgba(251,248,243,.7);}
.k-opt.is-out{color:var(--k-muted);text-decoration:line-through;pointer-events:none;background:var(--k-sand);}

.k-swatches{display:flex;gap:10px;}
.k-swatch{width:30px;height:30px;border-radius:var(--k-radius-pill);border:1px solid var(--k-line);padding:0;
  background-clip:padding-box;transition:box-shadow var(--k-dur-1) var(--k-ease);}
.k-swatch.is-active,.k-swatch:hover{box-shadow:0 0 0 2px var(--k-shell),0 0 0 3px var(--k-noir);}

.k-qty{display:inline-flex;align-items:center;border:1px solid var(--k-line);}
.k-qty button{width:46px;height:52px;background:none;border:0;color:var(--k-noir);font-size:1rem;}
.k-qty button:hover{background:var(--k-sand);}
.k-qty input{width:52px;height:52px;border:0;text-align:center;background:transparent;
  font-family:var(--k-font-sans);font-size:var(--k-fs-sm);color:var(--k-noir);}

.k-stock{display:inline-flex;align-items:center;gap:8px;font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;}
.k-stock::before{content:"";width:7px;height:7px;border-radius:var(--k-radius-pill);background:currentColor;}
.k-stock--in{color:#3F6B54;}
.k-stock--low{color:#8A6A2F;}
.k-stock--pre{color:var(--k-gold-dark);}

/* stretch-factor meter */
.k-stretch{display:flex;align-items:center;gap:10px;}
.k-stretch__bar{display:flex;gap:4px;}
.k-stretch__bar i{width:22px;height:4px;background:var(--k-dune);display:block;}
.k-stretch__bar i.on{background:var(--k-gold);}

.k-trust{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--k-line);}
.k-trust li{display:flex;gap:12px;align-items:flex-start;font-size:var(--k-fs-sm);color:var(--k-ink-soft);}
.k-trust li + li{margin-top:12px;}
.k-trust i{color:var(--k-gold-dark);font-size:1rem;line-height:1.6;flex:none;}

/* ---- PDP accordion ---- */
.k-acc .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--k-line);}
.k-acc .accordion-item:first-child{border-top:1px solid var(--k-line);}
.k-acc .accordion-button{background:transparent;padding:20px 0;box-shadow:none;color:var(--k-noir);
  font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-acc .accordion-button:not(.collapsed){background:transparent;color:var(--k-noir);}
.k-acc .accordion-button::after{width:14px;height:14px;background-size:14px;}
.k-acc .accordion-body{padding:0 0 24px;color:var(--k-ink-soft);font-size:var(--k-fs-sm);}
.k-acc ul{padding-left:18px;margin:0;}
.k-acc li{margin-bottom:7px;}
.k-spec{display:flex;gap:14px;padding-block:8px;border-bottom:1px dotted var(--k-line);}
.k-spec:last-child{border-bottom:0;}
.k-spec dt{min-width:132px;color:var(--k-muted);font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);
  letter-spacing:var(--k-track);text-transform:uppercase;margin:0;flex:none;}
.k-spec dd{margin:0;}

/* size guide table + modal */
.k-sizetable{width:100%;font-size:var(--k-fs-sm);border-collapse:collapse;}
.k-sizetable th,.k-sizetable td{padding:12px 10px;border-bottom:1px solid var(--k-line);text-align:left;}
.k-sizetable th{font-size:var(--k-fs-micro);letter-spacing:var(--k-track);text-transform:uppercase;
  color:var(--k-muted);font-weight:var(--k-fw-medium);}
.modal-content{border:0;border-radius:0;background:var(--k-shell);}
.modal-header{border-bottom:1px solid var(--k-line);padding:22px 28px;}
.modal-title{font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.modal-body{padding:28px;}

/* ==========================================================================
   18. SHOP PAGE v2
   ========================================================================== */

/* Link-styled BUTTONS need the UA chrome stripped — an <a> gets it for free,
   a <button> does not, and the default grey plate shows through otherwise. */
button.k-link,button.btn-k-link{background:transparent;border:0;padding:0 0 4px;
  font-family:var(--k-font-sans);cursor:pointer;}
/* Never combine .btn-k-link with Bootstrap's .dropdown-toggle: both own ::after. */

/* ---- collection banner (echoes the home hero's split) ---- */
/* The page banner is a standalone editorial panel, not part of the edge-to-edge section grid, so
   it keeps the generous inset it had before the 10px page edge. Its own tokens, deliberately —
   never shadow --k-gutter or --k-container to get this. */
.k-shopbanner{--k-banner-edge:clamp(12px,1.6vw,28px);--k-banner-canvas:1480px;
  display:grid;grid-template-columns:1fr;background:var(--k-sand);overflow:hidden;}
.k-shopbanner__copy{padding:clamp(30px,5vw,76px) var(--k-banner-edge);
  display:flex;flex-direction:column;justify-content:center;}
.k-shopbanner__media{aspect-ratio:16/11;overflow:hidden;background:var(--k-dune);order:-1;}
.k-shopbanner__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.k-shopbanner__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--k-line);}
.k-shopbanner__meta div{min-width:96px;}
.k-shopbanner__meta b{display:block;font-family:var(--k-font-display);font-size:1.6rem;font-weight:400;line-height:1;}
.k-shopbanner__meta span{display:block;margin-top:6px;font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);
  letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-muted);}
@media (min-width:992px){
  .k-shopbanner{grid-template-columns:1.04fr .96fr;}
  .k-shopbanner__media{order:0;aspect-ratio:auto;height:100%;min-height:clamp(400px,44vw,580px);}
  .k-shopbanner__copy{
    padding-left:max(var(--k-banner-edge),calc((100vw - var(--k-banner-canvas))/2 + var(--k-banner-edge)));
    padding-right:clamp(32px,4vw,72px);}
}

/* ---- category tabs ---- */
.k-tabsbar{border-bottom:1px solid var(--k-line);background:var(--k-shell);}
.k-tabs{display:flex;gap:clamp(16px,3vw,38px);overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;padding-block:16px;}
.k-tabs::-webkit-scrollbar{display:none;}
.k-tab{position:relative;flex:none;background:none;border:0;padding:6px 0;color:var(--k-muted);
  font-family:var(--k-font-sans);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:color var(--k-dur-1) var(--k-ease);}
.k-tab sup{font-size:9px;top:-.75em;margin-left:5px;letter-spacing:0;color:var(--k-muted);}
.k-tab::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--k-noir);
  transform:scaleX(0);transform-origin:left;transition:transform var(--k-dur-1) var(--k-ease);}
.k-tab:hover{color:var(--k-noir);}
.k-tab.is-active{color:var(--k-noir);}
.k-tab.is-active::after{transform:scaleX(1);}

/* ---- toolbar v2 ---- */
.k-toolbar{position:sticky;top:var(--k-header-h);z-index:var(--k-z-sticky);background:var(--k-shell);
  border-bottom:1px solid var(--k-line);border-top:0;padding-block:12px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.k-toolbar__side{display:flex;align-items:center;gap:clamp(10px,2vw,20px);}

/* native select, restyled — accessible, no caret collision, works on mobile */
.k-select{position:relative;display:inline-flex;align-items:center;}
.k-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;border:0;margin:0;padding:7px 24px 7px 0;color:var(--k-noir);
  font-family:var(--k-font-sans);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;cursor:pointer;}
.k-select select:focus{outline:0;}
.k-select select:focus-visible{outline:2px solid var(--k-gold);outline-offset:3px;}
.k-select i{position:absolute;right:0;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:.75rem;color:var(--k-muted);}
.k-select select option{font-family:var(--k-font-sans);font-size:14px;letter-spacing:normal;
  text-transform:none;color:var(--k-noir);background:var(--k-shell);}

/* density switcher */
.k-density{display:none;gap:4px;}
@media (min-width:1200px){ .k-density{display:flex;} }
.k-density button{width:36px;height:36px;display:grid;place-items:center;background:transparent;
  border:1px solid transparent;color:var(--k-muted);cursor:pointer;
  transition:color var(--k-dur-1) var(--k-ease),border-color var(--k-dur-1) var(--k-ease);}
.k-density button:hover{color:var(--k-noir);}
.k-density button.is-active{color:var(--k-noir);border-color:var(--k-line);}
.k-density span{display:flex;gap:2px;}
.k-density i{display:block;width:3px;height:14px;background:currentColor;}

/* grid density */
@media (min-width:1200px){
  #productGrid.is-3up > .col{width:33.3333%;}
  #productGrid.is-4up > .col{width:25%;}
}

/* ---- filter rail extras ---- */
.k-filter-opt .dot{width:13px;height:13px;border-radius:var(--k-radius-pill);
  border:1px solid var(--k-line);flex:none;}
.k-railcard{margin-top:34px;padding:26px;background:var(--k-sand);}
.k-railcard h3{font-family:var(--k-font-display);font-size:1.3rem;font-weight:400;margin:0 0 10px;}

/* ---- editorial interrupt ---- */
/* copy column sits on sand; the image column carries the colour */
.k-interrupt{display:grid;grid-template-columns:1fr;align-items:center;
  background:var(--k-sand);color:var(--k-ink-soft);overflow:hidden;}
.k-interrupt__media{aspect-ratio:16/11;overflow:hidden;}
.k-interrupt__media img{width:100%;height:100%;object-fit:cover;}
.k-interrupt__copy{padding:clamp(40px,6vw,84px) var(--k-gutter);background:var(--k-sand);}
.k-interrupt h2{color:var(--k-noir);}
@media (min-width:992px){
  .k-interrupt{grid-template-columns:1fr 1fr;}
  .k-interrupt__media{height:100%;min-height:440px;aspect-ratio:auto;}
  .k-interrupt__copy{
    padding-right:max(var(--k-gutter),calc((100vw - var(--k-container))/2 + var(--k-gutter)));
    padding-left:clamp(32px,4vw,72px);}
}

/* ==========================================================================
   19. SIZE & FIT GUIDE
   ========================================================================== */

/* ---- sticky anchor nav ---- */
.k-anchornav{list-style:none;margin:0;padding:0;}
.k-anchornav li + li{margin-top:2px;}
.k-anchornav a{display:block;padding:9px 0 9px 16px;border-left:1px solid var(--k-line);
  color:var(--k-muted);font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;text-decoration:none;
  transition:color var(--k-dur-1) var(--k-ease),border-color var(--k-dur-1) var(--k-ease);}
.k-anchornav a:hover{color:var(--k-noir);}
.k-anchornav a.is-active{color:var(--k-noir);border-left-color:var(--k-gold);}
@media (min-width:992px){ .k-anchornav{position:sticky;top:calc(var(--k-header-h) + 32px);} }

/* ---- guide sections ---- */
.k-guide h2{font-size:var(--k-fs-h3);}
/* The column is wide now that the page runs to the edge, so hold the running text to a readable
   measure. Tables, figures and card rows are deliberately exempt — they earn the full width. */
.k-guide > section > p,
.k-guide > section > ul,
.k-guide > section > ol,
.k-guide > section > h2,
.k-guide > section > h3{max-width:72ch;}
.k-guide .k-lede{max-width:62ch;}
.k-guide .accordion-body{max-width:72ch;}
.k-guide section + section{margin-top:clamp(48px,7vw,96px);}
.k-guide section{scroll-margin-top:calc(var(--k-header-h) + 24px);}

/* ---- cup cards ---- */
.k-cup{padding:26px;background:var(--k-sand);height:100%;}
.k-cup b{display:block;font-family:var(--k-font-display);font-size:1.55rem;font-weight:400;line-height:1;}
.k-cup span{display:block;margin-top:8px;font-size:var(--k-fs-micro);font-weight:var(--k-fw-medium);letter-spacing:var(--k-track);
  text-transform:uppercase;color:var(--k-muted);}
.k-cup p{margin:14px 0 0;font-size:var(--k-fs-sm);color:var(--k-ink-soft);}

/* ---- measure figure + steps ---- */
.k-figure{background:var(--k-sand);padding:24px;display:flex;justify-content:center;align-items:center;}
.k-figure svg{width:100%;max-width:300px;height:auto;}

.k-steps{list-style:none;counter-reset:kstep;margin:0;padding:0;}
.k-steps li{counter-increment:kstep;position:relative;padding-left:46px;padding-block:14px;
  border-bottom:1px solid var(--k-line);}
.k-steps li:last-child{border-bottom:0;}
.k-steps li::before{content:counter(kstep);position:absolute;left:0;top:14px;
  width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--k-gold);
  border-radius:var(--k-radius-pill);color:var(--k-gold-dark);font-size:var(--k-fs-micro);}
.k-steps b{display:block;font-weight:var(--k-fw-ui);font-size:var(--k-fs-label);letter-spacing:var(--k-track);
  text-transform:uppercase;margin-bottom:5px;}
.k-steps p{margin:0;font-size:var(--k-fs-sm);color:var(--k-ink-soft);}

/* ---- unit toggle (segmented) ---- */
.k-toggle{display:inline-flex;border:1px solid var(--k-line);}
.k-toggle button{background:transparent;border:0;padding:9px 20px;color:var(--k-muted);
  font-family:var(--k-font-sans);font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;cursor:pointer;transition:background var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease);}
.k-toggle button.is-active{background:var(--k-noir);color:var(--k-shell);}

/* ---- table emphasis ---- */
.k-sizetable tbody tr:hover{background:var(--k-sand);}
.k-sizetable td:first-child{font-family:var(--k-font-display);font-size:1.1rem;}

/* ---- callout note ---- */
.k-note{padding:20px 24px;background:var(--k-sand);border-left:2px solid var(--k-gold);
  font-size:var(--k-fs-sm);color:var(--k-ink-soft);}
.k-note strong{color:var(--k-noir);font-weight:var(--k-fw-ui);}

/* ---- fit-by-style rows ---- */
.k-fitrow{display:grid;grid-template-columns:1fr;gap:20px;padding-block:26px;
  border-bottom:1px solid var(--k-line);}
.k-fitrow:last-child{border-bottom:0;}
.k-fitrow__media{aspect-ratio:3/4;overflow:hidden;background:var(--k-sand);}
.k-fitrow__media img{width:100%;height:100%;object-fit:cover;}
@media (min-width:576px){ .k-fitrow{grid-template-columns:150px 1fr;gap:28px;align-items:start;} }

/* ==========================================================================
   20. FULL-WIDTH IMAGE HERO  (.k-herofull)
   Standalone — does not touch or inherit from .k-hero (the split video hero).
   Always full-bleed; the photograph is the focus, copy sits low-left and small.
   With a transparent header the hero slides up underneath it.
   ========================================================================== */
.k-herofull{position:relative;width:100%;
  min-height:calc(100vh - var(--k-announce-h) - var(--k-header-h));
  min-height:calc(100svh - var(--k-announce-h) - var(--k-header-h));
  display:flex;align-items:center;text-align:left;
  color:var(--k-on-dark);background:var(--k-sea-deep);overflow:hidden;}
/* Transparent header: the page slides under it on every page, so what shows through is the page itself.
   The first section pays the header height back as padding; the hero keeps its own internal offset. */
.k-header[data-header="transparent"] + main{margin-top:calc(-1 * var(--k-header-h));}
.k-header[data-header="transparent"] + main > :first-child{padding-top:var(--k-header-h);}
.k-header[data-header="transparent"] + main > .k-herofull:first-child{
  padding-top:0;
  min-height:calc(100vh - var(--k-announce-h));
  min-height:calc(100svh - var(--k-announce-h));}

.k-herofull__media{position:absolute;inset:0;}
.k-herofull__media picture,
.k-herofull__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
/* laptop + desktop get the full portrait frame: centre the model (face to outfit) instead of the arch above her */
@media (min-width:1200px){ .k-herofull__media img{object-position:center 30%;} }
/* three soft scrims: top (header legibility), left (the centred copy) and bottom — the centre stays clean */
.k-herofull__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(28,20,14,.46) 0,rgba(28,20,14,0) 20%),
    linear-gradient(0deg,rgba(28,20,14,.66) 0,rgba(28,20,14,0) 44%),
    linear-gradient(90deg,rgba(28,20,14,.56) 0,rgba(28,20,14,.2) 34%,rgba(28,20,14,0) 62%);}

.k-herofull__inner{position:relative;z-index:2;width:100%;max-width:var(--k-container);margin-inline:auto;
  /* copy sits vertically centred; padding is symmetrical so the header offset doesn't push it low */
  padding:calc(var(--k-header-h) + 32px) var(--k-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.k-herofull .k-eyebrow{color:var(--k-on-dark);margin-bottom:12px;}
.k-herofull__title{font-size:var(--k-fs-d1);color:var(--k-on-dark);max-width:14ch;margin:0;}
.k-herofull__sub{color:var(--k-on-dark-muted);font-size:var(--k-fs-lede);max-width:44ch;margin:14px 0 0;}
.k-herofull__cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;}
.k-herofull__scroll{position:absolute;right:var(--k-gutter);bottom:clamp(24px,3.5vw,48px);z-index:2;
  display:flex;align-items:center;gap:12px;color:var(--k-on-dark);text-decoration:none;
  font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track-wide);text-transform:uppercase;}
.k-herofull__scroll::after{content:"";width:56px;height:1px;background:var(--k-gold);}
.k-herofull__scroll:hover{color:var(--k-gold);}
@media (max-width:767.98px){ .k-herofull__scroll{display:none;} }

@media (prefers-reduced-motion:no-preference){
  .k-herofull__media img{animation:k-zoom 28s var(--k-ease-out) infinite alternate;}
  .k-herofull .k-eyebrow,
  .k-herofull__title,
  .k-herofull__sub,
  .k-herofull__cta{opacity:0;transform:translateY(22px);
    animation:k-rise 900ms var(--k-ease-out) forwards;}
  .k-herofull .k-eyebrow{animation-delay:.12s;}
  .k-herofull__title{animation-delay:.26s;}
  .k-herofull__sub{animation-delay:.42s;}
  .k-herofull__cta{animation-delay:.56s;}
}

/* ==========================================================================
   21. HOME PAGE v2  (body.k-home)
   Fuller and more compact than the inner pages: tighter rhythm, tall 9:14
   product cards and sand / water-light / sun-ray textures in the quiet areas.
   The split header, the footer (with the sand logo) and the driftwood palette
   are SITE-WIDE and live in 21a/21b below — every page shares them.
   ========================================================================== */
:root{
  --k-announce-h:37px;

  --k-tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .16 2.6 0 0 0 -1.5'/%3E%3C/filter%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 2.8 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --k-tex-ripple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .43 0 0 0 0 .3 0 0 1.3 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  --k-tex-caustic-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .44 0 0 0 0 .3 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --k-tex-caustic-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .82 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 .85 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --k-tex-rays:conic-gradient(from 190deg at 86% -18%,transparent 0deg,rgba(255,232,190,.2) 5deg,transparent 11deg,transparent 17deg,rgba(255,232,190,.14) 22deg,transparent 28deg,transparent 36deg,rgba(255,232,190,.18) 43deg,transparent 52deg,transparent 60deg,rgba(255,232,190,.1) 66deg,transparent 74deg,transparent 360deg),
    radial-gradient(60% 90% at 86% 0%,rgba(255,232,190,.12),transparent 70%);
}

.k-home{
  /* compact rhythm */
  --k-section-y:clamp(20px,2.1vw,32px);
  --k-section-y-sm:clamp(14px,1.4vw,22px);
  --k-grid-gap:clamp(8px,.9vw,14px);       /* edge and container come from :root */
  --bs-gutter-x:var(--k-grid-gap);

}

/* ---- compact overrides of shared components (home only) ---- */
.k-home .k-section-head{gap:24px;margin-bottom:clamp(8px,.9vw,14px);}
.k-home .k-section-head .k-d2{max-width:none;margin-bottom:0;}
.k-home .k-eyebrow{margin-bottom:6px;}
/* The eyebrow always stacks directly above the headline, with the same tight 6px step as
   "The list" band, so a section head stays compact at every width. */
.k-home .k-section-head > div > .k-eyebrow{display:flex;}
/* Under 768px the head stacked into three lines — eyebrow, headline, "View all" — with the right
   half of the eyebrow line left empty. Grid instead: the eyebrow and the link share row 1 (both are
   12px tracked caps, so they pair), and the headline takes row 2 across the full width. The wrapper
   is display:contents so its two children become grid items in their own right. */
@media (max-width:767.98px){
  .k-home .k-section-head{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:2px 14px;}
  .k-home .k-section-head > div{display:contents;}
  .k-home .k-section-head > div > .k-eyebrow{grid-area:1 / 1;margin-bottom:0;}
  .k-home .k-section-head > div > .k-d2{grid-area:2 / 1 / 3 / -1;}
  .k-home .k-section-head > .btn-k-link{grid-area:1 / 2;justify-self:end;}
}
/* Every home headline is 2rem on desktop and steps down on small screens (24px at 375px). */
.k-home .k-d2{font-size:clamp(1.5rem,5.2vw,2rem);}
.k-home .k-lede{line-height:1.65;}
.k-home .btn-k{--k-btn-h:50px;padding-inline:30px;}
.k-home .btn-k--sm{--k-btn-h:44px;padding-inline:22px;}
.k-home .k-product__media{aspect-ratio:9/14;}            /* tall cards — the garment reads head to toe */
.k-home .k-product__badges,.k-home .k-product__actions{top:10px;}
.k-home .k-product__badges{left:10px;}
.k-home .k-product__actions{right:10px;}
.k-home .k-rail{margin-top:clamp(8px,.9vw,12px);}
.k-home .k-collection__label{left:20px;right:20px;bottom:20px;}

/* ---- textures ---- */
.k-tex-sand,.k-tex-water,.k-tex-rays{position:relative;isolation:isolate;}
.k-tex-sand::before,.k-tex-water::before,.k-tex-rays::before,.k-tex-rays::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
/* beach sand: fine grain + faint wind ripples */
.k-tex-sand::before{background-image:var(--k-tex-grain),var(--k-tex-ripple);}
/* sunlight through shallow water, on a light ground */
.k-tex-water{overflow:hidden;}
.k-tex-water::before{inset:-6%;background:var(--k-tex-caustic-ink) center/cover no-repeat;opacity:.16;}
/* light rays + water glints, on a dark ground */
.k-tex-rays{overflow:hidden;}
.k-tex-rays::before{inset:-6%;background:var(--k-tex-caustic-light) center/cover no-repeat;opacity:.07;}
.k-ground-lagoon.k-tex-rays::before{opacity:.5;mix-blend-mode:screen;}   /* sunlight caustics on the sand bed */

/* Subtle water motion: the sand ripples drift, the caustics swim on a slower cycle and breathe,
   so the surface shimmers without ever reading as a loop. */
@media (prefers-reduced-motion:no-preference){
  .k-ground-lagoon{animation:k-wave 26s ease-in-out infinite alternate;}
  .k-ground-lagoon.k-tex-rays::before{animation:k-drift 34s ease-in-out infinite alternate,k-shimmer 11s ease-in-out infinite alternate;}
}
@keyframes k-wave{from{background-position:center,-40px 0;}to{background-position:center,40px 6px;}}
@keyframes k-shimmer{from{opacity:.4;}to{opacity:.62;}}
.k-ground-lagoon.k-tex-rays::after{opacity:.9;}
.k-tex-rays::after{inset:-20%;background:var(--k-tex-rays);filter:blur(14px);}
@media (prefers-reduced-motion:no-preference){
  .k-tex-water::before,.k-tex-rays::before{animation:k-drift 36s ease-in-out infinite alternate;}
  .k-tex-rays::after{animation:k-sway 14s ease-in-out infinite alternate;}
}
@keyframes k-drift{from{transform:translate3d(-2%,-1.5%,0) scale(1);}to{transform:translate3d(2%,1.5%,0) scale(1.04);}}
@keyframes k-sway{from{opacity:.7;transform:rotate(-1.5deg);}to{opacity:1;transform:rotate(1.5deg);}}

/* ==== 21a. SITE-WIDE HEADER: logo left · menu centre · icons right ====
   Same markup on every page; it shares the page edge, so the logo lines up with the section
   below it on every page. */
.k-header--split{color:var(--k-noir);
  transition:background-color var(--k-dur-2) var(--k-ease),color var(--k-dur-2) var(--k-ease),
    border-color var(--k-dur-2) var(--k-ease),box-shadow var(--k-dur-2) var(--k-ease);}
.k-header--split.is-solid{height:var(--k-header-h);}      /* fixed height: the hero sits underneath */
.k-header__brand{justify-self:start;display:inline-flex;align-items:center;line-height:0;}
.k-header--split .k-logo{height:clamp(28px,2.6vw,38px);mix-blend-mode:normal;
  filter:brightness(0) opacity(.9);transition:height var(--k-dur-2) var(--k-ease),filter var(--k-dur-2) var(--k-ease);}
.k-header--split.is-solid .k-logo{height:clamp(26px,2.2vw,32px);}
.k-header--split .k-header__actions{grid-column:3;gap:clamp(0px,.5vw,8px);}  /* stays in the right column when the centre menu is hidden (mobile + tablet) */
.k-header--split .k-iconbtn{color:inherit;}
.k-header--split .k-iconbtn:hover{color:var(--k-gold-dark);}

.k-mainnav ul{display:flex;align-items:center;gap:clamp(18px,2vw,34px);list-style:none;margin:0;padding:0;}
.k-mainnav a{position:relative;display:block;padding-block:8px;color:inherit;text-decoration:none;white-space:nowrap;
  font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--k-gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--k-dur-1) var(--k-ease);}
.k-mainnav a:hover::after,.k-mainnav a:focus-visible::after,.k-mainnav a[aria-current="page"]::after{transform:scaleX(1);}
.k-mainnav sup{top:-.9em;margin-left:3px;font-size:9px;letter-spacing:.06em;color:var(--k-gold-dark);}

/* Transparent is the site-wide ground: no plate at the top of the page, solid shell once scrolled. */
.k-header[data-header="transparent"]:not(.is-solid){background:transparent;}
.k-header[data-header="transparent"].is-solid,
.k-header[data-header="light"]{background:var(--k-shell);}
/* Over the home hero the header sits on the photograph, so it flips to light ink. */
.k-home .k-header[data-header="transparent"]:not(.is-solid){color:var(--k-on-dark);}
.k-home .k-header[data-header="transparent"]:not(.is-solid) .k-logo{filter:none;}
.k-home .k-header[data-header="transparent"]:not(.is-solid) .k-iconbtn:hover,
.k-home .k-header[data-header="transparent"]:not(.is-solid) .k-mainnav a:hover{color:var(--k-gold);}
.k-home .k-header[data-header="transparent"]:not(.is-solid) .k-mainnav sup{color:var(--k-gold);}
/* Optional dark ground, kept for pages that ever open on a dark band. */
.k-header[data-header="dark"]{background:var(--k-noir);color:var(--k-on-dark);}
.k-header[data-header="dark"].is-solid{border-bottom-color:var(--k-on-dark-line);}
.k-header[data-header="dark"] .k-logo{filter:none;}
.k-header[data-header="dark"] .k-iconbtn:hover{color:var(--k-gold);}
.k-header[data-header="dark"] .k-mainnav sup{color:var(--k-gold);}

/* ---- USP strip under the hero ---- */
.k-uspstrip{background:var(--k-sand);border-bottom:1px solid var(--k-line);}
.k-uspstrip__list{display:grid;grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0;}
.k-uspstrip__list li{display:flex;align-items:center;gap:12px;padding:11px 10px;}
.k-uspstrip__list i{font-size:1.3rem;color:var(--k-gold-dark);flex:none;}
.k-uspstrip__list b{display:block;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);
  text-transform:uppercase;line-height:1.3;}
.k-uspstrip__list small{display:block;font-size:var(--k-fs-sm);color:var(--k-ink-soft);line-height:1.4;}
@media (max-width:575.98px){ .k-uspstrip__list small{display:none;} }
@media (min-width:992px){
  .k-uspstrip__list{grid-template-columns:repeat(4,1fr);}
  .k-uspstrip__list li{justify-content:center;padding-block:11px;}
  .k-uspstrip__list li + li{border-left:1px solid var(--k-line);}
}

/* ---- categories: intro panel + three tall cards ---- */
.k-catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;}   /* category cards sit as tight as the product grids */
.k-catgrid__intro{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;padding-block:2px 8px;}
.k-catgrid__intro .k-d2{margin-bottom:0;}
.k-catgrid__links{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--k-line);}
.k-catgrid__links a{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--k-line);
  color:var(--k-noir);text-decoration:none;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;transition:color var(--k-dur-1) var(--k-ease),padding var(--k-dur-1) var(--k-ease);}
.k-catgrid__links a:hover{color:var(--k-gold-dark);padding-left:6px;}
.k-catgrid .k-collection:last-child{grid-column:1 / -1;aspect-ratio:16/10;}
@media (min-width:768px){
  .k-catgrid{grid-template-columns:repeat(3,1fr);}
  .k-catgrid .k-collection:last-child{grid-column:auto;aspect-ratio:2/3;}
}
@media (min-width:1200px){
  .k-catgrid{grid-template-columns:1.05fr repeat(3,1fr);}
  .k-catgrid__intro{grid-column:auto;padding:0 clamp(12px,2vw,36px) 0 0;}
}
.k-catgrid .k-collection{aspect-ratio:2/3;}
.k-collection__label small{display:block;margin-bottom:6px;font-size:var(--k-fs-micro);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;color:var(--k-gold);}

/* ---- marquee band on driftwood with light rays ---- */
.k-home .k-band{padding-block:clamp(9px,1.1vw,14px);}   /* ground comes from .k-ground-lagoon */

/* ---- campaign trio: video · copy · image ---- */
.k-campaign{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--k-grid-gap);}
.k-campaign__copy{grid-column:1 / -1;order:-1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,64px);background:var(--k-shell);}
.k-campaign__copy .k-d2{margin-bottom:0;}
.k-campaign__copy .k-lede{margin-top:14px;margin-bottom:0;}
.k-campaign__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.k-campaign__facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--k-line);}
.k-campaign__facts li{display:flex;align-items:center;gap:8px;font-size:var(--k-fs-label);font-weight:var(--k-fw-ui);
  letter-spacing:var(--k-track);text-transform:uppercase;}
.k-campaign__facts i{color:var(--k-gold-dark);}
.k-campaign__media{position:relative;aspect-ratio:9/14;overflow:hidden;background:var(--k-dune);}
.k-campaign__media img,.k-campaign__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.k-campaign__tag{position:absolute;left:12px;top:12px;z-index:2;padding:5px 12px;background:rgba(251,248,243,.92);color:var(--k-noir);
  font-size:10px;font-weight:var(--k-fw-ui);letter-spacing:var(--k-track);text-transform:uppercase;}
.k-campaign .k-hero__mute{left:auto;right:12px;bottom:12px;background:rgba(46,33,25,.35);}
@media (min-width:992px){
  .k-campaign{grid-template-columns:1fr 1.25fr 1fr;}
  .k-campaign__copy{grid-column:auto;order:0;padding:clamp(20px,2vw,34px);}
  /* Tall portrait frame. The floor tracks the viewport so the video keeps close to its native
     9:14 proportion as the columns widen to the 1920 canvas, instead of cropping ever harder. */
  .k-campaign__media{aspect-ratio:auto;min-height:clamp(560px,46vw,860px);}   /* stretches to the copy panel */
}

/* ---- the list (newsletter) + instagram, on driftwood ---- */
.k-listband{padding-block:var(--k-section-y-sm);}
.k-listband .k-d2{margin-bottom:0;max-width:none;}
.k-listband__note{max-width:520px;}
.k-listband .k-field-underline{border-bottom-color:var(--k-on-dark-line);color:var(--k-on-dark);}
.k-listband .k-field-underline::placeholder{color:var(--k-on-dark-muted);}
.k-listband .k-field-underline:focus{border-bottom-color:var(--k-gold);}
.btn-k-shell{background:var(--k-shell);color:var(--k-noir);border-color:var(--k-shell);}
.btn-k-shell:hover,.btn-k-shell:focus-visible{color:var(--k-shell);border-color:var(--k-gold-dark);}
.k-listband__social{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(10px,1.2vw,17px);padding-top:10px;border-top:1px solid var(--k-on-dark-line);}
.k-listband__social .k-eyebrow{margin:0;}
.k-home .k-insta{gap:0;}

/* ==== 21b. SITE-WIDE FOOTER: compact columns + sand logo ====
   Same markup and measurements on every page; shares the page edge like the header. */
.k-footer{padding-top:clamp(40px,4.4vw,68px);
  background:var(--k-sand);color:var(--k-ink-soft);}   /* same sand ground + grain as the USP strip */
.k-footer h4{margin-bottom:14px;color:var(--k-noir);}
.k-footer a{color:var(--k-ink-soft);}
.k-footer a:hover{color:var(--k-gold-dark);}
.k-footer li + li{margin-top:8px;}
.k-footer .k-meta{color:var(--k-muted);}
.k-footer .k-pay{color:var(--k-muted);}
.k-footer__bottom{margin-top:0;border-top-color:var(--k-line);}
.k-sandlogo{margin-top:clamp(28px,4vw,56px);padding-bottom:clamp(18px,2.4vw,32px);}
.k-sandlogo svg{display:block;width:100%;height:auto;max-width:1040px;margin-inline:auto;}
.k-sandlogo__glint{transform-box:view-box;}
@media (prefers-reduced-motion:no-preference){
  .k-sandlogo__glint{animation:k-glint 9s var(--k-ease) infinite;}
}
@keyframes k-glint{0%,55%{transform:translateX(-400px) skewX(-18deg);}100%{transform:translateX(1700px) skewX(-18deg);}}