/* ==========================================================================
   BunchMart storefront, pass three.
   ---------------------------------------------------------------------------
   Loaded after app.css on shop pages only. app.css grew by appending
   layers; rather than add a fourth layer of patches to it, the shopfront
   is restyled here in one place, phone first.

   Brand stays as it is: logo blue for structure, orange for the one
   action we want taken, green for money saved. What changes is the
   type (a display face for headings and prices), the spacing rhythm,
   and the two things this shop is about: offers and aisles.
   ========================================================================== */

:root {
  --display: "Bricolage Grotesque", var(--sans);
  --radius: 16px;
  --radius-sm: 11px;
  --gap: 12px;
  --slab-pad: 16px;
  --appbar-h: 112px;          /* two rows on a phone */
}
@media (min-width: 992px) {
  :root { --gap: 16px; --slab-pad: 22px; --appbar-h: 68px; }
}

[hidden] { display: none !important; }

body { background: #EEF2F9; }
h1, h2, h3, .display { font-family: var(--display); letter-spacing: -.015em; }
.flash-ok { background: var(--green-050); color: var(--green-600); }

/* ============================================================== HEADER */

.appbar { position: sticky; top: 0; background: linear-gradient(180deg, #1650E8 0%, var(--blue-600) 100%); }
.appbar .appbar-row { display: flex; align-items: center; gap: 6px; height: auto; padding-top: 8px; padding-bottom: 10px; flex-wrap: wrap; }

.appbar-menu {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  margin-left: -6px; background: none; border: 0; border-radius: 10px; color: #fff; cursor: pointer;
}
.appbar-menu:hover { background: rgba(255,255,255,.14); }
.burger { display: grid; gap: 4px; width: 20px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger i:nth-child(2) { width: 14px; }

.appbar .brand { margin-right: auto; gap: 8px; }
.appbar .brand img { height: 30px; }
.appbar .brand-text { display: block; }
.appbar .brand-text b { font-family: var(--display); font-size: 19px; }
.appbar .brand-text small { display: none; }

/* Search takes its own full-width row on a phone: it is the main
   way people shop here and it deserves the width. */
.searchbar { order: 10; flex: 1 0 100%; margin-top: 8px; }
.searchbar input {
  height: 44px; padding: 0 44px 0 42px; border-radius: 12px; font-size: 15px;
  box-shadow: 0 1px 0 rgba(8,27,77,.12);
}
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar-go { display: none; }
.searchbar .searchbar-clear {
  position: absolute; right: 6px; top: 50%; bottom: auto; transform: translateY(-50%);
  padding: 0; box-shadow: none; filter: none;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--wash); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.searchbar.is-loading > svg { animation: sg-pulse .8s ease-in-out infinite alternate; }
@keyframes sg-pulse { to { color: var(--blue-600); } }

.icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.badge { border-color: var(--blue-600); }

@media (min-width: 992px) {
  .appbar .appbar-row { flex-wrap: nowrap; gap: 20px; height: 68px; padding-top: 0; padding-bottom: 0; }
  .appbar-menu, .appbar-offers { display: none; }
  .appbar .brand { margin-right: 0; }
  .appbar .brand img { height: 34px; }
  .appbar .brand-text small { display: block; }
  .searchbar { order: 0; flex: 1 1 auto; margin-top: 0; max-width: 680px; }
  .searchbar input { padding-right: 132px; }
  .searchbar-go { display: block; }
  .searchbar .searchbar-clear { right: 100px; }
}

/* ------------------------------------------------ search suggestions */

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 0 8px;
  background: var(--paper); color: var(--ink);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(8, 27, 77, .22), 0 0 0 1px rgba(8,27,77,.06);
}
.suggest-back {
  position: fixed; inset: var(--appbar-h) 0 0 0; z-index: calc(var(--z-header) - 1);
  background: rgba(8, 19, 46, .35);
}
.sg-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 4px; font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.sg-clear { border: 0; background: none; color: var(--blue-600); font-size: 12px; font-weight: 700; cursor: pointer; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 6px; }
.sg-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 14px; }
.sg-row:hover, .sg-row.is-active { background: var(--blue-050); }
.sg-row mark { background: none; color: var(--blue-700); font-weight: 800; }
.sg-chip {
  padding: 7px 12px; border-radius: 999px; background: var(--wash);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sg-chip:hover, .sg-chip.is-active { background: var(--blue-100); color: var(--blue-800); }
.sg-ic {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; background: var(--wash); color: var(--blue-600); font-size: 13px;
}
.sg-txt { flex: 1; min-width: 0; }
.sg-img { width: 44px; height: 44px; flex: none; border-radius: 9px; object-fit: cover; background: var(--wash); }
.sg-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sg-prod small, .sg-price small { display: block; font-size: 11.5px; color: var(--ink-3); }
.sg-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-price small { color: var(--green-600); font-weight: 700; }
.sg-all { margin-top: 4px; border-top: 1px solid var(--line-2); color: var(--blue-700); }

/* ================================================================ LAYOUT */

main > .wrap:first-child { padding-top: 0; }
.cms { margin: 0 0 var(--gap); }

/* Content slabs: white panels on the cool grey page, rounded at every
   width so each band reads as its own shelf. */
.cms-category_grid, .cms-product_rail, .cms-product_grid, .cms-deal_countdown,
.cms-brand_strip, .cms-faq, .cms-testimonials, .cms-banner_strip, .cms-offer_cards {
  padding: var(--slab-pad) 14px calc(var(--slab-pad) + 2px);
  border-radius: var(--radius);
  background: var(--paper);
}
@media (min-width: 760px) {
  .cms-category_grid, .cms-product_rail, .cms-product_grid, .cms-deal_countdown,
  .cms-brand_strip, .cms-faq, .cms-testimonials, .cms-banner_strip, .cms-offer_cards {
    padding: var(--slab-pad) var(--slab-pad) calc(var(--slab-pad) + 4px);
  }
}

.section-head { align-items: flex-end; margin-bottom: 14px; }
.section-head h2 { font-size: 20px; font-weight: 800; line-height: 1.15; }
.section-head .section-sub, .section-head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.section-head .seeall {
  padding: 6px 0; background: none; color: var(--blue-600); border-radius: 0; font-size: 13.5px;
}
.section-head .seeall:hover { background: none; color: var(--blue-800); }
.section-head .seeall svg { width: 13px; height: 13px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--orange-600); letter-spacing: 0; }
@media (min-width: 992px) { .section-head h2 { font-size: 25px; } }

/* ================================================================== HERO */

/* A clear gap under the header on every width: the old slider sat flush
   against the blue bar and read as part of it. */
.cms-hero_slider { margin: 12px 0 var(--gap); }
@media (min-width: 992px) { .cms-hero_slider { margin-top: 18px; } }

.hero-slider {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(8, 27, 77, .16);
  background: var(--blue-800);
}
.hero-track { display: flex; align-items: stretch; }
.hero-slide {
  flex: 0 0 100%; min-width: 0;
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: auto;
  background: var(--hc, var(--blue-800)); color: #fff;
}
.hero-media { position: relative; display: block; aspect-ratio: var(--rm, var(--r, 2 / 1)); overflow: hidden; }
.hero-media picture, .hero-img { display: block; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 70% center; }

/* Phone: the picture keeps its own shape and the words sit underneath
   it, so copy never lands on a face or a product. */
.hero-copy {
  position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; flex: 1;
  padding: 16px 16px 40px;
  background: none;
}
.hero-slide.no-img .hero-copy {
  min-height: 230px; justify-content: center; padding: 26px 20px 44px; overflow: hidden;
}
.hero-slide.no-img::before {
  content: ""; position: absolute; right: -60px; top: -40px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: 0 0 0 44px rgba(255,255,255,.04);
}
.hero-title { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.12; max-width: 20ch; }
.hero-sub { font-size: 13.5px; line-height: 1.5; opacity: .88; max-width: 44ch; }
.hero-badge {
  margin: 0; padding: 4px 9px; border-radius: 6px;
  background: var(--amber-400); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.hero-cta { height: 42px; margin-top: 6px; padding: 0 18px; font-size: 14px; }
.hero-slide.has-img .hero-copy { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 40%); }

.hero-dots { left: auto; right: 14px; bottom: 14px; justify-content: flex-end; }
.hero-dot { width: 8px; height: 8px; background: rgba(255,255,255,.45); }
.hero-dot.is-on { width: 22px; }

.hero-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: none; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--sh-2);
  opacity: 0; transition: opacity .2s ease;
}
.hero-arrow svg { width: 18px; height: 18px; }
.hero-prev { left: 14px; }
.hero-prev svg { transform: rotate(180deg); }
.hero-next { right: 14px; }
.hero-slider:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }

