/* ==========================================================================
   CaseKing — pre-launch polish (2026-10-03)
   --------------------------------------------------------------------------
   Loaded last. Palette "Дълбок петрол" only. Each block names the defect it
   fixes or the moment it adds; motion lives with ck-polish.js. Nothing here
   touches prices, the cart or the checkout logic.
   ========================================================================== */

:root {
  --pl-bone: #F6F4EF;
  --pl-mist: #E6ECE9;
  --pl-petrol: #123E44;
  --pl-deep: #0B2B30;
  --pl-soft: #1F5A61;
  --pl-champ: #B8955A;
  --pl-champ-l: #C8A86E;
  --pl-gold: #86692F;
  --pl-ink: #161A1B;
  --pl-muted: #5A615F;
  --pl-line: rgba(18, 62, 68, .12);
  --pl-ease: cubic-bezier(.22, .61, .36, 1);
  --pl-ease-out: cubic-bezier(.16, .84, .3, 1);
}

/* --- 1. Header: actually stays with the visitor ---------------------------
   #site-header was sticky inside .ck-top-shell, which is only as tall as the
   header, so it scrolled away with the page. The shell itself now sticks; it
   slides out of the way while the visitor reads down the page and returns
   the moment they scroll up (ck-polish.js toggles .ck-shell-away). It keeps
   its place in the flow, so nothing below it moves. */
.ck-top-shell {
  position: sticky !important;
  top: 0;
  transition: transform .42s var(--pl-ease-out);
  will-change: transform;
}
html.ck-shell-away .ck-top-shell { transform: translateY(calc(-100% - 4px)); }
html.ck-shell-floating:not(.ck-shell-away) #site-header .ck-header-surface { box-shadow: 0 14px 34px rgba(11, 43, 48, .12); }
/* An upward scroll to a section (the catalogue, a category) must not land
   under the header that the same scroll brings back. */
html { scroll-padding-top: 104px; }
@media (max-width: 760px) { html { scroll-padding-top: 148px; } }

/* --- 2. Product photos on the PDP -----------------------------------------
   The well faded from #fff to #fdfbf8, and every catalogue photo is a JPEG on
   pure white, so each picture sat in a visible off-white box. Pure white
   lets the photo's own background become the well. */
.pdp-stage { background: #fff !important; }

/* --- 2b. "Повече от защита" photo on phones -------------------------------
   Below 861px the hidden state (clip from the bottom) was declared after the
   revealed one with the same specificity, so it won: the photo never appeared
   on a phone, leaving an empty petrol block above the copy. */
@media (max-width: 860px) {
  .ck-about-card.is-armed.is-in .ck-about-media { clip-path: inset(0 0 0 0); }
}

/* Inactive PDP tabs were #6B7371 on #F8F5F0 (4.3:1, below WCAG AA). */
.ck-pdp-tab:not(.active) { color: var(--pl-muted) !important; }
.ck-pdp-tab:not(.active):hover { color: var(--pl-ink) !important; }

/* --- 3. Missing product photo ---------------------------------------------
   The fallback is the full CaseKing logo stretched across the photo well. A
   quiet monogram on mist reads as "photo coming", not as a product. */
.product-card img.product-img[src$="/assets/logo.webp"],
.cart-item-img[src$="/assets/logo.webp"],
.ck-cart-thumb img[src$="/assets/logo.webp"] {
  object-fit: contain !important;
  padding: 22% !important;
  background: var(--pl-mist) !important;
  opacity: .7;
  filter: saturate(.6);
}

/* --- 4. Checkout ------------------------------------------------------------ */
/* The intro heading inherited a 1.65 line height: three lines of a 34px
   headline stood 56px apart on a phone. */
#checkout-page-view .ck-checkout-intro h1 { line-height: 1.08 !important; text-wrap: balance; }
@media (max-width: 640px) {
  #checkout-page-view .ck-checkout-intro h1 { font-size: 30px !important; }
}
/* The floating cart repeats the order summary that is already on screen,
   and on a phone it covered the order button. */
html[data-ck-view="checkout-page-view"] .ck-floating-cart,
html[data-ck-view="cart-page-view"] .ck-floating-cart { display: none !important; }
/* Choosing office or address is felt: the card settles into its selected
   state instead of switching instantly. */
.ck-delivery-option { transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease, transform .2s ease; }
.ck-delivery-option:active { transform: scale(.995); }
.ck-delivery-option input[type="radio"] { transition: box-shadow .25s ease; }
/* Amounts never break away from their € sign. */
.ck-delivery-price { white-space: nowrap; }

/* Minimum-order notice: in the shop's palette, with the amount still missing
   leading. It was a red error box before the visitor had done anything. */
.ck-min-note {
  position: relative;
  margin-top: 1.5rem;
  padding: 16px 18px 16px 52px;
  border: 1px solid rgba(184, 149, 90, .45);
  border-radius: 14px;
  background: linear-gradient(135deg, #FBF7EE, #F4EEE1);
  color: var(--pl-ink);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: left;
}
.ck-min-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pl-champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B30' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ck-min-note-lead { display: block; margin-bottom: 4px; font: 800 15px/1.3 Manrope, Inter, sans-serif; color: var(--pl-petrol); }
.ck-min-note-lead b { color: var(--pl-gold); white-space: nowrap; }
.ck-min-note-bar { display: block; height: 4px; margin: 10px 0 2px; border-radius: 4px; background: rgba(18, 62, 68, .1); overflow: hidden; }
.ck-min-note-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pl-champ), var(--pl-champ-l)); transform-origin: left; transition: transform .6s var(--pl-ease-out); }

