/* ==========================================================================
   CASEKING HOMEPAGE — art direction
   --------------------------------------------------------------------------
   Direction: "Warm Studio".

   An ivory gallery with one ink and one gold. Photography sits in clean wells
   behind hairline warm borders; nothing is layered over the product imagery
   and no section invents its own accent colour. Charcoal appears exactly once
   on the homepage, as deliberate punctuation: the active-device band. The
   footer is the second and last dark moment.

   Load order (index.html): styles.css -> approved-home.css -> ck-system.css
   -> ck-product-card.css. This file owns the homepage's structural chrome
   (header, hero, finder, device band, about); ck-system.css owns tokens and
   the shared primitives and legitimately out-ranks this file at equal
   specificity. Do not reorder the links.
   ========================================================================== */

:root {
  --home-black: #070706;
  --home-ink: #0c0c0b;
  --home-gold: #DCC596;
  --home-gold-bright: #E6D3AC;
  --home-line: rgba(200, 168, 110, 0.28);
  --home-serif: Georgia, "Times New Roman", serif;

  --shell-ink: #161A1B;
  --shell-ink-soft: #5A615F;
  --shell-line: rgba(134, 105, 47, .22);
  --shell-pearl: #FBFAF7;
  --shell-champagne: #EFE6D4;
  --shell-porcelain: #F6F4EF;

  /* Clear strip reserved along the bottom of the hero for the finder panel to
     overlap into. Without it the panel covers the brand strip that is baked
     into the supplied artwork. Shared by the hero and the finder. */
  --ck-hero-shelf: clamp(30px, 3vw, 54px);
}

body {
  background: var(--shell-pearl);
}
.container { width: min(100% - 40px, 1400px); max-width: 1400px; }

.ck-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   1. HEADER — pearl surface: mark | departments | account + cart
   --------------------------------------------------------------------------
   The five reassurance points that used to sit above the mark now live in
   the trust band further down the page. What is left is the job a premium
   header actually has: identify the shop, expose the departments, and keep
   the account and the cart one tap away. Mark and navigation now share one
   optical line, which is what made the old stacked header read as two bars.
   ========================================================================== */

.ck-top-shell {
  position: relative;
  z-index: 200;
  background: linear-gradient(180deg, #FBFAF7 0%, #f8f2e7 100%);
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 250;
  padding: 0;
  background: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.ck-header-surface {
  position: relative;
  background:
    /* a whisper of the halo behind the utility cluster, so the header reads
       as part of the same lighting system as the bands below it */
    radial-gradient(circle at 92% -60%, rgba(200, 168, 110, .16), transparent 42%),
    linear-gradient(180deg, rgba(251, 250, 247, .97), rgba(238, 235, 228, .94));
  border-bottom: 1px solid var(--shell-line);
  transition: box-shadow .24s ease;
}
/* A champagne rule sits on the boundary with the hero, so the light header
   and the dark hero meet on a deliberate line rather than butting together. */
.ck-header-surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 110, .38) 22%, rgba(200, 168, 110, .38) 78%, transparent);
  pointer-events: none;
}
#site-header.scrolled .ck-header-surface {
  box-shadow: 0 12px 34px rgba(11, 43, 48, .13);
}

.ck-header-main {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.ck-header-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  min-width: 0;
}

/* Only present below the navigation breakpoint. The drawer it opens already
   existed in the markup — the homepage header simply had no control for it,
   which left phones with no way to reach the departments at all. */
