/* ==========================================================================
   CASEKING — STOREFRONT DESIGN SYSTEM  (light)
   --------------------------------------------------------------------------
   One system for the whole store: homepage, category pages, product pages,
   product cards, cart and footer. Loaded LAST so it owns the visual language.

   Palette: warm ivory / pearl / champagne surfaces, charcoal typography and a
   single refined CaseKing gold. Dark is used only where contrast is
   deliberate (the utility island, the footer band, the hero artwork).

   Naming: new tokens are prefixed --k- so they never collide with the legacy
   --ck-* dark system in styles.css. That legacy system is re-pointed at the
   light palette below, which also fixes every inline `var(--primary)` /
   `var(--gold)` / `var(--bg-white)` further down the markup.
   ========================================================================== */

:root {
  /* --- raw palette ------------------------------------------------------ */
  --k-ivory:      #FBFAF7;
  --k-pearl:      #FBFAF7;
  --k-champagne:  #EFE6D4;
  --k-stone:      #EEEBE4;
  --k-surface:    #ffffff;
  --k-surface-2:  #F6F4EF;
  --k-ink:        #161A1B;
  --k-ink-2:      #5A615F;
  --k-ink-3:      #6B7371;
  --k-gold:       #86692F;
  --k-gold-2:     #C8A86E;
  --k-gold-3:     #DCC596;
  --k-copper:     #b76543;
  --k-burgundy:   #6e293a;
  --k-terracotta: #bc7053;
  --k-midnight:   #172337;
  --k-cobalt:     #495f7d;
  --k-bronze:     #86692F;
  --k-coral:      #c47767;
  --k-line:       rgba(18, 62, 68, .17);
  --k-line-2:     rgba(18, 62, 68, .09);
  --k-dark:       #14120f;

  /* --- surfaces: four deliberate levels ---------------------------------
     L0 canvas  -> L1 section bands -> L2 content cards -> L3 focal panels.
     The gaps between these are what create depth. The previous build had
     #FBFAF7 bands and #ffffff cards - about a 2% difference - so every card
     sat in its own background and the whole page read flat. The bands below
     are pulled far enough down that white genuinely lifts off them. */
  --k-canvas:      #F6F4EF;   /* L0 — the page itself                     */
  --k-band-warm:   #EEEBE4;   /* L1 — warm ivory, editorial               */
  --k-band-champ:  #EFE6D4;   /* L1 — champagne, the strongest warm band  */
  --k-band-stone:  #EEEBE4;   /* L1 — pale stone, cooler and cleaner      */

  /* Layered on top of a band to read as light falling from above. This is
     most of what makes the bands feel like surfaces rather than fills. */
  --k-band-sheen: linear-gradient(180deg, rgba(255, 255, 255, .58) 0, rgba(255, 255, 255, 0) 148px);

  /* The band edge. A crisp lit line on the seam, then a soft warm falloff
     beneath it - so each band reads as a surface tucked under the one above
     rather than a new fill starting on a hard horizontal. This is what makes
     the page feel stacked instead of striped, without a single dark slab. */
  --k-band-edge:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 20px 28px -24px rgba(11, 43, 48, .34);

  /* The CaseKing halo: the golden ring that recurs throughout the supplied
     photography, reduced to two alphas. */
  --k-halo-line: rgba(200, 168, 110, .26);
  --k-halo-fill: rgba(200, 168, 110, .13);

  /* --- elevation: four levels, warm and wide ----------------------------
     Every shadow is warm (86,64,30) rather than black. A neutral shadow over
     a champagne surface turns it grey; a warm one keeps the surface reading
     as the same material. Levels are wide and low-alpha on purpose - depth
     should come from the surface stack, not from the shadow being visible. */
  --k-lift-1: 0 1px 2px rgba(11, 43, 48, .045), 0 5px 14px rgba(11, 43, 48, .05);
  --k-lift-2: 0 2px 4px rgba(11, 43, 48, .055), 0 14px 32px rgba(11, 43, 48, .085);
  --k-lift-3: 0 4px 10px rgba(11, 43, 48, .07), 0 28px 60px rgba(11, 43, 48, .13);

  /* --- elevation -------------------------------------------------------- */
  --k-sh-1: 0 1px 2px rgba(11, 43, 48, .05), 0 6px 16px rgba(11, 43, 48, .06);
  --k-sh-2: 0 2px 4px rgba(11, 43, 48, .06), 0 18px 44px rgba(11, 43, 48, .10);
  --k-sh-3: 0 30px 70px rgba(11, 43, 48, .16);

  /* --- shape ------------------------------------------------------------ */
  --k-r-xs: 6px;
  --k-r-sm: 9px;
  --k-r:    14px;
  --k-r-lg: 20px;
  --k-r-pill: 999px;

  /* --- rhythm -----------------------------------------------------------
     One section step for the whole storefront. Generous on purpose: the
     page reads as a sequence of framed objects, not a stack of boxes. */
  --k-gutter: 20px;
  --k-section: clamp(58px, 6vw, 104px);
  --k-section-tight: clamp(40px, 4.2vw, 68px);

  /* --- type -------------------------------------------------------------
     Two Cyrillic-capable families and nothing else. Manrope carries display
     headings; Inter carries body, UI, labels and prices, where legibility
     and tabular figures matter most. Every step is fluid - one clamp each,
     no breakpoint forks - so the hierarchy holds at 390px and 1440px alike. */
  --k-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --k-serif: Georgia, 'Times New Roman', serif;

  /* Secondary copy is a step larger across the board. At 1440px the old scale
     bottomed out at 12.5px captions and 15.5px body, which read as "small and
     pale" rather than "refined" - premium typography is confident, not tiny. */
  /* 11px floor, up from 10.5px: the eyebrow is the smallest type on the page
     and at 10.5px it stopped being a label and became a smudge. */
  --k-t-eyebrow: clamp(11px, .18vw + 10.3px, 12px);
  --k-t-micro:   12px;
  --k-t-small:   13px;
  --k-t-body:    clamp(14.5px, .32vw + 13.2px, 16.5px);
  --k-t-lead:    clamp(15.5px, .48vw + 13.6px, 18px);
  --k-t-h3:      clamp(18px, .72vw + 15.2px, 22px);
  --k-t-h2:      clamp(26px, 1.85vw + 19.4px, 39px);
  --k-t-h1:      clamp(31px, 3.1vw + 20.6px, 56px);

  --k-eyebrow: var(--k-t-eyebrow); /* legacy name, kept for existing rules */
  /* .14em, down from .22em. Wide tracking on an 11px uppercase label does not
     read as luxury, it reads as a gap between letters - and .14em is already
     what the product card, the PDP and the brand marks use, so this makes the
     eyebrow one system instead of four near-misses (.14/.16/.20/.22em). */
  --k-tracking-eyebrow: .14em;
  --k-tracking-display: -.028em;

  /* --- retune the legacy semantic tokens onto the light storefront ------ */
  --primary: var(--k-ink);
  --text: var(--k-ink);
  --accent: var(--k-gold);
  --gold: var(--k-gold);
  --bg-white: var(--k-surface);
  --bg-light: var(--k-surface-2);
  --text-muted: var(--k-ink-3);
  --border-color: var(--k-line);
  --shadow-sm: var(--k-sh-1);
  --shadow-md: var(--k-sh-1);
  --shadow-lg: var(--k-sh-2);

  /* --- reign in the legacy dark tokens -------------------------------- */
  --ck-bg: var(--k-ivory);
  --ck-surface: var(--k-surface);
  --ck-surface-2: var(--k-surface-2);
  --ck-surface-3: var(--k-champagne);
  --ck-border: var(--k-line-2);
  --ck-border-strong: var(--k-line);
  --ck-text: var(--k-ink);
  --ck-text-2: var(--k-ink-2);
  --ck-text-3: var(--k-ink-3);
  --ck-gold: var(--k-gold);
  --ck-accent: var(--k-gold);
  --ck-accent-hover: var(--k-gold-2);
  --ck-accent-subtle: rgba(134, 105, 47, .10);
  --ck-shadow-sm: var(--k-sh-1);
  --ck-shadow-md: var(--k-sh-1);
  --ck-shadow-lg: var(--k-sh-2);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

body {
  background: var(--k-ivory);
  color: var(--k-ink);
  font-family: var(--k-font);
  -webkit-font-smoothing: antialiased;
}

.container { width: min(100% - 40px, 1360px); max-width: 1360px; }

/* styles.css still leaves `.container` with its own side padding (2rem, and
   1.125rem on a phone) from the legacy 1280px layout. The sheets above
   replaced the container's gutter with a width calculation - it is this very
   `min(100% - 40px, ...)` - but never cleared the padding, so every band has
   been rendering 36px narrower than designed. On a 390px phone that is 10% of
   the viewport spent on a gutter nobody asked for.

   Scoped to the homepage surfaces. The same leftover applies to the rest of
   the store and is worth clearing site-wide, but that is a separate change. */
.ck-top-shell .container,
#storefront-home-view .container,
#footer .container { padding-left: 0; padding-right: 0; }

h1, h2, h3, h4 { color: var(--k-ink); letter-spacing: -.015em; }

a { color: var(--k-gold); }
a:hover { color: var(--k-gold-2); }

:focus-visible {
  outline: 2px solid var(--k-gold-2);
  outline-offset: 2px;
  border-radius: var(--k-r-xs);
}

/* --- skip link -----------------------------------------------------------
   The first tab stop, and only ever seen by a keyboard. It is parked above
   the viewport rather than hidden with display/visibility: either of those
   would take it out of the tab order, which is the one thing it has to stay
   in. Nothing above it scrolls, so no scrollbar is created. */
.ck-skip-link {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 4000;
  padding: 11px 18px;
  border-radius: var(--k-r-sm, 9px);
  background: var(--k-ink, #161A1B);
  color: #F6F4EF;
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}
.ck-skip-link:focus,
.ck-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--k-gold-2, #C8A86E);
  outline-offset: 2px;
}

/* ==========================================================================
   2. SHARED PRIMITIVES — buttons, inputs, badges, section heads
   ========================================================================== */

/* Primary action. One shape and one colour for the whole store. */
.btn-premium,
.btn-card-buy,
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--k-r-sm);
  background: linear-gradient(180deg, var(--k-gold-3), var(--k-gold-2) 42%, var(--k-gold));
  color: #0B2B30 !important;
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(134, 105, 47, .20), inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-premium:hover,
.btn-card-buy:hover,
.hero-cta-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(134, 105, 47, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: translateY(-1px);
}