/* Wider screens: words go back over the picture, on the left, where
   banner artwork leaves room for them. */
@media (min-width: 761px) {
  .hero-media { aspect-ratio: var(--r, 2 / 1); max-height: 480px; width: 100%; }
  .hero-slide.has-img.has-copy .hero-copy {
    position: absolute; inset: 0 auto 0 0; width: min(52%, 560px); justify-content: center;
    padding: 32px 40px; gap: 10px;
    background: linear-gradient(90deg, rgba(4,14,40,.62) 0%, rgba(4,14,40,.28) 70%, rgba(4,14,40,0) 100%);
  }
  .hero-slide.no-img .hero-copy { min-height: 340px; padding: 40px 48px; }
  .hero-title { font-size: clamp(28px, 3.3vw, 46px); }
  .hero-sub { font-size: 16px; }
  .hero-cta { height: 48px; padding: 0 24px; font-size: 15px; margin-top: 8px; }
  .hero-dots { left: 0; right: 0; justify-content: center; bottom: 16px; }
  .hero-arrow { display: grid; }
}

/* ================================================================ TRUST */

.cms-usp_strip .usps { border-radius: var(--radius); padding: 14px; gap: 12px 10px; }
.usp-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--blue-050); }
.usp b { font-size: 13px; }

/* ============================================================ CATEGORIES */