/* Totals acknowledge a change (shipping method, an added extra). */
.ck-tick { animation: ckTick .55s var(--pl-ease-out); }
@keyframes ckTick {
  0% { transform: translateY(6px); opacity: .25; }
  60% { color: var(--pl-gold); }
  100% { transform: none; opacity: 1; }
}

/* --- 5. Floating controls on a phone ---------------------------------------
   The back-to-top button sat over prices and the totals line on every long
   page. On a phone it now only appears while the visitor scrolls back up
   (ck-to-top.js), and it is a touch smaller. */
@media (max-width: 760px) {
  .ck-to-top { width: 46px !important; height: 46px !important; }
}
/* Desktop: the footer's last line keeps clear of the button. */
@media (min-width: 761px) {
  #footer .ck-footer-bottom-inner { padding-right: 76px; }
}

/* --- 6. Home FAQ ------------------------------------------------------------
   A bare heading floating between two shadowed bands. Now it reads as one of
   the home page's sections: kicker, title and a way to ask, beside the list. */
.ck-faq-band {
  background: linear-gradient(180deg, var(--pl-bone), #EFEDE6) !important;
  box-shadow: none !important;
  border: 0 !important;
}
#home-faq.ck-faq { max-width: none; }
#home-faq .ck-faq-head .section-kicker { margin-bottom: 10px; }
#home-faq .ck-faq-head .ck-faq-title { margin: 0 0 12px; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; }
.ck-faq-lede { margin: 0 0 18px; color: var(--pl-muted); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.ck-faq-ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(18, 62, 68, .18);
  border-radius: 999px;
  color: var(--pl-petrol) !important;
  font: 700 14px/1 Inter, sans-serif;
  text-decoration: none !important;
  background: #fff;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ck-faq-ask svg { width: 18px; height: 18px; fill: none; stroke: var(--pl-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ck-faq-ask:hover { border-color: var(--pl-champ); background: #FBF7EE; transform: translateY(-1px); }
.ck-faq-ask:focus-visible { outline: 3px solid rgba(18, 62, 68, .3); outline-offset: 3px; }
@media (min-width: 901px) {
  #home-faq.ck-faq {
    display: grid;
    grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }
  #home-faq .ck-faq-head { position: sticky; top: 120px; }
}
@media (max-width: 900px) {
  #home-faq .ck-faq-head { margin-bottom: 22px; }
}

/* Every FAQ: the answer opens and closes instead of snapping (ck-polish.js
   animates .ck-faq-a). */
.ck-faq-item summary { transition: color .2s ease; }
.ck-faq-item summary::after { transition: transform .32s var(--pl-ease-out) !important; }
.ck-faq-a { overflow: hidden; }
.ck-faq-a p { margin: 0 0 18px; color: var(--k-ink-2, #3C4442); font-size: 15px; line-height: 1.6; max-width: 70ch; }

/* --- 7. Info pages (За нас, Контакти, Условия, Поверителност) ---------------
   A white card on a bone page. They now open like the rest of the shop: a
   petrol band the card rises out of. */
.legal-page-section {
  background:
    linear-gradient(180deg, var(--pl-deep) 0, var(--pl-petrol) 260px, var(--pl-bone) 260px) !important;
  padding-top: clamp(28px, 4vw, 56px) !important;
}
.legal-page-section > .container {
  border: 1px solid rgba(18, 62, 68, .08) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(11, 43, 48, .16) !important;
}
.legal-page-section h1 {
  font-family: Manrope, Inter, sans-serif !important;
  letter-spacing: -.03em;
  line-height: 1.1;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  margin-bottom: 1.75rem !important;
}
.legal-page-section h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pl-champ), var(--pl-champ-l));
}
.legal-page-section .btn-secondary {
  border-radius: 999px !important;
  border-color: rgba(18, 62, 68, .16) !important;
  color: var(--pl-petrol) !important;
  font-weight: 700;
}
.legal-page-section .btn-secondary:hover { border-color: var(--pl-champ) !important; background: #FBF7EE !important; }
@media (max-width: 640px) {
  .legal-page-section > .container { padding: 2rem 1.25rem !important; border-radius: 18px !important; width: calc(100% - 24px) !important; }
}

/* --- 8. Mobile menu -------------------------------------------------------- */
.menu-header .ck-menu-logo { display: block; height: 34px; width: auto; }
.menu-nav-links .ck-menu-primary {
  font: 800 20px/1.2 Manrope, Inter, sans-serif !important;
  letter-spacing: -.02em;
  color: var(--pl-petrol) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.menu-nav-links .ck-menu-primary:hover,
.menu-nav-links .ck-menu-primary:focus-visible { color: var(--pl-gold) !important; }
.menu-nav-links .ck-menu-primary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--pl-champ);
  border-top: 2px solid var(--pl-champ);
  transform: rotate(45deg);
  margin-right: 4px;
}
.menu-nav-links .ck-menu-split { height: 10px; border-bottom: 1px solid var(--pl-line); margin-bottom: 6px; }
/* The phone-brand and model lists are gone from the menu (owner, 2026-10-03):
   the phone is chosen with "Моят телефон" instead. */
