/* =============================================================================
   Booster Shop Design System — drop-in stylesheet
   Place under: catalog/view/template/<your_theme>/stylesheet/boostershop-ds.css
   Load order: after Bootstrap (so we can override), before page-specific CSS.

   Single source of truth for tokens + base components. Every class is prefixed
   `bs-` so it never collides with default OpenCart or Journal/SP theme styles.

   IMPORTANT: do not edit token values inline in templates. Use these vars.
============================================================================= */

/* -- Fonts --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* -- Tokens -------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bs-bg:        #F7F7F5;
  --bs-paper:     #FFFFFF;
  --bs-line:      #E5E7EB;
  --bs-line-2:    #EEF0F2;

  /* Type */
  --bs-ink:       #111827;
  --bs-ink-2:     #1F2937;
  --bs-ink-3:     #6B7280;
  --bs-ink-4:     #9CA3AF;

  /* Brand */
  --bs-blue:       #1E3A8A;
  --bs-blue-soft:  #E8EEFB;
  --bs-blue-light: #3B82F6;       /* preorder, secondary purchase action */
  --bs-gold:       #D4A017;
  --bs-gold-soft:  #FBF4DC;

  /* Category accents (USE ONLY in category banners/tiles, not in UI chrome) */
  --bs-pokemon:    #C68A00;
  --bs-onepiece:   #1E40AF;

  /* CTA (purchase actions only) */
  --bs-green:        #16A34A;
  --bs-green-hover:  #15803D;

  /* Semantic */
  --bs-danger:       #B91C1C;
  --bs-warning-bg:   #FFFBEA;
  --bs-warning-fg:   #92400E;
  --bs-warning-line: #FCD34D;

  /* Radii */
  --bs-r-sm:    6px;
  --bs-r:       10px;
  --bs-r-lg:    14px;
  --bs-r-pill:  999px;

  /* Shadows */
  --bs-sh-sm:   0 1px 0 rgba(17,24,39,0.03);
  --bs-sh:      0 1px 2px rgba(17,24,39,0.04), 0 0 0 1px rgba(17,24,39,0.02);
  --bs-sh-pop:  0 12px 32px rgba(17,24,39,0.10), 0 2px 6px rgba(17,24,39,0.06);

  /* Spacing scale (4px) */
  --bs-s1: 4px; --bs-s2: 8px; --bs-s3: 12px; --bs-s4: 16px;
  --bs-s5: 20px; --bs-s6: 24px; --bs-s8: 32px; --bs-s10: 40px;
}

/* -- Base typography ---------------------------------------------------- */
.bs, .bs * { box-sizing: border-box; }
.bs {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--bs-ink-2);
}
.bs h1, .bs h2, .bs h3, .bs h4 {
  color: var(--bs-ink); margin: 0; letter-spacing: -0.015em;
}
.bs h1 { font-size: 32px; font-weight: 800; }
.bs h2 { font-size: 24px; font-weight: 700; }
.bs h3 { font-size: 18px; font-weight: 700; }
.bs a  { color: var(--bs-blue); text-decoration: none; }
.bs a:hover { text-decoration: underline; }