.catgrid { gap: 10px; }
.catpill { flex: 0 0 80px; gap: 8px; }
.catpill-img {
  width: 68px; height: 68px; border-radius: 22px;
  background: hsl(var(--h, 215) 90% 95%);
  color: hsl(var(--h, 215) 68% 40%);
  transition: transform .18s ease, background .18s ease;
}
.catpill-img svg { width: 32px; height: 32px; }
.catpill-emoji { font-size: 28px; }
.catpill b { font-size: 12px; color: var(--ink); }
.catpill:hover .catpill-img { transform: translateY(-2px); background: hsl(var(--h, 215) 90% 91%); }
@media (min-width: 760px) {
  .catgrid { gap: 18px 10px; }
  .catpill-img { width: 88px; height: 88px; border-radius: 28px; }
  .catpill-img svg { width: 40px; height: 40px; }
  .catpill b { font-size: 13px; }
}

/* ============================================================ PRODUCTS */

.pcard { border-radius: 14px; border-color: #E6EAF3; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8,27,77,.10); }
.pcard-body { padding: 10px 11px 12px; }
.pcard-brand { font-size: 10.5px; letter-spacing: .03em; }
.pcard-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pcard-price b { font-family: var(--display); font-size: 18px; }
.pcard-price .off { color: var(--green-600); font-size: 12px; }
.pill { border-radius: 6px; letter-spacing: .02em; }
.pill-off { background: var(--green-600); }
.pcard-cta { height: 38px; border-radius: 10px; box-shadow: none; }
.pcard-wish { width: 32px; height: 32px; }

.prodrail > * { flex-basis: 44%; }
@media (min-width: 560px) { .prodrail > * { flex-basis: 30%; } }
@media (min-width: 900px) { .prodrail > * { flex-basis: 22.5%; } }
@media (min-width: 1200px) { .prodrail > * { flex-basis: 18.6%; } }

.pgrid { gap: 10px; }
@media (min-width: 992px) { .pgrid { gap: 14px; } }

/* ============================================================ OFFERS */

.offrail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none;
}
.offrail::-webkit-scrollbar { display: none; }
.offrail > .oticket { flex: 0 0 min(86%, 360px); scroll-snap-align: start; }
@media (min-width: 900px) {
  .offrail { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .offrail > .oticket { flex: none; }
}

.offers-page .crumbs { padding-top: 14px; }

.offhero {
  position: relative; overflow: hidden;
  margin: 6px 0 var(--gap); padding: 22px 18px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 92% 12%, rgba(251,174,40,.35) 0 90px, transparent 91px),
    linear-gradient(135deg, #0B2E8A 0%, var(--blue-600) 100%);
  color: #fff;
}
.offhero h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; line-height: 1.05; }
.offhero p { margin: 0; max-width: 52ch; font-size: 14px; color: rgba(255,255,255,.86); }
.offhero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.offhero-stats a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 13px;
  border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600;
}
.offhero-stats a:hover { background: rgba(255,255,255,.24); }
.offhero-stats b { font-family: var(--display); font-size: 17px; }
@media (min-width: 760px) {
  .offhero { padding: 34px 36px 30px; }
  .offhero h1 { font-size: 42px; }
  .offhero p { font-size: 15.5px; }
}

