/* ==========================================================================
   PACKAGE B — homepage layout (approved mockup "CaseKing — Пакет B", 2026-09-28)
   --------------------------------------------------------------------------
   Loaded LAST so it only has to out-rank earlier rules on specificity where
   they use !important. Scope: the homepage (#storefront-home-view), the header
   "Моят телефон" control and the mobile device bar. Nothing here touches the
   product card, Quick View, PDP, cart or checkout.

   Breakpoints
     desktop  >= 1024px   finder panel sits on the foot of the hero
     tablet   761-1023px  desktop hero, finder card directly under it
     phone    <= 760px    photo hero with overlaid copy, finder card under it
     rows     <= 640px    strip chips, category and brand scroll rows
   Palette: tokens from modern-atelier-v2.css only.
   ========================================================================== */

/* --- 0. Hero cannot be scrolled from inside ---------------------------------
   overflow:hidden still makes the hero a (programmatic) scroll container:
   focusing a finder select or scrollIntoView() nudged its scrollTop, the
   slides slid up under the header and the dark background showed below.
   overflow:clip clips exactly the same but is not a scroll container. */
#storefront-home-view #hero-section,
#storefront-home-view #hero-section .ck-hero-slides,
#storefront-home-view #hero-section .ck-hero-slide-media { overflow: hidden; overflow: clip; }

/* --- 1. Header: "Моят телефон" ------------------------------------------- */
.ck-header-main { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.ck-my-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  max-width: 230px;
  padding: 0 14px 0 12px;
  border: 1.5px solid #B8955A;
  border-radius: 22px;
  background: #FFFFFF;
  color: #123E44;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ck-my-phone .ck-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #86692F;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ck-my-phone .ck-my-phone-chev { width: 14px; height: 14px; stroke: #123E44; stroke-width: 2; }
.ck-my-phone-label { overflow: hidden; text-overflow: ellipsis; }
.ck-my-phone:hover { border-color: #86692F; background: #FBFAF7; }
.ck-my-phone:focus-visible { outline: 2px solid #123E44; outline-offset: 3px; }
.ck-my-phone.is-set { background: #123E44; border-color: #123E44; color: #F6F4EF; }
.ck-my-phone.is-set .ck-icon,
.ck-my-phone.is-set .ck-my-phone-chev { stroke: #C8A86E; }
.ck-my-phone.is-set:hover { background: #1F5A61; border-color: #1F5A61; }

.ck-my-phone-bar { display: none; }

@media (max-width: 640px) {
  .ck-header-main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ck-my-phone { display: none; }

  .ck-my-phone-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-top: 1px solid rgba(18, 62, 68, .08);
    background: #E6ECE9;
    color: #123E44;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }
  .ck-my-phone-bar .ck-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #86692F;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ck-my-phone-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ck-my-phone-bar-text strong { font-weight: 700; }
  .ck-my-phone-bar-action { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; color: #123E44; }
  .ck-my-phone-bar-action .ck-icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; }
  .ck-my-phone-bar:focus-visible { outline: 2px solid #123E44; outline-offset: -3px; }
  .ck-my-phone-bar.is-set { background: #123E44; color: #F6F4EF; border-top-color: transparent; }
  .ck-my-phone-bar.is-set .ck-icon { stroke: #C8A86E; }
  .ck-my-phone-bar.is-set .ck-my-phone-bar-action { color: #C8A86E; }
}

/* --- 2a. Hero artwork crop (tablet + desktop) --------------------------- */
/* The artwork carries its own row of brand logos along the bottom edge. The
   picture fills the band (no letterbox, so the blurred ambient copy is not
   needed) and is drawn 32% taller than it, anchored to the top, so that row
   falls below the crop instead of showing under the finder. */
@media (min-width: 761px) {
  #storefront-home-view #hero-section .ck-hero-slide-ambient { display: none; }
  #storefront-home-view #hero-section .ck-hero-slide-img {
    inset: 0 0 auto 0;
    height: 132%;
    object-fit: cover;
    object-position: 62% 0;
  }
}

/* --- 2. Hero, desktop ----------------------------------------------------- */
@media (min-width: 1024px) {
  #storefront-home-view #hero-section .ck-hero-slides { height: 600px; }
  #storefront-home-view #hero-section .ck-hero-slide-media,
  #storefront-home-view #hero-section .ck-hero-slide-inner { inset: 0; }
  #storefront-home-view #hero-section .ck-hero-scrim {
    background:
      linear-gradient(0deg, rgba(6, 24, 27, .72) 0, rgba(6, 24, 27, 0) 220px),
      linear-gradient(90deg, rgba(6, 24, 27, .86) 0%, rgba(6, 24, 27, .55) 34%, rgba(6, 24, 27, 0) 60%) !important;
  }
  /* Copy sits high, on the dark left third, clear of the finder panel. */
  #storefront-home-view #hero-section .ck-hero-slide-inner {
    align-items: flex-start;
    padding-top: 92px;
  }
  #storefront-home-view #hero-section .ck-hero-copy {
    max-width: 560px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #storefront-home-view #hero-section .ck-hero-headline { font-size: 54px !important; line-height: 1.04; }
  #storefront-home-view #hero-section .ck-hero-subtext { max-width: 470px; font-size: 17px; line-height: 1.55; color: rgba(246, 244, 239, .84); }

  /* Controls move to the top-right corner, out of the finder's way. */
  #storefront-home-view #hero-section .ck-hero-controls { top: 80px; bottom: auto; }

  /* The finder: one bright instrument panel on the foot of the hero. */
  #storefront-home-view #hero-section .ck-finder-in-hero {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 48px;
    z-index: 5;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Slide indicators: a thin bar inside a 44px tap target. modern-atelier-v2
   painted the whole button, which turned each rail into a solid block. */
#storefront-home-view #hero-section .ck-hero-rail {
  background: linear-gradient(to bottom, transparent calc(50% - 2px), rgba(246, 244, 239, .45) calc(50% - 2px), rgba(246, 244, 239, .45) calc(50% + 2px), transparent calc(50% + 2px)) !important;
}
#storefront-home-view #hero-section .ck-hero-rail-fill {
  background: linear-gradient(to bottom, transparent calc(50% - 2px), #C8A86E calc(50% - 2px), #C8A86E calc(50% + 2px), transparent calc(50% + 2px)) !important;
}
#storefront-home-view #hero-section .ck-hero-play {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(246, 244, 239, .35);
  border-radius: 22px;
  background: rgba(11, 43, 48, .55);
  color: #F6F4EF;
  font-size: 12px;
  pointer-events: auto;
}

/* --- 3. Finder panel (all widths) ---------------------------------------- */
#storefront-home-view #hero-section .ck-finder-in-hero { background: none !important; }

#storefront-home-view #hero-section .ck-finder-bar {
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) auto;
  gap: 18px !important;
  padding: 18px 20px 18px 26px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: rgba(251, 250, 247, .97) !important;
  box-shadow: 0 24px 60px rgba(6, 24, 27, .35) !important;
}
#storefront-home-view #hero-section .finder-kicker {
  margin-bottom: 4px;
  color: #86692F !important;
  font-size: 11px;
  letter-spacing: .16em;
}
#storefront-home-view #hero-section .ck-finder-lead strong {
  color: #0B2B30 !important;
  font-size: 18px;
  line-height: 1.25;
}
#storefront-home-view #hero-section .ck-finder-step { display: none !important; }
#storefront-home-view #hero-section .ck-finder-field { display: block; }

/* Visible labels. Package A clipped them to keep an accessible name; a real
   visible label does that job and tells the eye what each box is for. */
#storefront-home-view #hero-section .ck-finder-select-wrap { display: flex; flex-direction: column; gap: 6px; }
#storefront-home-view #hero-section .ck-finder-select-wrap label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: #5A615F;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
#storefront-home-view #hero-section .ck-finder-select-wrap select {
  height: 48px;
  border-radius: 12px !important;
  font-size: 15px !important;
}
#storefront-home-view #hero-section .ck-finder-select-wrap select:disabled {
  border-style: dashed !important;
  background-color: #FBFAF7 !important;
  color: #5A615F;
}

#storefront-home-view #hero-section .ck-finder-actions { align-self: end; gap: 8px; }
#storefront-home-view #hero-section .ck-finder-cta,
#storefront-home-view #hero-section .ck-finder-cta:not(:disabled) {
  min-height: 48px;
  padding: 0 26px;
  border: 0 !important;
  border-radius: 24px !important;
  background: #123E44 !important;
  color: #F6F4EF !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: none !important;
}
#storefront-home-view #hero-section .ck-finder-cta .ck-icon { stroke: #C8A86E; }
#storefront-home-view #hero-section .ck-finder-cta:not(:disabled):hover { background: #1F5A61 !important; }
#storefront-home-view #hero-section .ck-finder-cta:disabled { opacity: .55; cursor: default; }
#storefront-home-view #hero-section .ck-finder-cta:focus-visible { outline: 2px solid #B8955A; outline-offset: 3px; }
/* "Нулирай" only appears once there is something to reset. */
#storefront-home-view #hero-section .ck-finder-reset:disabled { display: none; }

/* Selected device: one quiet row in the same bright panel. */
#storefront-home-view #hero-section .ck-device-context {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px 12px 14px;
  border: 0 !important;
  border-radius: 16px;
  background: rgba(251, 250, 247, .97) !important;
  box-shadow: 0 16px 40px rgba(6, 24, 27, .28);
}
#storefront-home-view #hero-section .ck-device-context[hidden] { display: none !important; }
#storefront-home-view #hero-section .ck-device-context-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E6ECE9;
  color: #123E44;
}
#storefront-home-view #hero-section .ck-device-context-icon .ck-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#storefront-home-view #hero-section .ck-device-context-copy { flex: 1 1 auto; }
#storefront-home-view #hero-section .ck-device-context-copy small { color: #86692F; font-size: 11px; letter-spacing: .14em; }
#storefront-home-view #hero-section .ck-device-context-copy strong {
  color: #0B2B30;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}