.mobile-menu-sidebar .menu-brands-section,
.mobile-menu-sidebar .menu-models-section { display: none !important; }
/* Phone-brand chips: the marks were drawn at 12px and unreadable. */
.menu-brands-grid .menu-brand-img { height: 18px !important; width: auto !important; max-width: 44px !important; object-fit: contain; }
.ck-menu-contact {
  display: grid;
  gap: 8px;
  padding: 18px 20px 28px;
  border-top: 1px solid var(--pl-line);
}
.ck-menu-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--pl-mist);
  color: var(--pl-petrol) !important;
  font: 700 14px/1 Inter, sans-serif;
  text-decoration: none !important;
}
.ck-menu-contact svg { width: 18px; height: 18px; fill: none; stroke: var(--pl-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Menu items arrive in a short cascade when the drawer opens. */
.mobile-menu-overlay.active .menu-nav-link,
.mobile-menu-overlay.active .ck-menu-contact a {
  animation: ckMenuIn .5s var(--pl-ease-out) both;
  animation-delay: calc(80ms + var(--ck-i, 0) * 35ms);
}
@keyframes ckMenuIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* --- 9. View changes and the not-found notice ------------------------------
   Switching between home, a category, a product and the checkout used to cut
   from one to the next. The new view now settles in. */
.ck-view-enter { animation: ckViewIn .46s var(--pl-ease-out) both; }
@keyframes ckViewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ck-notice {
  position: fixed;
  left: 50%;
  /* Under the header, so the navigation stays usable while it shows. */
  top: 110px;
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, calc(100vw - 24px));
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(200, 168, 110, .4);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pl-deep), var(--pl-petrol));
  color: var(--pl-bone);
  box-shadow: 0 24px 60px rgba(11, 43, 48, .35);
  transform: translateX(-50%);
  animation: ckNoticeIn .55s var(--pl-ease-out) both;
  font: 500 14px/1.45 Inter, sans-serif;
}
.ck-notice.is-leaving { animation: ckNoticeOut .3s ease-in both; }
.ck-notice strong { display: block; font: 800 15px/1.3 Manrope, Inter, sans-serif; color: #fff; }
.ck-notice span { color: rgba(246, 244, 239, .78); }
.ck-notice a {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E2C892, var(--pl-champ-l) 45%, var(--pl-champ));
  color: var(--pl-deep) !important;
  font: 800 13px/1 Manrope, Inter, sans-serif;
  text-decoration: none !important;
  white-space: nowrap;
}
.ck-notice button {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 244, 239, .1);
  color: var(--pl-bone);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ck-notice a:focus-visible, .ck-notice button:focus-visible { outline: 3px solid #F3E3BE; outline-offset: 2px; }
@keyframes ckNoticeIn { from { opacity: 0; transform: translate(-50%, -16px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ckNoticeOut { to { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 760px) { .ck-notice { top: 146px; } }
@media (max-width: 520px) { .ck-notice { flex-wrap: wrap; } .ck-notice > div { flex: 1 1 calc(100% - 50px); } }

/* --- 10. Reveals for the sections that had none ---------------------------
   The same calm rise the rest of the home page uses (modern-atelier-v2). */
html.ck-js [data-ck-rv] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--pl-ease), transform .7s var(--pl-ease); transition-delay: var(--ck-rv-d, 0ms); }
html.ck-js [data-ck-rv].is-in { opacity: 1; transform: none; }

/* --- 12. The iPhone 18 band: the phones arrive ------------------------------
   The band was the only home section that simply sat there. When it enters
   the view the numeral surfaces, the copy rises and the two phones come up
   onto the floor one after the other. Individual `translate`/`scale` are used
   so the band's own rotate and hover transforms stay exactly as they were. */
html.ck-js .ckp18.ck-armed .ckp18-stage img {
  opacity: 0;
  translate: 0 80px;
  transition: transform .6s var(--pl-ease), translate 1.15s var(--pl-ease-out), opacity .8s ease;
}
html.ck-js .ckp18.ck-armed .ckp18-max { transition-delay: 0s, .16s, .16s; }
html.ck-js .ckp18.ck-armed.is-in .ckp18-stage img { opacity: 1; translate: 0 0; }
html.ck-js .ckp18.ck-armed .ckp18-numeral { opacity: 0; scale: .9; transition: opacity 1.3s ease .1s, scale 1.6s var(--pl-ease-out) .1s; }
html.ck-js .ckp18.ck-armed.is-in .ckp18-numeral { opacity: 1; scale: 1; }
html.ck-js .ckp18.ck-armed .ckp18-copy > * { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .9s var(--pl-ease-out); }
html.ck-js .ckp18.ck-armed .ckp18-copy > :nth-child(2) { transition-delay: .08s; }
html.ck-js .ckp18.ck-armed .ckp18-copy > :nth-child(3) { transition-delay: .16s; }
html.ck-js .ckp18.ck-armed .ckp18-copy > :nth-child(4) { transition-delay: .24s; }
html.ck-js .ckp18.ck-armed.is-in .ckp18-copy > * { opacity: 1; translate: 0 0; }

/* --- 13. Touch screens get the cards' motion too ---------------------------
   Category and brand cards answered only a mouse hover, so on a phone they
   never moved. There, the card crossing the middle of the screen plays the
   same moment (ck-polish.js sets .is-live): the lift, the slow zoom, the
   champagne sheen across category pictures and a glare across brand banners. */
.ck-cat-card.is-live, .category-card.is-live {
  transform: translateY(-2px);
  border-color: rgba(200, 168, 110, .6) !important;
  box-shadow: 0 0 0 3px rgba(200, 168, 110, .22), 0 22px 42px rgba(11, 43, 48, .18) !important;
}
.ck-cat-card.is-live .category-card-img, .category-card.is-live .category-card-img { transform: scale(1.05) !important; }
.ck-cat-card.is-live .ck-cat-arrow, .category-card.is-live .ck-cat-arrow {
  color: #fff !important; background: var(--pl-petrol) !important; border-color: var(--pl-petrol) !important;
  transition: background-color .35s ease, color .35s ease;
}
#storefront-home-view #categories-grid .ck-cat-card.is-live::after {
  transform: translateX(260%) skewX(-18deg);
  transition: transform 1.1s cubic-bezier(.4, 0, .2, 1) .1s;
}
.brand-campaign-card { position: relative; }
.brand-campaign-card.is-live { transform: translateY(-4px); border-color: rgba(200, 168, 110, .78) !important; }
.brand-campaign-card.is-live img { transform: scale(1.05); transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
.brand-campaign-card .ck-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 205, .32) 48%, transparent 66%);
  transform: translateX(-120%);
}
.brand-campaign-card.is-live .ck-glare { transform: translateX(120%); transition: transform 1.3s cubic-bezier(.4, 0, .2, 1) .15s; }
/* Any card answers the finger the moment it is pressed. */
@media (hover: none) {
  .product-card:active, .ck-cat-card:active, .category-card:active, .brand-campaign-card:active { transform: scale(.985); transition: transform .12s ease; }
}