/* -- Buttons ------------------------------------------------------------ */
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 44px;
  font-weight: 700; font-size: 14.5px;
  padding: 0 16px; border-radius: var(--bs-r-sm);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.bs-btn-primary { background: var(--bs-green); color: #fff; }
.bs-btn-primary:hover { background: var(--bs-green-hover); }

.bs-btn-preorder { background: var(--bs-blue-light); color: #fff; }
.bs-btn-preorder:hover { background: #2563EB; }

.bs-btn-secondary { background: #fff; color: var(--bs-ink); border-color: var(--bs-line); }
.bs-btn-secondary:hover { background: var(--bs-line-2); }

.bs-btn-ghost { background: transparent; color: var(--bs-ink-2); border-color: transparent; }
.bs-btn-ghost:hover { color: var(--bs-ink); background: var(--bs-line-2); }

.bs-btn-blue-outline { background: #fff; color: var(--bs-blue); border-color: var(--bs-blue); }
.bs-btn-blue-outline:hover { background: var(--bs-blue-soft); }

.bs-btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }

/* -- Badges ------------------------------------------------------------- */
.bs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: var(--bs-r-sm);
  text-transform: uppercase; font-family: inherit;
}
.bs-badge--discount  { background: var(--bs-ink); color: #fff; }
.bs-badge--lowpull   { background: var(--bs-warning-bg); color: var(--bs-warning-fg); border: 1px solid var(--bs-warning-line); }
.bs-badge--preorder  { background: var(--bs-blue-soft); color: var(--bs-blue); border: 1px solid #c7d2fe; }
.bs-badge--out       { background: var(--bs-line-2); color: var(--bs-ink-3); border: 1px solid var(--bs-line); }

/* -- Card --------------------------------------------------------------- */
.bs-card {
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r);
  box-shadow: var(--bs-sh-sm);
}

/* -- Form fields -------------------------------------------------------- */
.bs-input,
.bs-select,
.bs-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--bs-r-sm);
  border: 1px solid var(--bs-line);
  background: #fff;
  font-size: 14px; color: var(--bs-ink);
  font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus {
  border-color: var(--bs-blue);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.08);
}
.bs-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236B7280' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.bs-input--error { border-color: var(--bs-danger); }
.bs-field-error  { font-size: 12px; color: var(--bs-danger); margin-top: 4px; }
.bs-field-hint   { font-size: 11.5px; color: var(--bs-ink-3); margin-top: 4px; }
.bs-field-label  { display: block; font-size: 12.5px; font-weight: 600; color: var(--bs-ink-2); margin-bottom: 6px; }
.bs-field-label .bs-required { color: var(--bs-danger); }

/* -- Sub-category chips (UX-004) --------------------------------------- */
.bs-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r-pill);
  font-size: 13px; font-weight: 600;
  color: var(--bs-ink-2);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.bs-chip:hover { border-color: var(--bs-ink-3); }
.bs-chip--active {
  background: var(--bs-blue-soft);
  border-color: var(--bs-blue);
  color: var(--bs-blue);
}
.bs-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- Active filter chips (UX-004) -------------------------------------- */
.bs-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bs-blue-soft);
  color: var(--bs-blue);
  padding: 4px 10px;
  border-radius: var(--bs-r-pill);
  font-size: 12px; font-weight: 600;
}
.bs-filter-chip__remove {
  background: transparent; border: 0; padding: 0;
  color: var(--bs-blue); cursor: pointer;
  display: inline-flex; align-items: center;
}
.bs-filter-reset {
  font-size: 12px; color: var(--bs-ink-3);
  background: transparent; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500;
}

/* -- Category header card (UX-004) ------------------------------------- */
.bs-cat-header {
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r);
  overflow: hidden;
  box-shadow: var(--bs-sh-sm);
}
.bs-cat-header__strip {
  height: 4px; background: var(--bs-pokemon); /* override per category */
}
.bs-cat-header--onepiece .bs-cat-header__strip { background: var(--bs-onepiece); }

.bs-cat-header__hero {
  padding: 18px 22px;
  display: flex; align-items: center; gap: 16px;
}
.bs-cat-header__title { display: flex; align-items: baseline; gap: 10px; }
.bs-cat-header__title h1 { font-size: 26px; }
.bs-cat-header__title .bs-count { font-size: 13px; color: var(--bs-ink-3); font-weight: 500; }
.bs-cat-header__tagline { font-size: 13px; color: var(--bs-ink-3); margin-top: 4px; }