#storefront-home-view #hero-section .ck-device-context-check { display: none; }
#storefront-home-view #hero-section .ck-device-context-change {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid rgba(18, 62, 68, .28) !important;
  border-radius: 22px;
  background: #FFFFFF !important;
  color: #123E44 !important;
  font-size: 14px;
  font-weight: 650;
}
#storefront-home-view #hero-section .ck-device-context-change::after { display: none; }
#storefront-home-view #hero-section .ck-device-context-change:hover { border-color: #123E44 !important; }

/* Collapsed: with a device chosen the selects step aside and only the device
   row shows. They are clipped, not display:none, so "Смени модела" can still
   focus the brand select - and focus inside the panel opens it again. */
#storefront-home-view #hero-section .ck-finder-in-hero.has-device-context:not(:focus-within):not(.is-editing) .ck-finder-bar {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap;
}
#storefront-home-view #hero-section .ck-finder-in-hero.has-device-context:not(:focus-within):not(.is-editing) .ck-device-context { margin-top: 0; }

/* --- 4. Tablet: desktop hero, finder card directly under it -------------- */
@media (max-width: 1023px) {
  #storefront-home-view #hero-section { overflow: visible; background: transparent; }
  #storefront-home-view #hero-section .ck-hero-sweep { display: none; }
  #storefront-home-view #hero-section .ck-finder-in-hero {
    position: relative;
    z-index: 5;
    margin: -32px 0 0 !important;
    padding: 0 !important;
  }
  #storefront-home-view #hero-section .ck-finder-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    box-shadow: 0 18px 44px rgba(6, 24, 27, .18) !important;
  }
  #storefront-home-view #hero-section .ck-finder-lead { grid-column: 1 / -1; }
  #storefront-home-view #hero-section .ck-finder-fields { grid-column: 1 / -1; }
  #storefront-home-view #hero-section .ck-finder-actions { grid-column: 1 / -1; justify-self: stretch; }
  #storefront-home-view #hero-section .ck-finder-cta { flex: 1 1 auto; justify-content: center; }
  #storefront-home-view #hero-section .ck-device-context { box-shadow: 0 12px 30px rgba(6, 24, 27, .14); }
}

/* --- 5. Phone hero -------------------------------------------------------- */
@media (max-width: 760px) {
  #storefront-home-view #hero-section .ck-hero-slides { height: 440px; display: block; }
  #storefront-home-view #hero-section .ck-hero-slide { position: absolute; inset: 0; }
  #storefront-home-view #hero-section .ck-hero-slide-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  #storefront-home-view #hero-section .ck-hero-slide-ambient { display: none; }
  #storefront-home-view #hero-section .ck-hero-slide-img {
    inset: 0 0 auto 0;
    height: 118%;
    object-fit: cover;
    object-position: 58% 0;
  }
  #storefront-home-view #hero-section .ck-hero-scrim {
    background: linear-gradient(0deg, rgba(6, 24, 27, .94) 0%, rgba(6, 24, 27, .78) 34%, rgba(6, 24, 27, .10) 64%, rgba(6, 24, 27, 0) 100%) !important;
  }
  #storefront-home-view #hero-section .ck-hero-slide .ck-hero-slide-inner {
    position: absolute !important;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0;
  }
  #storefront-home-view #hero-section .ck-hero-slide .ck-hero-slide-inner.container { width: 100%; }
  #storefront-home-view #hero-section .ck-hero-slide .ck-hero-copy {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #storefront-home-view #hero-section .ck-hero-eyebrow { margin-bottom: 8px; }
  #storefront-home-view #hero-section .ck-hero-headline { font-size: 31px !important; line-height: 1.08; margin-bottom: 8px; }
  #storefront-home-view #hero-section .ck-hero-subtext {
    font-size: 14.5px !important;
    line-height: 1.45;
    margin-bottom: 14px;
    color: rgba(246, 244, 239, .86);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #storefront-home-view #hero-section .ck-hero-cta { min-height: 48px; width: 100%; justify-content: center; }

  /* Indicators bottom-left, pause bottom-right, on the photo. */
  #storefront-home-view #hero-section .ck-hero-controls {
    position: absolute;
    top: 368px;
    bottom: auto;
    left: 0;
    right: 0;
    height: 44px;
    padding: 0;
  }
  #storefront-home-view #hero-section .ck-hero-controls-inner {
    width: 100%;
    height: 100%;
    padding: 0 8px 0 20px;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #storefront-home-view #hero-section .ck-hero-rails { margin: 0; gap: 2px; }
  #storefront-home-view #hero-section .ck-hero-rail { width: 44px; }
  #storefront-home-view #hero-section .ck-hero-play { min-height: 44px; }

  #storefront-home-view #hero-section .ck-finder-in-hero { margin-top: -18px !important; }
  #storefront-home-view #hero-section .ck-finder-bar {
    gap: 14px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }
  #storefront-home-view #hero-section .ck-finder-lead strong { font-size: 17px; }
  #storefront-home-view #hero-section .ck-finder-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  #storefront-home-view #hero-section .ck-finder-select-wrap select { font-size: 14px !important; padding-left: 12px; }
  #storefront-home-view #hero-section .ck-finder-cta { width: 100%; }
  #storefront-home-view #hero-section .ck-device-context {
    flex-wrap: wrap;
    border-radius: 18px;
  }
  #storefront-home-view #hero-section .ck-device-context-copy strong { font-size: 16px; white-space: normal; }
  #storefront-home-view #hero-section .ck-device-context-change { width: 100%; }
}

/* --- 6. Trust strip: a dark plinth under the hero ----------------------- */
#storefront-home-view .ck-strip {
  position: relative;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(200, 168, 110, .10), transparent 70%),
    linear-gradient(180deg, #0B2B30, #0E3439);
  border-bottom: 1px solid rgba(200, 168, 110, .18);
}
/* A champagne hairline that fades out at both ends. */
#storefront-home-view .ck-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 110, .55) 30%, rgba(200, 168, 110, .55) 70%, transparent);
}
#storefront-home-view .ck-strip-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 92px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}
#storefront-home-view .ck-strip-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0 22px;
}
#storefront-home-view .ck-strip-item[hidden] { display: none; }
#storefront-home-view .ck-strip-item:first-child { padding-left: 0; }
/* Vertical hairline between items, strongest in the middle. */
#storefront-home-view .ck-strip-item + .ck-strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 168, 110, .35), transparent);
}

/* The medallion: a champagne ring around a softly lit well. */
.ck-medal {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200, 168, 110, .22), rgba(11, 43, 48, .0) 70%), #0B2B30;
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 110, .55),
    0 0 0 4px rgba(200, 168, 110, .07),
    0 8px 22px rgba(0, 0, 0, .28);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ck-medal svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #C8A86E;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ck-medal .duo { fill: rgba(200, 168, 110, .16); stroke: none; }
.ck-medal .punch { fill: #0B2B30; stroke: none; }
.ck-medal text {
  fill: #C8A86E;
  stroke: none;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 8.6px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ck-strip-item:hover .ck-medal {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(232, 208, 160, .9),
    0 0 0 6px rgba(200, 168, 110, .12),
    0 12px 28px rgba(0, 0, 0, .34);
}

#storefront-home-view .ck-strip-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#storefront-home-view .ck-strip-item strong {
  color: #F6F4EF;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
#storefront-home-view .ck-strip-item small { color: rgba(246, 244, 239, .66); font-size: 12.5px; line-height: 1.35; }

/* Icons draw themselves in once, when the strip enters the viewport. The
   start state is applied only once ck-motion.js has armed the element (and
   ck-motion.js animates it to the end state), so without JS or with reduced
   motion the icons are simply there. */
[data-ck-draw].is-armed .ck-medal [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-ck-draw].is-armed .ck-medal .duo,
[data-ck-draw].is-armed .ck-medal text { opacity: 0; }

@media (max-width: 1023px) and (min-width: 641px) {
  #storefront-home-view .ck-strip-list { min-height: 84px; padding-top: 12px; padding-bottom: 12px; }
  #storefront-home-view .ck-strip-item { padding: 0 12px; gap: 10px; }
  #storefront-home-view .ck-strip-item small { display: none; }
  #storefront-home-view .ck-strip-item strong { font-size: 13.5px; }
  .ck-medal { width: 42px; height: 42px; }
  .ck-medal svg { width: 26px; height: 26px; }
}

@media (max-width: 640px) {
  #storefront-home-view .ck-strip { background: transparent; border-bottom: 0; padding: 18px 0 4px; }
  #storefront-home-view .ck-strip::before { display: none; }
  #storefront-home-view .ck-strip-list {
    display: flex;
    gap: 8px;
    width: 100%;
    min-height: 0;
    padding: 0 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scrollbar-width: none;
  }
  #storefront-home-view .ck-strip-list::-webkit-scrollbar { display: none; }
  #storefront-home-view .ck-strip-item,
  #storefront-home-view .ck-strip-item:first-child {
    flex: 0 0 auto;
    gap: 9px;
    min-height: 48px;
    padding: 0 16px 0 7px;
    border-radius: 24px;
    background: linear-gradient(180deg, #0E3439, #0B2B30);
    box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .30);
    scroll-snap-align: start;
  }
  #storefront-home-view .ck-strip-item + .ck-strip-item::before { display: none; }
  .ck-medal { width: 34px; height: 34px; box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .55); }
  .ck-medal svg { width: 22px; height: 22px; }
  #storefront-home-view .ck-strip-item strong { font-size: 13px; white-space: nowrap; }
  #storefront-home-view .ck-strip-item small { display: none; }
}