.offsec { scroll-margin-top: calc(var(--appbar-h) + 16px); }
.offgrid { display: grid; gap: 12px; }
@media (min-width: 700px)  { .offgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .offgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offhow { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.offhow li {
  position: relative; padding: 14px 14px 14px 52px; border-radius: 12px; background: var(--wash);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2); counter-increment: how;
}
.offhow li::before {
  content: counter(how); position: absolute; left: 14px; top: 13px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-weight: 800; font-size: 13px;
}
.offhow b { color: var(--ink); }
@media (min-width: 760px) { .offhow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offempty { text-align: center; padding: 34px 16px; }
.offempty h2 { margin: 0 0 6px; font-size: 20px; }
.offempty p { margin: 0 0 16px; color: var(--ink-3); }

/* ============================================== CATEGORY LISTING PAGE */

.cathead {
  display: flex; gap: 14px; align-items: center;
  margin: 4px 0 var(--gap); padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--h, 215) 90% 96%), hsl(var(--h, 215) 85% 91%));
}
.cathead-ic {
  display: grid; place-items: center; flex: none;
  width: 58px; height: 58px; border-radius: 18px;
  background: #fff; color: hsl(var(--h, 215) 68% 40%);
}
.cathead-ic svg { width: 30px; height: 30px; }
.cathead h1 { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.1; }
.cathead p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
@media (min-width: 760px) {
  .cathead { padding: 22px 24px; gap: 18px; }
  .cathead-ic { width: 72px; height: 72px; border-radius: 22px; }
  .cathead-ic svg { width: 36px; height: 36px; }
  .cathead h1 { font-size: 32px; }
}

.subcats { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 var(--gap); padding: 2px 0 4px; scrollbar-width: none; }
.subcats::-webkit-scrollbar { display: none; }
.subcat {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.subcat:hover { border-color: var(--blue-500); color: var(--blue-700); }
.subcat-ic {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: hsl(var(--h, 215) 90% 94%); color: hsl(var(--h, 215) 68% 40%);
}
.subcat-ic svg { width: 16px; height: 16px; }

.listbar {
  position: sticky; top: var(--appbar-h); z-index: var(--z-raised);
  display: flex; align-items: center; gap: 8px;
  margin: 0 -14px 10px; padding: 8px 14px;
  background: #EEF2F9;
}
.listbar-count { margin-right: auto; font-size: 13px; color: var(--ink-3); }
.listbar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.listbar select.input { height: 38px; width: auto; padding: 0 30px 0 12px; font-size: 13.5px; font-weight: 600; border-radius: 10px; }
.listbar-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--blue-600); color: #fff; font-size: 11px;
}

/* The filter rail becomes a bottom sheet on a phone. */
.filter-sheet-head, .filter-sheet-foot { display: none; }
@media (max-width: 991px) {
  .filter-rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(8,27,77,.2);
    transform: translateY(105%); transition: transform .25s cubic-bezier(.4,0,.2,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .filter-rail.is-open { transform: none; }
  .filter-rail > .card { border: 0; border-radius: 0; }
  .filter-rail .filter-rail-title { display: none !important; }
  .filter-sheet-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--line-2);
  }
  .filter-sheet-head b { font-family: var(--display); font-size: 18px; }
  .filter-sheet-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--wash); font-size: 20px; cursor: pointer; }
  .filter-rail.is-open ~ .filter-scrim { display: block; }
}
.filter-scrim { display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(8,19,46,.45); }
@media (min-width: 992px) {
  .listbar { position: static; margin: 0 0 12px; padding: 0; background: none; }
  .listbar-btn[data-filter-open] { display: none; }
  .filter-rail .card { border-radius: var(--radius); }
}