.bs-cat-header__toolbar {
  padding: 12px 22px;
  border-top: 1px solid var(--bs-line-2);
  background: var(--bs-bg);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bs-cat-header__toolbar .bs-chip-row { flex: 0 0 auto; }
.bs-cat-header__toolbar .bs-filter-chips { margin-left: auto; }

/* Mobile category header */
@media (max-width: 640px) {
  .bs-cat-header__hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bs-cat-header__hero .bs-select { width: 100%; }
  .bs-cat-header__toolbar { overflow-x: auto; flex-wrap: nowrap; }
}

/* -- Product card ------------------------------------------------------- */
.bs-pcard {
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r);
  box-shadow: var(--bs-sh-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.bs-pcard__media {
  position: relative; padding: 12px;
}
.bs-pcard__media img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  border-radius: var(--bs-r-sm);
  background: var(--bs-bg);
}
.bs-pcard--out .bs-pcard__media img { opacity: 0.45; }
.bs-pcard__badge-tl { position: absolute; top: 18px; left: 18px; }
.bs-pcard__badge-tr { position: absolute; top: 18px; right: 18px; }
.bs-pcard__body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.bs-pcard__title {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--bs-ink); letter-spacing: -0.005em;
  min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
.bs-pcard--out .bs-pcard__title { color: var(--bs-ink-3); }
.bs-pcard__price-row { display: flex; align-items: baseline; gap: 10px; }
.bs-pcard__price-new { font-size: 16px; font-weight: 800; color: var(--bs-ink); letter-spacing: -0.01em; }
.bs-pcard__price-row--sale .bs-pcard__price-new { color: var(--bs-danger); font-size: 17px; }
.bs-pcard__price-old { font-size: 12.5px; color: var(--bs-ink-4); text-decoration: line-through; font-weight: 500; }

/* -- Mini-cart, cart, account, FAQ, etc. — see individual partials.
   See HANDOFF.md for templates that consume the classes above. */

/* == PRODUCT-THUMB-COMPACT-20260523: compact product card flow ==
   rev6:
   - card descriptions are hidden everywhere; full text stays on product page.
   - image is centered, but not stretched with width:100%.
   - price/button area is tight.
   - price min-height is the small old-price slot required to keep
     sale and no-sale cards the same height.
   - no margin-top:auto and no stretched description. */

body.bs .product-thumb {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

body.bs .product-thumb .image {
  text-align: center !important;
}

body.bs .product-thumb .image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

body.bs .product-thumb .image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 230px !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.bs #product-category .product-thumb .image img {
  max-height: 190px !important;
}

body.bs #product-special .product-thumb .image img {
  max-height: 220px !important;
}

body.bs .product-thumb .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

body.bs .product-thumb .description {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px 14px 0;
  margin: 0 !important;
}

body.bs .product-thumb .description h4 {
  margin: 0 0 8px !important;
}

body.bs .product-thumb .description p {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.bs .product-thumb .price,
body.bs #product-category .product-thumb .price,
body.bs #product-special .product-thumb .price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-height: 39px !important;
  margin: 0 0 6px !important;
}

body.bs .product-thumb .price-current,
body.bs .product-thumb .price-new {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bs-ink);
  line-height: 1.2;
}

body.bs .product-thumb .price-previous,
body.bs .product-thumb .price-old {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--bs-ink-4);
  text-decoration: line-through;
  text-decoration-color: var(--bs-ink-4);
  text-decoration-thickness: 1px;
  line-height: 1.2;
}

body.bs .product-thumb .price-tax {
  font-size: 0.75rem;
  color: var(--bs-ink-3);
  margin-top: 2px;
}

body.bs .product-thumb .product-thumb-form,
body.bs .product-thumb form {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 14px 8px !important;
}