.ck-nav-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--shell-line);
  border-radius: var(--k-r-sm, 9px);
  background: rgba(255, 255, 255, .7);
  color: var(--shell-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
.ck-nav-toggle .ck-icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.ck-nav-toggle:hover {
  background: linear-gradient(180deg, #ffffff, #FBFAF7);
  border-color: rgba(200, 168, 110, .45);
  color: var(--k-gold, #86692F);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 43, 48, .10);
}
.ck-nav-toggle:hover .ck-icon { transform: scale(1.08); }
.ck-nav-toggle:active { transform: translateY(0) scale(.955); }
.ck-nav-toggle:focus-visible { outline: 2px solid var(--k-gold-2, #C8A86E); outline-offset: 2px; }

/* --- mark ----------------------------------------------------------------
   The logo is driven by HEIGHT, not by width-plus-max-height. The mark is
   2075x758 (2.74:1), so the old `width: 158px; max-height: 43px` pair made
   object-fit: contain fit the image to the height, and it rendered 118px wide
   inside a 158px box - a third smaller than the CSS claimed, which is exactly
   why it read as a placeholder. With height as the constraint the width
   follows the artwork's own ratio and the mark finally fills its space.

   It is a 2075px-wide source, so scaling up costs nothing in sharpness. */
.ck-brand-board {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ck-brand-board-logo {
  display: block;
  width: auto;
  height: clamp(46px, 4.4vw, 64px);
  max-height: none;
  object-fit: contain;
  object-position: left center;
  filter: none;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), filter .25s ease;
}
.ck-brand-board:hover .ck-brand-board-logo,
.ck-brand-board:focus-visible .ck-brand-board-logo {
  transform: scale(1.018);
  filter: brightness(1.04);
}
.ck-brand-board:focus-visible { outline: none; }
.ck-brand-board:focus-visible .ck-brand-board-logo {
  outline: 2px solid var(--k-gold-2, #C8A86E);
  outline-offset: 6px;
  border-radius: 4px;
}

/* --- departments --------------------------------------------------------- */
.desktop-category-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.3vw, 34px);
  min-width: 0;
}
.desktop-category-nav a {
  position: relative;
  padding: 9px 0;
  color: var(--shell-ink);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: .008em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
/* The rule grows out of the centre rather than sweeping in from the left -
   on a centred nav a centre-out reveal reads as deliberate rather than as
   the text being underlined. */
.desktop-category-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(200, 168, 110, .25), var(--k-gold, #86692F) 50%, rgba(200, 168, 110, .25));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.desktop-category-nav a:hover,
.desktop-category-nav a:focus-visible { color: var(--k-gold, #86692F); transform: translateY(-1px); }
.desktop-category-nav a:hover::after,
.desktop-category-nav a:focus-visible::after { transform: scaleX(1); }
.desktop-category-nav a:active { transform: translateY(0) scale(.985); }
.desktop-category-nav a:focus-visible { outline: 2px solid var(--k-gold-2, #C8A86E); outline-offset: 4px; border-radius: 3px; }

/* --- account / cart ------------------------------------------------------ */
.ck-utility-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.ck-utility-actions .header-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--k-r-sm, 9px);
  background: transparent;
  color: var(--shell-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
/* One weight for all three. The cart previously carried its stroke as an
   inline SVG attribute while the other two inherited a CSS value, so they sat
   at 1.8 and 1.7 and never looked like a set. */
.ck-utility-actions .header-btn .ck-icon,
.ck-utility-actions .header-btn .ck-cart-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.ck-cart-icon path { stroke-width: 1.8; }
.ck-cart-icon { color: currentColor; }

.ck-utility-actions .header-btn:hover {
  background: linear-gradient(180deg, #ffffff, #FBFAF7);
  border-color: rgba(200, 168, 110, .45);
  color: var(--k-gold, #86692F);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 43, 48, .10);
}
.ck-utility-actions .header-btn:hover .ck-icon,
.ck-utility-actions .header-btn:hover .ck-cart-icon { transform: scale(1.07); }
/* A short press, not a bounce. */
.ck-utility-actions .header-btn:active { transform: translateY(0) scale(.955); }
.ck-utility-actions .header-btn:focus-visible {
  outline: 2px solid var(--k-gold-2, #C8A86E);
  outline-offset: 2px;
  color: var(--k-gold, #86692F);
}
#site-header .cart-count { top: 1px; right: 1px; }

/* ==========================================================================
   2. HERO CAROUSEL
   --------------------------------------------------------------------------
   Four supplied artworks, 2048 x 768 = exactly 8:3, used AS SUPPLIED.

   Two layers per slide, because an 8:3 image cannot fill a short, wide hero
   without cropping:
     layer 1  .ck-hero-slide-ambient  the SAME image, blurred / darkened /
                                      scaled up, filling the lateral space
     layer 2  .ck-hero-slide-img      the artwork itself, object-fit: CONTAIN,
                                      so all 2048x768 stays visible - never
                                      cropped, never stretched, brand strip
                                      and both product groups intact.

   Typography is Manrope, not a serif: this is a consumer-technology shop.
   ========================================================================== */

.ck-hero-carousel {
  --ck-reveal: 900ms;    /* transition length        (JS mirrors) */
  --ck-dwell: 5800ms;    /* time per slide           (JS mirrors) */
  --ck-sweep: 700ms;     /* champagne sweep length              */
  --ck-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  overflow: hidden;
  background: #070706;
}

/* An important homepage band, not a full-screen landing. Height tracks the
   viewport width so the 8:3 artwork keeps its proportion as the page grows. */
.ck-hero-slides {
  position: relative;
  width: 100%;
  height: clamp(440px, 42vw, 620px);
  overflow: hidden;
  touch-action: pan-y;
}

.ck-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms ease, visibility 620ms ease;
}
.ck-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
/* While leaving, the slide stays visible so its parallax is actually seen
   under the incoming wipe; the media animation does the fading. */
.ck-hero-slide.is-leaving { opacity: 1; visibility: visible; }

.ck-hero-slide-media {
  position: absolute;
  inset: 0 0 var(--ck-hero-shelf) 0;
  overflow: hidden;
  transform-origin: 50% 50%;
}

/* --- layer 1: ambient fill ------------------------------------------------ */
.ck-hero-slide-ambient {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  filter: blur(28px) brightness(.42);
  transform: scale(1.07);
  transform-origin: 50% 50%;
}
.ck-hero-slide.is-active .ck-hero-slide-ambient {
  animation: ckAmbientDrift calc(var(--ck-dwell) * 1.9) linear both;
}
@keyframes ckAmbientDrift {
  from { transform: scale(1.07); }
  to   { transform: scale(1.115); }
}

/* --- layer 2: the artwork, whole ----------------------------------------- */
.ck-hero-slide-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 50%;
}
.ck-hero-slide.is-active .ck-hero-slide-img {
  animation: ckKenBurns var(--ck-dwell) linear both;
}
@keyframes ckKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.014); }
}

/* Readability scrim: concentrated on the left where the copy sits, then a
   soft vignette dissolving the ambient layer into the edges. Deliberately
   reaches full transparency by 58% so the artwork is not half-obscured. */
.ck-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 4, .90) 0%, rgba(4, 4, 4, .62) 22%, rgba(4, 4, 4, .22) 40%, rgba(4, 4, 4, 0) 58%),
    linear-gradient(180deg, rgba(4, 4, 4, .34) 0%, rgba(4, 4, 4, 0) 26%, rgba(4, 4, 4, 0) 74%, rgba(4, 4, 4, .34) 100%);
}

/* Between the phone and the desktop layout the copy still overlays the
   artwork, but the 8:3 picture is scaled down far enough that the copy lands
   across the bright product group rather than the dark left edge. The scrim
   is deepened through that band only, so the type keeps a clean bed without
   darkening the desktop hero, where it already sits over shadow. */
@media (min-width: 761px) and (max-width: 1180px) {
  .ck-hero-scrim {
    background:
      linear-gradient(90deg, rgba(4, 4, 4, .94) 0%, rgba(4, 4, 4, .80) 30%, rgba(4, 4, 4, .42) 52%, rgba(4, 4, 4, 0) 70%),
      linear-gradient(180deg, rgba(4, 4, 4, .34) 0%, rgba(4, 4, 4, 0) 26%, rgba(4, 4, 4, 0) 74%, rgba(4, 4, 4, .34) 100%);
  }
}

/* --- entering / leaving transition --------------------------------------- */
.ck-hero-slide.is-active .ck-hero-slide-media {
  animation: ckMediaLTR var(--ck-reveal) var(--ck-ease) both;
}
.ck-hero-carousel[data-dir="rtl"] .ck-hero-slide.is-active .ck-hero-slide-media {
  animation-name: ckMediaRTL;
}
@keyframes ckMediaLTR {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-22px) scale(1.025); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(0) scale(1);         opacity: 1; }
}
@keyframes ckMediaRTL {
  from { clip-path: inset(0 0 0 100%); transform: translateX(22px) scale(1.025); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(0) scale(1);        opacity: 1; }
}

.ck-hero-slide.is-leaving .ck-hero-slide-media {
  animation: ckLeaveLTR var(--ck-reveal) var(--ck-ease) both;
}
.ck-hero-carousel[data-dir="rtl"] .ck-hero-slide.is-leaving .ck-hero-slide-media {
  animation-name: ckLeaveRTL;
}
@keyframes ckLeaveLTR {
  from { transform: translateX(0) scale(1);       opacity: 1; }
  to   { transform: translateX(18px) scale(1.02); opacity: .22; }
}
@keyframes ckLeaveRTL {
  from { transform: translateX(0) scale(1);        opacity: 1; }
  to   { transform: translateX(-18px) scale(1.02); opacity: .22; }
}

/* Champagne light reflection crossing the hero during transitions only. */
.ck-hero-sweep {
  position: absolute;
  inset: -25% -45%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(230, 211, 172, .10) 47%,
    rgba(230, 211, 172, .22) 50%,
    rgba(230, 211, 172, .10) 53%,
    transparent 60%);
  filter: blur(20px);
  transform: translateX(-38%);
}
.ck-hero-carousel.is-transitioning .ck-hero-sweep {
  animation: ckSweep var(--ck-sweep) ease-out both;
}
@keyframes ckSweep {
  0%   { opacity: 0;   transform: translateX(-38%); }
  16%  { opacity: 1; }
  78%  { opacity: .45; }
  100% { opacity: 0;   transform: translateX(38%); }
}

/* --- copy ---------------------------------------------------------------- */
.ck-hero-slide-inner {
  position: absolute;
  inset: 0 0 var(--ck-hero-shelf) 0;
  display: flex;
  align-items: center;
}
.ck-hero-copy {
  max-width: 560px;
  padding-right: 24px;
}

.ck-hero-eyebrow {
  margin: 0 0 12px;
  color: #e4c475;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.ck-hero-headline {
  margin: 0 0 14px;
  max-width: 17ch;
  color: #fff;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(32px, 3.3vw, 52px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.ck-hero-subtext {
  margin: 0 0 22px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.6;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
}
.ck-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--k-r-sm, 9px);
  background: linear-gradient(180deg, #DCC596, #C8A86E);
  color: #0B2B30;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(200, 168, 110, .24);
  transition: translate .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ck-hero-cta .ck-icon { width: 15px; height: 15px; stroke-width: 2; }
/* translate (not transform) so the copy entrance animation, which owns
   transform, cannot cancel the hover lift. */
.ck-hero-cta:hover { translate: 0 -2px; filter: brightness(1.04); box-shadow: 0 16px 38px rgba(200, 168, 110, .32); }

/* Copy entrance: eyebrow -> headline -> description -> CTA. */
.ck-hero-slide .ck-hero-eyebrow,
.ck-hero-slide .ck-hero-headline,
.ck-hero-slide .ck-hero-subtext,
.ck-hero-slide .ck-hero-cta {
  opacity: 0;
  transform: translateY(12px);
}
.ck-hero-slide.is-active .ck-hero-eyebrow  { animation: ckCopyIn .55s var(--ck-ease) .10s both; }
.ck-hero-slide.is-active .ck-hero-headline { animation: ckCopyIn .55s var(--ck-ease) .17s both; }
.ck-hero-slide.is-active .ck-hero-subtext  { animation: ckCopyIn .55s var(--ck-ease) .24s both; }
.ck-hero-slide.is-active .ck-hero-cta      { animation: ckCopyIn .55s var(--ck-ease) .31s both; }
@keyframes ckCopyIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- progress rails (no arrows, no dots) --------------------------------- */
.ck-hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--ck-hero-shelf) + 12px);
  z-index: 4;
  pointer-events: none;
}
.ck-hero-controls-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* The bar stays 3px tall, but the button around it is a full 44px: a 3px strip
   is not a tappable control on a phone. The bar is painted as a centred band of
   the button's own background, so the look is unchanged and the fill animation
   - which scales this element horizontally - is unaffected. The negative margin
   on the rail row cancels the extra button height, so the bar sits exactly
   where it did before and no surrounding layout moves. */