/* --- 7. Categories -------------------------------------------------------- */
/* Desktop shows twelve categories (three rows; camera protectors right after
   screen protectors, owner 2026-10-03), in the approved mockup order;
   the rest stay one click away via "Всички категории". The order is set here
   so the approved HOME_CATEGORY_ORDER in app.js is not touched. */
#storefront-home-view #categories-grid > a { order: 20; }
#storefront-home-view #categories-grid > a[href="/keysove-i-kalufi"] { order: 1; }
#storefront-home-view #categories-grid > a[href="/protektori-za-ekran"] { order: 2; }
#storefront-home-view #categories-grid > a[href="/protektori-za-kamera"] { order: 3; }
#storefront-home-view #categories-grid > a[href="/zaryadni-ustroystva"] { order: 4; }
#storefront-home-view #categories-grid > a[href="/bezzhichni-zaryadni"] { order: 5; }
#storefront-home-view #categories-grid > a[href="/kabeli-za-zaryadane"] { order: 6; }
#storefront-home-view #categories-grid > a[href="/aksesoari-za-avtomobili"] { order: 7; }
#storefront-home-view #categories-grid > a[href="/vanshni-baterii"] { order: 8; }
#storefront-home-view #categories-grid > a[href="/headphones"] { order: 9; }
#storefront-home-view #categories-grid > a[href="/popsoket-i-vrazki"] { order: 10; }
#storefront-home-view #categories-grid > a[href="/aksesoari_chasovnici"] { order: 11; }
#storefront-home-view #categories-grid > a[href="/drugi"] { order: 12; }

@media (min-width: 641px) {
  #storefront-home-view #categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
  #storefront-home-view #categories-grid > a { display: none !important; }
  #storefront-home-view #categories-grid > a:is(
    [href="/keysove-i-kalufi"], [href="/protektori-za-ekran"], [href="/protektori-za-kamera"], [href="/zaryadni-ustroystva"],
    [href="/bezzhichni-zaryadni"], [href="/kabeli-za-zaryadane"], [href="/aksesoari-za-avtomobili"], [href="/vanshni-baterii"],
    [href="/headphones"], [href="/popsoket-i-vrazki"], [href="/aksesoari_chasovnici"], [href="/drugi"]
  ) { display: flex !important; }
  /* Square crop on the product: the art places it right of centre, so a
     wide strip made it a speck. 2026-10-02, owner: "много малки". */
  #storefront-home-view #categories-grid .category-card-img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 100% 50% !important; }
  #storefront-home-view #categories-grid .ck-cat-sub { display: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #storefront-home-view #categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

#storefront-home-view .ck-cat-hint { display: none; }

@media (max-width: 640px) {
  #storefront-home-view #categories-grid {
    display: flex !important;
    gap: 12px !important;
    margin: 0 -14px;
    padding: 4px 14px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scrollbar-width: none;
  }
  #storefront-home-view #categories-grid::-webkit-scrollbar { display: none; }
  #storefront-home-view #categories-grid > a {
    flex: 0 0 156px;
    width: 156px;
    scroll-snap-align: start;
  }
  #storefront-home-view #categories-grid .category-card-img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 100% 50% !important; }
  #storefront-home-view #categories-grid .ck-cat-overlay { padding: 10px 12px 12px !important; }
  #storefront-home-view #categories-grid .ck-cat-arrow { display: none; }
  #storefront-home-view #categories-grid .ck-cat-title { font-size: 13.5px !important; }
  #storefront-home-view .ck-cat-hint {
    display: block;
    margin: 6px 0 0;
    color: #5A615F;
    font-size: 12px;
  }
}

/* --- 8. Brand banners: a swipe row on phones ------------------------------ */
@media (max-width: 640px) {
  #storefront-home-view #premium-brands .brand-campaign-grid {
    display: flex !important;
    gap: 12px !important;
    margin: 0 -14px;
    padding: 4px 14px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scrollbar-width: none;
  }
  #storefront-home-view #premium-brands .brand-campaign-grid::-webkit-scrollbar { display: none; }
  #storefront-home-view #premium-brands .brand-campaign-card {
    flex: 0 0 min(300px, 78vw);
    height: 180px;
    aspect-ratio: auto;
    border: 1.5px solid #B8955A !important;
    border-radius: 16px !important;
    scroll-snap-align: start;
  }
  #storefront-home-view #premium-brands .brand-campaign-card:hover { transform: none; }
}

/* --- 9. Section links: a full 44px tap height, same look ------------------ */
#storefront-home-view .ck-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
#storefront-home-view .ck-strip-list:focus-visible { outline: 2px solid #C8A86E; outline-offset: 2px; border-radius: 12px; }

/* Primary action in the collapsed device row ("Всичко за {Модел}"). The
   button itself is added by the logic step (tasks/pkg-b-logic.md). */
#storefront-home-view #hero-section .ck-device-context-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 22px;
  background: #123E44;
  color: #F6F4EF;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#storefront-home-view #hero-section .ck-device-context-go:hover { background: #1F5A61; }
#storefront-home-view #hero-section .ck-device-context-go:focus-visible { outline: 2px solid #B8955A; outline-offset: 3px; }
#storefront-home-view #hero-section .ck-device-context-go .ck-icon { width: 16px; height: 16px; fill: none; stroke: #C8A86E; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 760px) {
  #storefront-home-view #hero-section .ck-device-context-go { width: 100%; }
}

/* The model name in the device bar inherits the bar's colour - a global
   strong colour made it petrol on petrol once a device was set. */
.ck-my-phone-bar-text strong { color: inherit !important; }

/* ==========================================================================
   PACKAGE C — "Повече от защита" as live text beside the clean photo
   ========================================================================== */
.ck-about-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1.5px solid rgba(184, 149, 90, .55);
  border-radius: 20px;
  background: linear-gradient(160deg, #0B2B30, #123E44);
  box-shadow: 0 24px 60px rgba(11, 43, 48, .18);
}
.ck-about-media { position: relative; min-height: 460px; }
.ck-about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 40%;
}
/* The photo melts into the petrol panel instead of ending on a hard edge. */
.ck-about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 43, 48, 0) 52%, rgba(11, 43, 48, .55) 80%, #0E3439 100%);
}
.ck-about-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(32px, 4.4vw, 64px) clamp(28px, 4vw, 60px);
  color: #F6F4EF;
}
.ck-about-title {
  margin: 0;
  color: #F6F4EF !important;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.ck-about-text {
  max-width: 48ch;
  margin: 0;
  color: rgba(246, 244, 239, .82);
  font-size: 16px;
  line-height: 1.6;
}
.ck-about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.ck-about-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F6F4EF;
  font-size: 14px;
  font-weight: 650;
}
.ck-about-point-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(200, 168, 110, .55);
  border-radius: 50%;
}
.ck-about-point-icon .ck-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #C8A86E;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ck-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.ck-about-actions > a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 860px) {
  .ck-about-card { grid-template-columns: minmax(0, 1fr); }
  .ck-about-media { min-height: 0; aspect-ratio: 16 / 10; }
  .ck-about-media::after { background: linear-gradient(180deg, rgba(11, 43, 48, 0) 60%, rgba(11, 43, 48, .92) 100%); }
  .ck-about-body { padding: 24px 20px 26px; gap: 16px; }
  .ck-about-text { font-size: 15px; }
  .ck-about-points { flex-direction: column; gap: 10px; }
  .ck-about-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  /* The card stays dark at every width, so the B2B action keeps its
     dark-surface treatment instead of the light one ck-system.css switches
     to below 760px for the old banner. */
  .ck-about .ck-about-actions .hero-cta-secondary {
    background: rgba(251, 250, 247, .04) !important;
    border-color: rgba(200, 168, 110, .55) !important;
    color: #EFE6D4 !important;
  }
}

/* Contacts page: Viber next to the phone number. */
.ck-contact-viber {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  color: #123E44;
  font-weight: 650;
  text-decoration: none;
}
.ck-contact-viber:hover { color: #1F5A61; text-decoration: underline; }
.ck-contact-viber .fa-viber { color: #86692F; font-size: 1.15rem; }

/* Footer contacts: one line each, so phone, Viber and e-mail read as a list. */
.ck-footer-contact .ck-footer-mail { display: flex; align-items: center; gap: 8px; min-height: 32px; width: fit-content; }

/* ==========================================================================
   MOTION — hero support (the choreography itself lives in hero-carousel.js)
   ========================================================================== */
#storefront-home-view #hero-section .ck-word { display: inline-block; will-change: transform; }
/* The button gets one sheen pass after it lands (animated from JS). */
#storefront-home-view #hero-section .ck-hero-cta { position: relative; overflow: hidden; isolation: isolate; }
#storefront-home-view #hero-section .ck-hero-cta::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px 0;
  width: 45%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 235, .75), transparent);
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}
/* The light sweep that crosses the band on each change. */
#storefront-home-view #hero-section .ck-hero-sweep {
  z-index: 2;
  opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(230, 211, 172, .16) 47%, rgba(255, 244, 214, .30) 50%, rgba(230, 211, 172, .16) 53%, transparent 62%);
  mix-blend-mode: screen;
}

/* ==========================================================================
   MOTION — site (driven by ck-motion.js; all of it off under reduced motion)
   ========================================================================== */

/* Section kickers: the short gold rule grows in as the heading rises
   (the heading's own reveal comes from modern-atelier-v2.js). */