/* Secondary / quiet action. */
.btn-secondary,
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm);
  background: rgba(255, 255, 255, .72) !important;
  color: var(--k-ink) !important;
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-secondary:hover,
.hero-cta-secondary:hover {
  background: #fff !important;
  border-color: var(--k-gold-2) !important;
  color: var(--k-gold) !important;
}

/* Inputs & selects. Soft ivory, hairline warm border, low shadow. */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  font-family: var(--k-font);
  color: var(--k-ink) !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  box-shadow: inset 0 1px 2px rgba(11, 43, 48, .04) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--k-gold-2) !important;
  box-shadow: 0 0 0 3px rgba(200, 168, 110, .14) !important;
  outline: none !important;
}
select option { background: #fff; color: var(--k-ink); }

/* Quantity stepper */
.qty-stepper {
  background: #fff !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  color: var(--k-ink) !important;
}
.qty-btn { color: var(--k-ink) !important; }
.qty-btn:hover { background: var(--k-champagne) !important; }
.qty-val { color: var(--k-ink) !important; }

/* Badges */
.badge-tag,
.badge-tag.sale {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--k-r-pill);
  background: linear-gradient(180deg, var(--k-gold-3), var(--k-gold)) !important;
  color: #0B2B30 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(134, 105, 47, .24);
}

/* Section rhythm + heads */
.categories-section,
.brand-campaigns,
#storefront-home-view .catalog,
.ck-about,
.category-detail-section {
  padding: var(--k-section) 0 !important;
}

.ck-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  margin-bottom: clamp(26px, 3vw, 44px) !important;
}
.section-kicker {
  display: block;
  /* gold-deep, not gold. At 11-12px this label is small text, and small text
     owes 4.5:1: --k-gold measured 3.72:1 on the page and 3.88:1 on the finder
     bar, both below the line. --k-gold-deep is the same family one step down
     and measures 4.97:1 / 5.18:1, so the label gets read instead of squinted
     at - without leaving the palette. */
  color: var(--k-gold-deep) !important;
  font-size: var(--k-t-eyebrow) !important;
  font-weight: 800;
  letter-spacing: var(--k-tracking-eyebrow);
  text-transform: uppercase;
  /* 1.2, not the inherited 1.65. An uppercase label sitting on a loose leading
     pushes the title away from the word that introduces it; tightening the
     leading binds the eyebrow and its title into one block. */
  line-height: 1.2;
}
.ck-section-title {
  margin: 8px 0 0 !important;
  color: var(--k-ink) !important;
  font-family: var(--k-display) !important;
  font-size: var(--k-t-h2) !important;
  font-weight: 800 !important;
  letter-spacing: var(--k-tracking-display) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}
/* The supporting line under a section title. This is where the page explains
   itself, so it is real body copy at a readable size - never 11px grey. */
.ck-section-sub,
.ck-section-context {
  margin: 10px 0 0 !important;
  max-width: 56ch;
  color: var(--k-ink-2) !important;
  font-size: var(--k-t-body) !important;
  line-height: 1.55 !important;
}
.ck-section-context { color: var(--k-gold) !important; font-weight: 600 !important; }
.ck-section-link {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--k-line);
  /* Same reason as the eyebrow: 13px is not large text, so 3.72:1 is a fail.
     Hover deepens rather than brightens - the old hover went to --k-gold-2,
     which is LIGHTER and dropped the contrast further still. */
  color: var(--k-gold-deep) !important;
  font-size: var(--k-t-small);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
/* "Разгледай всички" / "Всички продукти" / "Виж целия каталог" are the page's
   three "see more" routes and measured 25px tall - the smallest primary
   controls on the phone. The target is enlarged with an invisible overlay
   rather than by padding, because padding-bottom would drag the gold underline
   away from the text it belongs to. The overlay reaches ~44px without moving
   a single pixel of the visible link. */
.ck-section-link::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.ck-section-link .ck-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.ck-section-link:hover { color: var(--k-gold-ink, #6E5626) !important; border-color: var(--k-gold-ink, #6E5626); }
.ck-section-link:hover .ck-icon { transform: translateX(3px); }

/* ==========================================================================
   3. PRODUCT CARD
   --------------------------------------------------------------------------
   The card lives in ck-product-card.css. blog.html renders the same card but
   never loads this sheet, so the card had to move somewhere both pages link;
   that file is loaded LAST on both, which is also how it out-ranks the
   legacy card rules in styles.css and approved-home.css.

   Do not re-declare the card here — a second copy is exactly how the
   homepage grid and the category grid drifted apart before.
   ========================================================================== */

.no-products-message {
  grid-column: 1 / -1;
  padding: 54px 20px !important;
  border: 1px dashed var(--k-line);
  border-radius: var(--k-r);
  background: var(--k-surface-2);
  color: var(--k-ink-3) !important;
  text-align: center;
}

/* ==========================================================================
   4. CATEGORY CARDS (homepage strip + all-categories page)
   --------------------------------------------------------------------------
   These used to be tall dark tiles with a near-opaque black gradient behind
   white text. Fourteen of them in a four-column grid merged into one heavy
   black mass and the artwork was barely legible through the scrim.

   They are now light, framed cards: the picture sits in its own well, the
   label sits on the card surface in ink, and nothing is layered over the
   artwork. Rhythm comes from the gap and the wells, not from a scrim.
   ========================================================================== */

.categories-section { background: var(--k-ivory) !important; }

.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* One gutter expression, shared with the product grid below it, so the two
     grids no longer disagree at desktop (they were 1.2vw here and 1.6vw there:
     17.28px against 23.04px). The 12px floor is deliberate - at 390px this
     resolves to exactly 12px, which is the approved phone gutter. */
  gap: clamp(12px, 1.6vw, 24px) !important;
}

.ck-cat-card,
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  aspect-ratio: auto;
  /* styles.css pins min-height 190px (and 220px for .ck-cat-uniform) to make
     the old absolute-overlay cards tall enough for the scrim. With the picture
     and the label now stacked in flow, that floor only adds dead space. */
  min-height: 0 !important;
  /* The frame. --k-line-2 is an 8% hairline: at 1px it is invisible, which is
     why fourteen dark pictures on a cream band read as one black mass. This
     uses --k-halo-line - the same restrained champagne gold as the halo arcs
     and the brand-campaign frames - so each picture is bounded without the
     section turning loud. */
  border: 1px solid var(--k-halo-line) !important;
  border-radius: var(--k-r-lg) !important;
  background: var(--k-surface) !important;
  /* One step up from lift-1. The border does the separating; this only adds
     enough depth that the cards read as objects placed on the band rather
     than pictures drawn onto it. */
  box-shadow: var(--k-lift-2) !important;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.22, .61, .36, 1),
              box-shadow .24s ease, border-color .24s ease;
}
/* The hover border and shadow carry !important because styles.css restates
   .category-card:hover with its own !important pair for the old dark grid;
   without matching weight its neutral border wins and the gold never lands. */