/* --- 14. Filter chips (ck-polish.js, block 8) ------------------------------ */
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ck-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(18, 62, 68, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--pl-petrol);
  font: 600 12.5px/1 Inter, sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.ck-chip:hover { border-color: var(--pl-champ); }
.ck-chip:active { transform: scale(.97); }
.ck-chip.is-on { background: var(--pl-petrol); border-color: var(--pl-petrol); color: #fff; }
.ck-chip:focus-visible { outline: 2px solid var(--pl-champ); outline-offset: 2px; }
.ck-filter-group .ck-select-more { font-size: 13px; }
@media (max-width: 760px) { .ck-chip { min-height: 40px; } }

/* --- 11. Buttons answer the press ------------------------------------------ */
.btn-premium:active, .btn-card-buy:active, .hero-cta-primary:active,
.ck-faq-ask:active, .ck-notice a:active { transform: translateY(0) scale(.98) !important; transition-duration: .08s; }

/* Reduced motion: keep the states, drop the travel. */
/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ck-top-shell { transition: none; }
  html.ck-calm .ck-view-enter, html.ck-calm .ck-tick, html.ck-calm .ck-notice, html.ck-calm .ck-notice.is-leaving, html.ck-calm .mobile-menu-overlay.active .menu-nav-link, html.ck-calm .mobile-menu-overlay.active .ck-menu-contact a { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  html.ck-calm.ck-js [data-ck-rv] { transform: none; transition: opacity .3s ease; }
  html.ck-calm.ck-js .ckp18.ck-armed .ckp18-stage img, html.ck-calm.ck-js .ckp18.ck-armed .ckp18-copy > *, html.ck-calm.ck-js .ckp18.ck-armed .ckp18-numeral { translate: none !important; scale: none !important; transition: opacity .4s ease !important; }


/* Sign-in / registration: a hint under the password and a readable error
   above the button instead of a browser alert (2026-10-05). */
.ck-auth-hint { display: block; margin-top: 4px; font-size: .78rem; color: #5A615F; }
.ck-auth-error {
  margin: 1rem 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(134, 105, 47, .35);
  background: #F6F4EF;
  color: #161A1B;
  font-size: .86rem;
  line-height: 1.4;
}
.ck-auth-error[hidden] { display: none; }
.ck-auth-forgot { display: inline-block; margin-top: 6px; font-size: .84rem; color: #86692F; text-decoration: none; font-weight: 500; }
.ck-auth-forgot:hover { text-decoration: underline; text-underline-offset: 3px; }
.ck-auth-forgot:focus-visible { outline: 2px solid #B8955A; outline-offset: 2px; border-radius: 4px; }
.ck-auth-lead { margin: 0 0 1.25rem; text-align: center; font-size: .92rem; color: #5A615F; line-height: 1.45; }
.ck-auth-done {
  margin: 1rem 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #E6ECE9;
  color: #123E44;
  font-size: .86rem;
  line-height: 1.45;
}
.ck-auth-done[hidden] { display: none; }

/* ==========================================================================
   6. PDP COLOR VARIANTS & RECENTLY VIEWED STRIP
   ========================================================================== */

.pdp-variants {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #F6F4EF;
  border: 1px solid rgba(18, 62, 68, 0.12);
}

.pdp-variants[hidden],
.pdp-recent[hidden] {
  display: none !important;
}

.pdp-variants-head {
  font-size: 13px;
  color: #5A615F;
  margin-bottom: 9px;
}

.pdp-variants-head strong {
  color: #123E44;
  font-weight: 700;
}

.pdp-variants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-variant-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(18, 62, 68, 0.18);
  background: #FFFFFF;
  color: #161A1B;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pdp-variant-pill:hover {
  border-color: #86692F;
  background: #FBFAF7;
  transform: translateY(-1px);
}

.pdp-variant-pill.is-active {
  border-color: #123E44;
  background: #123E44;
  color: #FBFAF7;
  box-shadow: 0 4px 12px rgba(18, 62, 68, 0.18);
}

.pdp-variant-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid rgba(18, 62, 68, 0.1);
}

.pdp-recent {
  margin-top: 28px;
}

/* ==========================================================================
   8. CHECKOUT CITY HELPER CHIPS & LEGAL/INFO PAGES POLISH
   ========================================================================== */

.ck-city-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
}

.ck-city-chips-label {
  font-size: 12px;
  font-weight: 600;
  color: #5A615F;
  margin-right: 2px;
}

.ck-city-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(18, 62, 68, 0.18);
  background: #F6F4EF;
  color: #123E44;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ck-city-chip:hover,
.ck-city-chip:focus-visible {
  background: #123E44;
  border-color: #123E44;
  color: #FBFAF7;
}

.ck-address-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #5A615F;
  line-height: 1.4;
}

#checkout-page-view {
  background: linear-gradient(180deg, #F6F4EF 0%, #EFECE6 100%) !important;
}

#checkout-page-view .checkout-form-panel,
#checkout-page-view .checkout-summary-panel {
  border: 1px solid rgba(18, 62, 68, 0.14) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 36px rgba(11, 43, 48, 0.06) !important;
}

.legal-page-section {
  background: linear-gradient(180deg, #F6F4EF 0%, #EFECE6 100%) !important;
}

.legal-page-section > .container {
  border: 1px solid rgba(18, 62, 68, 0.14) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(11, 43, 48, 0.07) !important;
}

#auth-modal .modal-wrapper {
  background: #FBFAF7 !important;
  border: 1px solid rgba(184, 149, 90, 0.45) !important;
  box-shadow: 0 28px 70px rgba(7, 24, 26, 0.38) !important;
}

/* ==========================================================================
   9. VISIBLE LUXURY HEADER SEARCH BAND & HERO MODEL COMBOBOX
   ========================================================================== */

#header-search-btn.is-active {
  background: rgba(18, 62, 68, 0.1) !important;
  border-color: rgba(184, 149, 90, 0.65) !important;
  color: #123E44 !important;
  box-shadow: 0 0 0 2px rgba(184, 149, 90, 0.18);
}