body.bs .product-thumb .button {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  bottom: auto !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

body.bs .product-thumb .button .btn-buy-full {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background: var(--bs-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--bs-r-sm) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, box-shadow 0.15s;
}

body.bs .product-thumb .button .btn-buy-full:hover,
body.bs .product-thumb .button .btn-buy-full:focus {
  background: var(--bs-green-hover) !important;
  color: #fff !important;
  outline: none;
}

body.bs .product-thumb .button .btn-buy-full i {
  font-size: 18px !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}

body.bs .product-thumb .button button:not(.btn-buy-full) {
  display: none !important;
}

/* -- Header (Phase 5.1 / R-05) ----------------------------------------- */
.bs-header {
  background: #fff;
  border-bottom: 1px solid var(--bs-line);
  padding: 14px 32px;
}
.bs-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.bs-header__logo {
  display: inline-flex;
  flex: 0 0 auto;
}
.bs-header__logo img {
  height: 36px;
  width: auto;
}
.bs-header__cart {
  flex: 0 0 auto;
}

.bs-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bs-bg);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r-sm);
  padding: 8px 12px 8px 14px;
  transition: border-color .15s;
}
.bs-search:focus-within {
  border-color: var(--bs-blue);
}
.bs-search__icon {
  flex: 0 0 auto;
  color: var(--bs-ink-3);
}
.bs-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--bs-ink);
}
.bs-search__input::placeholder {
  color: var(--bs-ink-4);
}

@media (max-width: 768px) {
  .bs-header {
    padding: 10px 14px;
  }
  .bs-header__inner {
    gap: 10px;
  }
  .bs-header .bs-btn-ghost {
    display: none;
  }
  .bs-header__cart .dropdown-menu {
    right: 0;
    left: auto;
    min-width: min(360px, calc(100vw - 28px));
  }
}
@media (max-width: 480px) {
  .bs-header__logo img {
    height: 28px;
  }
}

/* -- Footer (Phase 5.2 / R-05) ----------------------------------------- */
.bs-footer {
  background: #0F1115;
  color: #9CA3AF;
  padding: 40px 32px 24px;
}
.bs-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.bs-footer__brand p {
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
  color: #9CA3AF;
  margin: 10px 0 0;
}
.bs-footer__legal {
  color: #6B7280;
  font-size: 12.5px;
  margin-top: 8px;
}
.bs-footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  color: #F3F4F6;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 14px;
}
.bs-footer__col a {
  display: block;
  color: #9CA3AF;
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 10px;
}
.bs-footer__col a:hover {
  color: #fff;
  text-decoration: none;
}
.bs-footer__bottom {
  max-width: 1240px;
  margin: 0 auto;
  border-top: 1px solid #1F2937;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6B7280;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 768px) {
  .bs-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .bs-footer__brand {
    grid-column: 1 / -1;
  }
  .bs-footer {
    padding: 32px 16px 20px;
  }
}
@media (max-width: 480px) {
  .bs-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* -- Hide old OC4 top bar (R-05-FIX) ----------------------------------- */
/* nav#top is the old utility bar replaced by bs-header. Safe to hide:
   mini-cart trigger moved to bs-header; dropdown renders via JS outside nav#top. */
nav#top { display: none !important; }

/* R-05-FIX: logo size override after Bootstrap/img-fluid */
.bs-header__logo img {
  height: 46px !important;
  width: auto !important;
}
@media (max-width: 480px) {
  .bs-header__logo img {
    height: 34px !important;
  }
}

/* -- Header row polish (R-05-ALIGN) ------------------------------------- */
.bs-header__inner {
  align-items: center !important;
}

.bs-header .bs-btn-ghost.bs-btn-sm {
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  gap: 8px !important;
  white-space: nowrap;
}
.bs-header .bs-btn-ghost.bs-btn-sm svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

#cart.bs-header__cart {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#cart.bs-header__cart .dropdown.d-grid {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#cart.bs-header__cart .mini-cart-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  font-size: 16.8px !important;
  white-space: nowrap !important;
}
#cart.bs-header__cart .dropdown-toggle::after {
  align-self: center !important;
  margin-top: 0 !important;
}