/* Restrained by intent: a 2px lift (was 4px) and a gold frame that steps from
   .26 to .55. The card should feel responsive, not spring away from the
   cursor. .55 is the same value the product card's halo uses on hover, so the
   two card families share one hover vocabulary. */
.ck-cat-card:hover,
.category-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 168, 110, .55) !important;
  box-shadow: var(--k-lift-3) !important;
}

/* The well. A fixed ratio keeps every card in the grid the same height, so
   row five does not start on a ragged line.
   position/inset are reset deliberately: styles.css still carries
   `.ck-cat-card .category-card-img { position: absolute; inset: 0 }` from the
   old overlay build. Left alone it lifts the picture out of flow and paints it
   straight over the label row. */
.category-card-img,
.ck-cat-card .category-card-img {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center !important;
  background: var(--k-surface-2);
  transform: none !important;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1) !important;
}
/* 1.03, matching .brand-campaign-card:hover img exactly - one image-hover
   value across the page instead of a third one. */
.ck-cat-card:hover .category-card-img,
.category-card:hover .category-card-img { transform: scale(1.03) !important; }

/* Label row, on the card surface rather than over the picture. */
.ck-cat-overlay,
.category-card-overlay {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  padding: 15px 16px 17px !important;
  background: none !important;
}
.ck-cat-text, .category-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px !important;
  max-width: 100% !important;
  min-width: 0;
}
.ck-cat-title,
.category-card-title {
  color: var(--k-ink) !important;
  font-family: var(--k-display) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.016em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  transition: color .2s ease;
}
.ck-cat-card:hover .ck-cat-title,
.category-card:hover .ck-cat-title { color: var(--k-gold) !important; }
.ck-cat-sub,
.category-card-count {
  color: var(--k-ink-2) !important;
  font-size: var(--k-t-small) !important;
  line-height: 1.4 !important;
}
.ck-cat-arrow {
  position: relative;
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid var(--k-line) !important;
  background: transparent !important;
  color: var(--k-gold) !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}
/* The disc stays 30px, because that is the approved card; the tap area around
   it does not. A transparent 44px plate centred on the disc is the whole fix:
   it is out of flow, so no layout moves, and the overlay's own 15/16/17px
   padding swallows the 7px the plate overhangs - it never reaches the card's
   edge or a neighbouring control. */
.ck-cat-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.ck-cat-arrow .ck-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ck-cat-card:hover .ck-cat-arrow,
.category-card:hover .ck-cat-arrow {
  background: var(--k-gold) !important;
  border-color: var(--k-gold) !important;
  color: #fff !important;
  transform: translateX(2px);
}

/* styles.css carries a global reduce rule that zeroes transition durations,
   but it leaves transform intact - so without this the card would still jump
   2px and the picture would still snap to 1.03. This mirrors the
   .brand-campaign-card block, which is the pattern already used on this page. */
/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-cat-card, html.ck-calm .category-card, html.ck-calm .ck-cat-card .category-card-img, html.ck-calm .category-card .category-card-img { transition: none !important; }
  html.ck-calm .ck-cat-card:hover, html.ck-calm .category-card:hover, html.ck-calm .ck-cat-card:hover .category-card-img, html.ck-calm .category-card:hover .category-card-img, html.ck-calm .ck-cat-card:hover .ck-cat-arrow, html.ck-calm .category-card:hover .ck-cat-arrow { transform: none !important; }


/* ==========================================================================
   5. CATEGORY PAGE TEMPLATE
   hero -> filters -> toolbar -> grid   (identical for every category)
   ========================================================================== */

.category-detail-section { background: var(--k-ivory) !important; }

/* Shared small gold label used above page titles. */
.ck-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--k-gold);
  font-size: var(--k-eyebrow);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Body region under the category hero (filters + toolbar + grid). */
.ck-cat-body { padding-top: 22px; padding-bottom: clamp(48px, 5vw, 80px); }

.category-detail-hero {
  position: relative;
  padding: 26px 0 24px !important;
  background:
    /* the section above is flat ivory, so the hero's own tint has to come in
       softly rather than starting on a hard horizontal edge */
    linear-gradient(180deg, var(--k-ivory) 0, rgba(251, 250, 247, 0) 34px),
    radial-gradient(circle at 82% -40%, rgba(200, 168, 110, .26), transparent 58%),
    linear-gradient(180deg, #FBFAF7, var(--k-surface-2)) !important;
  border-bottom: 1px solid var(--k-line-2);
}

/* the back button lives on the light hero now */
.category-detail-hero .btn-secondary {
  margin-bottom: 14px !important;
  padding: 8px 14px !important;
  font-size: 11.5px !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink-2) !important;
}

.category-detail-hero h1 {
  margin: 0 !important;
  color: var(--k-ink) !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}
.category-detail-hero h1 span { color: var(--k-gold) !important; }
.category-detail-hero p {
  color: var(--k-ink-2) !important;
  max-width: 70ch !important;
  line-height: 1.6 !important;
}
#category-detail-desc { margin-top: 8px !important; font-size: 13.5px !important; }
#category-detail-product-count {
  display: inline-flex;
  align-items: center;
  margin-top: 12px !important;
  padding: 5px 12px;
  border-radius: var(--k-r-pill);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--k-line);
  color: var(--k-gold) !important;
  font-size: 10.5px !important;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Catalog filters: sticky left rail on desktop, a bottom drawer on mobile. */
.ck-catalog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
.ck-catalog-results { min-width: 0; }
#category-detail-filter-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  margin-bottom: 20px !important;
  padding: 16px 18px !important;
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-sh-1) !important;
}
.ck-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ck-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 750;
}
.ck-filter-title i { color: var(--k-gold); font-size: 12px; }
.ck-filter-close { display: none; }
.ck-filter-clear {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-pill);
  background: #fff;
  color: var(--k-ink-2);
  font-family: var(--k-font);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.ck-filter-clear:hover { border-color: var(--k-gold-2); color: var(--k-gold); }
.ck-filter-group {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--k-line-2);
}
.ck-filter-group label,
.ck-filter-group legend {
  color: var(--k-ink);
  font-size: 11px;
  font-weight: 750;
}
.ck-filter-group select,
.ck-filter-group input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-sm);
  background: #fff;
  color: var(--k-ink);
  font: inherit;
}
.ck-filter-group select:focus-visible,
.ck-filter-group input:focus-visible { outline: 2px solid var(--k-gold-2); outline-offset: 1px; }
.ck-filter-group select:disabled { color: var(--k-ink-2); background: var(--k-bg); cursor: not-allowed; }
.ck-filter-help { margin: 2px 0 0; color: var(--k-ink-2); font-size: 10px; line-height: 1.45; }
.ck-price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-price-inputs label { display: grid; gap: 5px; }
.ck-filter-backdrop { display: none; }
#cat-detail-step2-title {
  margin: 16px 0 10px !important;
  color: var(--k-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brands-list-container,
.models-list-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}
/* A single brand can carry 150+ phone models, which made the model list taller
   than the viewport and pushed the products out of reach. It scrolls inside a
   bounded box instead. */