.pager { display: flex; justify-content: center; gap: 6px; margin: 22px 0 6px; flex-wrap: wrap; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 10px; background: var(--paper); border: 1px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.pager a:hover { border-color: var(--blue-500); color: var(--blue-700); }
.pager .is-on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ============================================== ALL CATEGORIES PAGE */

.cathub-head { margin: 6px 0 var(--gap); }
.cathub-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; }
.cathub-head p { margin: 0; color: var(--ink-3); font-size: 14px; }
.cathub { display: grid; gap: var(--gap); }
@media (min-width: 700px)  { .cathub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cathub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cathub-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.cathub-top {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: linear-gradient(135deg, hsl(var(--h, 215) 90% 96%), hsl(var(--h, 215) 85% 92%));
}
.cathub-top:hover h2 { color: hsl(var(--h, 215) 68% 34%); }
.cathub-ic {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px;
  background: #fff; color: hsl(var(--h, 215) 68% 40%);
}
.cathub-ic svg { width: 30px; height: 30px; }
.cathub-top h2 { margin: 0; font-size: 18px; font-weight: 800; }
.cathub-top small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.cathub-go { margin-left: auto; color: hsl(var(--h, 215) 60% 40%); }
.cathub-go svg { width: 16px; height: 16px; }
.cathub-kids { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 16px; }
.cathub-kids a {
  padding: 6px 11px; border-radius: 999px; background: var(--wash);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.cathub-kids a:hover { background: var(--blue-050); color: var(--blue-700); }
.cathub-kids em { font-style: normal; color: var(--ink-3); font-weight: 500; }

/* ============================================================ SEARCH */

.srchhead { margin: 14px 0 10px; }
.srchhead h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.srchhead p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.srchsort { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.srchsort::-webkit-scrollbar { display: none; }
.srchsort .chip { font-size: 12.5px; padding: 7px 13px; }
.srchempty { padding: 36px 18px; text-align: center; border-radius: var(--radius); background: var(--paper); }
.srchempty h2 { margin: 0 0 6px; font-size: 20px; }
.srchempty p { margin: 0 0 18px; color: var(--ink-3); }
.srchempty .catgrid { justify-content: center; }

/* ============================================================ FOOTER */

/* Phone first: newsletter card, brand and contact, one accordion
   group for the link columns, payment chips, legal lines. From 760px
   the columns open out side by side and the accordion switches off. */

footer.site {
  margin-top: 28px;
  /* Room for the tab bar plus the floating Help button above it. */
  padding: 20px 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 76px);
  border-radius: 24px 24px 0 0;
  background: #0B1330;
  color: rgba(255,255,255,.7);
  font-size: 13.5px;
}
body.has-meter footer.site {
  padding-bottom: calc(var(--tabbar-h) + var(--meter-h) + env(safe-area-inset-bottom, 0px) + 76px);
}
footer.site a { color: rgba(255,255,255,.8); }
footer.site a:hover { color: #fff; }

/* ---- newsletter */
.foot-news {
  position: relative; overflow: hidden;
  padding: 18px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(251,174,40,.28) 0 70px, transparent 71px),
    linear-gradient(135deg, #1B5CFF 0%, #0B3FC4 100%);
  color: #fff;
}
.foot-news h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; line-height: 1.2; color: #fff; }
.foot-news p { margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.82); }
.foot-news-form { display: flex; gap: 8px; }
.foot-news-form .input {
  flex: 1 1 auto; min-width: 0; height: 46px;
  border: 0; border-radius: 12px; background: #fff; font-size: 14.5px;
}
.foot-news-form .btn { flex: none; height: 46px; padding: 0 16px; border-radius: 12px; font-size: 14px; }

/* ---- brand and contact */
.foot-main { margin-top: 24px; }
.foot-brand img { display: block; height: 28px; width: auto; margin-bottom: 10px; }
.foot-brand > p { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.62); }

.foot-contact {
  list-style: none; margin: 16px 0 0; padding: 0;
  border-radius: 16px; background: rgba(255,255,255,.05);
}
.foot-contact li + li { border-top: 1px solid rgba(255,255,255,.07); }
.foot-contact a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 56px; }
.foot-contact small { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); }
.foot-contact a > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #fff; }
.foot-contact-ic {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(255,255,255,.08); color: #FFB547;
}
.foot-contact-ic svg { width: 17px; height: 17px; }