#storefront-home-view .ck-section-head .section-kicker::before { transition: width .7s cubic-bezier(.2, .8, .2, 1) .15s; }
#storefront-home-view .ck-section-head[data-ma-reveal]:not(.is-visible) .section-kicker::before { width: 0; }

/* Category cards: a champagne sheen crosses the picture on hover. */
#storefront-home-view #categories-grid .ck-cat-card { isolation: isolate; }
#storefront-home-view #categories-grid .ck-cat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 168px;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 246, 222, .38) 50%, transparent 80%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
#storefront-home-view #categories-grid .ck-cat-card:hover::after {
  transform: translateX(260%) skewX(-18deg);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 640px) { #storefront-home-view #categories-grid .ck-cat-card::after { height: 112px; } }

/* Brand banners: tilt toward the pointer with a glare that follows it. */
#storefront-home-view .brand-campaign-card.ck-tilt { transform-style: preserve-3d; will-change: transform; }
#storefront-home-view .brand-campaign-card.ck-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 244, 214, .26), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#storefront-home-view .brand-campaign-card.ck-tilt.is-tilting {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  transition: transform .12s ease-out, box-shadow .3s ease, border-color .3s ease;
}
#storefront-home-view .brand-campaign-card.ck-tilt.is-tilting::after { opacity: 1; }

/* "Повече от защита": the photo wipes in, then the copy follows; on wide
   screens the photo drifts slightly against the scroll. */
.ck-about-media img { transform: translateY(var(--drift, 0px)) scale(1.08); transition: transform .2s linear; }
@media (max-width: 860px) { .ck-about-media img { transform: none; } }
.ck-about-card.is-armed .ck-about-media { clip-path: inset(0 100% 0 0); }
.ck-about-card.is-armed .ck-about-body > * { opacity: 0; transform: translateY(18px); }
.ck-about-card.is-in .ck-about-media { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.ck-about-card.is-in .ck-about-body > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.ck-about-card.is-in .ck-about-body > :nth-child(1) { transition-delay: .35s; }
.ck-about-card.is-in .ck-about-body > :nth-child(2) { transition-delay: .5s; }
.ck-about-card.is-in .ck-about-body > :nth-child(3) { transition-delay: .65s; }
.ck-about-card.is-in .ck-about-body > :nth-child(4) { transition-delay: .8s; }
@media (max-width: 860px) {
  .ck-about-card.is-armed .ck-about-media { clip-path: inset(0 0 100% 0); }
}

/* "Моят телефон" beckons: two soft champagne rings, once per visit. */
.ck-my-phone { position: relative; }
.ck-my-phone.is-beckoning::before,
.ck-my-phone.is-beckoning::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(184, 149, 90, .7);
  animation: ckBeckon 1.25s cubic-bezier(.2, .7, .3, 1) 2 both;
  pointer-events: none;
}
.ck-my-phone.is-beckoning::after { animation-delay: .35s; }
.ck-my-phone.is-beckoning .ck-icon:first-child { animation: ckPhoneWiggle 1.25s ease-in-out 2; }
@keyframes ckBeckon {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.35, 1.7); }
}
@keyframes ckPhoneWiggle {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(-14deg); }
  20% { transform: rotate(12deg); }
  30% { transform: rotate(-8deg); }
  40% { transform: rotate(5deg); }
}

/* Cart badge pops when an item is added. */
.cart-count.is-popping { animation: ckBadgePop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ckBadgePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm #storefront-home-view #categories-grid .ck-cat-card::after, html.ck-calm .ck-my-phone::before, html.ck-calm .ck-my-phone::after { display: none; }
  html.ck-calm .ck-about-media img { transform: none; transition: none; }


/* ==========================================================================
   SALES PLAN · PHASE 1 — compatibility, trust, "complete to free delivery"
   (the states are set by app.js; see tasks/pkg-p1-logic.md)
   ========================================================================== */

/* Product card: when the product is made for the chosen phone, the card's own
   model line becomes a petrol tag that says so. The picture and the rest of
   the approved card stay exactly as they are (its ::before/::after are the
   halo and the contact shadow). Only the positive verdict is ever marked. */
.product-card[data-fit="yes"] .product-compat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  padding: 2px 10px 2px 7px;
  border-radius: 999px;
  background: #E6ECE9;
  color: #123E44 !important;
  font-weight: 700;
}
.product-card[data-fit="yes"] .product-compat::after {
  content: "· пасва ✓";
  color: #86692F;
  font-weight: 800;
  white-space: nowrap;
}

/* Product page: the compatibility block speaks the palette (was a green that
   the palette does not have) and says whose phone it is. */