.models-list-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* Brand chips.
   The legacy stylesheet gave these a 5/2 aspect-ratio and centred flex box,
   which blew the first chip up to fill the whole panel. Neutralised here. */
.brand-pill-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 7px 13px 7px 7px !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-pill) !important;
  background: #fff !important;
  color: var(--k-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer;
  transform: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.brand-pill-btn:hover { border-color: var(--k-gold-2) !important; box-shadow: var(--k-sh-1); }
.brand-pill-btn.active {
  background: var(--k-ink) !important;
  border: 1px solid var(--k-ink) !important;
  color: #fff !important;
  box-shadow: var(--k-sh-1) !important;
}
.brand-pill-btn.active .brand-card-text { color: #fff !important; }
.brand-card-img {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  padding: 3px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--k-line-2);
}
.brand-card-text { line-height: 1 !important; white-space: nowrap; }

/* Model chips */
.model-pill-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  background: #fff !important;
  color: var(--k-ink-2) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transform: none !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.model-pill-btn:hover { border-color: var(--k-gold-2) !important; color: var(--k-ink) !important; }
.model-pill-btn.active {
  background: var(--k-champagne) !important;
  border: 1px solid var(--k-gold-2) !important;
  color: var(--k-ink) !important;
  font-weight: 800 !important;
}

/* Toolbar row above the grid */
.ck-cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 11px 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r);
  box-shadow: var(--k-sh-1);
}
.ck-cat-toolbar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--k-ink-2);
  font-size: 12px;
  font-weight: 600;
}
.ck-cat-toolbar-info i { color: var(--k-gold); }
.ck-cat-toolbar-info b { color: var(--k-ink); font-weight: 800; }
/* Listing order: one native select, so it works with keyboard, screen
   readers and the phone's own picker. Cheapest first is the default. */
.ck-cat-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ck-catalog-sort { margin-left: auto; align-self: flex-end; }
.ck-catalog-sort[hidden] { display: none !important; }
.ck-sort { display: inline-flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.ck-sort-label { color: var(--k-ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ck-sort .ck-sort-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 8px 34px 8px 14px;
  border-radius: 999px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123E44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.ck-sort .ck-sort-select:hover { border-color: #1F5A61 !important; }
@media (max-width: 640px) {
  .ck-cat-toolbar { flex-wrap: wrap; }
  .ck-cat-toolbar-actions { width: 100%; }
  .ck-cat-toolbar-actions .ck-sort { flex: 1; min-width: 0; }
  .ck-cat-toolbar-actions .ck-sort-select { width: 100%; }
  .ck-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ck-catalog-sort { margin-left: 0; align-self: stretch; }
  .ck-catalog-sort .ck-sort, .ck-catalog-sort .ck-sort-select { width: 100%; }
}
.ck-cat-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-pill);
  background: #fff;
  color: var(--k-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ck-cat-filter-toggle i { color: var(--k-gold); }

/* Category page grid */
#category-detail-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.ck-infinite-status {
  grid-column: 1 / -1;
  min-height: 52px;
  display: grid;
  place-items: center;
  color: var(--k-ink-2);
  font-size: 12px;
}
.ck-infinite-status.is-loading::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border: 2px solid var(--k-line);
  border-top-color: var(--k-gold);
  border-radius: 50%;
  animation: ckFilterSpin .75s linear infinite;
}
.ck-infinite-status.is-loading { display: flex; }
@keyframes ckFilterSpin { to { transform: rotate(360deg); } }
.ck-product-skeleton { pointer-events: none; min-height: 380px; }
.ck-skeleton-image,
.ck-skeleton-line { background: linear-gradient(90deg, #EEEBE4 25%, #faf7f1 45%, #EEEBE4 65%); background-size: 300% 100%; animation: ckSkeleton 1.25s ease infinite; }
.ck-skeleton-image { aspect-ratio: 1; border-radius: 12px; }
.ck-skeleton-line { height: 13px; margin: 16px 14px 0; border-radius: 999px; }
.ck-skeleton-line.is-short { width: 55%; margin-top: 9px; }
@keyframes ckSkeleton { to { background-position: -150% 0; } }

/* ==========================================================================
   6. PRODUCT DETAIL PAGE
   --------------------------------------------------------------------------
   Moved wholesale to ck-pdp.css, which index.html links after this sheet. The
   page had rules in three places (here, styles.css and inline styles in the
   markup); it now has one owner. Do not re-declare .pdp-* or .ck-pdp-* here.
   ========================================================================== */

/* ==========================================================================
   7. HOMEPAGE LOWER SECTIONS — brought onto the light system
   ========================================================================== */

/* The brand row continues the hero.
   It used to open the page's full section rhythm (75px of white before the
   heading), which read as a separate band starting below the hero. It now
   starts a breath under the dark artwork, so the two read as one opening
   composition. */
.brand-campaigns {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--k-section) 0 !important;
  background: var(--k-band-sheen), var(--k-band-champ) !important;
  box-shadow: var(--k-band-edge);
}
.brand-campaigns > .container { position: relative; z-index: 1; }
/* The halo again, this time as illumination rather than a line: a wide soft
   champagne wash sitting behind the section head, as if the band were lit
   from just above the title. */
.brand-campaigns::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(-240px, -19vw, -120px);
  left: 50%;
  width: min(96vw, 1180px);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--k-halo-fill) 0%, rgba(200, 168, 110, 0) 62%);
  pointer-events: none;
}

/* Editorial bento: two large campaigns lead the row, three support it. Five
   equal tiles read as a logo wall and gave every brand the same weight, which
   is what a "premium selection" must not do.

   Every tile keeps the artwork's own 16:10 proportion. Sizing them by row
   span instead would crop roughly a third off the wider campaigns, and the
   supplied artwork carries each brand's name and its own call to action
   inside the image - cropping it cuts the composition apart. */
.brand-campaign-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 16px) !important;
}
.brand-campaign-card {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  padding: 0 !important;
  /* The artwork's own proportion, exactly. These are editorial banners whose
     logo, headline and product are baked into the image, so any crop at all
     cuts the composition - and a crop that looks like a trim on a wide desktop
     tile eats a quarter of the frame on a phone. Card and artwork now share
     one ratio, so cover has nothing left to cut. */
  aspect-ratio: 1280 / 759;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-lg) !important;
  background: var(--k-dark) !important;
  box-shadow: var(--k-lift-2) !important;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease, border-color .3s ease;
}
/* The two fashion campaigns lead at twice the area. */
.brand-campaign-card:nth-child(1),
.brand-campaign-card:nth-child(2) { grid-column: span 3; }
.brand-campaign-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.brand-campaign-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 168, 110, .5) !important;
  box-shadow: var(--k-lift-3) !important;
}
.brand-campaign-card:hover img { transform: scale(1.03); }
.brand-campaign-card:focus-visible {
  outline: 2px solid var(--k-gold-2);
  outline-offset: 3px;
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .brand-campaign-card, html.ck-calm .brand-campaign-card img { transition: none !important; }
  html.ck-calm .brand-campaign-card:hover, html.ck-calm .brand-campaign-card:hover img { transform: none !important; }


/* --- Section bands: the L1 surface layer ----------------------------------
   Each major zone sits on its own tone, so the page reads as a sequence of
   surfaces rather than one continuous cream field. The spread is
   warm ivory -> champagne -> pale stone -> champagne: a real tonal journey
   inside the light family, with no dark slab through the middle of the page
   (the hero and the footer remain the only two dark moments).

   Every band carries the same top sheen, so light always falls from the same
   direction. That shared detail is what stops four tones from reading as four
   different designs. */
.categories-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--k-section) 0 !important;
  background: var(--k-band-sheen), var(--k-band-warm) !important;
  box-shadow: var(--k-band-edge);
}
.categories-section > .container { position: relative; z-index: 1; }
.categories-section .ck-section-head { margin-bottom: clamp(26px, 3vw, 44px) !important; }
/* This rule, not .categories-grid above, is the one that actually lands: the
   live grid carries .ck-cat-uniform, and (0,2,0) outranks (0,1,0) even against
   an !important. Both were 1.2vw/17.28px while the product grid below ran
   1.6vw/23.04px; they now share one expression. The 12px floor still resolves
   to exactly 12px at 390px, which is the approved phone gutter. */