.foot-social { display: flex; gap: 10px; margin-top: 14px; }
.foot-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: rgba(255,255,255,.08);
}
.foot-social a:hover { background: var(--orange-500); }
.foot-social svg { width: 19px; height: 19px; }

/* ---- the accordion */
.foot-links {
  margin-top: 16px; padding: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
.fcol + .fcol { border-top: 1px solid rgba(255,255,255,.08); }
.fcol-title { margin: 0; font: inherit; letter-spacing: 0; }
.fcol-head {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 15px/1.2 var(--sans); color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.fcol-head:focus-visible { outline: 2px solid #FFB547; outline-offset: 2px; border-radius: 8px; }
.fcaret {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  transition: background .2s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.fcaret::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 8px; height: 8px; margin: -5px 0 0 -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.fcol.is-open .fcaret { transform: rotate(180deg); background: rgba(255,255,255,.16); }

/* Height animates with the 0fr to 1fr grid trick, so there is no
   measuring in JS. Closed links are also hidden from keyboard and
   screen readers, not just visually. */
.fcol-panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
}
.fcol.is-open .fcol-panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.fcol-panel > ul {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
  margin: 0; padding: 0; list-style: none;
}
.fcol.is-open .fcol-panel > ul { padding-bottom: 12px; }
.fcol-panel a { display: block; padding: 9px 0; font-size: 14px; color: rgba(255,255,255,.72); }
.fcol-panel a:hover { color: #fff; }

/* ---- payments and legal */
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.foot-pay small { width: 100%; margin-bottom: 2px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.foot-pay span {
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.8);
}
.foot-legal {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.45);
}

/* ---- wider screens: columns side by side, no accordion */
@media (min-width: 760px) {
  footer.site { padding-top: 28px; }
  .foot-news { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
  .foot-news p { margin: 0; }
  .foot-news-form { flex: 0 1 440px; }

  .foot-main { display: grid; grid-template-columns: minmax(240px, 1.1fr) 3fr; gap: 36px; margin-top: 32px; }
  .foot-contact { background: none; border-radius: 0; }
  .foot-contact li + li { border-top: 0; }
  .foot-contact a { padding: 6px 0; min-height: 0; }

  .foot-links {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px;
    margin: 0; padding: 0; background: none; border-radius: 0;
  }
  .fcol + .fcol { border-top: 0; }
  .fcol-head {
    min-height: 0; margin-bottom: 10px;
    pointer-events: none; cursor: default;
    font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  }
  .fcaret { display: none; }
  .fcol-panel, .fcol.is-open .fcol-panel { grid-template-rows: 1fr; visibility: visible; transition: none; }
  .fcol-panel > ul, .fcol.is-open .fcol-panel > ul { grid-template-columns: 1fr; padding: 0; }
  .fcol-panel a { padding: 5px 0; font-size: 13.5px; }

  .foot-pay small { width: auto; margin: 0 4px 0 0; }
  .foot-legal { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
}
@media (min-width: 992px) {
  footer.site { border-radius: 0; padding-bottom: 30px; }
  body.has-meter footer.site { padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcol-panel, .fcaret { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-track, .filter-rail, .catpill-img, .pcard { transition: none !important; }
}

/* A background style on a band that already draws its own panel only
   doubled the padding. */
.cms-usp_strip.bg-white, .cms-usp_strip.bg-wash,
.cms-brand_strip.bg-white, .cms-brand_strip.bg-wash { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.cms-brand_strip.bg-white { padding: var(--slab-pad) 14px; background: var(--paper); border-radius: var(--radius); }
.usp > div > span { display: block; line-height: 1.35; }
.cms-offer_cards .oticket, .cms .offgrid .oticket { background: #F4F7FD; }

/* Drawer: four shortcuts in a row above the category list. */
.drawer-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 12px 10px; border-bottom: 1px solid var(--line-2);
}
.drawer-quick a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 12px; background: var(--wash);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}
.drawer-quick a:hover { background: var(--blue-050); color: var(--blue-700); }
.drawer-quick svg { width: 20px; height: 20px; color: var(--blue-600); }
.drawer-item > a, .drawer-item > button { font-size: 14.5px; }
.filter-sheet-head a { margin-left: auto; margin-right: 12px; font-size: 13px; font-weight: 700; color: var(--blue-600); }

/* ============================================ EMPTY CATEGORIES (09/2026)
   A category with no live product is still shown (unless the admin
   picked "hide"), but it says so: a small "Soon" pill and softer text.
   ===================================================================== */

.soon-pill {
  display: inline-block; margin-left: 5px; padding: 1px 6px; vertical-align: 1px;
  font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue-700, #1741b8); background: var(--blue-050, #eef3ff); border-radius: 999px;
}
.is-soon { color: var(--ink-3) !important; }
.subcat.is-soon { background: var(--wash); border-style: dashed; }
.subcat-n { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--ink-3); }

.soon-proof { margin: 12px 0 0 !important; font-size: 13px !important; font-weight: 600; color: var(--blue-700, #1741b8) !important; }
.soon-range { margin: 0 0 18px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); }
.soon-range h3 { margin: 0 0 12px; font-size: 15.5px; font-weight: 800; }
.soon-range .subcats { margin: 0; }
.soon-groups { display: grid; gap: 14px 22px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.soon-group { display: flex; flex-direction: column; gap: 3px; }
.soon-group a { font-size: 13px; color: var(--ink-2); padding: 2px 0; }
.soon-group a:hover { color: var(--blue-600); }
.soon-group .soon-group-h { font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 3px; }

/* All-categories page: jump bar and wide cards for clothing and jewellery */
.cathub-jump { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 var(--gap); padding-bottom: 4px; scrollbar-width: none; }
.cathub-jump::-webkit-scrollbar { display: none; }
.cathub-jump a {
  flex: none; padding: 7px 13px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.cathub-jump a:hover { border-color: var(--blue-500); color: var(--blue-700); }
.cathub-card { scroll-margin-top: 130px; }
.cathub-card.is-wide { grid-column: 1 / -1; }
.cathub-card.is-soon .cathub-top { filter: saturate(.55); }
.cathub-groups { display: grid; gap: 16px 22px; padding: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cathub-group .cathub-kids { padding: 8px 0 0; }
.cathub-group-h { display: block; font-size: 14px; font-weight: 800; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cathub-group-h em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--ink-3); }
.cathub-kids a.is-soon { background: transparent; border: 1px dashed var(--line); }

/* Header: wide mega panel for three-level departments */
@media (min-width: 900px) {
  .navdrop.navdrop-mega { position: static; }
  .navdrop-mega .navdrop-panel {
    left: 50%; right: auto; width: min(1180px, calc(100vw - 40px));
    transform: translate(-50%, 6px);
  }
  .navdrop-mega:hover .navdrop-panel,
  .navdrop-mega:focus-within .navdrop-panel { transform: translate(-50%, 0); }
  .navdrop-mega .navdrop-cols { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px 22px; }
  .navdrop-flat { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 0 22px; min-width: 380px; }
  .navdrop-flat .navdrop-head { grid-column: 1 / -1; }
  .navdrop-panel { max-height: calc(100vh - 140px); overflow-y: auto; }
}
.catnav .navdrop-panel a { display: block; padding: 5px 0; font-weight: 500; white-space: normal; }
.catnav .navdrop-panel .navdrop-head { font-weight: 700; padding: 4px 0 6px; }

/* Phone drawer: group headings inside a department */
.drawer-sub a.drawer-group { font-weight: 700; color: var(--ink); margin-top: 6px; }