.ck-search-drawer[hidden] {
  display: none !important;
}

.ck-search-drawer {
  position: relative;
  z-index: 260;
  padding: 2px 0 12px;
  border-top: 1px solid rgba(200, 168, 110, 0.24);
  background: transparent;
}

.ck-search-drawer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ck-search-bar-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.ck-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 6px 0 15px;
  background: #FFFFFF;
  border: 1.5px solid rgba(18, 62, 68, 0.24);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11, 43, 48, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ck-search-bar:focus-within {
  border-color: #123E44;
  box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.24), 0 10px 26px rgba(11, 43, 48, 0.1);
}

.ck-search-bar-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #86692F;
}

/* Override ck-system.css global input[type="text"] !important rules */
#ck-header-search-drawer .ck-search-bar-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #161A1B !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  appearance: none;
  -webkit-appearance: none;
}

#ck-header-search-drawer .ck-search-bar-input::placeholder {
  color: #5A615F !important;
  font-weight: 450;
}

#ck-header-search-drawer .ck-search-bar-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.ck-search-bar-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(18, 62, 68, 0.09);
  color: #123E44;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ck-search-bar-clear:hover {
  background: #123E44;
  color: #FBFAF7;
}

.ck-search-bar-submit {
  flex-shrink: 0;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #123E44;
  color: #FBFAF7;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.ck-search-bar-submit:hover {
  background: #1F5A61;
}