.categories-grid.ck-cat-uniform { gap: clamp(12px, 1.6vw, 24px) !important; }

/* THE CASEKING HALO — the golden ring that recurs through the supplied
   photography, reduced here to two concentric hairlines. Only their lower-left
   segments cross the band, so it reads as a curve passing behind the content
   rather than a drawn circle. This is the one recurring brand motif; it
   appears three times on the page and nowhere else. */
.categories-section::before,
.categories-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--k-halo-line);
  border-radius: 50%;
  pointer-events: none;
}
.categories-section::before {
  top: -48%;
  right: -21%;
  width: min(58vw, 880px);
}
.categories-section::after {
  top: -31%;
  right: -13%;
  width: min(40vw, 600px);
  opacity: .62;
}

#storefront-home-view .catalog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--k-section) 0 !important;
  background: var(--k-band-sheen), var(--k-band-stone) !important;
  box-shadow: var(--k-band-edge);
}
#storefront-home-view .catalog > .container { position: relative; z-index: 1; }
/* The stone band is the coldest of the four, so it carries the halo too -
   entering from the right, mid-band, which is the one position the other
   three arcs never take. Same light, different placement, so the motif reads
   as a system rather than a repeated stamp. */
#storefront-home-view .catalog::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 20%;
  right: -27%;
  width: min(58vw, 860px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(200, 168, 110, .20);
  border-radius: 50%;
  pointer-events: none;
}
#storefront-home-view .catalog .section-subtitle { color: var(--k-ink-2) !important; }

/* ==========================================================================
   8. TRUST BAND
   --------------------------------------------------------------------------
   The five reassurance points that used to sit above the logo, given a band
   of their own. Warm champagne rather than charcoal: the footer is this
   page's one deliberate dark moment and a second one would just be weight.
   ========================================================================== */
.ck-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--k-section) 0 !important;
  /* The champagne band is deepened by a warm overlay layer rather than by
     editing the base gradient, which is a string the approved-homepage test
     pins. Two layers, same result, nothing frozen broken. */
  background:
    var(--k-band-sheen),
    linear-gradient(180deg, rgba(230, 211, 172, .5), rgba(230, 211, 172, .78)),
    linear-gradient(180deg, #f5efe5, #ede5da) !important;
  box-shadow: var(--k-band-edge);
}
.ck-trust > .container { position: relative; z-index: 1; }
/* The halo's third and last appearance, low and to the left, balancing the
   two arcs that sit high and right in the category band. */
.ck-trust::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -64%;
  left: -17%;
  width: min(54vw, 800px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--k-halo-line);
  border-radius: 50%;
  opacity: .8;
  pointer-events: none;
}
.ck-trust-head {
  margin-bottom: clamp(32px, 3.8vw, 56px);
  text-align: center;
}
.ck-trust-head .ck-section-title { margin-top: 10px !important; }
/* A short gold rule under the heading: the halo's straightened edge, in the
   same champagne gold and the same weight as the arcs. It gives the band a
   settled centre and marks it as a deliberate chapter rather than a strip. */
.ck-trust-head::after {
  content: "";
  display: block;
  width: 58px;
  height: 2px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(200, 168, 110, 0), var(--k-gold-2) 50%, rgba(200, 168, 110, 0));
}

/* The panel is the L2 content surface and it has to lift off a champagne band
   that is itself fairly bright, so it carries the fullest elevation on the
   page. This is what turns the old hairline strip into a component. */
.ck-trust .ck-island {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(134, 105, 47, .22);
  border-radius: var(--k-r-lg);
  background: linear-gradient(180deg, #ffffff 0%, #FBFAF7 100%);
  box-shadow:
    0 1px 2px rgba(11, 43, 48, .05),
    0 12px 28px rgba(11, 43, 48, .08),
    0 44px 84px -34px rgba(11, 43, 48, .22);
}
.ck-trust .ck-island-benefit {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.1vw, 30px);
  background: transparent;
  border: 0 !important;
  border-left: 1px solid var(--k-line-2) !important;
}
.ck-trust .ck-island-benefit:first-child { border-left: 0 !important; }

/* The badge is the halo motif in miniature: a champagne sphere inside a gold
   ring inside a soft outer halo. It is the same geometry as the arcs crossing
   the category and trust bands, which is what ties this row into the page's
   visual language instead of leaving it as a line of small generic tiles. */
.ck-trust .ck-island-benefit .ck-icon {
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  padding: 14px;
  border: 1px solid rgba(134, 105, 47, .58);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #FBFAF7 0%, #faf2e2 56%, #f1e3c7 100%);
  box-shadow:
    0 0 0 5px rgba(200, 168, 110, .11),
    0 10px 22px rgba(134, 105, 47, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  fill: none;
  stroke: var(--k-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.ck-trust .ck-island-benefit:hover .ck-icon {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 5px rgba(200, 168, 110, .17),
    0 16px 30px rgba(134, 105, 47, .19),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.ck-trust .ck-island-benefit strong {
  display: block;
  color: var(--k-ink);
  font-family: var(--k-display);
  font-size: clamp(17px, 1.06vw, 20px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
  text-wrap: balance;
}
.ck-trust .ck-island-benefit small {
  display: block;
  margin-top: 6px;
  color: var(--k-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
@media (min-width: 761px) {
  .ck-trust .ck-island { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .ck-trust .ck-island-benefit { border-bottom: 0 !important; }
}
/* Below the five-across breakpoint the panel wraps to two columns. These
   dividers are restated here rather than left to approved-home.css, because
   the icon tile and the elevation above are declared with !important. */
@media (max-width: 760px) {
  .ck-trust .ck-island-benefit { border-bottom: 1px solid var(--k-line-2) !important; }
  .ck-trust .ck-island-benefit:nth-child(2n) { border-left: 0 !important; }
  .ck-trust .ck-island-benefit:nth-child(5) {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-bottom: 0 !important;
  }
}
.ck-trust-note {
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  max-width: 64ch;
  color: var(--k-ink-2);
  font-size: var(--k-t-lead);
  line-height: 1.55;
  text-align: center;
}

.ck-about {
  background: var(--k-band-sheen), var(--k-band-warm) !important;
  box-shadow: var(--k-band-edge);
}
/* 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. The
   buttons sit in the empty dark corner under the artwork's icon row. The
   banner is framed rather than flat, so it reads as a hung piece. */
.ck-about-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-r-lg);
  background: var(--k-dark);
  box-shadow: var(--k-sh-2);
  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;
  justify-content: flex-end;
  gap: 10px !important;
}
@media (max-width: 760px) {
  /* at phone width the artwork is only ~120px tall, so the buttons move under
     it instead of covering the picture */
  .ck-about-banner { line-height: normal; }
  /* Stacked, and both the full width of the banner. Before this the gold
     primary sat at its content width while the outlined B2B action stretched
     the full column, so the quieter button was the wider one and the pair
     read as inverted rather than as a hierarchy. */
  .ck-about-banner .ck-about-cta {
    position: static;
    margin-top: 16px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px !important;
  }
  .ck-about-banner .ck-about-cta > * {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

/* ==========================================================================
   8. FOOTER — the one deliberately dark band, as contrast
   ========================================================================== */

footer#footer,
#footer {
  padding: 0 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 168, 110, .13), transparent 44%),
    var(--ma-petrol-deep, #0B2B30) !important;
  border-top: 1px solid rgba(200, 168, 110, .20) !important;
  color: rgba(255, 255, 255, .74) !important;
}

/* --- main row: brand block | information | contact + service --------------- */
#footer .ck-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(24px, 3.6vw, 64px);
  padding-top: clamp(30px, 3.4vw, 48px);
  padding-bottom: clamp(26px, 3vw, 38px);
}
.ck-footer-logo { display: inline-block; }
.ck-footer-logo img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.ck-footer-desc {
  margin: 15px 0 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 12.5px;
  line-height: 1.68;
}

.ck-footer-title {
  margin: 4px 0 13px;
  color: var(--k-gold-3) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
}
.ck-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* min-height rather than padding so each link clears the 24px target floor
   without the row spacing reading as gaps in the list. */
.ck-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: rgba(255, 255, 255, .70) !important;
  font-size: 12.5px;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease;
}
.ck-footer-link:hover { color: var(--k-gold-3) !important; transform: translateX(2px); }

.ck-footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--k-gold-3) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color .18s ease;
}
.ck-footer-mail i { font-size: 12px; opacity: .85; }
.ck-footer-mail:hover { color: #fff !important; }

.ck-footer-trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.ck-footer-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .54);
  font-size: 11.5px;
  line-height: 1.3;
}
.ck-footer-trust i { flex: 0 0 auto; width: 14px; color: var(--k-gold); font-size: 12px; text-align: center; }
/* the admin shortcut must look exactly like the service item above it */
.ck-footer-secret { cursor: pointer; }

/* --- bottom strip --------------------------------------------------------- */
.ck-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 15px !important;
  padding-bottom: 17px !important;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.ck-footer-copy { margin: 0; color: rgba(255, 255, 255, .45) !important; font-size: 11.5px; }

/* The Architech lives in architech.css — the credit is shared with blog.html,
   which does not load this stylesheet. */
.ck-footer-credit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px) {
  #footer .ck-footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 32px;
  }
  .ck-footer-brand { grid-column: 1 / -1; }
  .ck-footer-desc { max-width: none; }
}
@media (max-width: 620px) {
  #footer .ck-footer-main { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ck-footer-brand { grid-column: auto; }
  .ck-footer-logo img { height: 48px; }
  .ck-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   9. CART + LEGAL — same system, light
   ========================================================================== */

.ck-cart-section { background: var(--k-ivory) !important; padding: var(--k-section) 0 !important; }
.ck-cart-title { color: var(--k-ink) !important; }
.ck-cart-sub { color: var(--k-ink-3) !important; }
.ck-cart-back { color: var(--k-ink-2) !important; }
.ck-cart-trust-item { background: var(--k-surface) !important; border: 1px solid var(--k-line-2) !important; border-radius: var(--k-r) !important; }
.ck-cart-trust-item i { color: var(--k-gold) !important; }
.ck-cart-trust-item strong { color: var(--k-ink) !important; }
.ck-cart-trust-item span { color: var(--k-ink-3) !important; }

.legal-page-section { background: var(--k-ivory) !important; }
.legal-page-section .container {
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line-2) !important;
  border-radius: var(--k-r-lg) !important;
  box-shadow: var(--k-sh-1);
}
.checkout-page-section { background: var(--k-ivory) !important; }