/* -- Home category tiles (Phase 5.10 / R-06) --------------------------- */
.bs-home-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.bs-home-tile {
  background: var(--bs-paper);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-r-lg);
  overflow: hidden;
  color: var(--bs-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.bs-home-tile:hover {
  border-color: var(--bs-ink-3);
  box-shadow: var(--bs-sh);
  text-decoration: none;
}
.bs-home-tile__strip {
  height: 5px;
  background: var(--bs-pokemon);
  flex: 0 0 auto;
}
.bs-home-tile--onepiece .bs-home-tile__strip {
  background: var(--bs-onepiece);
}
.bs-home-tile__body {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}
.bs-home-tile__logo {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  border-radius: var(--bs-r);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bs-bg);
}
.bs-home-tile__info {
  flex: 1;
  min-width: 0;
}
.bs-home-tile__info h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--bs-ink);
}
.bs-home-tile__info p {
  font-size: 13px;
  color: var(--bs-ink-3);
  margin: 0 0 14px;
  line-height: 1.5;
}
.bs-home-tile__cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bs-home-tile__count {
  font-size: 12px;
  color: var(--bs-ink-3);
}
.bs-home-tile__arrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-blue);
}

@media (max-width: 640px) {
  .bs-home-tiles {
    grid-template-columns: 1fr;
  }
  .bs-home-tile__body {
    gap: 14px;
    padding: 16px 18px;
  }
  .bs-home-tile__logo {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
  }
  .bs-home-tile__info h3 {
    font-size: 16px;
  }
}

/* -- Home category tiles cleanup (R-06) -------------------------------- */
#common-home .category-tiles {
  display: none !important;
}

/* -- Content bottom spacing (prevent footer overlap) ------------------- */
/* OC4 content areas sometimes lack bottom padding, causing footer to clip content */
#content,
#column-left,
#column-right {
  padding-bottom: 32px;
}

/* Extra breathing room before footer on all pages */
.bs-footer {
  margin-top: 40px;
}

/* -- Header mobile actions (R-06-MOBILE-FIX / R-07MOB) ----------------- */
.bs-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.bs-header .bs-btn-label {
  white-space: nowrap;
}
#cart.bs-header__cart .mini-cart-trigger {
  gap: 8px;
  position: relative;
}
#cart.bs-header__cart .mini-cart-trigger .bs-cart-icon {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .bs-header {
    padding: 10px 14px;
  }
  .bs-header__inner {
    gap: 8px;
  }
  .bs-header__actions {
    gap: 6px;
  }
  .bs-header .bs-btn-ghost,
  #cart.bs-header__cart .mini-cart-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    position: relative !important;
    border-radius: var(--bs-r-sm) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bs-header .bs-btn-ghost .bs-btn-label,
  #cart.bs-header__cart .mini-cart-trigger .bs-btn-label {
    display: none !important;
  }
  .bs-header .bs-btn-ghost svg,
  #cart.bs-header__cart .mini-cart-trigger svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
  }
  #cart.bs-header__cart .dropdown-toggle::after {
    display: none !important;
  }
  .bs-header .bs-cart-qty {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 1.5px solid #fff;
    font-size: 9px;
    pointer-events: none;
  }
}

/* -- FAQ accordion - defensive chev alignment override (R-06-MOBILE-FIX) -- */
/* Full bs-faq styles live in booster-typography.css. */
.bs-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.bs-faq__chev {
  flex: 0 0 auto;
  color: var(--bs-ink-3);
  display: block;
  transition: transform .3s, color .2s;
}
.bs-faq__item.is-open .bs-faq__chev {
  transform: rotate(180deg);
  color: var(--bs-blue);
}


/* == R07MOB2-OVERRIDE: stylesheet.css absolute-footer fix ================
   stylesheet.css loads AFTER boostershop-ds.css and contains:
     footer { position: absolute; bottom: -1px; }   ← old sticky-footer hack
     #content { padding-bottom: 730px; }             ← old sticky-footer hack
   We override both here with !important.
   DO NOT REMOVE this block unless stylesheet.css is cleaned up.
========================================================================= */

footer.bs-footer {
  position: static   !important;
  bottom:   auto     !important;
}

#content,
#column-left,
#column-right {
  padding-bottom: 40px !important; /* override stylesheet.css 730px/400px hack */
}