.ck-hero-rails { display: flex; align-items: center; gap: 10px; pointer-events: auto; margin: -20px 0; }
.ck-hero-rail {
  position: relative;
  width: 54px;
  height: 44px;
  padding: 0;
  border: 0;
  background: linear-gradient(to bottom,
    transparent 0,
    transparent calc(50% - 1.5px),
    rgba(230, 211, 172, .34) calc(50% - 1.5px),
    rgba(230, 211, 172, .34) calc(50% + 1.5px),
    transparent calc(50% + 1.5px),
    transparent 100%);
  cursor: pointer;
  overflow: hidden;
  transition: background .25s ease;
}
.ck-hero-rail:hover {
  background: linear-gradient(to bottom,
    transparent 0,
    transparent calc(50% - 1.5px),
    rgba(230, 211, 172, .58) calc(50% - 1.5px),
    rgba(230, 211, 172, .58) calc(50% + 1.5px),
    transparent calc(50% + 1.5px),
    transparent 100%);
}
.ck-hero-rail-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to bottom,
    transparent 0,
    transparent calc(50% - 1.5px),
    #d5a03c calc(50% - 1.5px),
    #f3d489 calc(50% + 1.5px),
    transparent calc(50% + 1.5px),
    transparent 100%);
}
/* Fills across the whole dwell; re-added on activation so it restarts. */
.ck-hero-rail.is-active .ck-hero-rail-fill {
  animation: ckRailFill var(--ck-dwell) linear both;
}
@keyframes ckRailFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.ck-hero-rail:focus-visible { outline: 2px solid var(--home-gold-bright); outline-offset: 3px; }