/* ==========================================================================
   9b. FLOATING OVERLAYS — cookie consent
   The legacy rule pairs a dark surface (var(--primary)) with white body text.
   Re-pointing --primary onto the light ink token turned the surface light while
   the text stayed white, so the consent copy became unreadable. Restated here
   as a pearl card with ink text and a gold edge.
   ========================================================================== */

#cookie-consent-banner.cookie-banner {
  background: var(--k-pearl) !important;
  border: 1px solid var(--k-line) !important;
  border-left: 3px solid var(--k-gold) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-sh-3) !important;
}
#cookie-consent-banner .cookie-banner-content,
#cookie-consent-banner .cookie-banner-content p { color: var(--k-ink-2) !important; }
#cookie-consent-banner .cookie-banner-content a { color: var(--k-gold) !important; }

/* Accept and reject are peers. Same box, same type, same weight; only the fill
   differs. A reject button demoted to a grey link is the pattern that makes a
   consent choice not a choice, so it is not used here. Both are also 44px
   tall, which is the tap floor on the one screen where this is a real tap. */
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--k-r-sm, 9px);
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .18s ease, translate .18s ease, box-shadow .18s ease;
}
.cookie-banner-btn-accept {
  background: linear-gradient(180deg, var(--k-gold-3, #DCC596), var(--k-gold-2, #C8A86E));
  color: #0B2B30;
  box-shadow: 0 8px 20px rgba(134, 105, 47, .22);
}
.cookie-banner-btn-reject {
  background: #0B2B30;
  color: #F6F4EF;
  box-shadow: 0 8px 20px rgba(11, 43, 48, .22);
}
.cookie-banner-btn:hover { filter: brightness(1.05); translate: 0 -1px; }
.cookie-banner-btn:active { translate: 0 0; filter: brightness(.98); }
.cookie-banner-btn:focus-visible { outline: 2px solid var(--k-gold, #86692F); outline-offset: 2px; }

/* Phones: the copy stacks above a full-width row, so the two buttons split it
   evenly rather than each claiming the whole line. flex-basis 0 is what
   actually sizes them - styles.css already forces width:100% on this button
   inside the same breakpoint, and only the basis outranks that. */
@media (max-width: 768px) {
  .cookie-banner-btn { flex: 1 1 0; }
}

/* ==========================================================================
   9. MOBILE NAVIGATION DRAWER
   --------------------------------------------------------------------------
   The drawer itself is legacy markup (styles.css) and was styled for the old
   dark theme. It matters more now: the homepage header carries the control
   that opens it, so on a phone this is the only way to reach the departments.
   The markup and the open/close contract are untouched.
   ========================================================================== */
.mobile-menu-overlay { background: rgba(11, 43, 48, .52) !important; }

.mobile-menu-sidebar {
  width: min(88vw, 372px) !important;
  padding: 0 0 max(20px, env(safe-area-inset-bottom)) !important;
  background: var(--k-pearl) !important;
  border-left: 1px solid var(--k-line);
  box-shadow: -20px 0 54px rgba(11, 43, 48, .22) !important;
}

.menu-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--k-pearl);
  border-bottom: 1px solid var(--k-line-2);
}
.menu-logo-text {
  color: var(--k-ink);
  font-family: var(--k-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.menu-close-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-sm);
  background: var(--k-surface);
  color: var(--k-ink);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.menu-close-btn:hover { border-color: var(--k-gold-2); color: var(--k-gold); }

/* Links become a stacked list. Side by side they wrapped into an unreadable
   cluster and none of them reached a usable tap height. */
.menu-nav-links {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 6px 0 0 !important;
}
.menu-nav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--k-line-2);
  color: var(--k-ink) !important;
  font-size: 15px !important;
  font-weight: 600;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}
.menu-nav-link:hover,
.menu-nav-link:focus-visible { color: var(--k-gold) !important; background: var(--k-surface-2); }

.menu-section-title {
  margin: 22px 0 12px !important;
  padding: 0 18px;
  color: var(--k-gold) !important;
  font-family: var(--k-font) !important;
  font-size: var(--k-t-eyebrow) !important;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.menu-brands-grid,
.menu-models-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px;
}
.menu-brands-grid > *,
.menu-models-grid > * {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r-sm);
  background: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font);
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.menu-brands-grid > *:hover,
.menu-models-grid > *:hover { border-color: var(--k-gold-2); }
.menu-brands-grid > .active,
.menu-models-grid > .active {
  border-color: var(--k-gold);
  background: var(--k-champagne);
  color: var(--k-ink);
}
.menu-brand-img {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* renderBrands() flags a logo it could not load with data-logo-missing, which
   is the case for Fairphone and Tesla - no such file exists in assets/. The
   chip then shows the brand name alone instead of a broken-image icon. */
.menu-brand-img[data-logo-missing] { display: none; }
.brand-card-img[data-logo-missing] { display: none; }

/* ==========================================================================
   10. QUICK LOOK — the reusable product overlay
   --------------------------------------------------------------------------
   A single instance, built lazily by quicklook.js on the first open and reused
   for every product. There is no per-card markup, so a catalogue of hundreds
   of cards pays nothing for it until a shopper actually asks for it.

   Surfaces follow the card: a bright white stage for the photograph, warm
   ivory for the detail column, charcoal type, gold only on the action.
   ========================================================================== */

html.ck-ql-lock { overflow: hidden; }
html.ck-ql-lock body { padding-right: var(--ck-ql-sbw, 0px); }

.ck-ql {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 40px);
}
.ck-ql[hidden] { display: none !important; }
/* The overlay hides optional rows (maker, compatibility, stock, thumbs, specs)
   with the hidden attribute, but several of them are set to inline-flex or
   flex for layout - which beats the attribute's display:none and left, for
   example, the in-stock dot floating beside a price on a product with no
   stock. Restore the attribute's meaning inside the overlay. */