.pdp-compat.is-match {
  background: #E6ECE9 !important;
  border-color: rgba(18, 62, 68, .28) !important;
}
.pdp-compat.is-match .pdp-compat-check { background: #123E44 !important; color: #E9D5A8 !important; }
.pdp-compat.is-mismatch {
  background: #FBF4E6 !important;
  border-color: rgba(134, 105, 47, .55) !important;
}
.pdp-compat.is-mismatch .pdp-compat-check { background: #86692F !important; }
.pdp-compat.is-mismatch .pdp-compat-check i::before { content: "!"; font-family: var(--k-display, 'Manrope', sans-serif); font-weight: 800; font-style: normal; }
.pdp-compat-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.pdp-compat-note[hidden] { display: none; }
.pdp-compat.is-match .pdp-compat-note { background: #123E44; color: #F6F4EF; }
.pdp-compat.is-mismatch .pdp-compat-note { background: #86692F; color: #FFFFFF; }
.pdp-reassure a.pdp-viber { color: #123E44; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pdp-reassure a.pdp-viber:hover { color: #1F5A61; }

/* Cart rows: the verdict as a small tag under the product name. */
.ck-cart-fit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 4px 0 2px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.ck-cart-fit::before {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}
.ck-cart-fit.is-fit { background: #E6ECE9; color: #123E44; }
.ck-cart-fit.is-fit::before { content: "✓"; background: #123E44; color: #E9D5A8; }
.ck-cart-fit.is-other { background: #FBF4E6; color: #6B5220; box-shadow: inset 0 0 0 1px rgba(134, 105, 47, .45); }
.ck-cart-fit.is-other::before { content: "!"; background: #86692F; color: #FFFFFF; }

/* Cart alert above the table. */
.ck-cart-fit-alert {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 18px 14px 52px;
  border-radius: 14px;
  background: #FBF4E6;
  box-shadow: inset 0 0 0 1px rgba(134, 105, 47, .5);
  color: #4A3A17;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}
.ck-cart-fit-alert[hidden] { display: none; }
.ck-cart-fit-alert::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #86692F;
  color: #FFFFFF;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-weight: 800;
  font-size: 14px;
}

/* Cart aside: a person to ask before ordering. */
.ck-cart-help {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(18, 62, 68, .14);
  color: #161A1B;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ck-cart-help:hover { box-shadow: inset 0 0 0 1px rgba(134, 105, 47, .6); transform: translateY(-1px); }
.ck-cart-help:focus-visible { outline: 2px solid #123E44; outline-offset: 3px; }
.ck-cart-help-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0B2B30;
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .55);
  color: #C8A86E;
  font-size: 18px;
}
.ck-cart-help-copy { display: flex; flex-direction: column; gap: 1px; }
.ck-cart-help-copy strong { font-size: 14px; font-weight: 700; }
.ck-cart-help-copy small { color: #5A615F; font-size: 12.5px; }

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-cart-help:hover { transform: none; }


/* Cart header chips: enough room for "Отваряш пратката при куриера". */
#cart-page-view .ck-cart-trust { gap: 10px; }
#cart-page-view .ck-cart-trust-item { padding-right: 16px !important; min-width: max-content; }
@media (max-width: 640px) {
  .ck-cart-fit { align-items: flex-start; border-radius: 8px; font-size: 11.5px; padding: 4px 8px; }
  .ck-cart-fit::before { flex: 0 0 auto; margin-top: 1px; }
  .ck-cart-fit-alert { font-size: 13.5px; }
}
/* On the cart page itself the floating mini-cart only repeats the page and
   covers its content on a phone. */
body:has(#cart-page-view[style*="display: block"]) .ck-floating-cart { display: none !important; }

/* Contrast fixes (pre-existing, found by the Phase 1 audit): small grey and
   green-on-green text in the cart and the compatibility label. */
#cart-page-view .ck-cart-avail { background: #E6ECE9 !important; color: #123E44 !important; }
#cart-page-view .ck-cart-avail i { color: #123E44 !important; }
#cart-page-view .ck-cart-avail.is-out { background: #F6F4EF !important; color: #5A615F !important; box-shadow: inset 0 0 0 1px #5A615F; }
#cart-page-view .ck-cart-avail.is-out i { color: #5A615F !important; }
#cart-page-view #ck-cart-ship-nums { color: #5A615F !important; }
#cart-page-view .ck-cart-pay > span { color: #4A514F !important; }
.pdp-compat-label { color: #5A615F !important; }


/* ==========================================================================
   CART LAYOUT — recommendations sit right under the products, beside the
   sticky summary, instead of after the whole page. On a phone the order is
   products, summary, recommendations.
   ========================================================================== */
#cart-page-view .ck-cart-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "main aside" "reco aside";
  row-gap: 28px;
}
#cart-page-view .ck-cart-main { grid-area: main; }
#cart-page-view .ck-cart-aside { grid-area: aside; align-self: start; }
#cart-page-view .ck-cart-reco { grid-area: reco; margin: 0 !important; padding: 28px 28px 30px !important; border-radius: 22px; }
#cart-page-view .ck-cart-reco-head { margin-bottom: 20px; align-items: flex-end; }
#cart-page-view .ck-cart-reco-title { font-size: clamp(24px, 2.4vw, 30px) !important; }
#cart-page-view #ck-cart-reco-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
@media (max-width: 980px) {
  #cart-page-view .ck-cart-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside" "reco"; }
}
@media (max-width: 640px) {
  #cart-page-view .ck-cart-reco { padding: 22px 0 22px 16px !important; border-radius: 18px; }
  #cart-page-view .ck-cart-reco-head { flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 16px; }
  #cart-page-view #ck-cart-reco-grid {
    display: flex !important;
    gap: 12px !important;
    padding: 4px 16px 8px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #cart-page-view #ck-cart-reco-grid::-webkit-scrollbar { display: none; }
  #cart-page-view #ck-cart-reco-grid > .product-card { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ==========================================================================
   THE ROAD TO FREE DELIVERY — a dark petrol band at the top of the cart. The
   fill is the road already travelled; a truck rides its front edge towards
   the gift at the threshold. Reached: the truck parks, the gift lights up.
   ========================================================================== */
#cart-page-view .ck-ship {
  position: relative;
  margin: 0 0 20px;
  padding: 22px 24px 24px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 22px;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(200, 168, 110, .18), transparent 60%),
    linear-gradient(150deg, #0B2B30, #123E44) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .35), 0 22px 50px rgba(11, 43, 48, .22);
  color: #F6F4EF;
}
.ck-ship-head { display: flex; align-items: center; gap: 14px; }
.ck-ship-medal,
.ck-ship-truck,
.ck-ship-goal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200, 168, 110, .25), rgba(11, 43, 48, 0) 70%), #0B2B30;
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .6), 0 6px 16px rgba(0, 0, 0, .3);
}
.ck-ship-medal { width: 50px; height: 50px; }
.ck-ship svg { fill: none; stroke: #C8A86E; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-ship svg .duo { fill: rgba(200, 168, 110, .18); stroke: none; }
.ck-ship svg .punch { fill: #0B2B30; stroke: none; }
.ck-ship-medal svg { width: 30px; height: 30px; }
.ck-ship-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ck-ship-kicker { color: #C8A86E; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
#cart-page-view .ck-ship-title {
  color: #F6F4EF;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
#cart-page-view .ck-ship .ck-cart-ship-nums {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(246, 244, 239, .08);
  color: rgba(246, 244, 239, .85) !important;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The road. */
.ck-ship-road { position: relative; margin: 22px 0 2px; padding-right: 30px; }
#cart-page-view .ck-ship .ck-cart-ship-bar {
  position: relative;
  height: 12px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(246, 244, 239, .10);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
/* Lane markings on the road still to travel. */
#cart-page-view .ck-ship .ck-cart-ship-bar::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(246, 244, 239, .28) 0 10px, transparent 10px 20px);
}
#cart-page-view .ck-ship .ck-cart-ship-fill {
  position: relative;
  min-width: 26px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #86692F, #B8955A 55%, #E9D5A8) !important;
  box-shadow: 0 0 18px rgba(200, 168, 110, .45);
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}
/* A slow sheen travelling along the gold. */
#cart-page-view .ck-ship .ck-cart-ship-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 235, .55) 50%, transparent 70%) no-repeat;
  background-size: 200% 100%;
  animation: ckRoadSheen 2.8s ease-in-out infinite;
}
@keyframes ckRoadSheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ck-ship-truck {
  position: absolute;
  right: -20px;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  animation: ckTruckBob 1.4s ease-in-out infinite;
}
.ck-ship-truck svg { width: 26px; height: 26px; }
@keyframes ckTruckBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.ck-ship-goal {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
}
.ck-ship-goal svg { width: 26px; height: 26px; }

/* Reached: the truck has arrived, the gift lights up. */
.ck-ship:has(.ck-cart-ship-fill[style*="width: 100%"]) .ck-ship-truck { opacity: 0; }
.ck-ship:has(.ck-cart-ship-fill[style*="width: 100%"]) .ck-ship-goal {
  background: linear-gradient(145deg, #E9D5A8, #B8955A);
  box-shadow: 0 0 0 6px rgba(200, 168, 110, .18), 0 0 28px rgba(233, 213, 168, .55);
  animation: ckGiftPop .7s cubic-bezier(.3, 1.6, .5, 1) both;
}
.ck-ship:has(.ck-cart-ship-fill[style*="width: 100%"]) .ck-ship-goal svg { stroke: #0B2B30; }
.ck-ship:has(.ck-cart-ship-fill[style*="width: 100%"]) .ck-ship-goal svg .duo { fill: rgba(11, 43, 48, .15); }
.ck-ship:has(.ck-cart-ship-fill[style*="width: 100%"]) .ck-ship-title { color: #E9D5A8; }
@keyframes ckGiftPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

/* The one product that closes the gap: a real, tappable offer card. */
#cart-page-view .ck-ship .ck-cart-ship-pick {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: #FBFAF7;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  color: #161A1B;
  animation: ckPickIn .6s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .25s ease, box-shadow .25s ease;
}
#cart-page-view .ck-ship .ck-cart-ship-pick[hidden] { display: none; }
#cart-page-view .ck-ship .ck-cart-ship-pick:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, .34); }
.ck-ship-pick-img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: #EEEBE4; transition: transform .4s ease; }
.ck-cart-ship-pick:hover .ck-ship-pick-img { transform: scale(1.05); }
.ck-ship-pick-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-ship-pick-copy small { color: #86692F; font-size: 12px; font-weight: 700; line-height: 1.3; }
.ck-ship-pick-copy strong {
  overflow: hidden;
  color: #161A1B;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ck-ship-pick-copy span { color: #123E44; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 19px; font-weight: 800; }
.ck-ship-pick-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #E9D5A8, #B8955A);
  box-shadow: 0 8px 20px rgba(134, 105, 47, .35);
  color: #0B2B30;
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: ckAddNudge 1s ease .9s 1 both;
}
.ck-ship-pick-add::before { content: "+"; font-size: 20px; font-weight: 700; line-height: 1; }
.ck-ship-pick-add:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 26px rgba(134, 105, 47, .45); }
.ck-ship-pick-add:focus-visible { outline: 2px solid #0B2B30; outline-offset: 3px; }
.ck-ship-pick-add:disabled { opacity: .6; cursor: default; transform: none; }
@keyframes ckPickIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ckAddNudge { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.08); } 55% { transform: scale(.97); } 75% { transform: scale(1.03); } }

@media (max-width: 640px) {
  #cart-page-view .ck-ship { padding: 18px 16px 18px; border-radius: 18px; }
  .ck-ship-head { flex-wrap: wrap; gap: 10px 12px; }
  .ck-ship-medal { width: 42px; height: 42px; }
  .ck-ship-medal svg { width: 24px; height: 24px; }
  #cart-page-view .ck-ship .ck-cart-ship-nums { order: 3; }
  #cart-page-view .ck-ship .ck-cart-ship-pick { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .ck-ship-pick-img { width: 64px; height: 64px; }
  .ck-ship-pick-add { grid-column: 1 / -1; justify-content: center; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm #cart-page-view .ck-ship .ck-cart-ship-fill { transition: none; }
  html.ck-calm #cart-page-view .ck-ship .ck-cart-ship-fill::after, html.ck-calm .ck-ship-truck, html.ck-calm .ck-ship-pick-add, html.ck-calm #cart-page-view .ck-ship .ck-cart-ship-pick { animation: none; }

#cart-page-view .ck-ship #ck-cart-ship-nums { color: rgba(246, 244, 239, .88) !important; }
@media (max-width: 640px) {
  .ck-ship-copy { flex: 1 1 calc(100% - 60px); }
  #cart-page-view .ck-ship .ck-cart-ship-nums { order: 3; margin-left: 54px; padding: 4px 10px; font-size: 12px; }
  #cart-page-view .ck-ship-title { font-size: 17px; }
}

/* ==========================================================================
   SALES PLAN · PHASE 2 — added-to-cart panel and delivery window
   ========================================================================== */

/* Delivery window lines. */
.pdp-eta[hidden], .ck-cart-eta[hidden] { display: none !important; }
.pdp-eta { color: #123E44 !important; font-weight: 700; }
.pdp-eta i { color: #86692F !important; }
#cart-page-view .ck-cart-eta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(246, 244, 239, .08);
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .3);
  color: #F6F4EF;
  font-size: 13.5px;
  font-weight: 600;
}
#cart-page-view .ck-cart-eta::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A86E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
}

/* The panel: closed = not rendered at all. */
.ck-added:not(.is-open) { display: none; }
.ck-added {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
}
.ck-added-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 24, 27, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ckFadeIn .3s ease both;
}
.ck-added-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(460px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 28px 26px 24px;
  background: #F6F4EF;
  box-shadow: -24px 0 60px rgba(6, 24, 27, .35);
  animation: ckSheetIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
.ck-added-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #161A1B;
  cursor: pointer;
}
.ck-added-close:hover { background: #E6ECE9; }
.ck-added-close .ck-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ck-added-head { display: flex; align-items: center; gap: 12px; padding-right: 48px; }
.ck-added-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #123E44;
  box-shadow: 0 0 0 5px rgba(18, 62, 68, .12);
  animation: ckGiftPop .6s cubic-bezier(.3, 1.6, .5, 1) .1s both;
}
.ck-added-check svg { width: 24px; height: 24px; fill: none; stroke: #E9D5A8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ckCheckDraw .45s ease .45s forwards; }
@keyframes ckCheckDraw { to { stroke-dashoffset: 0; } }
.ck-added-title { margin: 0; color: #0B2B30; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

.ck-added-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(18, 62, 68, .10), 0 10px 26px rgba(11, 43, 48, .08);
}
.ck-added-img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: #EEEBE4; }
.ck-added-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-added-name { color: #161A1B; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ck-added-meta { color: #5A615F; font-size: 13px; }

.ck-added-reco[hidden] { display: none; }
.ck-added-reco { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(18, 62, 68, .10); }
.ck-added-reco-title { margin: 8px 0 0; color: #0B2B30; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 18px; font-weight: 800; }
.ck-added-reco-sub { margin: -4px 0 4px; color: #5A615F; font-size: 13px; }
.ck-added-grid { display: flex; flex-direction: column; gap: 10px; }
.ck-added-offer {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 10px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(134, 105, 47, .22);
  animation: ckPickIn .5s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ck-added-offer:nth-child(2) { animation-delay: .08s; }
.ck-added-offer:nth-child(3) { animation-delay: .16s; }
.ck-added-offer:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(134, 105, 47, .5), 0 8px 20px rgba(11, 43, 48, .08); }
.ck-added-offer-img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #EEEBE4; }
.ck-added-offer-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-added-offer-name { overflow: hidden; color: #161A1B; font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-added-offer-price { color: #123E44; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 15px; font-weight: 800; }
.ck-added-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #E9D5A8, #B8955A);
  color: #0B2B30;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.ck-added-add::before { content: "+"; font-size: 18px; line-height: 1; }
.ck-added-add:hover { transform: scale(1.04); }
.ck-added-add:focus-visible, .ck-added-go:focus-visible, .ck-added-continue:focus-visible, .ck-added-close:focus-visible { outline: 2px solid #123E44; outline-offset: 3px; }
.ck-added-offer.is-added { box-shadow: inset 0 0 0 1.5px #123E44; }
.ck-added-offer.is-added .ck-added-add { background: #123E44; color: #E9D5A8; cursor: default; transform: none; }
.ck-added-offer.is-added .ck-added-add::before { content: "✓"; font-size: 14px; }

.ck-added-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.ck-added-go {
  min-height: 52px;
  border: 0;
  border-radius: 26px;
  background: #123E44;
  color: #F6F4EF;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease;
}
.ck-added-go:hover { background: #1F5A61; }
.ck-added-continue {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #123E44;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@keyframes ckFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckSheetIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ckSheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* Phone: a bottom sheet. */
@media (max-width: 640px) {
  .ck-added { align-items: flex-end; }
  .ck-added-sheet {
    width: 100%;
    height: auto;
    max-height: 88vh;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 50px rgba(6, 24, 27, .35);
    animation-name: ckSheetUp;
  }
  .ck-added-title { font-size: 19px; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-added-backdrop, html.ck-calm .ck-added-sheet, html.ck-calm .ck-added-check, html.ck-calm .ck-added-offer { animation: none; }
  html.ck-calm .ck-added-check svg { animation: none; stroke-dashoffset: 0; }


/* Checkout add-on (measure 7): one optional product, unticked by default. */
.ck-bump[hidden] { display: none; }
.ck-bump { margin: -0.5rem 0 1.5rem; }
.ck-bump-card {
  position: relative;
  display: grid;
  grid-template-columns: 26px 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FBF4E6;
  box-shadow: inset 0 0 0 1.5px rgba(184, 149, 90, .55);
  cursor: pointer;
  transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
  animation: ckPickIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
.ck-bump-card:hover { box-shadow: inset 0 0 0 1.5px #B8955A, 0 8px 20px rgba(134, 105, 47, .15); transform: translateY(-1px); }
.ck-bump-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-bump-box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #86692F;
  transition: background .2s ease, box-shadow .2s ease;
}
.ck-bump-box::after {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-left: 2.5px solid #E9D5A8;
  border-bottom: 2.5px solid #E9D5A8;
  transform: rotate(-45deg) scale(0);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.ck-bump-check:checked + .ck-bump-box { background: #123E44; box-shadow: none; }
.ck-bump-check:checked + .ck-bump-box::after { transform: rotate(-45deg) scale(1); }
.ck-bump-check:focus-visible + .ck-bump-box { outline: 2px solid #123E44; outline-offset: 3px; }
.ck-bump-card:has(.ck-bump-check:checked) { background: #E6ECE9; box-shadow: inset 0 0 0 1.5px #123E44; }
.ck-bump-card:has(.ck-bump-check:disabled) { opacity: .7; cursor: progress; }
.ck-bump-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #EEEBE4; }
.ck-bump-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-bump-copy small { color: #86692F; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.ck-bump-copy strong { overflow: hidden; color: #161A1B; font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-bump-meta { color: #123E44; font-size: 12.5px; font-weight: 700; }
/* reduce-motion opt-out (html.ck-calm) */ html.ck-calm .ck-bump-card { animation: none; } html.ck-calm .ck-bump-card:hover { transform: none; } 
/* Checkout summary labels: the muted grey was under 4.5:1 (pre-existing). */
#checkout-page-view .checkout-summary-panel [style*="color: var(--text-muted)"] { color: #5A615F !important; }
#checkout-page-view .checkout-summary-panel [style*="color: var(--gold)"] { color: #123E44 !important; }

/* Minimum order notice in the cart summary (15 € B2C / 50 € B2B). */
#cart-page-view .ck-cart-min[hidden] { display: none; }
#cart-page-view .ck-cart-min {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(233, 213, 168, .12);
  box-shadow: inset 0 0 0 1px rgba(200, 168, 110, .55);
  color: #F6F4EF;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}
#cart-page-view .ck-cart-min::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #C8A86E;
  color: #0B2B30;
  font-weight: 800;
  font-size: 12px;
}
#cart-page-view .ck-cart-checkout-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); transform: none; }

/* "Land on free delivery" (40–42 €): the closing product is marked. */
#cart-page-view .ck-ship .ck-cart-ship-pick.is-in-band { box-shadow: 0 0 0 2px #E9D5A8, 0 14px 34px rgba(0, 0, 0, .28); }
#cart-page-view .ck-ship .ck-cart-ship-pick.is-in-band .ck-ship-pick-copy small { color: #123E44; }
.ck-added-offer.is-gap { background: #FBF4E6; box-shadow: inset 0 0 0 1.5px #B8955A, 0 8px 20px rgba(134, 105, 47, .14); }
.ck-added-offer-note {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  line-height: 1.35;
  background: #123E44;
  color: #E9D5A8;
  font-size: 11.5px;
  font-weight: 700;
}

/* ==========================================================================
   Royal crest logo (approved 2026-09-29) and the header row around it.
   The row holds the mark, five departments, "Моят телефон" and three icon
   buttons; below 1200px the departments no longer fit beside the phone
   button (they overflowed from 1011px up), so they move into the drawer
   there, exactly as they already do at 1010px and below.
   ========================================================================== */
@media (min-width: 1200px) {
  .ck-brand-board-logo { height: clamp(52px, 4.6vw, 72px); }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  .desktop-category-nav { display: none; }
  .ck-nav-toggle { display: inline-grid; }
  .ck-header-main { gap: 12px; }
  .ck-header-lead { gap: 11px; }
  .ck-brand-board-logo { height: 56px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .ck-header-main { column-gap: 16px; }
  .desktop-category-nav { gap: clamp(14px, 1.5vw, 22px); }
  .desktop-category-nav a { font-size: 13.5px; }
}
.ck-footer-logo img { height: 68px; }
@media (max-width: 620px) {
  .ck-footer-logo img { height: 56px; }
}

button.ck-footer-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
button.ck-footer-link:focus-visible { outline: 2px solid #C8A86E; outline-offset: 3px; border-radius: 3px; }

/* ==========================================================================
   Order confirmation - "Благодарим за поръчката" (Phase 3, 2026-09-29)
   A full page over the shop: seal + number, then what happens next beside
   what was ordered, then help. One moment of motion: the seal draws itself.
   ========================================================================== */
.success-overlay.ck-thanks {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, #F6F4EF 55%, #EEEBE4 100%) !important;
  z-index: 400;
}
.ck-thanks-page {
  box-sizing: border-box;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 40px) 48px;
  color: #161A1B;
  font-family: var(--k-body, 'Inter', sans-serif);
  transform: translateY(18px);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.success-overlay.ck-thanks.active .ck-thanks-page { transform: none; }

.ck-thanks-top { display: flex; justify-content: center; }
.ck-thanks-logo { height: 52px; width: auto; }

.ck-thanks-hero { text-align: center; padding: clamp(18px, 3vw, 30px) 0 clamp(22px, 3vw, 34px); }
.ck-thanks-seal { width: 92px; height: 92px; display: block; margin: 0 auto 16px; overflow: visible; }
.ck-thanks-ring { fill: none; stroke: #C8A86E; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ck-thanks-disc { fill: #123E44; }
.ck-thanks-tick { fill: none; stroke: #E9D5A8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.success-overlay.ck-thanks.active .ck-thanks-ring { animation: ck-thanks-draw .9s cubic-bezier(.65, 0, .35, 1) both; }
.success-overlay.ck-thanks.active .ck-thanks-disc { animation: ck-thanks-pop .5s cubic-bezier(.34, 1.56, .64, 1) .15s both; transform-origin: 48px 48px; }
.success-overlay.ck-thanks.active .ck-thanks-tick { animation: ck-thanks-draw .45s cubic-bezier(.65, 0, .35, 1) .55s both; }
@keyframes ck-thanks-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ck-thanks-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ck-thanks-title {
  margin: 0 0 18px;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #0B2B30;
  outline: none;
}
.ck-thanks-lead { margin: 0 0 8px; font-size: 14px; color: #5A615F; }
.ck-thanks-number { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ck-thanks .order-number {
  display: inline-block;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1.5px dashed #B8955A !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #123E44 !important;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  user-select: all;
}
.ck-thanks-copy {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(18, 62, 68, .22);
  border-radius: 12px;
  background: transparent;
  color: #123E44;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.ck-thanks-copy:hover { background: #FFFFFF; border-color: #123E44; }
.ck-thanks-copy:focus-visible { outline: 2px solid #123E44; outline-offset: 3px; }
.ck-thanks-hint { margin: 10px 0 0; font-size: 13px; color: #5A615F; }

.ck-thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.ck-thanks-card {
  box-sizing: border-box;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(18, 62, 68, .10);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(11, 43, 48, .07);
}
.ck-thanks-card-title {
  margin: 0 0 16px;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #123E44;
}

/* What happens next: a real sequence, so a numbered rail */
.ck-thanks-steps { list-style: none; margin: 0; padding: 0; counter-reset: ck-step; }
.ck-thanks-step {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 0 0 20px 46px;
  counter-increment: ck-step;
}
.ck-thanks-step:last-child { padding-bottom: 0; }
.ck-thanks-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(#C8A86E, rgba(200, 168, 110, .25));
}
.ck-thanks-step:last-child::before { display: none; }
.ck-thanks-step-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #123E44;
  box-shadow: 0 0 0 4px #F6F4EF;
}
.ck-thanks-step-dot::after {
  content: counter(ck-step);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #E9D5A8;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 14px;
  font-weight: 800;
}
.ck-thanks-step strong { font-size: 15.5px; color: #161A1B; line-height: 1.3; padding-top: 5px; }
.ck-thanks-step span:not(.ck-thanks-step-dot) { font-size: 14px; line-height: 1.5; color: #5A615F; }
#ck-thanks-eta { color: #123E44; font-weight: 650; }

/* The order */
.ck-thanks-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ck-thanks-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ck-thanks-item-img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; background: #EEEBE4; }
.ck-thanks-item-copy { display: grid; gap: 2px; min-width: 0; }
.ck-thanks-item-copy strong { font-size: 14px; font-weight: 650; line-height: 1.3; color: #161A1B; overflow-wrap: anywhere; }
.ck-thanks-item-copy span { font-size: 13px; color: #5A615F; }
.ck-thanks-item-sum { font-size: 14px; font-weight: 700; color: #123E44; white-space: nowrap; }
.ck-thanks-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(18, 62, 68, .18);
  font-size: 14px;
}
.ck-thanks-totals dt { color: #5A615F; }
.ck-thanks-totals dd { margin: 0; text-align: right; color: #161A1B; font-weight: 600; }
.ck-thanks-totals .is-total { padding-top: 8px; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 18px; font-weight: 800; color: #0B2B30; }

/* Help */
.ck-thanks-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 18px clamp(18px, 2.4vw, 26px);
  border-radius: 20px;
  background: radial-gradient(circle at 10% 0%, rgba(200, 168, 110, .18), transparent 50%), #0B2B30;
  color: #E6ECE9;
}
.ck-thanks-help-copy { display: grid; gap: 2px; }
.ck-thanks-help-copy strong { font-family: var(--k-display, 'Manrope', sans-serif); font-size: 17px; color: #FFFFFF; }
.ck-thanks-help-copy span { font-size: 14px; color: rgba(230, 236, 233, .82); }
.ck-thanks-help-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-thanks-help-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.ck-thanks-viber { background: #C8A86E; color: #0B2B30 !important; }
.ck-thanks-viber:hover { background: #E9D5A8; }
.ck-thanks-phone { border: 1px solid rgba(200, 168, 110, .55); color: #F6F4EF !important; }
.ck-thanks-phone:hover { border-color: #C8A86E; background: rgba(255, 255, 255, .06); }
.ck-thanks-help-actions a:focus-visible { outline: 2px solid #E9D5A8; outline-offset: 3px; }

.ck-thanks-continue {
  display: block;
  width: min(420px, 100%);
  min-height: 52px;
  margin: 26px auto 0;
  border: 0;
  border-radius: 14px;
  background: #123E44;
  color: #F6F4EF;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  transition: background .2s ease;
}
.ck-thanks-continue:hover { background: #1F5A61; }
.ck-thanks-continue:focus-visible { outline: 2px solid #86692F; outline-offset: 3px; }

@media (max-width: 760px) {
  .ck-thanks-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-thanks-logo { height: 44px; }
  .ck-thanks-help { flex-direction: column; align-items: stretch; }
  .ck-thanks-help-actions a { flex: 1 1 auto; justify-content: center; }
}
/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-thanks-page { transform: none; transition: none; }
  html.ck-calm .success-overlay.ck-thanks.active .ck-thanks-ring, html.ck-calm .success-overlay.ck-thanks.active .ck-thanks-disc, html.ck-calm .success-overlay.ck-thanks.active .ck-thanks-tick { animation: none; }


/* ==========================================================================
   All categories page (/aksesoari) - redesign 2026-09-29
   A deep petrol hero with jump chips, then the categories grouped by need.
   Every card is a real link with its name always visible.
   ========================================================================== */
#categories-page-view.ck-catx { background: #F6F4EF; }
.ck-catx-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 5vw, 60px);
  background:
    radial-gradient(60% 120% at 88% 0%, rgba(200, 168, 110, .22), transparent 60%),
    radial-gradient(40% 80% at 0% 100%, rgba(31, 90, 97, .55), transparent 70%),
    #0B2B30;
  color: #F6F4EF;
}
.ck-catx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(200, 168, 110, .06) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  pointer-events: none;
}
.ck-catx-hero-inner { position: relative; z-index: 1; }
.ck-catx-title {
  margin: 0;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(34px, 5vw, 58px) !important;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #F6F4EF !important;
}
.ck-catx-lead {
  max-width: 560px;
  margin: 14px 0 0 !important;
  font-size: clamp(15px, 1.4vw, 17px) !important;
  line-height: 1.55;
  color: rgba(230, 236, 233, .86) !important;
}
.ck-catx-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3vw, 32px); }
.ck-catx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(200, 168, 110, .55);
  border-radius: 999px;
  color: #F6F4EF !important;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ck-catx-chip:hover { background: #C8A86E; border-color: #C8A86E; color: #0B2B30 !important; }
.ck-catx-chip:focus-visible { outline: 2px solid #E9D5A8; outline-offset: 3px; }

.ck-catx-body { padding-top: clamp(34px, 4vw, 56px) !important; padding-bottom: clamp(48px, 6vw, 88px) !important; }
.ck-catx-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.ck-catx-group { scroll-margin-top: 110px; }
.ck-catx-grouphead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 149, 90, .35);
}
.ck-catx-grouphead h2 {
  margin: 0;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.015em;
  color: #123E44;
}
.ck-catx-grouphead p { margin: 0; font-size: 15px; color: #5A615F; }

/* auto-fill, not auto-fit: a group with one tile (Таблети и лаптопи, Други)
   keeps the column width instead of stretching to the whole row (owner, 2026-10-15). */
.ck-catx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.ck-catx-group.is-featured .ck-catx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ck-catx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(18, 62, 68, .10);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 14px 36px rgba(11, 43, 48, .07);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .25s ease;
}
.ck-catx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(11, 43, 48, .14); border-color: rgba(184, 149, 90, .55); }
.ck-catx-card:focus-visible { outline: 3px solid #86692F; outline-offset: 3px; }
.ck-catx-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0B2B30; }
.ck-catx-card.is-featured .ck-catx-media { aspect-ratio: 16 / 9; }
.ck-catx-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.ck-catx-card:hover .ck-catx-media img { transform: scale(1.05); }
.ck-catx-cardbody { display: grid; gap: 4px; padding: 16px 18px 18px; flex: 1; align-content: start; }
.ck-catx-cardtitle {
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: #161A1B;
}
.ck-catx-card.is-featured .ck-catx-cardtitle { font-size: clamp(20px, 2vw, 24px); }
.ck-catx-cardsub { font-size: 14px; line-height: 1.45; color: #5A615F; }
.ck-catx-cardmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #86692F;
}
.ck-catx-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #123E44;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), background .2s ease;
}
.ck-catx-arrow .ck-icon { width: 16px; height: 16px; fill: none; stroke: #E9D5A8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-catx-card:hover .ck-catx-arrow { transform: translateX(4px); background: #1F5A61; }

@media (max-width: 640px) {
  .ck-catx-group.is-featured .ck-catx-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-catx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ck-catx-cardbody { padding: 12px 12px 14px; }
  .ck-catx-cardtitle { font-size: 15.5px; }
  .ck-catx-cardsub { display: none; }
  .ck-catx-card.is-featured .ck-catx-cardsub { display: block; }
  .ck-catx-arrow { width: 30px; height: 30px; }
  .ck-catx-chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
}

/* ==========================================================================
   Category page hero - same deep petrol band as "Всички категории", so the
   catalogue reads as one place. The section no longer starts with an empty
   band of section padding above its own hero.
   ========================================================================== */
#category-detail-view.category-detail-section { padding-top: 0 !important; }
#category-detail-view .category-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.4vw, 44px) 0 clamp(26px, 3.4vw, 40px) !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(60% 140% at 90% 0%, rgba(200, 168, 110, .22), transparent 60%),
    radial-gradient(40% 90% at 0% 100%, rgba(31, 90, 97, .55), transparent 70%),
    #0B2B30 !important;
}
#category-detail-view .category-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block !important;
  background: repeating-linear-gradient(115deg, rgba(200, 168, 110, .06) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
  pointer-events: none;
}
#category-detail-view .category-detail-hero .container { position: relative; z-index: 1; display: block !important; }
#category-detail-view .category-detail-hero .btn-secondary {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 18px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(200, 168, 110, .55) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #F6F4EF !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#category-detail-view .category-detail-hero .btn-secondary:hover { background: #C8A86E !important; border-color: #C8A86E !important; color: #0B2B30 !important; }
#category-detail-view .category-detail-hero .btn-secondary:focus-visible { outline: 2px solid #E9D5A8; outline-offset: 3px; }
#category-detail-view .category-detail-hero .ck-eyebrow {
  display: block;
  margin: 0 0 6px;
  color: #C8A86E !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
#category-detail-view .category-detail-hero h1 {
  color: #F6F4EF !important;
  font-family: var(--k-display, 'Manrope', sans-serif);
  font-size: clamp(30px, 4.2vw, 50px) !important;
}
#category-detail-view #category-detail-desc {
  display: block;
  max-width: 62ch !important;
  margin: 10px 0 0 !important;
  font-size: 15px !important;
  color: rgba(230, 236, 233, .86) !important;
}
#category-detail-view #category-detail-product-count {
  margin-top: 16px !important;
  padding: 6px 14px;
  border: 1px solid rgba(200, 168, 110, .55) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #E9D5A8 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em !important;
}
#category-detail-view #category-detail-product-count:empty { display: none; }

/* About / Contacts: the small copy inside the beige cards was below 4.5:1. */
.legal-page-section p[style*="text-muted"], .legal-page-section span[style*="text-muted"] { color: #4A5250 !important; }

/* Cart rows on phones: the product gets the full row width (the name wrapped
   into a narrow column beside the quantity box); delete sits in its corner. */
@media (max-width: 680px) {
  #cart-page-view .ck-cart-row { position: relative; grid-template-areas: "prod prod" "price qty" "line qty"; }
  #cart-page-view .ck-cart-del { position: absolute; top: 10px; right: 4px; }
  #cart-page-view .ck-cart-prod-info { padding-right: 40px; }
  #cart-page-view .ck-cart-fit { width: fit-content; }
}
#cart-page-view .ck-pay-badge { display: inline-flex; align-items: center; gap: 8px; }
#cart-page-view .ck-pay-badge i { color: #86692F; }

/* ==========================================================================
   Phone hero, v2 (2026-09-29) - desktop untouched.
   The hero artworks are wide 2048x768 banners with the brand row along the
   bottom. Covering a portrait box with them cut the products and the logos
   off, and the copy sat on top of the busiest part of the picture. On phones
   the whole banner is now shown uncut, and the copy sits under it on the
   deep petrol ground. The slides stack in one grid cell, so the hero is as
   tall as its longest slide and nothing jumps between slides.
   ========================================================================== */
@media (max-width: 760px) {
  #storefront-home-view #hero-section .ck-hero-slides { display: grid; height: auto; background: #0B2B30; }
  #storefront-home-view #hero-section .ck-hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
  }
  #storefront-home-view #hero-section .ck-hero-slide-media {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    aspect-ratio: 2048 / 768;
    background: #0B2B30;
  }
  #storefront-home-view #hero-section .ck-hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
  }
  #storefront-home-view #hero-section .ck-hero-scrim {
    background: linear-gradient(0deg, #0B2B30 0%, rgba(11, 43, 48, 0) 22%) !important;
  }
  #storefront-home-view #hero-section .ck-hero-slide .ck-hero-slide-inner {
    position: relative !important;
    inset: auto;
    flex: 1 1 auto;
    display: block;
    padding: 0;
    background: #0B2B30;
  }
  #storefront-home-view #hero-section .ck-hero-slide .ck-hero-copy { padding: 18px 20px 40px !important; }
  #storefront-home-view #hero-section .ck-hero-headline { font-size: clamp(26px, 7.4vw, 31px) !important; }
  #storefront-home-view #hero-section .ck-hero-subtext {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    margin-bottom: 16px;
  }
  /* The light sweep crosses the picture band only. */
  #storefront-home-view #hero-section .ck-hero-sweep { max-height: 42vw; }
}
/* Phones: the logo gives the header icons room. */
@media (max-width: 440px) {
  .ck-brand-board-logo { height: 42px !important; }
  .ck-header-lead { gap: 8px !important; }
  #storefront-home-view #hero-section .ck-finder-select-wrap select { padding-right: 30px; text-overflow: ellipsis; }
}

/* ==========================================================================
   Free-delivery pair (one product in the cart -> two more, 40-42 €)
   ========================================================================== */
#cart-page-view .ck-ship .ck-cart-ship-pick.is-bundle {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  padding: 14px 16px;
}
.ck-ship-bundle-lead { grid-column: 1 / -1; color: #86692F; font-size: 13px; font-weight: 800; line-height: 1.35; }
.ck-ship-bundle-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ck-ship-bundle-items li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(18, 62, 68, .10);
  border-radius: 12px;
  background: #FFFFFF;
}
.ck-ship-bundle-items img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #EEEBE4; }
.ck-ship-bundle-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-ship-bundle-copy small { color: #5A615F; font-size: 11.5px; font-weight: 700; }
.ck-ship-bundle-copy strong {
  overflow: hidden;
  color: #161A1B;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ck-ship-bundle-copy span { color: #123E44; font-family: var(--k-display, 'Manrope', sans-serif); font-size: 16px; font-weight: 800; }
.ck-ship-bundle-add { align-self: center; white-space: nowrap; }
@media (max-width: 760px) {
  #cart-page-view .ck-ship .ck-cart-ship-pick.is-bundle { grid-template-columns: minmax(0, 1fr); }
  .ck-ship-bundle-items { grid-template-columns: minmax(0, 1fr); }
  .ck-ship-bundle-add { width: 100%; justify-content: center; }
}

/* The same pair in the "Добавено в количката" panel. */
.ck-added-bundle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #123E44, #0B2B30);
  color: #F6F4EF;
}
.ck-added-bundle-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.ck-added-bundle-copy strong { color: #E9D5A8; font-size: 13px; font-weight: 800; }
.ck-added-bundle-copy span { font-size: 13.5px; line-height: 1.4; color: rgba(246, 244, 239, .92); }
.ck-added-bundle-add {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #E9D5A8, #C8A86E);
  color: #0B2B30;
  font: 700 14px 'Inter', sans-serif;
  cursor: pointer;
}
.ck-added-bundle-add:hover { background: #E9D5A8; }
.ck-added-bundle-add:focus-visible { outline: 2px solid #E9D5A8; outline-offset: 3px; }
.ck-added-bundle.is-done .ck-added-bundle-add { background: #E6ECE9; cursor: default; }
.ck-added-offer .ck-added-offer-note:first-child { margin: 0 0 2px; padding: 2px 8px; }

/* Device row: the reset sits where "Смени телефона" was (owner, 2026-10-02). */
#storefront-home-view #hero-section .ck-device-context-reset { display: inline-flex; align-items: center; gap: 8px; }
#storefront-home-view #hero-section .ck-device-context-reset .ck-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Phone chosen: the category tiles and brand campaigns filter the list below
   them. The picked one keeps a champagne ring, the others step back. */
#storefront-home-view #categories-grid.has-selection .ck-cat-card:not(.is-selected),
#storefront-home-view .brand-campaign-grid.has-selection .brand-campaign-card:not(.is-selected) { opacity: .5; filter: saturate(.7); }
#storefront-home-view #categories-grid .ck-cat-card,
#storefront-home-view .brand-campaign-card { transition: opacity .2s ease, filter .2s ease, box-shadow .2s ease, transform .2s ease; }
#storefront-home-view #categories-grid .ck-cat-card.is-selected,
#storefront-home-view .brand-campaign-card.is-selected { box-shadow: 0 0 0 2px #B8955A, 0 0 0 6px rgba(184, 149, 90, .22), 0 18px 40px rgba(11, 43, 48, .18) !important; transform: translateY(-2px); }
#storefront-home-view #categories-grid .ck-cat-card.is-selected .ck-cat-arrow { background: #B8955A !important; color: #0B2B30 !important; }

.ck-home-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ck-home-filters[hidden] { display: none; }
.ck-home-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 14px;
  border: 1px solid rgba(184, 149, 90, .55); border-radius: 999px; background: #fff; color: #123E44;
  font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ck-home-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ck-home-chip:hover { background: #123E44; color: #fff; border-color: #123E44; }
.ck-home-chip.is-all { border-color: transparent; background: transparent; color: #86692F; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
.ck-home-chip.is-all:hover { background: transparent; color: #123E44; }
.ck-home-chip:focus-visible { outline: 3px solid rgba(18, 62, 68, .35); outline-offset: 2px; }

/* ==========================================================================
   Header row fits again (owner report 2026-10-16: the departments ran under
   the logo and the phone button). The nav now has seven links, and its gap
   grew to 34px on wide screens while the container stops growing at ~1360px,
   so the links outgrew their column at 1200px and from 1440px up. The gap now
   scales with the viewport and stays inside the column at every width.
   ========================================================================== */
@media (min-width: 1440px) {
  .desktop-category-nav { gap: clamp(14px, 1vw, 18px); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .desktop-category-nav { gap: clamp(12px, 1.05vw, 15px); }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .desktop-category-nav { gap: 12px; }
  .desktop-category-nav a { font-size: 13px; }
}

/* Recommended products outside the grid open in Quick View (owner,
   2026-10-19): picture and name are the trigger, the add button stays apart. */
.ck-ql-target { cursor: pointer; }
.ck-ql-target:focus-visible { outline: 2px solid #B8955A; outline-offset: 3px; border-radius: 10px; }
.ck-ql-target:hover strong,
.ck-ql-target:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
img.ck-ql-target { transition: transform .2s ease; }
img.ck-ql-target:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { img.ck-ql-target:hover { transform: none; } }