/* ==========================================================================
   3. DEVICE FINDER — the panel that bridges the hero and the catalogue
   --------------------------------------------------------------------------
   It overlaps the foot of the hero so the first viewport answers both
   questions at once: what this shop sells, and whether it has your phone.
   This is the brightest, highest-contrast surface above the fold — which is
   where the page's most commercial control belongs.
   ========================================================================== */

.ck-finder-section {
  position: relative;
  z-index: 5;
  margin: calc(-1 * var(--ck-hero-shelf)) 0 0 !important;
  padding: 0 0 clamp(26px, 3vw, 42px) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ck-finder-bar {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 1.55fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 30px) !important;
  padding: clamp(18px, 1.9vw, 26px) clamp(18px, 2vw, 28px) !important;
  background: linear-gradient(180deg, #ffffff, #FBFAF7) !important;
  /* The focal surface of the page. It sits over the dark hero, so it already
     has enormous tonal separation to work with - what it needs is the deepest
     elevation on the site plus a champagne ring, so it reads as the piece of
     instrument furniture the whole first viewport is built around. */
  border: 1px solid rgba(200, 168, 110, .30) !important;
  border-radius: var(--k-r-lg, 20px) !important;
  box-shadow: var(--k-lift-3, 0 4px 10px rgba(11, 43, 48, .07), 0 28px 60px rgba(11, 43, 48, .13)) !important;
}

.finder-kicker {
  display: block;
  margin-bottom: 8px;
  /* gold-deep for the same 4.5:1 reason as .section-kicker. */
  color: var(--k-gold-deep, #86692F);
  font-size: var(--k-t-eyebrow, 10px);
  font-weight: 800;
  /* .2em -> the shared eyebrow tracking. .14em is what the product card, the
     PDP and the rest of the system already use; .2em and up appear only where
     a label was styled in isolation. */
  letter-spacing: var(--k-tracking-eyebrow, .14em);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.ck-finder-lead {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 0 !important;
  min-width: 0;
}
.ck-finder-lead strong {
  color: var(--k-ink, #161A1B);
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.28;
}

.ck-finder-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  min-width: 0;
}
.ck-finder-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Step indicators. They are the component's spine: the numbered disc is what
   says "there is an order here", so it carries the state rather than sitting
   at a fixed gold for every step.
 *
 * The state is read from the select itself, with :has() - the disc for a step
 * whose select is disabled is LOCKED, and a step that already holds a chosen
 * value is DONE. That keeps the component presentational: no class has to be
 * added by script, and the two rules below simply do nothing if :has() is
 * unsupported, leaving the neutral disc. */
.ck-finder-step {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  color: var(--k-gold-deep, #86692F) !important;
  background: #fff !important;
  border: 1.5px solid rgba(200, 168, 110, .45) !important;
  font-size: 12px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              box-shadow .2s ease;
}

/* DONE — this step holds a chosen value. */
.ck-finder-field:has(select option:checked:not([value=""])) .ck-finder-step {
  color: #0B2B30 !important;
  background: linear-gradient(180deg, #DCC596, #d8a640) !important;
  border-color: rgba(134, 105, 47, .55) !important;
  box-shadow: 0 2px 6px rgba(134, 105, 47, .24);
}

/* LOCKED — its select is disabled because the previous step is not answered.
   Muted on purpose: it has to read as "not yet", never as "broken". */
.ck-finder-field:has(select:disabled) .ck-finder-step {
  color: var(--k-ink-3, #6B7371) !important;
  background: rgba(238, 235, 228, .7) !important;
  border-color: rgba(18, 62, 68, .18) !important;
  border-style: dashed !important;
  box-shadow: none;
}
.ck-finder-select-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* The selects already carry "Избери марка" / "Избери модел" as their first
   option, so the micro-labels go - it keeps the panel low.
 *
 * Visually hidden, not display:none. The label is the select's accessible
 * name ("Марка" / "Модел"), and display:none took it off the accessibility
 * tree entirely, leaving both controls nameless - an axe-core "select has no
 * accessible name" on the one form on the page that is the main way in.
 * The clipped box is out of flow and one pixel wide, so the panel looks
 * exactly as it did. */
.ck-finder-select-wrap label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* The field.
 *
 * THE CHEVRON WAS GONE, NOT FAINT. styles.css draws one on these selects, but
 * ck-system.css:259 later applies the `background` SHORTHAND with !important
 * (`background: rgba(255,255,255,.92) !important`), and a shorthand resets
 * background-image to none. So every select on the site lost its arrow and the
 * finder's two controls rendered as plain text boxes with no affordance at all.
 * The arrow is therefore re-declared here, after both, and with !important on
 * each longhand - the shorthand's !important is not something a later plain
 * declaration can beat. */
.ck-finder-select-wrap select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 38px 0 14px !important;
  /* White, not the pale cream it was: on this near-white bar a cream field had
     almost no edge, so the control did not read as something you press. */
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9762f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  border: 1px solid rgba(18, 62, 68, .28) !important;
  color: var(--k-ink, #161A1B) !important;
  border-radius: var(--k-r-sm, 9px) !important;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 13.5px !important;
  font-weight: 600 !important;
  /* A field, not a card: the inset is what makes it read as a place to type
     even before you touch it. */
  box-shadow: inset 0 1px 2px rgba(11, 43, 48, .05) !important;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease,
              box-shadow .18s ease;
}
.ck-finder-select-wrap select:hover:not(:disabled) {
  border-color: rgba(200, 168, 110, .62) !important;
  background-color: #FBFAF7 !important;
}
/* Disabled: a muted beige plate with a muted arrow, NOT a half-opacity
   control. Fading the whole element also faded its border and its label, so
   the locked step looked like a rendering fault rather than a next step. */
.ck-finder-select-wrap select:disabled {
  opacity: 1 !important;
  color: var(--k-ink-3, #6B7371) !important;
  background-color: rgba(238, 235, 228, .85) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b3a894' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  border-color: rgba(18, 62, 68, .16) !important;
  border-style: dashed !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
/* Focus. ck-system.css sets `outline: none !important` on select:focus and
   replaces it with a 14%-alpha ring - which measures about 1.1:1 against this
   bar, i.e. a keyboard user cannot find it. The ring here is the solid deep
   gold instead: 4.0:1 against the bar, and still on-palette. */
.ck-finder-select-wrap select:focus,
.ck-finder-select-wrap select:focus-visible {
  border-color: var(--k-gold, #86692F) !important;
  box-shadow: 0 0 0 3px var(--k-gold, #86692F) !important;
  outline: none !important;
}
.ck-finder-select-wrap select option { background: #fff !important; color: #111 !important; }

.ck-finder-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.ck-finder-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px !important;
  border: 0;
  border-radius: var(--k-r-sm, 9px) !important;
  background: linear-gradient(180deg, #DCC596, #C8A86E) !important;
  color: #0B2B30 !important;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 12px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(134, 105, 47, .22) !important;
  transition: translate .18s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ck-finder-cta .ck-icon { width: 15px; height: 15px; stroke-width: 2.1; }
.ck-finder-cta:hover:not(:disabled) { translate: 0 -1px; filter: brightness(1.04); box-shadow: 0 12px 26px rgba(134, 105, 47, .28) !important; }
.ck-finder-cta:focus-visible {
  outline: 2px solid var(--k-gold, #86692F);
  outline-offset: 2px;
}
/* Waiting for the two steps above it. A gold slab at 45% opacity reads as a
   broken button; this is a deliberate neutral plate, so it still looks like
   the thing you are working towards. */
.ck-finder-cta:disabled {
  opacity: 1 !important;
  background: rgba(238, 235, 228, .9) !important;
  color: rgba(11, 43, 48, .42) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.ck-finder-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--k-ink-3, #6B7371);
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
.ck-finder-reset .ck-icon { width: 14px; height: 14px; }
.ck-finder-reset:hover:not(:disabled) { color: var(--k-gold, #86692F); }
.ck-finder-reset:focus-visible {
  outline: 2px solid var(--k-gold, #86692F);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Was opacity .35 - which on this ink over a white bar left the label at
   roughly 1.6:1. Disabled is allowed to be quiet, not unreadable. */
.ck-finder-reset:disabled { opacity: 1; color: #b0a795; cursor: default; }

/* --- active device: the homepage's one deliberate dark moment ------------- */
.ck-device-context {
  width: fit-content;
  max-width: 100%;
  margin: clamp(14px, 1.6vw, 20px) 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  color: #f3eadb;
  background:
    linear-gradient(108deg, rgba(255,255,255,.045), transparent 31%),
    linear-gradient(145deg, #292722, #11110f);
  border: 1px solid rgba(200, 168, 110, .34);
  border-radius: 14px 14px 7px 14px;
  box-shadow: 0 12px 28px rgba(11, 43, 48, .16);
  animation: ckContextArrive .42s cubic-bezier(.22, .7, .24, 1) both;
}
.ck-device-context[hidden] { display: none !important; }
.ck-device-context-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200, 168, 110, .32);
  border-radius: 10px;
  color: #e4b95f;
  background: rgba(255, 255, 255, .04);
}
.ck-device-context-icon .ck-icon { width: 17px; height: 17px; }
.ck-device-context-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-device-context-copy small { color: #bdb2a1; font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.ck-device-context-copy strong { overflow: hidden; color: #f3ebdd; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ck-device-context-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #241f16;
  background: linear-gradient(145deg, #efd28e, #c9953f);
}
.ck-device-context-check .ck-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.ck-device-context-change {
  position: relative;
  padding: 5px 4px;
  border: 0;
  background: transparent;
  color: #e3bd71;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease;
}
.ck-device-context-change::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg, #b37a28, #f0ce82);
  transform: scaleX(.54);
  transform-origin: left;
  transition: transform .24s ease;
}
.ck-device-context-change:hover { color: #f5d58f; }
.ck-device-context-change:hover::after { transform: scaleX(1); }
@keyframes ckContextArrive { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   4. ABOUT — a framed dark artwork on the warm band
   --------------------------------------------------------------------------
   The band colour is owned by ck-system.css, which loads after this file.
   ========================================================================== */
/* The supplied artwork carries the heading, the copy and the four benefit
   labels, so the DOM holds only the image plus the two calls to action. */
.ck-about-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-r-lg, 20px);
  background: var(--k-dark, #14120f);
  box-shadow: var(--k-lift-3, 0 28px 60px rgba(11, 43, 48, .13));
  line-height: 0;
}
.ck-about-banner img { display: block; width: 100%; height: auto; }
.ck-about-banner .ck-about-cta {
  position: absolute;
  right: clamp(16px, 3vw, 46px);
  bottom: clamp(14px, 2.6vw, 38px);
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px !important;
}

/* ==========================================================================
   5. FLOATING CART — compact access to the existing cart
   ========================================================================== */
.ck-floating-cart {
  position: fixed;
  z-index: 850;
  right: 18px;
  top: 58%;
  transform: translateY(-50%);
  filter: drop-shadow(0 18px 28px rgba(11, 43, 48, .22));
  animation: ckFloatCartIn .42s cubic-bezier(.18, .72, .22, 1) both;
}
.ck-floating-cart[hidden] { display: none !important; }
.ck-floating-cart-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 9px;
  min-width: 132px;
  padding: 10px 28px 10px 10px;
  color: #EFE6D4;
  background: linear-gradient(145deg, #292722, #11110f);
  border: 1px solid rgba(200, 168, 110, .42);
  border-radius: 16px 16px 7px 16px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ck-floating-cart-trigger:hover {
  transform: translateX(-3px);
  border-color: rgba(200, 168, 110, .76);
  background: linear-gradient(145deg, #3a3428, #171510);
}
.ck-floating-cart-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #e6ba63;
  border: 1px solid rgba(200, 168, 110, .31);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.ck-floating-cart-icon svg { width: 18px; height: 18px; }
.ck-floating-cart-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ck-floating-cart-copy small { color: #b7beca; font-size: 8.5px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.ck-floating-cart-copy strong { color: #EFE6D4; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ck-floating-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  color: #231b0f;
  background: linear-gradient(180deg, #f1d08b, #c7933b);
  border: 2px solid #171510;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}
.ck-floating-cart-note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  padding: 7px 10px;
  opacity: 0;
  transform: translateY(6px);
  color: #f0e4cf;
  background: rgba(11, 43, 48, .94);
  border: 1px solid rgba(200, 168, 110, .42);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}
.ck-floating-cart.is-added .ck-floating-cart-note { animation: ckCartNote 1.7s ease both; }
.ck-floating-cart.is-added .ck-floating-cart-trigger,
.ck-floating-cart-trigger.cart-pulse { animation: ckCartConfirm .42s cubic-bezier(.2, .8, .2, 1); }
.ck-floating-cart-trigger.cart-pulse .ck-floating-cart-count { animation: ckCartBadgeConfirm .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes ckFloatCartIn { from { opacity: 0; transform: translate(24px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes ckCartConfirm {
  38% { transform: translateX(-5px) scale(1.045); border-color: rgba(184, 149, 90, .9); box-shadow: 0 0 0 7px rgba(184, 149, 90, .13), inset 0 1px 0 rgba(255, 255, 255, .11); }
  68% { transform: translateX(1px) scale(.992); }
}
@keyframes ckCartBadgeConfirm {
  42% { transform: translateY(-3px) scale(1.28); box-shadow: 0 0 0 6px rgba(184, 149, 90, .16); }
  75% { transform: translateY(1px) scale(.96); }
}
@keyframes ckCartNote { 0%, 100% { opacity: 0; transform: translateY(6px); } 18%, 74% { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* The navigation collapses into the drawer before the row can crowd. The mark
   and the cart stay at every width, because those are the two controls a
   phone actually needs. */
@media (max-width: 1010px) {
  .desktop-category-nav { display: none; }
  .ck-nav-toggle { display: inline-grid; }
  .ck-header-main { min-height: 76px; gap: 12px; }
  .ck-header-lead { gap: 11px; }
  /* Height again, not width-plus-max-height - see the note on the desktop
     rule. 54px here is a 148px mark, where the old pair produced 93px. */
  .ck-brand-board-logo { height: 54px; max-height: none; }
  /* Was 42px - under the 44px tap floor, across the whole range of widths
     where these three are the controls a thumb actually reaches for. The
     button is a transparent box with a 22px icon in it, so the two extra
     pixels are hit area, not visible size. */
  .ck-utility-actions .header-btn { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
  .ck-brand-board-logo { height: 48px; }
  /* The note below still governs: if the row runs out of space it is the
     favourites control that yields, not the cart. */
  .ck-utility-actions .header-btn { width: 44px; height: 44px; }
  /* The favourites control has no handler yet, so it is the one that yields
     when the row would otherwise start compressing the cart. */
  .ck-utility-actions .header-btn[aria-label="Любими продукти"] { display: none; }
}

@media (max-width: 1100px) {
  .ck-hero-copy { max-width: 470px; }
  .ck-finder-bar { grid-template-columns: minmax(190px, 1fr) minmax(0, 1.4fr) auto; }
}

/* The finder has to stack before its three columns can compress; it stops
   being a single instrument panel and becomes a small form. */
@media (max-width: 900px) {
  .ck-finder-bar { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch; }
  .ck-finder-actions { justify-self: stretch; justify-content: space-between; }
  .ck-finder-cta { flex: 1 1 auto; }
}

@media (max-width: 980px) {
  .ck-floating-cart { top: auto; right: 12px; bottom: 14px; transform: none; animation-name: ckFloatCartInCompact; }
  .ck-floating-cart-trigger { width: 48px; min-width: 48px; height: 48px; grid-template-columns: 32px; padding: 7px; border-radius: 14px 14px 6px 14px; }
  .ck-floating-cart-icon { width: 32px; height: 32px; }
  .ck-floating-cart-copy { display: none; }
  .ck-floating-cart-note { right: 0; }
  @keyframes ckFloatCartInCompact { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

/* Phones: an 8:3 artwork cannot carry overlaid copy without either cropping
   the composition or shrinking the type to nothing, so the artwork is kept
   COMPLETE at the top of the band and the copy sits directly beneath it in
   the same block. The ambient layer now stays ON here (it used to be
   display:none) so the band still reads full-bleed instead of as a letterbox
   strip floating on the page. */
@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1400px); }

  .ck-hero-slides {
    height: auto;
    display: grid;
  }
  .ck-hero-slide { grid-area: 1 / 1; position: static; inset: auto; }
  .ck-hero-slide-media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .ck-hero-slide-ambient { display: block; inset: -2%; width: 104%; height: 104%; filter: blur(26px) brightness(.44); }
  .ck-hero-slide-img { position: absolute; }
  .ck-hero-slide-inner { position: static; inset: auto; display: block; padding: 20px 0 0; }
  .ck-hero-copy { max-width: 100%; padding-right: 0; }
  .ck-hero-eyebrow { font-size: 9.5px; letter-spacing: .24em; margin-bottom: 10px; }
  .ck-hero-headline { max-width: 100%; font-size: clamp(27px, 7.6vw, 34px); margin-bottom: 11px; }
  .ck-hero-subtext { max-width: 100%; font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; }
  .ck-hero-cta { width: 100%; justify-content: center; }
  .ck-hero-controls { position: static; padding: 14px 0 18px; }
  .ck-hero-rails { gap: 8px; }
  .ck-hero-rail { width: 46px; }

  .ck-finder-section { margin-top: -26px !important; padding-bottom: 30px !important; }
  .ck-finder-bar { padding: 16px !important; gap: 14px !important; border-radius: var(--k-r, 14px) !important; }
  .ck-finder-lead strong { font-size: 15px; }
  .ck-finder-fields { gap: 12px; }
  /* Restored. Hiding these under 760px removed the step affordance from the
     Brand -> Model flow at exactly the width where the flow is least
     self-evident. The badge is a flex sibling ahead of the select, the same
     structure desktop uses, so it adds no new layout mode: at <=560px the
     fields are already single-column and the select simply yields the disc's
     34px (24px + the 10px gap) and still spans the bar. */
  .ck-finder-step { display: grid !important; }
  /* 13.5px, matching desktop. A 12.5px control label is the size at which a
     field starts reading as fine print on the one screen where it is the
     primary interaction. */
  .ck-finder-select-wrap select { height: 46px; font-size: 13.5px !important; }
  .ck-finder-cta { min-height: 46px; width: 100%; }
  /* Was 40px. "Нулирай" sits beside the primary CTA; a 4px shortfall here is
     the kind of miss that reads as a mis-tap rather than a wrong tap. */
  .ck-finder-reset { min-height: 44px; }
  .ck-device-context { width: 100%; margin-top: 12px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .ck-device-context-change { grid-column: 2 / -1; justify-self: end; }

  .ck-about-banner { line-height: normal; }
  .ck-about-banner .ck-about-cta {
    position: static;
    margin-top: 16px !important;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ck-floating-cart { top: auto; right: 12px; bottom: 14px; transform: none; }
  .ck-floating-cart-trigger { width: 48px; min-width: 48px; height: 48px; grid-template-columns: 32px; padding: 7px; border-radius: 14px 14px 6px 14px; }
  .ck-floating-cart-icon { width: 32px; height: 32px; }
  .ck-floating-cart-copy { display: none; }
  .ck-floating-cart-note { right: 0; }
  @keyframes ckFloatCartIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 560px) {
  .ck-finder-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   7. TRUST BAND — the reassurance island on phones
   --------------------------------------------------------------------------
   The island markup lives in the trust band now. Above 760px ck-system.css
   lays it out as one row of five; below that it becomes this two-column grid,
   with the fifth item spanning the full width.
   ========================================================================== */
@media (max-width: 760px) {
  .ck-island {
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: var(--k-r, 14px);
  }
  .ck-island-benefit {
    min-width: 0;
    min-height: 0;
    padding: 14px 12px;
    gap: 9px;
    border-right: 1px solid var(--k-line-2, rgba(18, 62, 68, .09));
    border-bottom: 1px solid var(--k-line-2, rgba(18, 62, 68, .09));
  }
  .ck-island-benefit:nth-child(2n) { border-right: 0; }
  .ck-island-benefit:nth-child(5) { grid-column: 1 / -1; justify-content: flex-start; border-right: 0; border-bottom: 0; }
  .ck-island-benefit:nth-child(3),
  .ck-island-benefit:nth-child(4) { border-bottom: 0; }
  .ck-island-benefit .ck-icon { width: 22px; height: 22px; }
  .ck-island-benefit strong { font-size: 12.5px; white-space: normal; }
  .ck-island-benefit small { font-size: 11px; white-space: normal; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  /* Five across gets cramped before the five-across breakpoint is reached, so
     the row wraps to three plus two rather than squashing. */
  .ck-trust .ck-island { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ck-trust .ck-island-benefit:nth-child(4) { border-left: 0 !important; }
}

/* ==========================================================================
   8. REDUCED MOTION
   --------------------------------------------------------------------------
   Scoped and explicit. This deliberately does NOT use the blanket catch-all
   reset that forces every animation on the page down to a single frame: the
   homepage hero and the cart flight are approved, load-bearing parts of the
   experience and must not be silently switched off. What is disabled here is
   decoration only - the drift, the sweep, the hover lifts and the arrival
   animations - while the carousel keeps advancing on its timer so the page
   still works and each slide's copy is simply already in place.
   ========================================================================== */
/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-hero-slide.is-active .ck-hero-slide-ambient, html.ck-calm .ck-hero-slide.is-active .ck-hero-slide-img { animation: none !important; }
  html.ck-calm .ck-hero-carousel.is-transitioning .ck-hero-sweep { animation: none !important; opacity: 0 !important; }
  html.ck-calm .ck-hero-slide.is-active .ck-hero-eyebrow, html.ck-calm .ck-hero-slide.is-active .ck-hero-headline, html.ck-calm .ck-hero-slide.is-active .ck-hero-subtext, html.ck-calm .ck-hero-slide.is-active .ck-hero-cta { animation: none !important; opacity: 1; transform: none; }
  html.ck-calm .ck-hero-slide .ck-hero-eyebrow, html.ck-calm .ck-hero-slide .ck-hero-headline, html.ck-calm .ck-hero-slide .ck-hero-subtext, html.ck-calm .ck-hero-slide .ck-hero-cta { opacity: 1; transform: none; }
  html.ck-calm .ck-device-context { animation: none !important; }
  html.ck-calm .ck-floating-cart { animation: none !important; }
  html.ck-calm .ck-floating-cart.is-added .ck-floating-cart-note, html.ck-calm .ck-floating-cart.is-added .ck-floating-cart-trigger, html.ck-calm .ck-floating-cart-trigger.cart-pulse, html.ck-calm .ck-floating-cart-trigger.cart-pulse .ck-floating-cart-count { animation: none !important; }
  html.ck-calm .ck-hero-cta:hover, html.ck-calm .ck-finder-cta:hover:not(:disabled), html.ck-calm .ck-floating-cart-trigger:hover { translate: none; transform: none; }
  html.ck-calm /* Header motion is all decoration, html.ck-calm so it goes entirely - and the hover
     states still read, html.ck-calm because they are carried by colour and background. */
  .ck-brand-board-logo, html.ck-calm .desktop-category-nav a::after, html.ck-calm .desktop-category-nav a, html.ck-calm .ck-nav-toggle, html.ck-calm .ck-nav-toggle .ck-icon, html.ck-calm .ck-utility-actions .header-btn, html.ck-calm .ck-utility-actions .header-btn .ck-icon, html.ck-calm .ck-utility-actions .header-btn .ck-cart-icon, html.ck-calm .ck-finder-select-wrap select, html.ck-calm .ck-finder-step { transition: none !important; }
  html.ck-calm .ck-brand-board:hover .ck-brand-board-logo, html.ck-calm .ck-brand-board:focus-visible .ck-brand-board-logo, html.ck-calm .desktop-category-nav a:hover, html.ck-calm .desktop-category-nav a:active, html.ck-calm .ck-nav-toggle:hover, html.ck-calm .ck-nav-toggle:active, html.ck-calm .ck-nav-toggle:hover .ck-icon, html.ck-calm .ck-utility-actions .header-btn:hover, html.ck-calm .ck-utility-actions .header-btn:active, html.ck-calm .ck-utility-actions .header-btn:hover .ck-icon, html.ck-calm .ck-utility-actions .header-btn:hover .ck-cart-icon { transform: none; }


/* ==========================================================================
   MODERN ATELIER — THE HOMEPAGE COLOUR LAYER
   --------------------------------------------------------------------------
   index.html is the only page that links this file, so everything below is
   homepage-scoped by construction and cannot reach the catalogue, PDP, blog,
   cart or checkout views. Within index.html every rule is additionally
   anchored to #storefront-home-view, which wraps exactly the seven homepage
   bands and nothing else — verified in the browser, not assumed. These rules
   therefore cannot leak even inside the homepage's own document.

   WHY THE PAGE NEEDED IT
   The homepage had one temperature. Measured top to bottom before this change:
   warm #EEEBE4, champagne #EFE6D4, stone #EEEBE4, warm #EEEBE4 again, over a
   #FBFAF7 page. Four bands and a canvas inside a few percent of one another,
   all warm, which is why the page read as a single beige field with furniture
   standing on it.

   WHERE EACH COLOUR IS ALLOWED TO GO
   Every value was measured before it was placed, because two of the six cannot
   legally hold text:

     Deep Petrol   #123E44    9.02:1 on white   labels, controls, accents
     Graphite      #202525   15.52:1 on white   reserved — see below
     Soft Sage     #E6ECE9    band only         7.55:1 for petrol on it
     Warm Copper   #B8955A    3.65:1 on white   DECORATIVE ONLY
     Champagne     #B8955A    2.36:1 on white   HIGHLIGHT ONLY

   Copper never carries a label: at 3.65:1 it misses the 4.5:1 that small text
   owes, though it clears the 3:1 a meaningful graphic owes. Champagne is worse
   — 2.36:1 misses even that — so it stays what it has always been here: a
   highlight that sits on dark, or a fill under dark ink, never a colour for
   words on a light band.

   THE DIVISION OF LABOUR
   Petrol takes the editorial voice: section eyebrows, the device selector and
   interactive states. Gold keeps the commercial voice: prices, the buy button,
   the finder's own CTA, the badges. That split is what stops this reading as a
   repaint — the colour that means "buy" has not moved, so the page still
   belongs to CaseKing and not to a palette.

   Graphite is deliberately unused. Everything it could colour on this page —
   the hero, the about banner, the footer — is either approved artwork or sits
   outside #storefront-home-view, and the near-black already in place measures
   18:1 on white. Repainting it would be churn, not design.
   ========================================================================== */

:root {
  --k-petrol:       #123E44;
  --k-petrol-ring:  rgba(18, 62, 68, .15);
  --k-sage:         #E6ECE9;
  --k-porcelain:    #F6F4EF;
  --k-copper-warm:  #B8955A;
  --k-champagne-2:  #B8955A;
  --k-band-neutral: #EEEBE4;
}

/* ---- 1. THE BANDS --------------------------------------------------------
   Every band is painted as `background: var(--k-band-sheen), var(--k-band-x)
   !important`. They are therefore recoloured by redefining the variables on
   the homepage wrapper rather than by out-shouting those declarations with
   more !important: the bands change, the rules that draw them do not move.

   --k-band-champ is left exactly as it was. The brand wall is the page's
   editorial set piece and its champagne ground is part of the approved look,
   so the refresh breaks its alternation around that band, not through it. */
#storefront-home-view {
  --k-band-warm:  var(--k-band-neutral);  /* was #EEEBE4 — warm, but cleaner */
  --k-band-stone: var(--k-sage);          /* was #EEEBE4 — the one cool band */
}

/* The trust band had no background of its own, so it showed the page's ivory
   and read as more of the catalogue above it. Porcelain gives it its own
   floor, and gives its white island something to stand on. */
#storefront-home-view .ck-trust {
  background: var(--k-porcelain) !important;
}

/* ---- 2. DEEP PETROL — the editorial voice -------------------------------- */

/* The section eyebrows. --k-gold-deep measured 4.97:1 here and was itself the
   fix for --k-gold's 3.72:1; petrol is the same move again, at 9.02:1. It also
   frees gold to mean one thing only — price and purchase — instead of being
   the colour of every label, rule and mark on the page. */
#storefront-home-view .section-kicker {
  color: var(--k-petrol) !important;
}

/* The device selector. The step numerals and their two state rules already
   express the finder's three states, so they are recoloured rather than
   rewritten: the states keep their meaning and the colour changes hands. */
#storefront-home-view .ck-finder-step {
  color: var(--k-petrol) !important;
  border-color: rgba(18, 62, 68, .40) !important;
}
#storefront-home-view .ck-finder-field:has(select option:checked:not([value=""])) .ck-finder-step {
  color: #ffffff !important;
  background: var(--k-petrol) !important;
  border-color: var(--k-petrol) !important;
  box-shadow: 0 2px 7px rgba(18, 62, 68, .30);
}

/* Interactive states. Focus is the one place where a colour change is also an
   accessibility change, so it takes the strongest petrol on the page: a 3px
   ring at a value measuring 9.02:1 in place of the gold it replaces. */
#storefront-home-view .ck-finder-select-wrap select:hover:not(:disabled) {
  border-color: rgba(18, 62, 68, .55) !important;
}
#storefront-home-view .ck-finder-select-wrap select:focus,
#storefront-home-view .ck-finder-select-wrap select:focus-visible {
  border-color: var(--k-petrol) !important;
  box-shadow: 0 0 0 3px var(--k-petrol-ring) !important;
}

/* ---- 3. WARM COPPER — one decorative accent, and only one ---------------- */

/* The trust glyphs. The badge keeps its gold ring and its champagne core, because
   that sphere is the halo motif in miniature and recolouring its shell would
   break the tie to the arcs on the category and trust bands — but the glyph
   inside it goes copper.
   This is the only place copper appears. As a stroke it owes 3:1 and measures
   3.65:1; anywhere it would carry words it owes 4.5:1 and would fail, so it is
   spent where it is legal rather than spread thin where it is not. */
#storefront-home-view .ck-trust .ck-island-benefit .ck-icon {
  stroke: var(--k-copper-warm) !important;
}