.ck-ql [hidden] { display: none !important; }

.ck-ql-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 43, 48, .52);
  opacity: 0;
  transition: opacity .3s ease;
}
.ck-ql.is-open .ck-ql-backdrop { opacity: 1; }

.ck-ql-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  max-height: min(88vh, 800px);
  overflow: hidden;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  background: var(--k-surface);
  box-shadow: 0 34px 74px -22px rgba(11, 43, 48, .5);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .32s ease, transform .36s cubic-bezier(.22, .61, .36, 1);
}
.ck-ql.is-open .ck-ql-dialog { opacity: 1; transform: none; }

.ck-ql-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--k-line-2);
  border-radius: 50%;
  background: rgba(251, 250, 247, .94);
  color: var(--k-ink);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ck-ql-close .ck-icon { width: 18px; height: 18px; }
.ck-ql-close:hover { border-color: var(--k-gold-2); color: var(--k-gold); background: #fff; }
.ck-ql-close:focus-visible { outline: 2px solid var(--k-gold-2); outline-offset: 2px; }

/* --- two columns: the lightbox, then the label --------------------------- */
.ck-ql-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  height: 100%;
  max-height: min(88vh, 800px);
}

.ck-ql-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(16px, 1.9vw, 26px);
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 100%);
  border-right: 1px solid var(--k-line-2);
}

/* The stage is square and the photograph is never cropped. */
.ck-ql-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--k-r);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(18, 62, 68, .06);
}
/* The halo, at overlay scale - the same arc as the card and the bands. */
.ck-ql-stage::before {
  content: "";
  position: absolute;
  top: -56%;
  right: -24%;
  width: 70%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(200, 168, 110, .26);
  border-radius: 50%;
  pointer-events: none;
}
.ck-ql-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.3vw, 20px);
  object-fit: contain;
}

.ck-ql-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-ql-thumb {
  width: 58px;
  height: 58px;
  padding: 4px;
  border: 1px solid var(--k-line-2);
  border-radius: var(--k-r-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.ck-ql-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ck-ql-thumb:hover { border-color: rgba(200, 168, 110, .5); }
.ck-ql-thumb.is-active { border-color: var(--k-gold-2); background: var(--k-champagne); }
.ck-ql-thumb:focus-visible { outline: 2px solid var(--k-gold-2); outline-offset: 2px; }

/* --- detail column -------------------------------------------------------- */
.ck-ql-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, #fdfaf3 0%, #F6F4EF 100%);
}
/* Only the descriptive region scrolls. The purchase block below it never
   leaves the panel, so the price and the action stay reachable. */
.ck-ql-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px) 4px;
}

.ck-ql-maker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--k-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ck-ql-maker::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--k-gold-3), var(--k-gold-2));
}

.ck-ql-title {
  margin: 0 0 12px !important;
  color: var(--k-ink) !important;
  font-family: var(--k-font) !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: -.018em !important;
}

.ck-ql-compat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--k-ink-2);
  font-size: 13px;
  font-weight: 600;
}
.ck-ql-compat .ck-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--k-gold); }

.ck-ql-desc {
  margin: 0;
  color: var(--k-ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- purchase area: pinned, never scrolled away -------------------------- */
.ck-ql-buy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--k-line-2);
  background: linear-gradient(180deg, rgba(251, 250, 247, .96), #F6F4EF);
}
.ck-ql-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-ql-price { display: flex; align-items: baseline; gap: 8px; }
.ck-ql-price .product-price {
  color: var(--k-ink);
  font-size: 26px;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ck-ql-price .product-price.current-price { color: var(--k-gold); }
.ck-ql-price .product-price.old-price {
  order: -1;
  color: var(--k-ink-3);
  font-size: 14px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ck-ql-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6E5626;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ck-ql-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-gold-2);
  box-shadow: 0 0 0 3px rgba(200, 168, 110, .16);
}

/* The one gold fill in the overlay: this is the commit action, and the hero's
   primary button is the same gold. */
.ck-ql-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(134, 105, 47, .4);
  border-radius: var(--k-r-sm);
  background: linear-gradient(180deg, var(--k-gold-3), var(--k-gold-2) 44%, var(--k-gold));
  color: #0B2B30;
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(134, 105, 47, .2), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: filter .2s ease, transform .18s ease, box-shadow .22s ease;
}
.ck-ql-add .btn-card-buy-label { flex: 1; text-align: left; }
.ck-ql-add .btn-card-buy-icon { display: grid; place-items: center; width: 18px; height: 18px; transition: transform .24s ease; }
.ck-ql-add:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(134, 105, 47, .26), inset 0 1px 0 rgba(255, 255, 255, .46); }
.ck-ql-add:hover .btn-card-buy-icon { transform: translateX(4px); }
.ck-ql-add:active { transform: translateY(0) scale(.99); }
.ck-ql-add:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }
.ck-ql-add:disabled { cursor: wait; }
.ck-ql-add.is-loading .btn-card-buy-icon::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(11, 43, 48, .28);
  border-top-color: #0B2B30;
  border-radius: 50%;
  animation: ckQlSpin .7s linear infinite;
}
.ck-ql-add.is-loading .btn-card-buy-icon svg { display: none; }
.ck-ql-add.is-success {
  background: linear-gradient(180deg, #EEF2F0, #dfe9d2);
  border-color: rgba(134, 105, 47, .5);
  color: #46551f;
}
@keyframes ckQlSpin { to { transform: rotate(360deg); } }

.ck-ql-view {
  display: block;
  padding: 10px 0 0;
  border-top: 1px solid var(--k-line-2);
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease;
}
.ck-ql-view::after { content: " →"; color: var(--k-gold); }
.ck-ql-view:hover { color: var(--k-gold); }
.ck-ql-view:focus-visible { outline: 2px solid var(--k-gold-2); outline-offset: 2px; border-radius: 3px; }

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-ql-backdrop, html.ck-calm .ck-ql-dialog, html.ck-calm .ck-ql-add, html.ck-calm .ck-ql-thumb, html.ck-calm .ck-ql-close { transition: none !important; }
  html.ck-calm .ck-ql-dialog { transform: none; }
  html.ck-calm .ck-ql-add.is-loading .btn-card-buy-icon::after { animation: none; }


/* Phone: one column, the panel takes most of the viewport, and the purchase
   block stays pinned at the foot where a thumb already is. */
@media (max-width: 860px) {
  .ck-ql { padding: 0; align-items: end; }
  .ck-ql-dialog {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--k-r-lg) var(--k-r-lg) 0 0;
  }
  .ck-ql-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92vh;
    max-height: 92dvh;
  }
  .ck-ql-media { border-right: 0; border-bottom: 1px solid var(--k-line-2); padding: 14px; gap: 10px; }
  .ck-ql-stage { aspect-ratio: 1 / 1; max-height: 34vh; }
  .ck-ql-thumbs { justify-content: center; }
  .ck-ql-thumb { width: 48px; height: 48px; }
  .ck-ql-scroll { padding: 18px 16px 4px; }
  .ck-ql-buy {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .ck-ql-price .product-price { font-size: 23px; }
  .ck-ql-close { top: 10px; right: 10px; }
}

/* ==========================================================================
   11. B2B CTA — the secondary action on the about banner
   --------------------------------------------------------------------------
   Scoped to .ck-about: .hero-cta-secondary is also used on a light surface
   elsewhere, and this treatment is built for the dark banner.
   A dry champagne hairline with warm ivory type, on no fill at all. It reads
   as the quieter of the two actions without ever becoming a grey pill, and it
   is drawn from the same gold family as the primary rather than fighting it.
   ========================================================================== */