@media (max-width: 760px) {
  .ck-search-drawer {
    padding: 4px 0 10px;
  }
}

#ck-header-search-drawer .ck-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  border-radius: 16px;
  background: #FBFAF7;
  border: 1px solid rgba(184, 149, 90, 0.55);
  box-shadow: 0 24px 56px rgba(6, 24, 27, 0.28);
  z-index: 800;
}

#ck-header-search-drawer .ck-search-suggestions:empty {
  display: none !important;
}

#ck-header-search-drawer .search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(18, 62, 68, 0.08);
  cursor: pointer;
  transition: background 0.15s ease;
}

#ck-header-search-drawer .search-suggestion-item:last-child {
  border-bottom: 0;
}

#ck-header-search-drawer .search-suggestion-item:hover {
  background: #EFE6D4 !important;
}

#ck-header-search-drawer .search-suggestion-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(18, 62, 68, 0.08);
  color: #123E44;
  flex-shrink: 0;
}

#ck-header-search-drawer .search-suggestion-thumb,
#ck-header-search-drawer .search-suggestion-item img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid rgba(18, 62, 68, 0.1);
  flex-shrink: 0;
}

#ck-header-search-drawer .search-suggestion-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#ck-header-search-drawer .search-suggestion-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #86692F;
}

#ck-header-search-drawer .search-suggestion-title,
#ck-header-search-drawer .suggestion-title {
  font-size: 13.5px;
  font-weight: 650;
  color: #161A1B;
  line-height: 1.35;
}