/* Cart visibility on mobile: reinforce against Bootstrap d-block !important */
@media (max-width: 768px) {
  #cart.bs-header__cart .mini-cart-trigger {
    display:     inline-flex  !important;
    align-items: center       !important;
    width:       36px         !important;
    min-width:   36px         !important;
    height:      36px         !important;
    padding:     0            !important;
  }
  /* d-block from Bootstrap sets display:block !important.
     Our selector has higher specificity (1 ID + 2 classes) so we win. */
  #cart.bs-header__cart .mini-cart-trigger.d-block {
    display: inline-flex !important;
  }
}


/* == R07MOB3-OVERRIDE: stylesheet.css absolute-container fix =============
   stylesheet.css contains:
     #container { position: absolute; margin-bottom: 300px; }
   This breaks horizontal layout on mobile and creates a ghost gap above footer.
   We force position:relative and zero margin-bottom here.
   DO NOT REMOVE this block unless stylesheet.css is cleaned up.
========================================================================= */

#container {
  position:     relative !important;
  margin-bottom: 0       !important;
}


/* == R07MOB5-OVERRIDE: exact H1 release, viewport footer, mobile overflow =
   Fixes short account pages where the footer floats above the bottom of the
   viewport, leaving a white strip underneath. Also includes the mobile
   horizontal overflow clamp from R07MOB4 so this is the only current patch
   needed after R07MOB3.
========================================================================= */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

#container {
  position: relative !important;
  margin-bottom: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

#container > main {
  flex: 1 0 auto !important;
}

footer.bs-footer {
  position: static !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
}

@supports (min-height: 100dvh) {
  body,
  #container {
    min-height: 100dvh !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #container,
  main,
  #common-home,
  #content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .bs-header,
  .bs-header__inner,
  .bs-search,
  .bs-search form,
  .bs-search .input-group,
  .bs-home-tiles,
  .bs-home-tile,
  .bs-home-tile__body,
  .bs-home-tile__info {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bs-header {
    width: 100% !important;
  }

  .bs-header__inner {
    flex-wrap: nowrap !important;
  }

  .bs-search {
    flex: 1 1 auto !important;
  }

  #common-home.container,
  #common-home .container,
  #common-home #content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #common-home .row {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #common-home .row > [class*="col"] {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #common-home .product-thumb,
  #common-home .product-thumb .image,
  #common-home .product-thumb .content,
  #common-home .product-thumb .description,
  #common-home .product-thumb .button-group,
  #common-home .product-thumb form,
  #common-home .product-thumb button,
  #common-home .product-thumb .btn {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #common-home .product-thumb img {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* == R07MOB6FIX-OVERRIDE: mobile Telegram hide + live related carousel ====
   Live check: product pages do not render id="related". The related section is
   h3 + .row inside #content. These rules target the live structure and keep
   the carousel scoped to product pages only.
========================================================================= */

@media (max-width: 768px) {
  .bs-header a[href*="t.me"].bs-btn-ghost {
    display: none !important;
  }

  /* Fallback for current product.twig structure:
     #content > .row.mb-3 is the main product block, then h3 + related row. */
  #content > .row.mb-3 + h3 + .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  #content > .row.mb-3 + h3 + .row::-webkit-scrollbar {
    display: none;
  }

  #content > .row.mb-3 + h3 + .row > [class*="col"] {
    flex: 0 0 88% !important;
    width: 88% !important;
    max-width: 88% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
  }

  #content > .row.mb-3 + h3 + .row > [class*="col"]:last-child {
    padding-right: 0 !important;
  }

  /* Strong route-scoped selector for modern browsers. */
  #content:has(#product-info) > h3 + .row:has(.product-thumb) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  #content:has(#product-info) > h3 + .row:has(.product-thumb)::-webkit-scrollbar {
    display: none;
  }

  #content:has(#product-info) > h3 + .row:has(.product-thumb) > [class*="col"] {
    flex: 0 0 88% !important;
    width: 88% !important;
    max-width: 88% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
  }

  #content:has(#product-info) > h3 + .row:has(.product-thumb) > [class*="col"]:last-child {
    padding-right: 0 !important;
  }
}