.ck-about .hero-cta-secondary {
  background: rgba(251, 250, 247, .04) !important;
  border: 1px solid rgba(200, 168, 110, .42) !important;
  color: #EFE6D4 !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
.ck-about .hero-cta-secondary:hover {
  background: rgba(200, 168, 110, .16) !important;
  border-color: rgba(230, 211, 172, .82) !important;
  color: #fffaef !important;
  transform: translateY(-1px);
}
.ck-about .hero-cta-secondary:active { transform: translateY(0) scale(.99); }
.ck-about .hero-cta-secondary:focus-visible {
  outline: 2px solid rgba(230, 211, 172, .9);
  outline-offset: 3px;
}

/* Below the banner breakpoint the pair moves out of the artwork and onto the
   light band, where the treatment above stops working: cream type on a cream
   band measures about 1:1 and the label effectively disappears. On a light
   surface the secondary flips to a light treatment - white plate, champagne
   rule, deep gold label at 8:1 - which keeps it clearly the quieter of the
   two without becoming the grey pill this replaced. */
@media (max-width: 760px) {
  .ck-about .hero-cta-secondary {
    background: #ffffff !important;
    border-color: rgba(134, 105, 47, .45) !important;
    color: #6f4c1f !important;
    box-shadow: 0 1px 2px rgba(11, 43, 48, .05) !important;
  }
  .ck-about .hero-cta-secondary:hover {
    background: #fdf9f1 !important;
    border-color: rgba(134, 105, 47, .72) !important;
    color: #5f4119 !important;
  }
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  /* .product-grid is laid out in ck-product-card.css, which owns the card at
     every breakpoint. */
  .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ck-catalog-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 16px; }
  #category-detail-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* The product page's own breakpoints live in ck-pdp.css. */
}

/* Two across cannot hold these banners: at ~176px the artwork is cut to a
   narrow slice and both the logo and the headline are lost. Below the bento
   breakpoint each campaign takes the full width at its own proportion, so the
   whole composition survives - logo, headline and product all readable. */
@media (max-width: 1000px) {
  .brand-campaign-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .brand-campaign-card,
  .brand-campaign-card:nth-child(1),
  .brand-campaign-card:nth-child(2),
  .brand-campaign-card:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1360px); }
  /* Phone rhythm stays generous but a step tighter than desktop - the sections
     are shorter here, so the desktop step would read as dead space. */
  :root { --k-section: 54px; --k-section-tight: 46px; }

  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* Head and link stack: side by side the two collide on a phone, and the
     link reads as part of the heading rather than as a separate way in. */
  .ck-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px !important;
  }
  /* No hard font-size here: the fluid --k-t-h2 clamp already bottoms out at a
     phone-appropriate size, and overriding it re-broke the hierarchy. */
  .ck-section-sub, .ck-section-context { margin-top: 8px !important; }

  /* Category page: hero stays compact, the panel collapses behind a toggle */
  .category-detail-hero { padding: 20px 0 18px !important; }
  .category-detail-hero h1 { font-size: 24px !important; }
  #category-detail-desc { font-size: 12.5px !important; }

  .ck-cat-toolbar { padding: 10px 12px; }
  .ck-cat-filter-toggle { display: inline-flex; }

  .ck-catalog-layout { display: block; }
  .ck-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    width: 100%;
    border: 0;
    background: rgba(15, 18, 24, .48);
  }
  .ck-filter-backdrop.is-open { display: block; }
  #category-detail-filter-panel {
    position: fixed;
    z-index: 1200;
    inset: auto 0 0;
    top: auto;
    max-height: min(82vh, 720px);
    margin: 0 !important;
    padding: 18px 18px max(20px, env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
    opacity: 1;
    overflow-y: auto;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  #category-detail-filter-panel.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .ck-filter-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--k-line);
    border-radius: 50%;
    background: #fff;
    color: var(--k-ink);
  }
  body.ck-filter-drawer-open { overflow: hidden; }
  #category-detail-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .models-list-container { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 46vh; }
  .brand-pill-btn { font-size: 11.5px !important; padding: 6px 11px 6px 6px !important; }

  .modal-actions { flex-wrap: wrap; gap: 12px !important; }
  .modal-actions .btn-premium { flex: 1 1 100% !important; }
}

@media (max-width: 390px) {
  .categories-grid { gap: 8px !important; }
  .ck-section-title { font-size: 20px !important; }
}

/* ==========================================================================
   11. ONE CARD ACTION, EVERYWHERE — now enforced in ck-product-card.css
   --------------------------------------------------------------------------
   This section used to restate the card button so it out-ranked the legacy
   rules that painted it a different colour on the homepage than everywhere
   else. That restatement moved into the card file along with the rest of the
   card, where a single `.product-info .btn-card-buy` rule — loaded after
   styles.css on both pages — already wins the same fight.
   ========================================================================== */

/* ==========================================================================
   12. LEGACY BLUE ACCENT
   The pre-light theme's accent was rgb(22, 122, 255). Four of its uses survive
   on screens the redesign owns: a glow behind the category hero, a glow on the
   gallery arrows, the search-suggestion hover, and the halo under the primary
   button. On a warm ivory/champagne surface a blue cast reads as dirt, so they
   are re-pointed at the gold ramp.
   ========================================================================== */

/* the hero's own champagne gradient is the whole tint */
.category-detail-hero::before,
.categories-hero-banner::before { display: none !important; }

.btn-premium,
.btn-premium:hover {
  box-shadow: 0 6px 16px rgba(134, 105, 47, .22) !important;
}
.gallery-nav-btn:hover { box-shadow: 0 0 12px rgba(134, 105, 47, .45) !important; }
.search-suggestion-item:hover { background-color: var(--k-champagne) !important; }
.cart-count { box-shadow: 0 4px 10px rgba(134, 105, 47, .24) !important; }
.meta-item.selected { background: var(--k-champagne) !important; }

/* ==========================================================================
   13. BRAND CHIPS WITHOUT A LOGO FILE
   Two of the brands stored in the catalog (Fairphone, Tesla) point at logo
   files that do not exist in /assets. The shared fallback paints the CaseKing
   mark, so those two chips advertised CaseKing as the brand. With no artwork
   to show, the chip falls back to its own name label instead.
   ========================================================================== */

.brand-pill-btn img[data-logo-missing],
.menu-brand-img[data-logo-missing] { display: none !important; }
.brand-pill-btn:has(img[data-logo-missing]) { padding-left: 13px !important; }

/* Questions and answers (home and category pages). Native <details>, so it
   opens with keyboard and screen readers without any script. */
.ck-faq-band { padding: clamp(40px, 6vw, 72px) 0; }
.ck-faq { max-width: 860px; margin: 0 auto; }
.ck-faq, .ck-faq * { font-feature-settings: "locl" 0; }
.ck-faq[hidden] { display: none; }
#category-detail-view .ck-faq { margin-top: clamp(36px, 5vw, 64px); }
.ck-faq-title { margin: 0 0 18px; font: 800 clamp(22px, 2.4vw, 30px)/1.2 Manrope, Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--k-ink); }
.ck-faq-item { border-bottom: 1px solid var(--k-line); }
.ck-faq-item:first-of-type { border-top: 1px solid var(--k-line); }
.ck-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 6px 16px 2px; cursor: pointer; list-style: none;
  font: 700 15.5px/1.4 Inter, system-ui, sans-serif; color: var(--k-ink);
}
.ck-faq-item summary::-webkit-details-marker { display: none; }
.ck-faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid #123E44; border-bottom: 2px solid #123E44;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.ck-faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ck-faq-item summary:hover { color: #123E44; }
.ck-faq-item summary:focus-visible { outline: 3px solid rgba(18, 62, 68, .3); outline-offset: 2px; border-radius: 6px; }
.ck-faq-item p { margin: 0 0 18px; color: var(--k-ink-2); font-size: 15px; line-height: 1.6; max-width: 70ch; }
/* reduce-motion opt-out (html.ck-calm) */ html.ck-calm .ck-faq-item summary::after { transition: none; } 

/* 2026-10-13: a long supplier description (PhonePlay, ~3 000 characters) made
   the detail column taller than the dialog. The grid row followed it, the
   photograph centred itself far below the visible area and the text was cut.
   Capping the detail column lets .ck-ql-scroll do its job; a short Koff
   description is unaffected because it never reaches the cap. */
@media (min-width: 861px) {
  .ck-ql-detail { max-height: min(88vh, 800px); }
}