#ck-header-search-drawer .search-suggestion-sub {
  font-size: 12px;
  color: #5A615F;
}

#ck-header-search-drawer .search-suggestion-price,
#ck-header-search-drawer .suggestion-price {
  font-size: 13px;
  font-weight: 800;
  color: #123E44;
  white-space: nowrap;
}

#ck-header-search-drawer .search-suggestion-item.see-all-results {
  justify-content: space-between;
  background: #123E44 !important;
  color: #FBFAF7 !important;
  font-size: 13px;
  font-weight: 700;
}

#ck-header-search-drawer .search-suggestion-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: #5A615F;
  text-align: center;
}

/* Allow the hero searchable combobox menu to float cleanly without clipping */
#storefront-home-view #hero-section {
  position: relative;
  z-index: 35 !important;
  overflow: visible !important;
}

#storefront-home-view #hero-section .ck-hero-slides {
  overflow: hidden;
  overflow: clip;
}

#storefront-home-view .ck-finder-bar,
#storefront-home-view #hero-section .ck-finder-in-hero,
#storefront-home-view #hero-section .ck-finder-fields,
#storefront-home-view #hero-section .ck-finder-field,
#storefront-home-view #hero-section .ck-finder-select-wrap {
  overflow: visible;
}

#storefront-home-view #hero-section .ck-finder-in-hero.has-device-context:not(:focus-within):not(.is-editing) .ck-finder-bar {
  overflow: hidden !important;
}

.ck-finder-combo {
  position: relative;
  width: 100%;
  overflow: visible !important;
}

/* Match #finder-brand-select 1:1 in height, border, typography, and gold chevron */
#storefront-home-view #hero-section .ck-finder-combo-input {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px !important;
  border-radius: 12px !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9762f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  border: 1px solid rgba(18, 62, 68, 0.28) !important;
  color: #161A1B !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  box-shadow: inset 0 1px 2px rgba(11, 43, 48, 0.05) !important;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#storefront-home-view #hero-section .ck-finder-combo.has-value .ck-finder-combo-input {
  padding-right: 60px !important;
}

#storefront-home-view #hero-section .ck-finder-combo-input::placeholder {
  color: #161A1B !important;
  opacity: 1;
  font-weight: 600;
}

#storefront-home-view #hero-section .ck-finder-combo.is-open .ck-finder-combo-input::placeholder {
  color: #6B7371 !important;
  font-weight: 500;
}

#storefront-home-view #hero-section .ck-finder-combo-input:hover:not(:disabled) {
  border-color: rgba(18, 62, 68, 0.5) !important;
  background-color: #FFFFFF !important;
}

#storefront-home-view #hero-section .ck-finder-combo-input:focus-visible,
#storefront-home-view #hero-section .ck-finder-combo.is-open .ck-finder-combo-input {
  outline: none !important;
  border-color: #123E44 !important;
  box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.28) !important;
  cursor: text;
}

.ck-finder-combo-clear[hidden] {
  display: none !important;
}

.ck-finder-combo-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(18, 62, 68, 0.1);
  color: #123E44;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ck-finder-combo-clear:hover {
  background: #123E44;
  color: #FBFAF7;
}

/* Step 2 gold badge when model is chosen in combobox */
#storefront-home-view #hero-section .ck-finder-field:has(#finder-model-combo.has-value) .ck-finder-step {
  background: linear-gradient(180deg, #ebd29b 0%, #c89a52 100%) !important;
  color: #091d20 !important;
  box-shadow: 0 2px 6px rgba(200, 154, 82, 0.36) !important;
}

.ck-finder-combo-list[hidden] {
  display: none !important;
}

/* Always open downward below the input so the label above is never covered
   and the full scrollable list is visible over the trust strip below */
.ck-finder-combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #FBFAF7;
  border: 1.5px solid rgba(184, 149, 90, 0.65);
  box-shadow: 0 24px 56px rgba(6, 24, 27, 0.36);
  z-index: 999 !important;
}

.ck-finder-combo-head {
  padding: 6px 10px 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #86692F;
  border-bottom: 1px solid rgba(18, 62, 68, 0.08);
  margin-bottom: 4px;
}

.ck-finder-combo-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #161A1B;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.ck-finder-combo-option:hover,
.ck-finder-combo-option:focus-visible,
.ck-finder-combo-option.is-active {
  background: rgba(18, 62, 68, 0.1);
  color: #123E44;
  outline: none;
}

.ck-finder-combo-option.is-selected {
  background: #123E44;
  color: #FBFAF7;
}

.ck-finder-combo-brand {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(184, 149, 90, 0.2);
  color: #6E521F;
  flex-shrink: 0;
}

.ck-finder-combo-option.is-selected .ck-finder-combo-brand {
  background: rgba(251, 250, 247, 0.18);
  color: #F3E5C8;
}

/* Never show legacy homepage step-2 model list containers */
#brands-list,
#models-list,
#step2-title {
  display: none !important;
}

.ck-finder-combo-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: #5A615F;
  text-align: center;
}


/* Owner, 2026-10-24: the search band is always open under the header, so the
   magnifier next to the logo only repeated it - hidden on phone and desktop. */
#header-search-btn { display: none !important; }