/* =========================================
   UperWeed Redesign — Design System
   Inspired by UberEats: clean, card-based, modern
   ========================================= */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Fresh palette */
  --bg:          #FFFFFF;
  --surface:     #F7F7F7;
  --card:        #FFFFFF;
  --border:      #E8E8E8;
  --border-light:#F0F0F0;

  --text-primary:   #191919;
  --text-secondary: #6B6B6B;
  --text-muted:     #AFAFAF;

  --brand:       #05944F;   /* UberEats-inspired green */
  --brand-light: #E6F7EE;
  --brand-dark:  #034D29;

  --accent:      #FF5A00;   /* warm orange CTA */
  --accent-hover:#E04E00;

  --sale:        #D32F2F;
  --star:        #FF9100;
  --badge-bg:    #F0F0F0;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill:  999px;

  --shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.1);
  --shadow-modal: 0 16px 48px rgba(0,0,0,.16);

  --header-h:    76px;
  --max-w:       1600px;
  --gutter:      24px;
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* --- Layout --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.page-body { padding-top: calc(var(--header-h) + 14px); padding-bottom: 60px; }

/* --- Header --- */
.site-header {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important;
  height: var(--header-h) !important;
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  display: flex !important; align-items: center !important;
}
.header-inner {
  max-width: var(--max-w) !important; margin: 0 auto !important; padding: 0 var(--gutter) !important;
  width: 100% !important; display: flex !important; align-items: center !important; gap: 22px !important;
}
@media (min-width: 1600px) {
  .header-inner { max-width: 100%; padding: 0 40px; }
  .container { max-width: 100%; padding: 0 40px; }
}
.logo {
  font-size: 24px !important; font-weight: 900 !important; color: var(--text-primary) !important;
  display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important;
  letter-spacing: 0 !important;
}
.logo .leaf { color: var(--brand); font-size: 26px; }
.logo .logo-weed { color: var(--brand) !important; }
.logo-img { width: 44px !important; height: 44px !important; border-radius: 8px !important; object-fit: cover !important; }

.header-search {
  flex: 1; max-width: 520px; position: relative;
}
.header-search input {
  width: 100%; padding: 10px 16px 10px 42px;
  border: none; border-radius: var(--radius-pill);
  background: var(--surface); font-size: 15px;
  color: var(--text-primary);
  transition: box-shadow .2s;
}
.header-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); }
.header-search .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 18px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent;
}
.header-search .search-icon:hover { color: var(--brand-dark); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-actions .btn-text {
  font-size: 14px; font-weight: 600; padding: 8px 16px;
  border-radius: var(--radius-pill); transition: background .15s;
}
.header-actions .btn-text:hover { background: var(--surface); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.primary-nav-item {
  position: relative;
}

.primary-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.primary-nav-link:hover,
.primary-nav-item:focus-within .primary-nav-link,
.primary-nav-item:hover .primary-nav-link {
  background: var(--surface);
  color: var(--brand-dark);
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 180;
  width: min(calc(100vw - 48px), 900px);
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.primary-nav-item:hover .mega-panel,
.primary-nav-item:focus-within .mega-panel,
.primary-nav-item.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-panel-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  padding: 22px;
}

.mega-panel-compact {
  width: min(calc(100vw - 48px), 680px);
}

.mega-panel-shop {
  width: min(calc(100vw - 48px), 900px);
}

.mega-panel-locations {
  width: min(calc(100vw - 48px), 680px);
}

.mega-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mega-kicker {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.mega-all-link {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.mega-all-link:hover {
  color: var(--brand);
}

.mega-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mega-category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background .15s, border-color .15s, transform .15s;
}

.mega-category-card:hover {
  background: #fff;
  border-color: rgba(5,148,79,.35);
  transform: translateY(-1px);
}

.mega-category-card img,
.mega-category-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--brand-light);
}

.mega-category-icon {
  display: grid;
  place-items: center;
  font-size: 22px;
}

.mega-category-card strong,
.mega-action-card strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.25;
}

.mega-category-card em {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  margin-top: 2px;
}

/* ── Category quick-nav strip (all 12 category circles under the header) ── */
.cat-quicknav {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.cat-quicknav-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-quicknav-inner::-webkit-scrollbar { display: none; }
.cat-quicknav-item {
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: transform .15s, color .15s;
}
.cat-quicknav-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s;
}
.cat-quicknav-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-quicknav-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.cat-quicknav-item:hover { color: var(--brand, #05944f); transform: translateY(-2px); }
.cat-quicknav-item:hover .cat-quicknav-img {
  border-color: var(--brand, #05944f);
  box-shadow: 0 4px 14px rgba(5,148,79,.25);
}
/* Structured CEO menu: fit eleven items without changing the original strip. */
.cat-nav-custom .cat-quicknav-inner { max-width: 1240px; gap: 8px; }
.cat-nav-custom .cat-quicknav-item { width: 96px; }
.cat-nav-custom .cat-quicknav-img { width: 76px; height: 76px; }
.cat-nav-custom .cat-nav-special .cat-quicknav-img img { object-fit: contain; }
@media (max-width: 768px) {
  .cat-quicknav-inner {
    justify-content: flex-start;
    gap: 6px;
    padding: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  /* Four complete categories plus a quarter of the next one. */
  .cat-nav-custom .cat-nav-item {
    flex: 0 0 calc((100% - 24px) / 4.25);
    width: calc((100% - 24px) / 4.25);
    min-width: 0;
    scroll-snap-align: start;
  }
  .cat-nav-custom .cat-quicknav-item { width: 100%; min-width: 0; }
  .cat-quicknav-img { width: 66px; height: 66px; }
  .cat-quicknav-label { font-size: 10px; }
}

/* ===== Interactive category bar (subcategory dropdowns + More mega) ===== */
.cat-nav-item { flex: 0 0 auto; }  /* not relative: the mega panel spans the strip */
.cat-nav-caret { font-size: 10px; opacity: .65; }
.cat-nav-more-img { display: flex; align-items: center; justify-content: center; }
.cat-nav-more-dots { font-size: 26px; line-height: 1; color: #05944f; letter-spacing: 1px; }
.cat-nav-dropdown {
  position: absolute; top: 100%; left: 0; transform: translateX(0) translateY(8px);
  min-width: 212px; background: #fff; border: 1px solid #e7e7e7; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14); padding: 10px; z-index: 350;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.cat-nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cat-nav-dropdown--wide { min-width: 360px; }
.cat-nav-dropdown--mega { min-width: 300px; }
.cat-nav-dropdown--right { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.cat-nav-dd-head {
  display: block; font-size: 13px; font-weight: 700; color: #111;
  padding: 4px 8px 8px; margin-bottom: 6px; border-bottom: 1px solid #f0f0f0;
}
.cat-nav-dd-head span { color: #8a8a8a; font-weight: 500; }
.cat-nav-dd-links { display: grid; grid-template-columns: 1fr; gap: 1px; }
.cat-nav-dropdown--wide .cat-nav-dd-links { grid-template-columns: repeat(2, minmax(150px, 1fr)); column-gap: 10px; }
.cat-nav-mega-cols { display: grid; grid-template-columns: repeat(4, minmax(132px, 1fr)); gap: 4px 16px; }
.cat-nav-mega-h { font-size: 12px; font-weight: 700; color: #111; margin: 2px 8px 6px; letter-spacing: .02em; }
.cat-nav-mega-h a { color: #111; }
.cat-nav-mega-col a { display: block; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: #333; white-space: nowrap; }
.cat-nav-mega-col a:hover { background: #f1f7f1; color: #05944f; }
.cat-nav-mega-all { color: #05944f !important; font-weight: 600; }
.cat-nav-dd-links a {
  display: block; padding: 7px 9px; border-radius: 8px; font-size: 13px;
  color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-nav-dd-links a:hover { background: #f1f7f1; color: #05944f; }
@media (min-width: 1025px) {
  .cat-nav-dd,
  .cat-nav-dd.mobile-rail-peek-host {
    position: sticky; top: var(--header-h); z-index: 999;
    background: #fff; border-bottom: 1px solid var(--border);
  }
  .cat-nav-dd .cat-quicknav-inner { overflow: visible; flex-wrap: nowrap; }
  .cat-nav-item.has-sub:hover > .cat-nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0) translateY(2px);
  }
  .cat-nav-item.has-sub:hover > .cat-nav-dropdown--right {
    transform: translateX(0) translateY(2px);
  }
}
@media (max-width: 1024px) {
  .cat-nav-dropdown { display: none; }
  .cat-nav-caret { display: none; }
  .cat-nav-dd { display: none; }            /* mobile: category bar hidden, use hamburger drawer */
}

/* Keep breadcrumbs, promotions, and other first-page content clear of the
   category-strip divider at every viewport size. */
.cat-nav-dd { margin-bottom: 16px; }
/* Category photo thumbnails inside the mobile drawer */
.drawer-acc-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.drawer-acc-thumb {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; background: #f0f0f0; border: 1px solid #e6ece6;
}

.mega-subcategory-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.mega-link-group {
  display: grid;
  align-content: start;
  gap: 7px;
}

.mega-link-group a {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.25;
}

.mega-link-group a:hover {
  color: var(--brand-dark);
}

.mega-link-group .mega-link-heading {
  color: var(--text-primary);
  font-weight: 800;
  margin-bottom: 2px;
}

.mega-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mega-action-card {
  display: block;
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background .15s, border-color .15s, transform .15s;
}

.mega-action-card:hover {
  background: #fff;
  border-color: rgba(5,148,79,.35);
  transform: translateY(-1px);
}

.mega-action-card span {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 6px;
}

.mega-location-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mega-location-grid a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.mega-location-grid a:hover {
  color: var(--brand-dark);
  border-color: rgba(5,148,79,.35);
  background: #fff;
}

.cart-btn {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: var(--text-primary); color: #fff;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
}
.cart-btn .cart-count {
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* --- Hamburger Button --- */
.hamburger-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
  transition: background .15s;
}
.hamburger-btn:hover { background: var(--surface); }
.hamburger-btn svg { color: var(--text-primary); }

/* --- Drawer Overlay --- */
.drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* --- Drawer Menu --- */
.drawer {
  position: fixed;
  top: 0; left: 0;
  width: 380px;
  max-width: calc(100vw - 28px);
  height: 100%;
  background: var(--card);
  z-index: 1110;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.25,.8,.25,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: 10px 0 30px rgba(0,0,0,.16);
}
.drawer.open {
  transform: translateX(0);
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #fff;
}
.drawer-brand {
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  color: var(--text-primary);
}
.drawer-close:hover { background: var(--surface); }

.drawer-search {
  position: relative;
  margin: 14px 18px 10px;
  flex-shrink: 0;
}

.drawer-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-primary);
  font-size: 15px;
}

.drawer-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(5, 148, 79, .16);
}

.drawer-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 16px;
}
.drawer-search-glyph {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.drawer-search-glyph::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -6px;
  bottom: -3px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

.drawer-nav {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 6px 18px 16px;
}
.drawer-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.drawer-quick-link {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}
.drawer-quick-link:hover {
  border-color: rgba(5,148,79,.35);
  color: var(--brand-dark);
  background: #fff;
}
.drawer-section {
  display: grid;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.drawer-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 0 2px 2px;
}
.drawer-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.drawer-category-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.drawer-category-link:hover {
  border-color: rgba(5,148,79,.35);
  color: var(--brand-dark);
  background: var(--brand-light);
}
.drawer-category-link-featured {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #fff;
}
.drawer-category-link-featured:hover {
  background: #111;
  border-color: #111;
  color: #fff;
}
.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(226,232,240,.75);
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  transition: color .12s;
}
.drawer-link:hover {
  color: var(--brand-dark);
}
.drawer-link-note {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.drawer-section .drawer-link:last-child {
  border-bottom: 0;
}

.drawer-footer {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: #fff;
}
.drawer-phone {
  font-size: 15px; font-weight: 600;
  color: var(--brand);
  display: block;
  margin-bottom: 4px;
}
.drawer-hours {
  font-size: 13px; color: var(--text-muted);
}

/* --- Category Top Nav (icon-based, like UberEats) --- */
.cat-topnav-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cat-topnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 12px 0 8px;
}
.cat-topnav::-webkit-scrollbar { display: none; }

.cat-topnav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-width: 76px;
  text-align: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  transition: background .15s;
}
.cat-topnav-item:hover { background: var(--surface); }
.cat-topnav-img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}
.cat-topnav-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.cat-topnav-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Category top-nav arrows */
.cat-topnav-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-primary);
  z-index: 3;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.cat-topnav-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.cat-topnav-arrow-left { left: 0; }
.cat-topnav-arrow-right { right: 0; }
.cat-topnav-arrow.hidden { opacity: 0; pointer-events: none; }

/* Fade hints */
.cat-topnav-wrap::before,
.cat-topnav-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.cat-topnav-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}
.cat-topnav-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
  transition: opacity .2s;
}
.cat-topnav-wrap.at-start::before { opacity: 0; }
.cat-topnav-wrap.at-end::after { opacity: 0; }
.cat-topnav-wrap:not(.at-start)::before { opacity: 1; }

/* --- Age Gate Banner --- */
.age-banner {
  background: var(--brand); color: #fff; text-align: center;
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: none; /* shown via JS if needed */
}

/* --- Category Pills --- */
/* Category pills with scroll arrows */
.category-pills-wrap {
  position: relative;
}
.category-pills {
  display: flex; gap: 8px; overflow-x: auto; padding: 16px 0;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.category-pills::-webkit-scrollbar { display: none; }

/* Fade hints on edges */
.category-pills-wrap::before,
.category-pills-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
  transition: opacity .2s;
}
.category-pills-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
  opacity: 0;
}
.category-pills-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}
.category-pills-wrap.at-start::before { opacity: 0; }
.category-pills-wrap.at-end::after { opacity: 0; }
.category-pills-wrap:not(.at-start)::before { opacity: 1; }

/* Scroll arrows for pills */
.pills-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-primary);
  z-index: 3;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.pills-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.pills-arrow-left { left: 0; }
.pills-arrow-right { right: 0; }
.pills-arrow.hidden { opacity: 0; pointer-events: none; }

/* Pills were flat grey fills that went darker grey on hover and pure black
   when active -- three shades of nothing. They are surfaced cards now: white
   with a hairline edge, lifting on hover, and the active one carries the
   brand's dark green rather than black, so the current section reads as part
   of the brand instead of a UI default. */
.pill {
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  letter-spacing: -.005em;
  background: var(--card); color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
  flex-shrink: 0;
}
.pill:hover {
  background: var(--card);
  border-color: #D6DED8;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.pill.active {
  background: var(--brand-dark); color: #fff;
  border-color: var(--brand-dark);
  box-shadow: 0 3px 12px rgba(3,77,41,.26);
}
.pill.active:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(3,77,41,.3);
}
.pill .pill-icon { margin-right: 6px; }

/* --- Section Headers --- */
.section-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding-top: 24px;
}
.section-title { margin-right: auto; }
.section-title { font-size: 22px; font-weight: 700; }
.section-link {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 4px;
}
.section-link:hover { color: var(--brand); }

/* --- Carousel --- */
.carousel-wrap {
  position: relative;
}
.carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px; scroll-behavior: smooth;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex-shrink: 0; }

/* Shared mobile cue for horizontal category, banner and product rails. */
.mobile-rail-peek-wrap,
.mobile-rail-peek-host {
  position: relative;
}
.mobile-rail-cue {
  display: none;
}

@media (max-width: 768px) {
  .mobile-rail-cue:not([hidden]) {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 30;
    display: flex;
    width: 38px;
    height: 38px;
    padding: 0;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    background: rgba(20,36,40,.88);
    box-shadow: 0 3px 12px rgba(0,0,0,.24);
    color: #fff;
    font: 700 25px/1 Arial, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .mobile-rail-cue[hidden] { display: none !important; }
  .mobile-rail-cue:focus-visible {
    outline: 3px solid rgba(51,224,106,.55);
    outline-offset: 2px;
  }
  /* Align the category cue with the sticker artwork, above its label. */
  .cat-quicknav > .mobile-rail-cue:not([hidden]) { top: 43px; }

  /* Desktop carousel controls are replaced by the single start-only cue. */
  .carousel-wrap > .carousel-nav-left,
  .carousel-wrap > .carousel-nav-right,
  .deal-carousel-wrap > .deal-arrow {
    display: none !important;
  }
}

/* Carousel overlay arrows */
.carousel-nav-left,
.carousel-nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s, transform .15s, box-shadow .15s;
}
.carousel-wrap:hover .carousel-nav-left,
.carousel-wrap:hover .carousel-nav-right {
  opacity: 1;
}
.carousel-nav-left:hover,
.carousel-nav-right:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.carousel-nav-left { left: -4px; }
.carousel-nav-right { right: -4px; }

/* Legacy nav arrows (section header inline) */
.carousel-nav {
  display: flex; gap: 6px; margin-left: 8px; flex-shrink: 0;
}
.nav-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-primary);
  cursor: pointer; transition: all .15s;
}
.nav-arrow:hover:not(:disabled) { background: var(--border); transform: scale(1.05); }
.nav-arrow:disabled { opacity: .3; cursor: default; }

/* --- Product Card --- */
.product-card {
  /* The card is a container now rather than one big <a>: it holds the link to
     the product AND the weight picker / Add to Cart form, which cannot legally
     sit inside an anchor. */
  width: 100%; background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  border-color: #DCE4DE;
  transform: translateY(-3px);
}
.product-card .card-link {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  cursor: pointer;
  flex: 1 1 auto;
}
.product-card .card-img-wrap {
  position: relative;
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 12px;
  background: var(--surface);
}
.card-thc-chip {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgba(15,25,19,.82);
  color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: saturate(140%) blur(2px);
}
.product-card .card-img { transition: transform .35s ease; }
.product-card:hover .card-img { transform: scale(1.04); }

/* --- Weight picker + Add to Cart on the card --- */
.card-atc {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px 14px;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  background: #FCFDFC;
}
.card-atc-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.card-atc-field { position: relative; }
/* A single-weight product shows the weight as a plain field: same shape as the
   dropdown, but nothing that implies a choice that isn't offered. */
.card-atc-field--fixed {
  display: flex; align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
}
/* Wraps to a second line instead of ellipsising: there is no dropdown to open
   here, so a clipped label is the only thing the customer ever sees. */
.card-atc-field--fixed span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3; overflow-wrap: anywhere;
}
.card-atc select {
  width: 100%;
  min-height: 38px;
  padding: 9px 26px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  /* If a label still outruns the control, end it with an ellipsis rather than
     slicing a glyph in half under the chevron. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* Chevron drawn inline so the control keeps one look across browsers. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .15s, box-shadow .15s;
}
.card-atc select:hover { border-color: #D6DED8; }
.card-atc select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,148,79,.14);
}
.card-atc-btn {
  width: 100%;
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 11px 12px;
  border: 0; border-radius: 10px;
  background: var(--brand-dark); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.card-atc-btn:hover {
  background: #023d20;
  box-shadow: 0 4px 14px rgba(3,77,41,.28);
  transform: translateY(-1px);
}
.card-atc-btn:active { transform: translateY(0); }
.card-atc-price { font-weight: 800; opacity: .92; white-space: nowrap; }

/* Cards on phones: two per row down to 320px, with the type and controls
   stepped down so the Add to Cart button keeps a full-size tap target. */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card { border-radius: var(--radius-md); }
  .product-card .card-body { padding: 10px 11px 11px; gap: 5px; }
  .product-card .card-name { font-size: 13px; }
  .product-card .card-price { font-size: 13px; }
  .card-atc { padding: 10px 11px 11px; gap: 6px; }
  .card-atc-label { font-size: 9.5px; letter-spacing: .05em; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 36px; font-size: 11.5px; padding-left: 9px; }
  /* A 142px card cannot fit a 41-character weight on two lines; there is no
     dropdown to open here, so it gets a third rather than being cut. */
  .card-atc-field--fixed span { -webkit-line-clamp: 3; }
  .card-atc select { padding-right: 22px; background-position: right 7px center; }
  .card-atc-btn { padding: 10px 8px; font-size: 12.5px; gap: 5px; }
}
.card-atc-btn:disabled { opacity: .5; cursor: not-allowed; }
.card-atc--oos { padding: 0 12px 14px; margin-top: auto; }
.card-atc-oos {
  display: block; text-align: center;
  padding: 11px 12px; border-radius: 10px;
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; font-weight: 600;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.product-card .card-img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #fff;
}
.product-card .card-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px 14px;
  flex: 1 1 auto;
}
.product-card .card-price {
  margin: 2px 0 0;
  font-size: 17px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.product-card .card-rating { margin: 0; font-size: 12px; opacity: .9; }
.product-card .card-badges { margin-top: auto; padding-top: 6px; gap: 5px; }
/* The row of saturated pills was the loudest thing on the card and the main
   reason it read as dated. They are neutral chips now, with a single quiet
   accent for the sale. */
.product-card .badge,
.product-list-card .badge {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}
.product-card .badge-sale,
.product-list-card .badge-sale {
  background: #FFF1F1; color: #C62828; border-color: #FBDDDD;
}
.product-card .card-name {
  font-size: 14px; font-weight: 600;
  /* Was clamped to two lines, which cut names to "Phoenix Extracts Gummies
     2000 ..." and hid the flavour -- the only thing separating one tile from
     the next. Names wrap in full; overflow-wrap keeps an unbroken string from
     spilling out of the tile. */
  overflow-wrap: anywhere;
  line-height: 1.3; margin-bottom: 4px;
}
.product-card .card-price { font-size: 13px; color: var(--text-secondary); }
.product-card .card-price .sale-price { color: var(--sale); font-weight: 600; margin-right: 4px; }
.product-card .card-price .orig-price { text-decoration: line-through; color: var(--text-muted); }

.product-card .card-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.product-card .badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.badge-indica   { background: #EDE7F6; color: #5E35B1; }
.badge-sativa   { background: #FFF3E0; color: #E65100; }
.badge-hybrid   { background: #E8F5E9; color: #2E7D32; }
.badge-cbd      { background: #E3F2FD; color: #1565C0; }
.badge-sale     { background: #FFEBEE; color: var(--sale); }
.badge-lab      { background: #E0F2F1; color: #00695C; }
.badge-thc      { background: #EDE7F6; color: #5E35B1; }

.product-card .card-rating {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 12px; color: var(--text-secondary);
}
.card-rating .stars { color: var(--star); letter-spacing: -1px; }

/* Wider card variant for grids */
.product-card.grid-card { width: 100%; }

/* --- Product Grid --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* --- Category Card (for homepage) --- */
.category-card {
  width: 140px; text-align: center; cursor: pointer;
}
.category-card .cat-img {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-md);
  object-fit: cover; background: var(--surface);
  transition: transform .2s;
}
.category-card:hover .cat-img { transform: scale(1.04); }
.category-card .cat-name {
  margin-top: 8px; font-size: 13px; font-weight: 600;
}

/* --- Hero Banner --- */
.hero-banner {
  border-radius: var(--radius-lg); overflow: hidden;
  position: relative; margin-bottom: 8px;
  background: linear-gradient(135deg, #0a2e1a 0%, #134e2e 50%, #1a6b3c 100%);
  padding: 48px 40px; color: #fff; min-height: 260px;
  display: flex; align-items: center;
}
.hero-content { max-width: 480px; }
.hero-content h1 { font-size: 32px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.hero-content p { font-size: 16px; opacity: .85; margin-bottom: 20px; line-height: 1.5; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: var(--radius-pill);
  background: #fff; color: var(--text-primary);
  font-size: 15px; font-weight: 700;
  transition: transform .15s, box-shadow .15s;
}
.hero-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.hero-badge {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}

/* --- Promoptions Hero Grid (1 large + 4 small, all square) --- */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.promo-grid-main {
  grid-row: 1;
  grid-column: 1;
}
.promo-grid-side {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.promo-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  aspect-ratio: 1 / 1;
}
.promo-slot-empty {
  aspect-ratio: 1 / 1;
}

.promo-slide {
  display: none;
  width: 100%;
  height: 100%;
}
.promo-slide-active {
  display: block;
}
.promo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.promo-slot:hover .promo-slide img {
  transform: scale(1.03);
}

/* Carousel arrows — visible on hover */
.promo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: pointer;
  border: none;
  opacity: .85;
  transition: opacity .2s, background .15s;
  backdrop-filter: blur(4px);
}
.promo-carousel:hover .promo-arrow {
  opacity: 1;
}
.promo-arrow:hover {
  background: rgba(0,0,0,.75);
}
.promo-arrow-left { left: 8px; }
.promo-arrow-right { right: 8px; }

/* Carousel dots */
.promo-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}
.promo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.promo-dot-active {
  background: #fff;
  transform: scale(1.3);
}

/* Mobile: flatten every image from all 5 banner positions into one rail. */
@media (max-width: 768px) {
  .promo-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .promo-grid::-webkit-scrollbar { display: none; }

  /* Flatten the desktop wrappers and mini-carousels into individual cards. */
  .promo-grid .promo-grid-main,
  .promo-grid .promo-grid-side,
  .promo-grid .promo-slot {
    display: contents;
  }
  .promo-grid .promo-slide,
  .promo-grid .promo-slide-active {
    display: block;
    flex: 0 0 calc((100% - 20px) / 2.25);
    aspect-ratio: 1 / 1;
    width: calc((100% - 20px) / 2.25);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .promo-grid .promo-arrow,
  .promo-grid .promo-dots { display: none !important; }
  .promo-slot-empty { display: none; }
}

@media (max-width: 768px) {
  .shop-landing-search {
    max-width: none;
    margin-top: 16px;
  }

  .shop-action-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .shop-action-card {
    min-height: 118px;
  }

  .shop-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-category-tile {
    grid-template-columns: 44px 1fr;
    min-height: 88px;
    padding: 12px;
  }

  .shop-category-tile img,
  .shop-category-icon {
    width: 44px;
    height: 44px;
  }

  .shop-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-section .section-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .shop-section-count {
    order: 3;
    width: 100%;
  }

  .breadcrumb-section .container {
    align-items: flex-start;
  }

  .breadcrumb-phone {
    display: none;
  }

  .bundle-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bundle-detail {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bundle-action-row {
    align-items: stretch;
  }

  .bundle-action-row .btn-add-cart {
    width: 100%;
  }

  .mix-match-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .mix-item-qty {
    width: 100%;
    justify-content: flex-end;
  }

  .contact-layout,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .btn-submit {
    width: 100%;
  }
}

/* --- Promo Banners Row --- */
.promo-row { display: flex; gap: 16px; margin: 24px 0; }
.promo-banner {
  flex: 1; border-radius: var(--radius-md); padding: 20px 24px;
  color: #fff; display: flex; align-items: center; gap: 16px;
  cursor: pointer; transition: transform .15s;
  min-height: 100px;
}
.promo-banner:hover { transform: translateY(-2px); }
.promo-banner.promo-deals { background: linear-gradient(135deg, #D32F2F, #FF5722); }
.promo-banner.promo-new   { background: linear-gradient(135deg, #1565C0, #42A5F5); }
.promo-banner.promo-lab   { background: linear-gradient(135deg, #00695C, #26A69A); }
.promo-banner h3 { font-size: 16px; font-weight: 700; }
.promo-banner p  { font-size: 13px; opacity: .85; margin-top: 4px; }
.promo-icon { font-size: 32px; }

/* --- Shop Page --- */
.shop-header {
  padding: 8px 0 8px;
}
.shop-header h1 {
  font-size: 32px; font-weight: 800;
  letter-spacing: -.022em; line-height: 1.15;
}
.shop-header .shop-meta { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

.filter-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 0;
  border-bottom: 1px solid var(--border); margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  background: var(--bg); border: 1px solid var(--border);
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--text-primary); }
.filter-btn.active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.filter-btn .arrow { font-size: 10px; margin-left: 2px; }

.sort-dropdown {
  margin-left: auto;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); font-size: 14px;
  background: var(--bg); font-weight: 500;
}

.shop-section { margin-bottom: 40px; }
.shop-section-title {
  font-size: 20px; font-weight: 700; margin-bottom: 16px;
  padding-bottom: 8px;
}

.shop-landing-search {
  max-width: 720px;
  margin: 18px 0 22px;
}

.shop-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.shop-action-card {
  min-height: 136px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(5,148,79,.08), rgba(255,90,0,.08)),
    var(--card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.shop-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(5,148,79,.28);
  box-shadow: var(--shadow-hover);
}

.shop-action-card span {
  width: max-content;
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--brand-dark);
  font-size: .75rem;
  font-weight: 900;
  padding: 5px 10px;
  margin-bottom: 18px;
}

.shop-action-card strong {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.shop-action-card em {
  color: var(--text-secondary);
  font-size: .9rem;
  font-style: normal;
  margin-top: 5px;
}

.shop-action-sales {
  background:
    linear-gradient(135deg, rgba(211,47,47,.14), rgba(255,145,0,.14)),
    var(--card);
}

.shop-category-browser {
  margin: 0 0 32px;
}

.shop-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.shop-category-tile {
  min-height: 104px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 14px;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 12px;
  align-items: center;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.shop-category-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(5,148,79,.28);
  box-shadow: var(--shadow-hover);
}

.shop-category-tile img,
.shop-category-icon {
  grid-row: 1 / span 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface);
  object-fit: cover;
}

.shop-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.shop-category-tile strong {
  align-self: end;
  font-size: .96rem;
  line-height: 1.2;
}

.shop-category-tile em {
  align-self: start;
  color: var(--text-secondary);
  font-size: .8rem;
  font-style: normal;
  margin-top: 3px;
}

.shop-featured-section {
  padding-top: 4px;
}

.shop-featured-grid {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

.shop-section .section-header {
  align-items: center;
}

.shop-section-count {
  margin-right: auto;
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 700;
}

/* --- Shared Storefront Utility Styles --- */
.breadcrumb-section {
  margin: 0 0 22px !important;
  padding: 2px 0 14px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.breadcrumb-section .container {
  max-width: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.breadcrumb,
.pd-breadcrumb,
.page-breadcrumb,
nav.breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  color: var(--text-secondary) !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  list-style: none !important;
  padding-left: 0 !important;
}

.breadcrumb li:not(:last-child)::after,
.page-breadcrumb .separator {
  content: '/' !important;
  margin-left: 7px !important;
  color: var(--text-muted) !important;
}

.breadcrumb a,
.pd-breadcrumb a,
.page-breadcrumb a,
nav.breadcrumb a {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.breadcrumb li:last-child,
.page-breadcrumb span:last-child,
.pd-breadcrumb,
nav.breadcrumb {
  color: var(--text-muted);
}

.breadcrumb a:hover,
.pd-breadcrumb a:hover,
.page-breadcrumb a:hover,
nav.breadcrumb a:hover {
  color: var(--brand) !important;
}

.breadcrumb-phone {
  display: none !important;
}

.page-breadcrumb {
  justify-content: flex-start !important;
  padding: 2px 0 14px !important;
  margin: 0 0 22px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-weight: 900;
  text-decoration: none;
  transition: transform .15s, background .15s, box-shadow .15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--text-primary);
  color: #fff;
  padding: 11px 18px;
}

.btn-secondary:hover {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
}

.btn-primary:hover {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.alert {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 24px;
  margin: 24px 0;
}

/* --- Bundles and Mix & Match Listing --- */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0 48px;
}

.bundle-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.bundle-card:hover {
  transform: translateY(-2px);
  border-color: rgba(5,148,79,.28);
  box-shadow: var(--shadow-hover);
}

.bundle-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  overflow: hidden;
}

.bundle-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border-radius: var(--radius-sm);
  background: var(--sale);
  color: #fff;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 900;
}

.bundle-card-info {
  padding: 18px;
}

.bundle-card-info h3 {
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: 0;
  margin: 0 0 8px;
}

.bundle-card-desc {
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

.bundle-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.bundle-item-count,
.bundle-pick-qty {
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 5px 9px;
  font-size: .78rem;
  font-weight: 800;
}

.bundle-pick-qty {
  background: var(--brand-light);
  color: var(--brand-dark);
}

.bundle-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.bundle-card-price .price-was {
  color: var(--text-muted);
  text-decoration: line-through;
}

.bundle-card-price .price-now {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 900;
}

/* --- Bundle Detail --- */
.bundle-detail {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 36px;
  margin: 24px 0 42px;
  align-items: start;
}

/* Mobile: stack to a single column — main image full-width on top, then the
   title and product picker below. This override is placed AFTER the desktop
   rule above on purpose: media queries don't add specificity, so the earlier
   mobile rule (~line 1128) was losing to the desktop rule and the layout stayed
   in two cramped columns (the 360px min-width also forced overflow on phones). */
@media (max-width: 768px) {
  .bundle-detail {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.bundle-main-image {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.bundle-main-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bundle-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
}

.bundle-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 2px solid transparent;
  background: var(--surface);
  cursor: pointer;
}

.bundle-thumb.active,
.bundle-thumb:hover {
  border-color: var(--brand);
}

.bundle-detail-info h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 14px;
}

.bundle-rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.bundle-description {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 18px;
}

.bundle-detail-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.bundle-detail-price .price-large {
  font-size: 2rem;
  font-weight: 900;
}

.bundle-detail-price .price-was {
  color: var(--text-muted);
  text-decoration: line-through;
}

.price-savings {
  color: var(--sale);
  font-weight: 900;
}

.bundle-products-section,
.mix-match-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 18px;
  margin: 0 0 18px;
}

.bundle-products-section h2 {
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.bundle-products-list {
  display: grid;
  gap: 10px;
}

.bundle-product-row,
.mix-match-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 10px;
}

.bundle-product-img,
.mix-match-item .mix-option-content img {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}

.bundle-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mix-match-item .mix-option-content img {
  object-fit: cover;
}

.bundle-product-details,
.mix-option-text {
  min-width: 0;
  flex: 1;
}

.bundle-product-name,
.mix-option-name {
  display: block;
  color: var(--text-primary);
  font-weight: 900;
  line-height: 1.25;
}

.bundle-product-option,
.mix-option-label {
  display: block;
  color: var(--text-secondary);
  font-size: .85rem;
  margin-top: 3px;
}

.bundle-product-qty {
  color: var(--brand-dark);
  font-weight: 900;
}

.picker-instruction {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mix-match-item {
  margin-top: 10px;
}

.mix-match-item .mix-option-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.mix-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mix-qty-btn,
.bundle-qty-inline button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 900;
}

.mix-qty-btn:hover:not(:disabled),
.bundle-qty-inline button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.mix-qty-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.mix-qty-display {
  min-width: 18px;
  text-align: center;
  font-weight: 900;
}

.mix-match-status {
  color: var(--text-secondary);
  font-weight: 900;
  margin: 0 0 14px;
}

/* One-of-each picker: clickable option cards with a check indicator */
.mix-match-item {
  cursor: pointer;
  border: 2px solid var(--border);
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.mix-match-item:hover { border-color: var(--brand); }
.mix-match-item.selected {
  border-color: var(--brand);
  background: var(--brand-light, #eaf7ef);
}
.mix-match-item.mix-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.mix-item-check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.mix-item-check svg { width: 16px; height: 16px; display: block; }
.mix-match-item.selected .mix-item-check {
  background: var(--brand, #05944f);
  border-color: var(--brand, #05944f);
  color: #fff;
}

.bundle-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bundle-qty-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px;
}

.bundle-qty-inline input[type="number"] {
  width: 46px;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 900;
  outline: none;
}

.bundle-action-row .btn-add-cart {
  min-height: 48px;
  padding: 0 24px;
}

/* --- Standard Content Pages --- */
.standard-content > .container {
  max-width: none;
  padding: 0;
}

.contact-container,
.about-container {
  max-width: 1120px;
  margin: 0 auto;
}

.contact-container h1,
.about-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.intro-text,
.about-hero p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Mobile: stack to a single column. Placed AFTER the desktop rule on purpose —
   the earlier mobile rule (~line 1151) loses to this one on source order
   (media queries don't add specificity), which left the fixed 340px info column
   eating the whole width and pushed the form off-screen to the right. */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.info-card,
.contact-form-section,
.value-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.info-card + .info-card {
  margin-top: 14px;
}

.info-card h3,
.contact-form-section h3 {
  margin-bottom: 14px;
}

.info-item + .info-item {
  margin-top: 16px;
}

.info-item h4 {
  font-size: .9rem;
  margin-bottom: 4px;
}

.info-item p,
.info-card li,
.about-content p {
  color: var(--text-secondary);
  line-height: 1.65;
}

.info-card a,
.about-content a {
  color: var(--brand-dark);
  font-weight: 800;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.form-group {
  display: grid;
  gap: 6px;
}

.form-group label {
  font-weight: 800;
  font-size: .9rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 12px 14px;
  font: inherit;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,148,79,.12);
}

.btn-submit {
  width: max-content;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  padding: 12px 22px;
  font-weight: 900;
}

.btn-submit:hover {
  background: var(--brand-dark);
}

.alert-success {
  border-color: rgba(5,148,79,.25);
  background: var(--brand-light);
  color: var(--brand-dark);
}

.alert-error {
  border-color: rgba(211,47,47,.25);
  background: #fff1f1;
  color: var(--sale);
}

.about-hero {
  margin-bottom: 24px;
}

.about-content {
  max-width: 920px;
}

.about-content h2 {
  margin: 28px 0 10px;
  font-size: 1.45rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.value-card h3 {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .shop-landing-search {
    max-width: none;
    margin-top: 16px;
  }

  .shop-action-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .shop-action-card {
    min-height: 112px;
  }

  .shop-action-card strong {
    font-size: 1.08rem;
  }

  .shop-category-grid {
    grid-template-columns: 1fr;
  }

  .shop-category-tile {
    grid-template-columns: 44px 1fr;
    min-height: 88px;
    padding: 12px;
  }

  .shop-category-tile img,
  .shop-category-icon {
    width: 44px;
    height: 44px;
  }

  .shop-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-section .section-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .shop-section-count {
    order: 3;
    width: 100%;
  }
}

/* --- Category Description (expandable) --- */
/* The intro read as a flat grey slab with a heavy green rule down one side,
   and its text ran the full width of the screen -- past 100 characters a line
   on a wide monitor, which is what made it feel like a notice rather than
   part of the shop. It is a proper card now, and the copy is held to a
   readable measure. */
.cat-description {
  margin-top: 14px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.cat-desc-preview,
.cat-desc-full {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
  max-width: 78ch;
}
.desc-toggle-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  margin-left: 2px;
  display: inline;
}
.desc-toggle-btn:hover { text-decoration: underline; color: var(--brand-dark); }

/* --- Category Search Bar --- */
.cat-search-bar {
  margin: 20px 0 16px;
}
.cat-search-form { width: 100%; }
.cat-search-wrap {
  display: flex;
  align-items: center;
  /* White rather than grey, so the field reads as something to type into and
     sits in the same material as the pills and the intro card above it. */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  gap: 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: border-color .15s, box-shadow .15s;
}
.cat-search-wrap:hover { border-color: #D6DED8; }
.cat-search-wrap:focus-within {
  /* The focus state mismatched itself: an orange border (--accent) around a
     green glow. Both are the brand green now. */
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,148,79,.14);
}
.cat-search-icon {
  display: flex; align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cat-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  color: var(--text-primary);
}
.cat-search-input::placeholder { color: var(--text-muted); }
.cat-search-clear {
  font-size: 20px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 4px;
  line-height: 1;
}
.cat-search-clear:hover { color: var(--text-primary); }

/* --- Category Toolbar (count, per-page, sort, view) --- */
.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.cat-result-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}
.cat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cat-per-page {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 30px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: all .15s;
}
.pp-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.pp-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* --- View Toggle --- */
.cat-view-toggle {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 32px;
  background: var(--bg);
  color: var(--text-muted);
  transition: all .15s;
}
.view-btn:hover { background: var(--surface); color: var(--text-primary); }
.view-btn.active { background: var(--text-primary); color: #fff; }
.view-btn svg { pointer-events: none; }

/* --- Product List View --- */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-list-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.product-list-card:hover {
  border-color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
/* The card is a container now: the link covers the browsing half and the
   purchase form sits beside it. */
.product-list-card { flex-wrap: wrap; align-items: stretch; }
.list-card-link {
  display: flex; gap: 16px;
  flex: 1 1 380px; min-width: 0;
  color: inherit; text-decoration: none;
}
.product-list-card .card-atc {
  flex: 0 0 210px;
  border-top: 0; border-left: 1px solid var(--border-light);
  background: transparent;
  justify-content: center;
}
@media (max-width: 720px) {
  .list-card-link { flex: 1 1 100%; }
  .product-list-card .card-atc {
    flex: 1 1 100%;
    border-left: 0; border-top: 1px solid var(--border-light);
  }
}
.list-card-img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface);
}
.list-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.list-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.list-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  /* Names wrap rather than ellipsise. These titles carry the variant at the end
     ("... 2000mg Supreme Flavor 4-Pack"), so a single clipped line hides the one
     detail that tells two listings apart. Truncation was not only a phone
     problem: at 768px three names on this page were being cut. */
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
}
.list-card-price {
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.list-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.list-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.list-meta-item {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.list-card-rating {
  font-size: 13px;
  color: var(--text-secondary);
}

/* List cards on phones. The name sat on one row beside the price, and the
   price carries flex-shrink:0 -- so at 320px the price kept its full 137px and
   the name was squeezed to 0px wide and vanished from the card entirely.
   Stacking the two gives the name the whole body width. */
@media (max-width: 560px) {
  .product-list-card { gap: 11px; padding: 11px; }
  /* Image size is set once, in the 768px block below -- it comes later in the
     file, so a second declaration here would be dead code. */
  .list-card-body { gap: 5px; }
  .list-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .list-card-name { font-size: 14px; line-height: 1.3; }
  .list-card-price { font-size: 14px; }
  .list-card-meta { gap: 5px; }
  .list-meta-item { font-size: 11px; padding: 2px 7px; }
  .list-card-rating { font-size: 12px; }
}

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  padding-bottom: 20px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all .15s;
}
.page-btn:hover { border-color: var(--text-primary); background: var(--surface); }
.page-btn.active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}
.page-dots {
  font-size: 14px;
  color: var(--text-muted);
  padding: 0 4px;
}

/* --- No Results --- */
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 16px;
}
.no-results .btn-outline {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all .15s;
}
.no-results .btn-outline:hover {
  background: var(--surface);
  border-color: var(--text-primary);
}

/* --- Product Detail --- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 24px 0;
}

.pd-gallery { position: relative; min-width: 0; width: 100%; }
.pd-slides, .pd-thumbs { max-width: 100%; }
.pd-counter {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.pd-main-img {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg);
  object-fit: contain; background: #fff;
}
.pd-slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  width: 100%; aspect-ratio: 1 / 1; min-height: 0;
  border-radius: var(--radius-lg); background: var(--surface);
  scrollbar-width: none; -ms-overflow-style: none;
}
.pd-slides::-webkit-scrollbar { display: none; }
.pd-slide {
  flex: 0 0 100%; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: contain; scroll-snap-align: center; background: #fff;
}
.pd-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.pd-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #cfd8cf;
  cursor: pointer; transition: background .15s, transform .15s;
}
.pd-dot.active { background: #1d9e75; transform: scale(1.25); }
.pd-thumbs {
  display: flex; gap: 8px; margin-top: 12px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
  width: 64px; height: 64px; border-radius: var(--radius-sm); flex: 0 0 auto;
  object-fit: contain; cursor: pointer; border: 2px solid transparent; background: #fff;
  transition: border-color .15s;
}
.pd-thumb.active, .pd-thumb:hover { border-color: var(--text-primary); }
@media (max-width: 768px) { .pd-thumbs { display: none; } }
/* Galleries with many images: drop the dot-flood, use the scrollable thumbnail
   strip (shown on mobile too) + the image counter. */
.pd-gallery.many .pd-dots { display: none; }
.pd-gallery.many .pd-thumbs { display: flex; }

.pd-info {}
.pd-breadcrumb {
  margin-bottom: 22px;
}
.pd-name { font-size: 28px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.pd-rating {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.pd-rating .stars { color: var(--star); font-size: 16px; }
.pd-rating .rating-text { font-size: 14px; color: var(--text-secondary); }

.pd-price-block { margin-bottom: 20px; }
.pd-price { font-size: 24px; font-weight: 700; }
.pd-price .sale { color: var(--sale); }
.pd-price .orig { text-decoration: line-through; color: var(--text-muted); font-size: 18px; margin-left: 8px; }
.pd-price .orig:first-child { margin-left: 0; margin-right: 8px; }
.pd-price .sale-word { font-size: .62em; text-transform: uppercase; letter-spacing: .04em; }
.pd-price-note { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.pd-price-note-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pd-price-note-row .pd-price-note { margin-top: 0; }
.pd-sale-available {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: var(--radius-pill); background: #fff0f0; color: var(--sale);
  font-size: 11px; font-weight: 700; line-height: 1.2;
}

.pd-badges { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pd-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  background: var(--surface);
}

.pd-section { margin-bottom: 24px; }
.pd-section-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

.weight-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.weight-opt {
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 2px solid var(--border); font-size: 14px; font-weight: 500;
  transition: all .15s; text-align: center; min-width: 0;
}
.weight-opt:hover { border-color: var(--text-muted); }
.weight-opt.selected { border-color: var(--text-primary); background: var(--text-primary); color: #fff; }
.weight-opt .opt-price { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.weight-opt.selected .opt-price { color: rgba(255,255,255,.7); }
.weight-opt .opt-regular-price { color: var(--text-muted); text-decoration: line-through; margin-right: 5px; }
.weight-opt .opt-sale-price { color: var(--sale); font-weight: 700; }
.weight-opt .opt-sale-word { text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
.weight-opt .opt-savings {
  display: block; width: max-content; max-width: 100%; margin: 4px auto 0; padding: 2px 6px;
  border-radius: var(--radius-pill); background: #fff0f0; color: var(--sale);
  font-size: 10px; font-weight: 700; line-height: 1.2;
}
.weight-opt.selected .opt-regular-price { color: rgba(255,255,255,.58); }
.weight-opt.selected .opt-sale-price { color: #ff9898; }
.weight-opt.selected .opt-savings { background: rgba(255,255,255,.14); color: #fff; }
/* Weight picker on phones. The options are a wrapping flex row that
   shrink-wraps each button to its own label, so at 320px they stack as ragged,
   centre-aligned blocks of differing widths. They become one full-width row per
   option instead: size on the left, price on the right, which is how a variant
   list is normally read. The button's label is a bare text node, so it has no
   class -- but inside a flex container it becomes an anonymous flex item, which
   is what lets it sit opposite the price without any markup change. */
@media (max-width: 560px) {
  .weight-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .weight-opt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    text-align: left;
    border-width: 1.5px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* A zero-height full-width flex item forces a line break after the label, so
     every option reads the same way -- size on line one, pricing on line two --
     instead of the price right-aligning onto its own line only when the label
     happens to be long. The label itself is an anonymous flex item (order 0),
     so ordering around it is the only handle CSS has here. */
  .weight-opt::before {
    content: "";
    flex: 0 0 100%;
    height: 0;
    order: 1;
  }

  .weight-opt .opt-price {
    order: 2;
    margin: 4px 0 0;
    white-space: nowrap;
    font-size: 12.5px;
  }

  .weight-opt .opt-savings {
    order: 3;
    flex: 0 0 auto;
    margin: 4px 0 0;
  }
}

.weight-opt--oos {
  opacity: .45; cursor: not-allowed; position: relative;
  background: var(--bg-subtle, #f5f5f5); color: var(--text-muted);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.weight-opt--oos:hover { border-color: var(--border); }
.weight-opt--oos .opt-oos {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
}

.pd-description { font-size: 15px; color: var(--text-secondary); line-height: 1.65; }

.pd-effects { display: flex; gap: 8px; flex-wrap: wrap; }
.effect-tag {
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 13px; font-weight: 500;
}

.pd-terpenes { display: flex; gap: 12px; flex-wrap: wrap; }
.terpene {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}
.terpene-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

.add-to-cart-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 16px 0;
  display: flex; align-items: center; gap: 16px;
}
.qty-selector {
  display: flex; align-items: center; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.qty-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  transition: background .15s;
}
.qty-btn:hover { background: var(--surface); }
.qty-val {
  width: 40px; text-align: center; font-size: 15px; font-weight: 600;
}

.btn-add-cart {
  flex: 1; padding: 12px 24px; border-radius: var(--radius-pill);
  background: var(--text-primary); color: #fff;
  font-size: 16px; font-weight: 700; text-align: center;
  transition: background .15s;
}
.btn-add-cart:hover { background: #333; }

/* --- Out of stock (product detail) --- */
.btn-add-cart--disabled,
.btn-add-cart--disabled:hover {
  background: #c9ccd1; color: #fff;
  cursor: not-allowed; pointer-events: none;
  width: 100%; flex: none;
}
.oos-notice {
  display: inline-block; margin-bottom: 12px;
  background: #fdecea; color: #b71c1c;
  border: 1px solid #f5c6c2;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  padding: 8px 16px; border-radius: var(--radius-pill);
}
.oos-subtext { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }

/* --- Tabs (product detail) --- */
.tab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.tab-item {
  padding: 12px 20px; font-size: 15px; font-weight: 600;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s;
}
.tab-item:hover { color: var(--text-primary); }
.tab-item.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* --- Reviews --- */
.review-summary {
  display: flex; align-items: center; gap: 24px; margin-bottom: 24px;
}
.review-big-num { font-size: 48px; font-weight: 800; }
.review-breakdown { flex: 1; }
.review-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 13px;
}
.review-bar {
  flex: 1; height: 6px; background: var(--surface); border-radius: 3px;
  overflow: hidden;
}
.review-bar-fill { height: 100%; background: var(--star); border-radius: 3px; }

.review-card {
  padding: 16px 0; border-bottom: 1px solid var(--border-light);
}
.review-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 700;
  color: var(--text-secondary);
}
.review-name { font-size: 14px; font-weight: 600; }
.review-date { font-size: 12px; color: var(--text-muted); }
.review-stars { color: var(--star); font-size: 13px; margin-bottom: 6px; }
.review-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* --- Cart Page --- */
.cart-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 40px;
  padding: 24px 0;
}
.cart-title { font-size: 28px; font-weight: 800; margin-bottom: 24px; }

.cart-item {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.cart-item-img {
  width: 90px; height: 90px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface);
}
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.cart-item-option { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.cart-item-actions { display: flex; align-items: center; gap: 12px; }
.cart-item-price { margin-left: auto; font-size: 15px; font-weight: 600; }

.cart-summary {
  background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
  position: sticky; top: calc(var(--header-h) + 24px);
  height: fit-content;
}
.cart-summary h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.summary-row {
  display: flex; justify-content: space-between;
  font-size: 14px; margin-bottom: 12px;
}
.summary-row.total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }

.btn-checkout {
  width: 100%; padding: 14px; border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 700; text-align: center;
  margin-top: 16px; transition: background .15s;
}
.btn-checkout:hover { background: var(--brand-dark); }

/* --- Checkout Page --- */
.checkout-layout {
  display: grid; grid-template-columns: 1fr 400px; gap: 40px;
  padding: 24px 0;
}
.checkout-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px;
}
.checkout-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.form-group { flex: 1; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--text-secondary);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px;
  transition: border-color .15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--brand);
}

.btn-place-order {
  width: 100%; padding: 16px; border-radius: var(--radius-pill);
  background: var(--text-primary); color: #fff;
  font-size: 16px; font-weight: 700; text-align: center;
  margin-top: 16px; transition: background .15s;
}
.btn-place-order:hover { background: #333; }

/* --- Footer (styles moved to bottom of file) --- */
.footer-socials a:hover { color: var(--brand); }

/* --- Misc --- */
.divider { height: 1px; background: var(--border); margin: 24px 0; }

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--text-secondary);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }

/* --- Frequently Bought Together --- */
.fbt-section { margin-top: 40px; }
.fbt-grid { display: flex; gap: 16px; overflow-x: auto; }

/* --- Responsive --- */

/* Large desktops (1400px+): wider cards, more space */
@media (min-width: 1400px) {
  .product-card { width: 220px; }
  .deal-card { width: 420px; }
  .category-card { width: 160px; }
  .article-card { width: 320px; }
}

/* Tablets & small desktops */
@media (max-width: 1024px) {
  :root { --gutter: 16px; }
  .primary-nav { display: none; }
  .hamburger-btn { display: flex; }   /* show hamburger wherever desktop nav is hidden (incl. phone landscape) */
  .product-detail { grid-template-columns: 1fr; gap: 24px; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .carousel-nav { display: none; }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .primary-nav-link { padding: 0 9px; font-size: 13px; }
  .header-search { max-width: 340px; }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --header-h: 56px; --gutter: 12px; }

  /* Mobile header */
  .hamburger-btn { display: flex; }
  .header-search { display: none; }
  .header-inner { gap: 12px; }
  .logo { font-size: 18px; }
  .logo-img { width: 34px; height: 34px; border-radius: 7px; }
  .logo .leaf { font-size: 22px; }
  .header-actions .btn-text { padding: 6px 10px; font-size: 13px; }
  .cart-btn { padding: 6px 12px; font-size: 13px; }

  /* Hero */
  .hero-banner { padding: 28px 20px; min-height: 180px; border-radius: var(--radius-md); }
  .hero-content h1 { font-size: 22px; }
  .hero-content p { font-size: 14px; margin-bottom: 16px; }
  .hero-cta { padding: 10px 22px; font-size: 14px; }
  .hero-badge { top: 12px; right: 12px; font-size: 11px; padding: 4px 10px; }

  /* Info strip: scroll horizontally */
  .info-strip-group { gap: 16px; padding-right: 16px; }
  .info-strip-group span { font-size: 12px; }

  /* Deal carousel */
  .deal-card { width: 300px; min-height: 120px; padding: 16px; }
  .deal-card .deal-text h3 { font-size: 14px; }
  .deal-card .deal-img { width: 80px; height: 80px; }
  .deal-arrow { display: none !important; }

  /* Category pills: make them touch-scrollable */
  .category-pills { gap: 6px; padding: 12px 0; }
  .pill { padding: 7px 14px; font-size: 13px; }

  /* Product cards in carousels */
  .product-card { width: 160px; }
  .home-row .carousel { gap: 10px; }
  .home-row .carousel > .product-card {
    width: calc((100% - 10px) / 2);
  }
  .product-card .card-body { padding: 8px 10px 12px; }
  .product-card .card-name { font-size: 13px; }
  .product-card .card-price { font-size: 12px; }
  .product-card .badge { font-size: 10px; padding: 2px 6px; }

  /* Category cards */
  .category-card { width: 110px; }
  .category-card .cat-name { font-size: 12px; }

  /* Promo banners stack */
  .promo-row { flex-direction: column; gap: 12px; }
  .promo-banner { padding: 16px 20px; min-height: 80px; }
  .promo-icon { font-size: 28px; }

  /* Section headers */
  .section-header { padding-top: 20px; margin-bottom: 12px; }
  .section-title { font-size: 18px; }
  .section-link { font-size: 13px; }

  /* Product grid */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Product detail */
  .pd-name { font-size: 22px; }
  .pd-price { font-size: 20px; }
  .weight-options { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .weight-opt { padding: 10px 12px; font-size: 13px; min-width: 0; }
  .pd-thumbs { gap: 6px; }
  .pd-thumb { width: 56px; height: 56px; }

  /* Add to cart bar full width on mobile */
  .add-to-cart-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 12px var(--gutter); background: var(--bg);
    border-top: 1px solid var(--border); z-index: 50;
  }
  .btn-add-cart { font-size: 14px; padding: 11px 20px; }

  /* Tabs */
  .tab-item { padding: 10px 14px; font-size: 14px; }

  /* Reviews */
  .review-big-num { font-size: 36px; }

  /* Shop page */
  .shop-header h1 { font-size: 22px; }
  .filter-bar { gap: 6px; }
  .filter-btn { padding: 6px 12px; font-size: 13px; }
  .sort-dropdown { font-size: 13px; padding: 6px 12px; }

  /* Pills arrows hidden on mobile (touch scroll) */
  .pills-arrow { display: none; }
  .category-pills-wrap::before,
  .category-pills-wrap::after { display: none; }

  /* Category page mobile */
  .cat-search-wrap { padding: 8px 14px; }
  .cat-search-input { font-size: 14px; }
  .cat-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cat-toolbar-right { width: 100%; justify-content: space-between; }
  .cat-per-page { font-size: 12px; }
  .pp-btn { width: 28px; height: 26px; font-size: 12px; }
  .product-list-card .list-card-img,
  .product-list-card .list-card-img-wrap { width: 90px; height: 90px; }
  .list-card-name { font-size: 14px; }
  .list-card-desc { display: none; }
  .pagination { gap: 4px; }
  .page-btn { min-width: 34px; height: 34px; font-size: 13px; padding: 0 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Form */
  .form-row { flex-direction: column; gap: 12px; }

  /* Carousel arrows hidden on mobile (touch scrolling) */
  .carousel-nav { display: none; }

  /* Article cards */
  .article-card { width: 240px; }
  .articles-section { margin-top: 24px; padding-top: 20px; }
  .pd-full-desc-title { font-size: 18px; }
  .pd-full-desc-body { font-size: 14px; }
  .pd-highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-highlight-box { padding: 12px; }
  .pd-highlight-value { font-size: 16px; }

  /* Category top-nav: smaller on mobile */
  .cat-topnav-item { min-width: 60px; padding: 6px 4px; }
  .cat-topnav-img { width: 48px; height: 48px; }
  .cat-topnav-label { font-size: 10px; }
  .cat-topnav-arrow { display: none; }
  .cat-topnav-wrap::before,
  .cat-topnav-wrap::after { display: none; }

  /* Drawer: full width on mobile */
  .drawer { width: 100%; max-width: 100%; }
}

/* --- Deal Carousel (UberEats-style promo banners) --- */
.deal-carousel {
  display: flex; gap: 16px; overflow-x: auto; padding: 16px 0;
  scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory;
}
.deal-carousel::-webkit-scrollbar { display: none; }
.deal-carousel > * { scroll-snap-align: start; }

/* Deal carousel overlay arrows (UberEats-style) */
.deal-carousel-wrap {
  position: relative;
}
.deal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-primary); z-index: 10;
  border: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  opacity: .9;
}
.deal-carousel-wrap:hover .deal-arrow:not(.deal-arrow-hidden) { opacity: 1; }
.deal-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.deal-arrow-left { left: 8px; }
.deal-arrow-right { right: 8px; }
.deal-arrow-hidden { display: none !important; }

.deal-card {
  flex-shrink: 0; width: 420px; min-height: 140px;
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer;
  position: relative; transition: transform .15s;
}
.deal-card:hover { transform: translateY(-2px); }
.deal-card.deal-yellow  { background: #FFF8E1; }
.deal-card.deal-green   { background: #E8F5E9; }
.deal-card.deal-orange  { background: #FFF3E0; }
.deal-card.deal-blue    { background: #E3F2FD; }
.deal-card.deal-pink    { background: #FCE4EC; }
.deal-card.deal-purple  { background: #F3E5F5; }

.deal-card .deal-text { flex: 1; }
.deal-card .deal-text h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.deal-card .deal-text p  { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.deal-card .deal-cta {
  display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill);
  background: var(--text-primary); color: #fff;
  font-size: 13px; font-weight: 600;
}
.deal-card .deal-img {
  width: 100px; height: 100px; border-radius: var(--radius-md);
  object-fit: cover; flex-shrink: 0;
}

@media (max-width: 768px) {
  /* Two complete product cards plus a quarter of the next one. */
  .carousel {
    gap: 10px;
  }

  .carousel > .product-card,
  .fbt-grid > .product-card {
    flex: 0 0 calc((100% - 20px) / 2.25);
    width: calc((100% - 20px) / 2.25);
  }

  .fbt-grid {
    gap: 10px;
  }

  /* Promotional panels use the same two-and-a-quarter mobile rhythm. */
  .deal-carousel {
    gap: 10px;
  }

  .deal-card {
    flex: 0 0 calc((100% - 20px) / 2.25);
    width: calc((100% - 20px) / 2.25);
    min-height: 0;
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
  }

  .deal-card .deal-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
  }

  .deal-card .deal-text {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .deal-card .deal-text h3 {
    display: -webkit-box;
    min-height: 3.6em;
    margin-bottom: 8px;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .deal-card .deal-text p {
    display: none;
  }

  .deal-card .deal-cta {
    width: 100%;
    padding: 6px 8px;
    margin-top: auto;
    font-size: .72rem;
    text-align: center;
  }
}

/* --- Article Card --- */
.article-card {
  width: 280px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--card); cursor: pointer;
  transition: box-shadow .2s; flex-shrink: 0;
}
.article-card:hover { box-shadow: var(--shadow-hover); }
.article-card .article-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--surface);
}
.article-card .article-body { padding: 12px 14px; }
.article-card .article-title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px;
}
.article-card .article-meta {
  font-size: 12px; color: var(--text-muted);
}

/* --- Extra badge styles --- */
.badge-best { background: #FFF8E1; color: #F57F17; }
.badge-new  { background: #E3F2FD; color: #1565C0; }
.badge-deal { background: #FFEBEE; color: #C62828; font-weight: 700; }

/* --- Sale tag overlay on product card images --- */
.card-img-wrap,
.list-card-img-wrap {
  position: relative;
  overflow: hidden;
}
.card-deal-tag {
  position: absolute; top: 8px; left: 8px;
  background: #C62828; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill);
  z-index: 2; line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  letter-spacing: 0.02em;
}
/* List card image wrapper sizing */
.list-card-img-wrap {
  flex-shrink: 0;
  width: 120px; height: 120px;
}
.list-card-img-wrap .card-deal-tag {
  font-size: 10px; padding: 3px 8px;
  top: 6px; left: 6px;
}
/* Out-of-stock card tag + dimmed card */
.card-oos-tag {
  position: absolute; top: 8px; left: 8px;
  background: #5f6368; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill);
  z-index: 3; line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  letter-spacing: 0.02em;
}
.list-card-img-wrap .card-oos-tag { font-size: 10px; padding: 3px 8px; top: 6px; left: 6px; }
.product-card--oos .card-img { opacity: .55; filter: grayscale(35%); }
.product-card--oos .card-name { color: var(--text-secondary); }

/* --- Category section on shop page with scroll --- */
.shop-category-section { margin-bottom: 32px; }
.shop-category-section .section-products {
  display: flex; gap: 16px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px;
}
.shop-category-section .section-products::-webkit-scrollbar { display: none; }
.shop-category-section .section-products .product-card { flex-shrink: 0; width: 200px; }

/* --- Info strip under hero --- */
.info-strip {
  overflow: hidden;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.info-strip-track {
  display: flex; width: max-content;
  animation: info-strip-roll 45s linear infinite;
}
.info-strip:hover .info-strip-track { animation-play-state: paused; }
.info-strip-group {
  display: flex; align-items: center; gap: 24px; padding-right: 24px;
  flex-shrink: 0;
}
.info-strip-group span {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: #2d7a4f;
}
@keyframes info-strip-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* product card image fix */
.product-card .card-img {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
}

/* --- Articles Section --- */
.articles-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}
.articles-section .section-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin: -4px 0 0;
}
.articles-carousel {
  gap: 20px;
}
.article-card {
  width: 280px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--card); cursor: pointer;
  transition: box-shadow .2s, transform .2s; flex-shrink: 0;
  text-decoration: none; color: inherit; display: block;
}
.article-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.article-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--surface); display: block;
}
.article-img-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.article-body { padding: 14px 16px; }
.article-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.article-title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px;
}
.article-excerpt {
  font-size: 13px; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 8px;
}
.article-readmore {
  font-size: 13px; color: var(--brand); font-weight: 600;
}

/* --- Product Full Description Section --- */
.pd-full-description {
  margin-top: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--border-light);
}
.pd-full-desc-title {
  font-size: 22px; font-weight: 700;
  margin: 0 0 16px; color: var(--text-primary);
}
.pd-full-desc-body {
  font-size: 15px; line-height: 1.7;
  color: var(--text-secondary);
  /* Fill the full content width at every screen size — no narrow max-width gap
     on desktop. Break only genuinely-too-long tokens (URLs, product codes) so
     the text wraps instead of being clipped on mobile. Use overflow-wrap only:
     `word-break: break-word` would break normal words mid-word ("ever|y"). */
  overflow-wrap: break-word;
}
.pd-full-desc-body img,
.pd-full-desc-body table,
.pd-full-desc-body pre,
.pd-full-desc-body iframe { max-width: 100%; height: auto; }
.pd-full-desc-body table { display: block; overflow-x: auto; }
.pd-full-desc-body p { margin: 0 0 12px; }
.pd-full-desc-body ul,
.pd-full-desc-body ol { margin: 0 0 12px; padding-left: 24px; }
.pd-full-desc-body h2,
.pd-full-desc-body h3 {
  color: var(--text-primary); margin: 20px 0 8px;
  font-size: 17px; font-weight: 700;
}

/* Read more link */
.pd-readmore {
  display: inline-block; margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--brand);
  text-decoration: none;
}
.pd-readmore:hover { text-decoration: underline; }

/* --- Key Highlights Grid --- */
.pd-highlights {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.pd-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.pd-highlight-box {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.pd-highlight-value {
  font-size: 20px; font-weight: 800;
  color: var(--brand); margin-bottom: 4px;
}
.pd-highlight-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}
.pd-highlight-desc {
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════ */
/* PRODUCT TABS                                          */
/* ═══════════════════════════════════════════════════════ */
/* Accordion sections */
.pd-accordion {
  margin-top: 32px;
  border-top: 1px solid var(--border-light);
}
.pd-accord-item {
  border-bottom: 1px solid var(--border-light);
}
.pd-accord-item > summary { list-style: none; }
.pd-accord-item > summary::-webkit-details-marker { display: none; }
.pd-accord-item > summary::marker { display: none; content: ''; }
.pd-accord-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.pd-accord-header:hover { color: var(--brand); }
.pd-accord-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform .25s ease;
}
.pd-accord-item[open] > .pd-accord-header .pd-accord-chevron {
  transform: rotate(180deg);
}
.pd-accord-body {
  padding: 0 4px 20px;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Legacy tab classes kept for backward compat */
.pd-tabs-section { margin-top: 32px; border-top: 1px solid var(--border-light); }
.pd-tab-nav { display: none; }
.pd-tab-content { display: none; padding: 24px 0; }
.pd-tab-content.active { display: block; }

/* Specifications table */
.pd-spec-table { max-width: 700px; }
.pd-spec-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}
.pd-spec-key {
  flex: 0 0 180px;
  font-weight: 600; color: var(--text-primary);
}
.pd-spec-val {
  flex: 1;
  color: var(--text-secondary);
}

/* Usage & Safety */
.pd-usage-block { margin-bottom: 24px; }
.pd-usage-block h3 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 10px; color: var(--text-primary);
}
.pd-usage-body {
  font-size: 14px; line-height: 1.7;
  color: var(--text-secondary);
}
.pd-warnings-list {
  padding-left: 20px;
  font-size: 14px; line-height: 1.7;
  color: var(--text-secondary);
}
.pd-warnings-list li { margin-bottom: 6px; }

/* FAQ Accordion */
.pd-faq-list { max-width: 800px; }
.pd-faq-item {
  border-bottom: 1px solid var(--border-light);
}
.pd-faq-q {
  padding: 16px 0;
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pd-faq-q::-webkit-details-marker { display: none; }
.pd-faq-q::after {
  content: '+';
  font-size: 20px; font-weight: 400;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
  margin-left: 16px;
}
.pd-faq-item[open] .pd-faq-q::after {
  content: '−';
}
.pd-faq-a {
  padding: 0 0 16px;
  font-size: 14px; line-height: 1.7;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════ */
/* DELIVERY BANNER (above footer)                        */
/* ═══════════════════════════════════════════════════════ */
.delivery-banner {
  background: var(--brand);
  color: #fff;
  padding: 40px 0 32px;
  text-align: center;
  margin-top: 40px;
}
.delivery-banner-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.delivery-icon {
  font-size: 36px;
}
.delivery-banner-top strong {
  font-size: 20px; display: block; margin-bottom: 4px;
}
.delivery-banner-top p {
  font-size: 14px; color: rgba(255,255,255,.75); margin: 0;
}
.delivery-cities {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px;
  margin-bottom: 20px;
}
.city-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  font-size: 13px; font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.delivery-cta {
  display: flex; align-items: center;
  justify-content: center; gap: 16px;
}
.delivery-call-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 28px;
  background: #e53935; color: #fff;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.delivery-call-btn:hover { background: #c62828; }
.delivery-hours {
  font-size: 14px; color: rgba(255,255,255,.75);
}

/* ═══════════════════════════════════════════════════════ */
/* ENHANCED FOOTER                                       */
/* ═══════════════════════════════════════════════════════ */
.site-footer {
  background: #1a1a1a; color: #ccc;
  padding: 48px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer-brand-col .footer-brand {
  font-size: 24px; font-weight: 800; color: #fff;
  margin-bottom: 8px;
}
.footer-brand-col .footer-brand .leaf {
  color: var(--brand); font-size: 28px;
}
.footer-tagline {
  font-size: 14px; font-weight: 700; color: #fff;
  margin: 0 0 8px;
}
.footer-desc {
  font-size: 13px; color: #999; line-height: 1.6;
  margin: 0 0 16px;
}
.footer-socials {
  display: flex; gap: 12px;
}
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #ccc; transition: background .15s, color .15s;
}
.social-link:hover { background: var(--brand); color: #fff; }
.footer-col h4 {
  font-size: 15px; font-weight: 700; color: #fff;
  margin: 0 0 14px;
}
.footer-col a,
.footer-contact-link {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #999;
  text-decoration: none; padding: 5px 0;
  transition: color .15s;
}
.footer-contact-link svg { flex: 0 0 auto; opacity: .85; }
.footer-col a:hover { color: #fff; }
.footer-payments {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.payment-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  text-align: center;
}
.payment-cod {
  background: #e65100; color: #fff;
}
.payment-etransfer {
  background: #ffc107; color: #333;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px; color: #666;
}
.footer-bottom-links {
  /* No flex-wrap here meant four links had to share one line whatever the
     width: each one broke mid-phrase ("Cannabis / Dispensary / Canada") and the
     last ran off the right edge. They wrap as whole items now. */
  display: flex; gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
}
.footer-bottom-links a {
  color: #999; text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.footer-bottom-links a:hover { color: #fff; }

/* ── Footer mobile ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Once .footer-grid collapses to one column, Quick Links (10 items) and
   Categories (8) run as a single tall list -- a long scroll past nothing but
   links. They split into two columns with the heading spanning both. Targeted
   by position: the grid's children are brand column, Quick Links, Categories,
   Contact Info. Contact Info is deliberately left as one column; its lines
   (email, phone, opening hours) are far too long to sit two-up. */
@media (max-width: 768px) {
  .footer-grid > .footer-col:nth-child(2),
  .footer-grid > .footer-col:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-content: start;
  }
  .footer-grid > .footer-col:nth-child(2) > h4,
  .footer-grid > .footer-col:nth-child(3) > h4 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  /* Centring the columns was tried here and reverted: the headings centred but
     their link lists stayed left-aligned, which read worse than the original.
     Columns stay left-aligned; only the legal row below is centred. */
  .footer-bottom { padding: 18px 0; }
  .footer-bottom > span { line-height: 1.55; }
  .footer-bottom-links { gap: 14px; row-gap: 9px; }
  .footer-bottom-links a { font-size: 12.5px; }
  .footer-col h4 { margin-bottom: 10px; }
}

@media (max-width: 768px) {
  .delivery-banner-top { flex-direction: column; text-align: center; }
  .delivery-banner-top strong { font-size: 18px; }
  .delivery-cta { flex-direction: column; gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Accordion mobile */
  .pd-accord-header { padding: 16px 2px; font-size: 14px; }
  .pd-spec-key { flex: 0 0 120px; }
}


/* ================================================================
   CART PAGE
   ================================================================ */

.cart-page-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
}

.cart-page-container h1 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}

.cart-items-section { min-width: 0; }

.cart-actions-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.cart-product-summary {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 250px;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.cart-table thead {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}

.cart-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cart-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.cart-table tr:last-child td { border-bottom: none; }

.cart-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface);
  flex-shrink: 0;
}

.cart-product a {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-primary);
}

.cart-product a:hover .cart-product-name { color: var(--brand); }

.cart-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cart-product-name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: color 0.15s;
}

.cart-product-option {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--surface);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.cart-price { white-space: nowrap; }

.cart-original-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: block;
}

.cart-sale-price {
  color: var(--sale);
  font-weight: 600;
}

.cart-regular-price {
  font-weight: 600;
  color: var(--text-primary);
}

.cart-subtotal { white-space: nowrap; font-weight: 600; }

/* Quantity selector (cart) */
.cart-quantity .qty-selector {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
}

.cart-quantity .qty-selector-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}

.cart-quantity .qty-selector-btn:hover:not(:disabled) { background: var(--surface); }

.cart-quantity .qty-selector-btn:disabled,
.cart-quantity .qty-selector-btn.disabled { opacity: 0.3; cursor: default; }

.cart-quantity .qty-selector-display {
  width: 2rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
}

.cart-quantity .quantity-form { margin: 0; }

/* Remove button */
.cart-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.cart-remove-btn:hover {
  background: #fef2f2;
  border-color: var(--sale);
  color: var(--sale);
}

.cart-remove-btn svg { pointer-events: none; }

/* Cart breadcrumb */
.cart-page-container nav.breadcrumb {
  margin-bottom: 1rem;
}

.cart-page-container nav.breadcrumb a {
  text-decoration: none;
}

/* Reward rows in cart */
.cart-reward-row {
  background: linear-gradient(90deg, #f0faf4 0%, #fff 60%);
}
.cart-reward-row td { border-bottom: 1px solid #d4e8dc !important; }
.cart-reward-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  padding: 2px 10px;
  border-radius: 999px;
  margin-top: 2px;
}
.cart-reward-free {
  font-weight: 700;
  color: var(--brand);
  font-size: 0.95rem;
}

/* One-of-many reward chooser */
.cart-reward-notice {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid #badfc8;
  border-radius: var(--radius-sm);
  background: #f0faf4;
  color: #176536;
  font-size: .9rem;
}
.cart-reward-notice--error { border-color: #efc4c4; background: #fff5f5; color: #a52a2a; }
.cart-reward-notice--info { border-color: #d8cfad; background: #fffbec; color: #725c17; }
.cart-reward-picker {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #cce5d5;
  border-radius: var(--radius-sm);
  background: #f8fcf9;
}
.cart-reward-picker__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.cart-reward-picker__heading h2 { margin: 2px 0 0; font-size: 1.15rem; }
.cart-reward-picker__eyebrow {
  color: var(--brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cart-reward-picker__limit {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: .75rem;
  font-weight: 700;
}
.cart-reward-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cart-reward-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 82px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cart-reward-option:hover { border-color: rgba(5,148,79,.5); }
.cart-reward-option:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.cart-reward-option.is-selected {
  border-color: var(--brand);
  background: #f0faf4;
  box-shadow: 0 0 0 2px rgba(5,148,79,.1);
}
.cart-reward-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cart-reward-option__image {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #f2f4f2;
  object-fit: cover;
}
.cart-reward-option__content { display: grid; gap: 2px; min-width: 0; }
.cart-reward-option__content strong,
.cart-reward-option__content span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-reward-option__content span { color: var(--text-secondary); font-size: .8rem; }
.cart-reward-option__content small { color: var(--brand); font-size: .75rem; font-weight: 650; }
.cart-reward-option__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-weight: 800;
}
.cart-reward-option.is-selected .cart-reward-option__check {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.cart-reward-picker__submit { margin-top: 12px; }

@media (max-width: 700px) {
  .cart-reward-options { grid-template-columns: 1fr; }
  .cart-reward-picker { padding: 14px; }
}

/* Next reward teaser */
.cart-reward-teaser {
  background: linear-gradient(90deg, #fff8ee, #fffdf7);
  border: 1px dashed #e0c78a;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #7a5d1e;
  text-align: center;
}

/* Shipping threshold banner (full-width above breadcrumb) */
.shipping-banner {
  background: var(--brand-dark);
  color: #fff;
  padding: 12px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.shipping-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.shipping-banner__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.shipping-banner__content {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.shipping-banner__content strong {
  color: #7deba9;
}
.shipping-banner__sep {
  opacity: 0.4;
  margin: 0 2px;
}
.shipping-banner__flat {
  width: 100%;
  font-size: 0.8rem;
  opacity: 0.65;
  margin-top: 2px;
}
/* State: fully unlocked */
.shipping-banner--free {
  background: var(--brand);
}
.shipping-banner--free .shipping-banner__content strong {
  color: #fff;
}
/* State: partial unlock */
.shipping-banner--partial .shipping-banner__content strong {
  color: #7deba9;
}
@media (max-width: 600px) {
  .shipping-banner { font-size: 0.82rem; padding: 10px 0; }
  .shipping-banner__icon { font-size: 1.2rem; }
  .shipping-banner__content { flex-direction: column; gap: 2px; }
  .shipping-banner__sep { display: none; }
}

/* Order summary sidebar */
.cart-summary {
  position: sticky;
  top: 180px;
}

.summary-card {
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}

.summary-card h2 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.summary-row.total {
  padding: 1rem 0;
  border-top: 2px solid var(--brand);
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.summary-row.total strong { color: var(--brand); }
.summary-row strong { color: var(--text-primary); }

/* Cart buttons */
.cart-page-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.cart-page-container .btn-primary {
  background: var(--brand);
  color: #fff;
  width: 100%;
  padding: 0.85rem;
  margin-top: 1rem;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.cart-page-container .btn-primary:hover { background: var(--brand-dark); }

.cart-page-container .btn-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.cart-page-container .btn-secondary:hover { background: var(--border); }

.cart-page-container .btn-danger {
  background: #fff;
  color: var(--sale);
  border: 1px solid var(--sale);
}

.cart-page-container .btn-danger:hover { background: #fef2f2; }

/* Empty cart */
.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.empty-cart h2 { color: var(--text-primary); margin-bottom: 1rem; }
.empty-cart p { color: var(--text-secondary); margin-bottom: 2rem; }

/* ── Mobile Cart ── */
@media (max-width: 768px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; }

  /* `.cart-table td` sets 1.25rem/1rem padding at specificity (0,1,1), which
     outranks a bare `.cart-price { padding: 0 }` at (0,1,0) -- so every cell
     kept its desktop padding. That is what inflated the row to 270px tall and
     squeezed the thumbnail column down to 20px of content. Reset it once, at a
     specificity that actually wins; the row draws its own bottom border. */
  .cart-table .cart-row > td {
    padding: 0;
    border-bottom: 0;
    vertical-align: middle;
  }

  .cart-row {
    display: grid;
    /* minmax(0,1fr) is what lets the title column actually shrink. On a plain
       1fr a long product name sets the column's minimum width, which pushed the
       line total clean off the right edge of the screen. */
    grid-template-columns: 64px minmax(0, 1fr) auto;
    /* Three rows were always being used (quantity sits on row 3); declaring
       only two left it to an implicit row and the oversized row gap. */
    grid-template-rows: auto auto auto;
    gap: 0.45rem 0.75rem;
    align-items: center;
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
  }

  .cart-row:last-child { border-bottom: none; }

  .cart-product {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 0;
    align-self: start;
  }

  .cart-product a { flex-direction: column; gap: 0; }
  .cart-product .cart-product-info { display: none; }
  .cart-thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
  }

  /* The title spans to the row's edge and reserves space for the remove button
     with padding, rather than sliding underneath it. The original reserved
     2rem for a 35px button, which is why a long name ran under the bin icon. */
  .cart-row::before {
    content: attr(data-product-name);
    grid-column: 2 / 4;
    grid-row: 1;
    padding-right: 2.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .cart-price, .cart-quantity, .cart-subtotal {
    padding: 0;
    display: flex;
    align-items: center;
  }

  .cart-price {
    grid-column: 2 / 4; grid-row: 2;
    font-size: 0.8rem;
    color: var(--text-secondary);
  }
  .cart-price .cart-regular-price,
  .cart-price .cart-sale-price { font-size: 0.8rem; font-weight: 500; }
  .cart-quantity { grid-column: 2; grid-row: 3; }
  .cart-subtotal {
    grid-column: 3; grid-row: 2 / 4;
    align-items: center; justify-content: flex-end;
    font-weight: 700;
    white-space: nowrap;
  }

  .cart-remove {
    position: absolute;
    top: 0.85rem;
    right: 0.8rem;
    padding: 0;
  }

  /* The stepper was scaled down with a transform, which leaves its original
     footprint behind and reads as a stray gap. Size it honestly instead. */
  .cart-quantity .qty-selector { transform: none; }
  .cart-actions-row { justify-content: center; }
}

@media (max-width: 380px) {
  .cart-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.4rem 0.6rem; }
  .cart-thumb { width: 52px; height: 52px; }
  .cart-row::before { font-size: 0.82rem; }
  .cart-subtotal { font-size: 0.9rem; }
}

/* ================================================================
   CHECKOUT PAGE (co-* classes)
   ================================================================ */

.co-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.co-alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.co-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
  padding-bottom: 3rem;
}

/* ── Steps ── */
.co-step {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  overflow: hidden;
}

.co-step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.co-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.co-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.co-step-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.15rem 0 0;
}

.co-step-body {
  padding: 1.5rem;
}

/* ── Fields ── */
.co-field {
  margin-bottom: 1rem;
}

.co-field:last-child {
  margin-bottom: 0;
}

.co-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.co-field input,
.co-field select,
.co-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.co-field input::placeholder,
.co-field textarea::placeholder {
  color: var(--text-muted);
}

.co-field-error input,
.co-field-error select,
.co-field-error textarea,
.co-input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.co-field-msg {
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 5px;
}
label.co-field-error { color: #dc2626; }

.co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.co-row-3 {
  grid-template-columns: 2fr 1fr 1fr;
}

/* ── Contact cards ── */
.co-contact-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.co-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.co-contact-card input[type="radio"] {
  display: none;
}

.co-contact-card:hover {
  border-color: #ccc;
  background: var(--surface);
}

.co-contact-card.selected {
  border-color: var(--accent);
  background: #fff7ed;
}

.co-contact-icon {
  color: var(--text-secondary);
  transition: color 0.15s;
}

.co-contact-card.selected .co-contact-icon {
  color: var(--accent);
}

.co-icon-whatsapp {
  color: #25D366;
}

.co-contact-card.selected .co-icon-whatsapp {
  color: #25D366;
}

.co-contact-text strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.co-contact-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Actions ── */
.co-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.co-btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.co-btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 90, 0, 0.3);
}

.co-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.co-btn-back:hover {
  color: var(--text-primary);
}

/* ── Sidebar / Summary ── */
.co-sidebar {
  position: sticky;
  top: 100px;
}

.co-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.co-summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--text-primary);
}

.co-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.co-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.co-item-img {
  position: relative;
  flex-shrink: 0;
}

.co-item-img img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-light);
}

.co-item-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-item-badge-reward {
  background: var(--brand);
  font-size: 0.65rem;
}

.co-item-reward {
  background: linear-gradient(90deg, #f0faf4 0%, #fff 60%);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.co-item-info {
  flex: 1;
  min-width: 0;
}

.co-item-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-item-option {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.co-item-price {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--text-primary);
}

/* Totals */
.co-totals {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.co-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.co-free {
  color: var(--brand);
  font-weight: 600;
}

.co-total-final {
  border-top: 2px solid var(--text-primary);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.co-total-final strong {
  font-size: 1.2rem;
  color: var(--accent);
}

/* Payment method */
.co-payment {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.co-payment h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

.co-payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.co-payment-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.co-payment-card input[type="radio"] {
  display: none;
}

.co-payment-card:hover {
  border-color: #ccc;
  background: var(--surface);
}

.co-payment-card.selected {
  border-color: var(--accent);
  background: #fff7ed;
}

.co-payment-icon {
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color 0.15s;
}

.co-payment-card.selected .co-payment-icon {
  color: var(--accent);
}

.co-payment-text {
  flex: 1;
}

.co-payment-text strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.co-payment-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.co-payment-info {
  margin-top: 0.75rem;
}

.co-payment-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f0f9ff;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.co-payment-detail svg {
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Trust signals */
.co-trust {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.co-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.co-trust-item svg {
  color: var(--brand);
  flex-shrink: 0;
}

/* ── Checkout responsive ── */
@media (max-width: 900px) {
  .co-layout {
    grid-template-columns: 1fr;
  }
  .co-form-section,
  .co-sidebar {
    min-width: 0;
    overflow: hidden;
  }
  .co-sidebar {
    position: static;
    order: -1;
  }
  .co-contact-options {
    grid-template-columns: 1fr;
  }
  .co-item-name {
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 600px) {
  .co-row,
  .co-row-3 {
    grid-template-columns: 1fr;
  }
  .co-step-body {
    padding: 1rem;
  }
  .co-step-header {
    padding: 1rem;
  }
  .co-summary {
    padding: 1rem;
  }
}

/* =========================================
   Sales & Deals Page
   ========================================= */

.sales-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  margin: 0 0 36px;
  padding: 34px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 90, 0, .22), transparent 34%),
    linear-gradient(135deg, #07140d 0%, #05351f 58%, #0b6b3c 100%);
  color: #fff;
  overflow: hidden;
}

.sales-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}

.sales-eyebrow,
.sales-section-header span {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sales-page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1;
  font-weight: 900;
  margin: 10px 0 16px;
}

.sales-page-hero p {
  max-width: 680px;
  color: rgba(255,255,255,.84);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

.sales-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sales-primary-btn,
.sales-secondary-btn,
.sales-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 900;
}

.sales-primary-btn,
.sales-card-cta {
  background: var(--brand);
  color: #fff;
}

.sales-primary-btn:hover,
.sales-card-cta:hover {
  background: var(--brand-dark);
}

.sales-secondary-btn {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}

.sales-secondary-btn:hover {
  background: rgba(255,255,255,.18);
}

.sales-hero-stats {
  display: grid;
  gap: 12px;
  align-content: center;
}

.sales-hero-stats div {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.sales-hero-stats strong {
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.sales-hero-stats span {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .86rem;
  font-weight: 700;
  margin-top: 8px;
}

.sales-section {
  margin: 36px 0 48px;
  scroll-margin-top: 160px;
}

.sales-section-header {
  max-width: 760px;
  margin-bottom: 18px;
}

.sales-section-header h2 {
  color: var(--text-primary);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  font-weight: 900;
  margin: 8px 0 10px;
}

.sales-section-header p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.sales-promotions .promo-grid {
  margin: 18px 0 0;
}

.sales-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 14px;
}

.sales-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 900;
}

.sales-filter-btn span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .78rem;
}

.sales-filter-btn.active,
.sales-filter-btn:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-dark);
}

.sales-filter-btn.active span {
  background: #fff;
  color: var(--brand-dark);
}

.sales-result-line {
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.sales-deal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sales-deal-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sales-deal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(5,148,79,.32);
  box-shadow: var(--shadow-hover);
}

.sales-card-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / .78;
  background: var(--surface);
  overflow: hidden;
}

.sales-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}

.sales-deal-card:hover .sales-card-image img {
  transform: scale(1.035);
}

.sales-discount-badge,
.sales-expiry-pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 900;
}

.sales-discount-badge {
  left: 10px;top: 10px;
  background: var(--accent);
  color: #fff;
}

.sales-expiry-pill {
  right: 10px;
  bottom: 10px;
  background: rgba(25,25,25,.86);
  color: #fff;
}

.sales-card-body {
  padding: 16px;
}

.sales-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.sales-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 800;
}

.sales-card-body h3 {
  font-size: 1rem;
  line-height: 1.28;
  font-weight: 900;
  margin: 0 0 10px;
}

.sales-card-body h3 a {
  color: var(--text-primary);
}

.sales-card-body h3 a:hover {
  color: var(--brand-dark);
}

.sales-card-desc {
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.sales-card-price {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 900;
  margin: 0 0 12px;
}

.sales-card-price s {
  color: var(--text-muted);
  font-weight: 700;
  margin-right: 6px;
}

.sales-card-price strong {
  color: var(--sale);
}

.sales-save-line {
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 900;
  margin: -4px 0 12px;
}

.sales-option-list {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 14px;
}

.sales-option-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.35;
}

.sales-option-row strong {
  white-space: nowrap;
  color: var(--sale);
  font-weight: 900;
}

.sales-option-row s {
  color: var(--text-muted);
  font-weight: 700;
}

.sales-option-more {
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 900;
}

.sales-card-cta {
  width: 100%;
}

.sales-empty-state {
  padding: 48px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
}

.sales-empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.sales-empty-state p {
  color: var(--text-secondary);
  margin: 0 auto 20px;
  max-width: 560px;
}

@media (max-width: 1180px) {
  .sales-deal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sales-page-hero {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .sales-hero-copy {
    min-height: auto;
  }

  .sales-hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .sales-deal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sales-page-hero {
    padding: 22px;
  }

  .sales-hero-actions,
  .sales-hero-stats {
    grid-template-columns: 1fr;
  }

  .sales-primary-btn,
  .sales-secondary-btn {
    width: 100%;
  }

  .sales-deal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sales-deal-card {
    display: flex;
    flex-direction: column;
  }

  .sales-card-image {
    aspect-ratio: 1;
  }

  .sales-discount-badge,
  .sales-expiry-pill {
    min-height: 22px;
    max-width: calc(100% - 12px);
    padding: 0 7px;
    font-size: .66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sales-discount-badge {
    left: 6px;
    top: 6px;
  }

  .sales-expiry-pill {
    right: 6px;
    bottom: 6px;
  }

  .sales-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px;
  }

  .sales-card-meta {
    gap: 4px;
    margin-bottom: 7px;
  }

  .sales-card-meta span {
    min-height: 20px;
    padding: 0 6px;
    font-size: .63rem;
  }

  .sales-card-meta span:nth-child(n + 2) {
    display: none;
  }

  /* These h3s are product names linking to /products/..., so they get the same
     treatment as the grid and list cards: wrap in full rather than clamp. The
     min-height is kept so short names still reserve two lines and the cards in
     a row stay aligned. */
  .sales-card-body h3 {
    min-height: 2.4em;
    margin-bottom: 8px;
    font-size: .86rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .sales-card-desc {
    display: none;
  }

  .sales-card-price {
    margin-bottom: 8px;
    font-size: .82rem;
    line-height: 1.25;
  }

  .sales-save-line {
    margin: -2px 0 8px;
    font-size: .72rem;
  }

  /* The variant block read as a cramped grey slab: 11px type, 1px gaps, and
     labels clipped to "Quarter Pound ( 4 ...", hiding the size the price
     belongs to. Labels wrap in full, the type steps up to a legible size, and
     each variant is separated by a hairline so the size and its price read as
     one unit. */
  .sales-option-list {
    gap: 8px;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .05);
    margin-bottom: 11px;
  }

  .sales-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }

  .sales-option-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .sales-option-row span {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .75rem;
    line-height: 1.35;
    letter-spacing: -.005em;
  }

  /* Each price stays unbroken, but the pair must be allowed to wrap: a row like
     "$1,200.00  $950.00" is wider than the box at 320px and was spilling out
     the right-hand side. */
  .sales-option-row strong {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: .82rem;
    min-width: 0;
  }

  .sales-option-row s {
    font-weight: 600;
    font-size: .72rem;
  }

  .sales-option-more {
    font-size: .68rem;
  }

  .sales-card-cta {
    min-height: 36px;
    padding: 0 8px;
    margin-top: auto;
    font-size: .76rem;
  }
}

/* =========================================
   CMS Page Shortcodes
   ========================================= */

.sc-section {
  font-size: 1rem;
}

.sc-section h2 {
  max-width: 760px;
  font-size: clamp(1.75rem, 2.2vw, 2.4rem);
  line-height: 1.12;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 18px;
}

.sc-section h3 {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.sc-section p {
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0 0 18px;
}

.sc-section a {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(5, 148, 79, .28);
  text-underline-offset: 4px;
}

.sc-section a:hover {
  color: var(--brand);
  text-decoration-color: currentColor;
}

.sc-section ul,
.sc-section ol {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.sc-section li {
  position: relative;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-left: 28px;
}

.sc-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-light);
}

/* ── Content bullets fix ─────────────────────────────────────────────
   The global "ul, ol { list-style: none }" reset (top of this file) strips
   bullet markers from EVERY list, so the <ul><li> bullets in location-page
   boxes (Coverage, Neighbourhoods, Privacy/Safety, Premium Product, etc.)
   render with no marker. This restores real bullets for all CMS page content
   and neutralises the unreliable custom .sc-section dot to avoid double markers. */
.page-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 16px; display: block; }
.page-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 16px; display: block; }
.page-content li { margin: 6px 0; line-height: 1.6; padding-left: 0; }
.page-content .sc-section ul,
.page-content .sc-section ol { display: block; padding-left: 1.5rem; }
.page-content .sc-section li { padding-left: 0; }
.page-content .sc-section li::before { content: none; }

/* Article & blog post bodies don't use .page-content, so the global
   "ul, ol { list-style: none }" reset hides their bullets too. Restore them. */
.article-content ul, .article-body ul, .blog-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 16px; display: block; }
.article-content ol, .article-body ol, .blog-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 16px; display: block; }
.article-content li, .article-body li, .blog-content li { margin: 6px 0; line-height: 1.6; padding-left: 0; }
.article-content li::before, .article-body li::before, .blog-content li::before { content: none; }

.sc-section li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.sc-section li a::after {
  content: "›";
  color: var(--brand);
  font-weight: 800;
  line-height: 1;
}

.sc-columns {
  align-items: stretch;
  margin-top: 28px;
}

.sc-col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 26px;
  box-shadow: var(--shadow-card);
}

.sc-col > :last-child {
  margin-bottom: 0;
}

.sc-col ul:last-child,
.sc-col ol:last-child {
  margin-bottom: 0;
}

.sc-section-fw[style*="background: #fff"] .sc-col,
.sc-section-fw[style*="background:#fff"] .sc-col,
.sc-section-fw[style*="background: #FFFFFF"] .sc-col {
  background: var(--surface);
}

.sc-section-fw[style*="background: #f8f9fa"] .sc-col,
.sc-section-fw[style*="background:#f8f9fa"] .sc-col {
  background: var(--card);
}

.sc-features {
  margin-top: 28px;
}

.sc-features > div {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card);
}

.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  max-width: 1052px;
  margin: 28px auto;
}

.sc-stat-item {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 132px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.sc-stat-value {
  color: var(--brand-dark);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  font-weight: 900;
  line-height: 1;
}

.sc-stat-label {
  color: var(--text-secondary);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.35;
}

.sc-section-fw[style*="background: #2e7d32"] .sc-stat-item,
.sc-section-fw[style*="background:#2e7d32"] .sc-stat-item,
.sc-section-fw[style*="background: #05944f"] .sc-stat-item,
.sc-section-fw[style*="background:#05944f"] .sc-stat-item,
.sc-section-fw[style*="background: #0f3d2e"] .sc-stat-item,
.sc-section-fw[style*="background:#0f3d2e"] .sc-stat-item {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.96);
}

.sc-faq-section {
  margin: 28px 0 0;
}

.sc-faq {
  display: grid;
  gap: 12px;
}

.sc-faq-item {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sc-faq-item:hover {
  border-color: rgba(5, 148, 79, .32);
  box-shadow: var(--shadow-hover);
}

.sc-faq-question {
  position: relative;
  display: block;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 20px 58px 20px 22px;
  user-select: none;
}

.sc-faq-question::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.sc-faq-question.active {
  color: var(--brand-dark);
}

.sc-faq-question.active::after {
  content: "-";
  background: var(--brand);
  color: #fff;
}

.sc-faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .97rem;
  line-height: 1.7;
  padding: 0 22px;
  transition: max-height .25s ease, padding .25s ease;
}

.sc-faq-answer.active {
  max-height: 520px;
  padding: 0 22px 22px;
}

.sc-faq-answer p {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 800px) {
  .sc-columns {
    grid-template-columns: 1fr !important;
  }

  .sc-col {
    padding: 22px;
  }

  .sc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px auto;
  }

  .sc-stat-item {
    min-height: 112px;
    padding: 18px 14px;
  }

  .sc-section h2 {
    font-size: 1.65rem;
  }
}

@media (max-width: 480px) {
  .sc-stats {
    grid-template-columns: 1fr;
  }
}

/* Vape picker modal */
.vape-picker-section {
  margin-top: 18px;
}

.vape-picker-open-btn {
  background: var(--brand);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vape-picker-open-btn:hover {
  background: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(12, 115, 54, .18);
  transform: translateY(-1px);
}

.vape-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .56);
}

.vape-picker-modal {
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.vape-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.vape-picker-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.vape-picker-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f5f1;
  color: var(--text);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.vape-picker-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  min-height: 440px;
  overflow: hidden;
}

.vape-picker-body > div {
  padding: 18px;
  overflow-y: auto;
}

.vape-picker-body h4 {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vape-picker-flavors,
.vape-picker-weights {
  border-right: 1px solid var(--border);
}

.vape-picker-flavors,
.vape-picker-summary-col {
  background: #f8faf7;
}

.vape-flavor-list,
.vape-tier-list {
  display: grid;
  gap: 8px;
}

.vape-flavor-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.vape-flavor-btn:hover,
.vape-flavor-btn.active {
  border-color: var(--flavor-color, var(--brand));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.vape-flavor-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
}

.vape-flavor-name {
  flex: 1;
  font-weight: 700;
}

.vape-flavor-check {
  display: none;
  color: var(--flavor-color, var(--brand));
  font-weight: 900;
}

.vape-flavor-btn.active .vape-flavor-check {
  display: inline;
}

.vape-flavor-badge {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.vape-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.vape-tier-info {
  display: grid;
  gap: 3px;
}

.vape-tier-label {
  font-weight: 800;
}

.vape-tier-price,
.vape-summary-line-price,
.vape-running-total-amount {
  color: var(--brand);
  font-weight: 800;
}

.vape-tier-sale {
  color: var(--sale);
}

.vape-tier-original {
  margin-left: 5px;
  color: var(--text-muted);
  font-size: .82rem;
  text-decoration: line-through;
}

.vape-tier-qty {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.vape-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: #f0f3ee;
  color: var(--text);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 800;
}

.vape-qty-display {
  width: 40px;
  text-align: center;
  font-weight: 800;
}

.vape-empty-msg {
  margin: 18px 0;
  color: var(--text-muted);
  text-align: center;
}

.vape-summary-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}

.vape-summary-line-info {
  flex: 1;
  display: grid;
  gap: 2px;
}

.vape-summary-flavor {
  font-weight: 800;
}

.vape-summary-tier,
.vape-summary-qty {
  color: var(--text-secondary);
  font-size: .82rem;
}

.vape-summary-remove {
  border: 0;
  background: transparent;
  color: var(--sale);
  cursor: pointer;
  font-size: 1.15rem;
}

#vape-picker-running-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--brand);
}

#vape-selection-summary {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 760px) {
  .vape-picker-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .vape-picker-modal {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .vape-picker-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }

  .vape-picker-flavors,
  .vape-picker-weights {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .vape-flavor-list {
    display: flex;
    flex-wrap: wrap;
  }

  .vape-flavor-btn {
    width: auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: .86rem;
  }

  .vape-tier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vape-tier-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .vape-tier-qty {
    align-self: center;
  }

  .vape-picker-summary-col {
    display: none;
  }
}

/* ── Order CTA buttons (drawer + mega menu) ─────────────────── */
.drawer-order-cta { display: flex; gap: 8px; margin: 14px 0 4px; }
.order-btn { flex: 1; text-align: center; padding: 10px 8px; border-radius: 9px; font-weight: 700; font-size: .84rem; text-decoration: none; white-space: nowrap; }
.order-call { background: #16a34a; color: #fff; }
.order-text { background: #16202b; color: #fff; }
.order-wa { background: #25d366; color: #fff; }
.order-btn:hover { filter: brightness(1.08); }
.drawer-order-note { font-size: .76rem; color: #7a8a7a; margin: 4px 0 10px; text-align: center; }

/* ── Drawer category accordions ─────────────────────────────── */
.drawer-acc { border-bottom: 1px solid #edf1ed; }
.drawer-acc summary { display: flex; justify-content: space-between; align-items: center; padding: 11px 4px; font-weight: 600; cursor: pointer; list-style: none; }
.drawer-acc summary::-webkit-details-marker { display: none; }
.drawer-acc-caret { color: #9aa79a; transition: transform .18s; line-height: 1; }
.drawer-acc[open] .drawer-acc-caret { transform: rotate(180deg); }
.drawer-acc-body { padding: 2px 0 10px; }
.drawer-acc-link { display: block; padding: 7px 14px; font-size: .92rem; color: #3c4a3c; text-decoration: none; border-radius: 7px; }
.drawer-acc-link:hover { background: #f2f6f2; }
.drawer-acc-all { font-weight: 600; color: #16a34a; }
.drawer-acc-single { display: block; padding: 11px 4px; font-weight: 600; color: inherit; text-decoration: none; border-bottom: 1px solid #edf1ed; }
.drawer-acc-featured { color: #16a34a; }

/* ── Mega panel: order strip + view-all ─────────────────────── */
.mega-order-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2ee; }
.mega-order-strip .order-btn { flex: 0 0 auto; padding: 8px 14px; }
.mega-order-label { font-weight: 700; font-size: .9rem; }
.mega-order-hours { font-size: .8rem; color: #7a8a7a; margin-left: auto; }
.mega-link-more { font-size: .82rem; color: #16a34a; font-weight: 600; }
.mega-subcategory-row { flex-wrap: wrap; row-gap: 18px; }

/* ── Section pill buttons (View All Articles / Blogs) ───────── */
.section-pill-btn {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-primary); border: 1.5px solid #d8e0d8; background: #fff;
  transition: all .15s ease; white-space: nowrap;
}
.section-pill-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Article FAQ accordions (normalized from WP imports) ────── */
.article-content details.article-faq-item {
  border: 1px solid #e4e8e4; border-radius: 10px;
  padding: 12px 16px; margin: 0 0 10px; background: #fff;
}
.article-content details.article-faq-item summary {
  font-weight: 600; cursor: pointer; line-height: 1.45;
}
.article-content details.article-faq-item[open] summary { margin-bottom: 8px; }
.article-content details.article-faq-item p { margin: 6px 0 2px; color: #4a564a; }

/* ── Floating WhatsApp button (bottom-left) ─────────────────── */
.whatsapp-float {
  position: fixed; left: 18px; bottom: 18px; z-index: 9990;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,.3); color: #fff; }
@media (max-width: 640px) {
  .whatsapp-float { width: 50px; height: 50px; left: 12px; bottom: 14px; }
}

/* ── Bundle page FAQ accordion ──────────────────────────────── */
.faq-accordion details.faq-item {
  border: 1px solid #e4e8e4; border-radius: 10px;
  padding: 12px 16px; margin: 0 0 10px; background: #fff;
}
.faq-accordion details.faq-item summary {
  font-weight: 600; cursor: pointer; line-height: 1.45; list-style-position: inside;
}
.faq-accordion details.faq-item[open] summary { margin-bottom: 8px; }
.faq-accordion details.faq-item p { margin: 6px 0 2px; color: #4a564a; }

/* ── Bundle page tabs (Description / FAQ / Reviews) ─────────── */
.tab-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 16px; border-bottom: 1px solid #e4e8e4; padding-bottom: 10px; }
.tab-button {
  padding: 9px 20px; border-radius: 999px; border: 1.5px solid #d8e0d8;
  background: #fff; font-weight: 600; font-size: .92rem; cursor: pointer;
  color: var(--text-primary); transition: all .15s;
}
.tab-button:hover { border-color: var(--brand); color: var(--brand); }
.tab-button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.description-content { line-height: 1.65; color: #3c4a3c; white-space: normal; }

/* ── Product deal banner (Option B promo callout) ──────────── */
.pd-deal-banner {
  display: flex; align-items: center; gap: 9px;
  background: #eafaf1; border: 1px solid #1d9e75; border-left: 4px solid #0f6e56;
  border-radius: 8px; padding: 10px 14px; margin: 14px 0 4px;
  color: #0f6e56; font-weight: 600; font-size: 14px; line-height: 1.4;
}
.pd-deal-banner .pd-deal-icon { font-size: 18px; }

/* ── Mobile header: prevent the "Uper Weed" wordmark clipping on phones ── */
@media (max-width: 600px){
  .site-header .logo{ font-size: 16px !important; }
  .site-header .logo-img{ width: 32px !important; height: 32px !important; }
  .site-header .header-inner{ gap: 10px !important; }
}
@media (max-width: 380px){
  .site-header .logo{ font-size: 15px !important; }
  .site-header .logo-img{ width: 30px !important; height: 30px !important; }
}

/* ── iOS zoom-on-focus fix (global) ─────────────────────────────────────────
   Safari on iPhone auto-zooms into any field whose font-size is < 16px when it
   gets focus. Force a 16px floor on text-entry controls at mobile widths so
   focusing checkout / age-gate / search / any input never triggers that zoom.
   Scoped to <=1024px (desktop untouched); leaves checkboxes/radios/range/color/
   file inputs alone. !important is required to beat inline font-sizes on some
   fields (e.g. the checkout coupon box). Added 2026-07. */
@media (max-width: 1024px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea{
    font-size: 16px !important;
  }
}


/* ── Effect chips: icon over label (replaces plain .effect-tag pills) ── */
.pd-effects { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.effect-chip { display:flex; flex-direction:column; align-items:center; gap:6px; width:95px; text-align:center; }
.effect-chip .effect-ic { width:75px; height:75px; object-fit:contain; display:block; }
.effect-chip .effect-lbl { font-size:12px; font-weight:600; line-height:1.15; color:var(--text-primary,#1f2a24); }
/* Fallback: any effect without an icon yet still shows as the old-style pill */
.effect-chip--noic { width:auto; }
.effect-chip--noic .effect-lbl { padding:6px 14px; border-radius:var(--radius-pill); background:var(--brand-light); color:var(--brand-dark); font-weight:500; }
@media (max-width:520px){ .effect-chip{ width:85px; } .effect-chip .effect-ic{ width:65px; height:65px; } }


/* ── Category STICKER icons (swapped from circle-crop photos to full die-cut stickers) ── */
.cat-quicknav-img { background: transparent !important; border-color: transparent !important; overflow: visible !important; }
.cat-quicknav-img img { object-fit: contain !important; }
.cat-quicknav-item:hover .cat-quicknav-img { border-color: transparent !important; box-shadow: none !important; }
/* Mobile hamburger drawer: bigger, full sticker instead of tiny circle crop */
.drawer-acc-thumb { width: 52px !important; height: 52px !important; border-radius: 8px !important; object-fit: contain !important; background: transparent !important; border: none !important; }
/* Surface the category icon strip on mobile too (previously hidden; only the hamburger had them) */
@media (max-width: 1024px){
  .cat-nav-dd { display: block !important; }
  .cat-nav-dd .cat-quicknav-inner { justify-content: flex-start; }
}


/* Mobile: stack the wordmark under the logo icon */
@media (max-width: 768px){
  .site-header .logo, header .logo, .logo {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    line-height: 1.0 !important;
    text-align: center !important;
  }
  .logo .logo-text { white-space: nowrap; }
}


/* === UperWeedCA product video media === */
.pd-video-slide { position: relative; overflow: hidden; }
.pd-video-cover,
.pd-video-slide iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.pd-video-cover {
  padding: 0; cursor: pointer; overflow: hidden; background: #0e1210;
  color: #fff; font: inherit;
}
.pd-video-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-video-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,.04) 52%);
}
.pd-video-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,132,74,.94); box-shadow: 0 8px 28px rgba(0,0,0,.3);
  transition: transform .15s, background .15s;
}
.pd-video-cover:hover .pd-video-play,
.pd-video-cover:focus-visible .pd-video-play { transform: translate(-50%,-50%) scale(1.06); background: #16a05a; }
.pd-video-play span {
  width: 0; height: 0; margin-left: 5px;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #fff;
}
.pd-video-label {
  position: absolute; z-index: 2; left: 14px; bottom: 14px;
  padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.7);
  color: #fff; font-size: 12px; font-weight: 700;
}
.pd-video-thumb { position: relative; padding: 0; overflow: hidden; background: #111; }
.pd-video-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pd-video-thumb span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 24px; height: 24px; border-radius: 50%; background: rgba(20,132,74,.92);
}
.pd-video-thumb span::after {
  content: ''; position: absolute; left: 10px; top: 7px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff;
}
@media (max-width: 768px) {
  .pd-gallery.has-video .pd-thumbs { display: flex; justify-content: center; }
  .pd-gallery.has-video .pd-thumb:not(.pd-video-thumb) { display: none; }
  .pd-gallery.has-video .pd-video-thumb { width: 72px; height: 48px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Narrow phones: one product per row.

   This lives at the end of the file deliberately. A `max-width: 768px` block
   further up (the .product-grid two-column rule) also matches at 320px, and
   media queries add no specificity -- so an equally specific rule declared
   earlier loses on source order. Two columns leave each card ~142px, giving
   the weight control ~120px of inner width, while a label like
   "Quarter Pound (4 Oz) + 1" needs roughly 190px and was cut under the
   chevron. One card per row gives it the full gutter.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .product-card .card-name { font-size: 14px; }
  .product-card .card-price { font-size: 16px; }
  .card-atc select,
  .card-atc-field--fixed { font-size: 12.5px; }
  .card-atc-btn { font-size: 13px; padding: 11px 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category hero.

   A centred band: a small letterspaced eyebrow, the category name, and the
   copy held to a short measure under it. The dark field is painted with a
   huge ring shadow and clipped back, rather than 100vw margins -- 100vw
   counts the scrollbar, which would push a horizontal scroll onto the page.
   ────────────────────────────────────────────────────────────────────────── */
.shop-header--hero {
  position: relative;
  padding: 56px 20px 48px;
  margin-bottom: 4px;
  text-align: center;
  background: #0E1A13;
  box-shadow: 0 0 0 100vmax #0E1A13;
  clip-path: inset(0 -100vmax);
}
.shop-header--hero .shop-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: #7FC79D;
}
.shop-header--hero h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
}
/* Inside the hero the intro is plain centred copy, not a card. */
.shop-header--hero .cat-description {
  margin: 20px auto 0;
  max-width: 62ch;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.shop-header--hero .cat-desc-preview,
.shop-header--hero .cat-desc-full {
  max-width: none;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
}
.shop-header--hero .desc-toggle-btn { color: #7FC79D; }
.shop-header--hero .desc-toggle-btn:hover { color: #A8DCBE; }
.shop-header--hero .shop-meta {
  margin: 18px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 13.5px;
  letter-spacing: .02em;
}

@media (max-width: 560px) {
  .shop-header--hero { padding: 38px 16px 32px; }
  .shop-header--hero .shop-eyebrow { font-size: 10.5px; letter-spacing: .18em; margin-bottom: 10px; }
  .shop-header--hero .cat-desc-preview,
  .shop-header--hero .cat-desc-full { font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Product card, refined toward the hero's register.

   The previous pass kept a card that still read as a generic tile: rounded
   chips under the name, a mid-weight title, a green button with no relation
   to the rest of the page. This pass borrows the hero's language -- a quiet
   letterspaced label, a hairline rule, a near-black action -- so the grid and
   the band above it read as one page.
   ────────────────────────────────────────────────────────────────────────── */
.product-card {
  border-radius: 14px;
  border-color: #ECEFED;
  box-shadow: none;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: #D9E2DC;
  box-shadow: 0 14px 34px rgba(14,26,19,.12);
}
.product-card .card-img-wrap { margin: 12px 12px 2px; border-radius: 10px; }

.product-card .card-name {
  font-size: 14.5px; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.34;
  color: #16211B;
  /* Reserve two lines whether the name needs them or not. Without this a
     one-line name ("GMO Cookies") pulls its badges, price and button up while
     a two-line neighbour ("West Coast Connection Blue Thai Hash") pushes them
     down, so nothing lines up across a row. */
  min-height: 2.68em;
}
.product-card .card-price {
  font-size: 15.5px; font-weight: 750;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.product-card .card-rating { font-size: 11.5px; }

/* Badges become quiet uppercase marks instead of rounded chips. */
/* Badges keep their normal size and weight -- the previous pass shrank them to
   a pale uppercase whisper, which was restyling, not redesigning. */
.product-card .card-badges {
  gap: 5px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.product-card .badge {
  padding: 3px 9px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.product-card .badge-sale {
  background: #FFF1F1; color: #C62828; border-color: #FBDDDD;
}

/* Potency chip: lighter, to sit on artwork rather than stamp it. */
.card-thc-chip {
  top: 10px; left: 10px;
  padding: 4px 10px;
  background: rgba(14,26,19,.72);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Purchase block in the hero's register. */
.card-atc { background: transparent; border-top-color: #F1F4F2; }
.card-atc-label {
  font-size: 9.5px; letter-spacing: .14em; color: var(--text-muted);
}
.card-atc select,
.card-atc-field--fixed { border-radius: 9px; }
.card-atc-btn {
  border-radius: 9px;
  background: #16211B;
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.card-atc-btn:hover {
  background: #0E1A13;
  box-shadow: 0 6px 18px rgba(14,26,19,.24);
}
.card-atc-price { font-weight: 700; letter-spacing: 0; opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Card layout, rebuilt.

   Before: image, name, rating, price, badges, label, select, button -- eight
   blocks stacked in one column, which is why it kept reading as the same card
   however the type was styled. Now the image runs edge to edge, the badges sit
   with the name as a meta line, and price and rating share a row; on a wide
   enough card the weight and the button share one too. Fewer, wider rows.
   ────────────────────────────────────────────────────────────────────────── */
/* Wider tracks: at 232px the weight picker and the button could not share a
   row without starving the picker. Fewer, larger cards also give the product
   photography room, which is what the category is selling. */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }

/* Image is flush to the card edge again, and taller. */
.product-card .card-img-wrap {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 1 / 1;
}
.product-card .card-img { width: 100%; height: 100%; object-fit: cover; }
.card-thc-chip { top: auto; bottom: 10px; left: 10px; }

.product-card .card-body { gap: 9px; padding: 14px 14px 10px; }

/* Price left, rating right, on one line. */
/* Price then rating, always stacked in that order.
   Laying them side by side and letting the row wrap meant the rating sat
   BESIDE a short price ("$1,200.00") but BELOW a long one
   ("$200.00 - $350.00"), so cards in the same row disagreed with each other.
   A column gives every card the same two lines whatever the price. */
.card-buyline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
}
.card-buyline .card-price {
  margin: 0; font-size: 16.5px;
  white-space: nowrap;      /* "$200.00 — $350.00" stays on one line */
}
.card-buyline .card-rating { margin: 0; white-space: nowrap; }

/* Weight and action side by side, divided from the body by a full-bleed rule. */
.card-atc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "field" "button";
  gap: 7px;
  align-items: stretch;
  padding: 12px 14px 14px;
  border-top: 1px solid #EFF2F0;
}
.card-atc-label { grid-area: label; }
.card-atc-field,
.card-atc-field--fixed { grid-area: field; min-width: 0; }
.card-atc-btn {
  grid-area: button; width: 100%;
  padding: 11px 14px; white-space: nowrap;
}
.card-atc-long { display: inline; }

/* Under this the two controls cannot share a row without squeezing both. */

/* ──────────────────────────────────────────────────────────────────────────
   Product tags.

   Flattening every tag to the same grey lost the information they carry -- a
   strain type, a lab result and a discount are different kinds of fact and
   should not look identical. Each gets its own tint, but muted and built to
   one formula (pale ground, mid-dark text, a slightly stronger border of the
   same hue) so the row reads as a set rather than a handful of stickers.
   ────────────────────────────────────────────────────────────────────────── */
.product-card .badge-indica,  .product-list-card .badge-indica,
.product-card .badge-thc,     .product-list-card .badge-thc {
  background: #F4F1FC; color: #5B46A8; border-color: #E5DEF7;
}
.product-card .badge-sativa,  .product-list-card .badge-sativa {
  background: #FDF4E8; color: #9C5A15; border-color: #F5E3CB;
}
.product-card .badge-hybrid,  .product-list-card .badge-hybrid {
  background: #EDF7F0; color: #2C6B43; border-color: #D9EBE0;
}
.product-card .badge-cbd,     .product-list-card .badge-cbd,
.product-card .badge-new,     .product-list-card .badge-new {
  background: #EEF4FD; color: #1B5FA8; border-color: #DAE7F7;
}
.product-card .badge-lab,     .product-list-card .badge-lab {
  background: #E9F5F2; color: #15685D; border-color: #D4EAE5;
}
.product-card .badge-best,    .product-list-card .badge-best {
  background: #FDF7E6; color: #8A6410; border-color: #F4E7C3;
}
.product-card .badge-sale,    .product-list-card .badge-sale,
.product-card .badge-deal,    .product-list-card .badge-deal {
  background: #FDEFEE; color: #C0392B; border-color: #F7DCD9;
}

/* Potency on the image keeps its dark ground -- a pale tint would disappear
   into light product photography. */

.shop-header--hero > * { position: relative; z-index: 1; }

/* ── Category toolbar ────────────────────────────────────────────────────────
   The pills become a compact strip of uppercase chips sitting on one line with
   the controls, rather than a row of large rounded buttons stacked above them.
   ───────────────────────────────────────────────────────────────────────── */
.category-pills { padding: 18px 0 14px; gap: 7px; }
.pill {
  padding: 8px 14px;
  border-radius: 6px;
  border-color: #DFE5E1;
  background: #fff;
  box-shadow: none;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #3C4A42;
}
.pill:hover {
  background: #F6F8F7; border-color: #C9D4CD;
  box-shadow: none; transform: none;
  color: #16211B;
}
.pill.active {
  background: #16211B; border-color: #16211B; color: #fff;
  box-shadow: none;
}
.pill.active:hover { background: #0E1A13; border-color: #0E1A13; transform: none; box-shadow: none; }

/* Controls in the same register as the chips. */
.sort-dropdown,
.cat-view-toggle .view-btn,
.pp-btn {
  border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.cat-per-page { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* ── Filter panel ───────────────────────────────────────────────────────────
   Search, sort and page size live here rather than as a bar across the page.
   It is a plain GET form over the parameters the shop already reads, so the
   panel drives real results and a filtered URL stays shareable.
   ───────────────────────────────────────────────────────────────────────── */
.cat-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid #DFE5E1; border-radius: 6px;
  background: #fff; color: #3C4A42;
  font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cat-filter-btn:hover { background: #F6F8F7; border-color: #C9D4CD; color: #16211B; }
.cat-filter-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}

.cat-filter-scrim {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(14,26,19,.45);
}
.cat-filter-scrim[hidden] { display: none; }

.cat-filter-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 12001;
  width: 380px; max-width: 88vw;
  background: #fff;
  box-shadow: -18px 0 48px rgba(0,0,0,.18);
  overflow-y: auto;
}
.cat-filter-panel[hidden] { display: none; }
.cat-filter-panel form { padding: 22px 24px 28px; }

.cat-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.cat-filter-head h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #16211B;
}
.cat-filter-x {
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-muted); padding: 0 4px;
}
.cat-filter-x:hover { color: #16211B; }

.cat-filter-group { margin-bottom: 20px; }
.cat-filter-label {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.cat-filter-search {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted);
}
.cat-filter-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,148,79,.14);
}
.cat-filter-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--text-primary);
}
.cat-filter-panel select {
  width: 100%;
  padding: 11px 34px 11px 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
  font: inherit; font-size: 14px; color: var(--text-primary);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.cat-filter-panel select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(5,148,79,.14);
}

.cat-filter-actions {
  display: flex; align-items: center; gap: 14px;
  padding-top: 8px;
}
.cat-filter-apply {
  flex: 1;
  padding: 13px 18px;
  border: 0; border-radius: 8px;
  background: #16211B; color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.cat-filter-apply:hover { background: #0E1A13; }
.cat-filter-clear {
  font-size: 13px; color: var(--text-secondary); text-decoration: none;
}
.cat-filter-clear:hover { color: #16211B; text-decoration: underline; }

@media (max-width: 480px) {
  .cat-filter-panel { width: 100%; max-width: 100%; }
}

/* ── Confirmation dialog ────────────────────────────────────────────────────
   Replaces window.confirm() for destructive actions. The native dialog cannot
   be styled, is rendered by the browser chrome rather than the page, and reads
   as a system warning instead of part of the shop.
   ───────────────────────────────────────────────────────────────────────── */
.uw-confirm {
  position: fixed; inset: 0; z-index: 13000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14,26,19,.55);
}
.uw-confirm[hidden] { display: none; }
.uw-confirm-box {
  width: 100%; max-width: 420px;
  padding: 26px 26px 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.26);
}
.uw-confirm-box h3 {
  margin: 0 0 8px;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  color: #16211B;
}
.uw-confirm-box p {
  margin: 0 0 22px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-secondary);
}
.uw-confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.uw-confirm-cancel,
.uw-confirm-go {
  padding: 11px 20px;
  border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.uw-confirm-cancel {
  border: 1px solid var(--border);
  background: #fff; color: var(--text-primary);
}
.uw-confirm-cancel:hover { background: var(--surface); border-color: #C9D4CD; }
.uw-confirm-go {
  border: 0;
  background: #C62828; color: #fff;
}
.uw-confirm-go:hover { background: #A81E1E; }

@media (max-width: 420px) {
  .uw-confirm-actions { flex-direction: column-reverse; }
  .uw-confirm-cancel, .uw-confirm-go { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category strip below the header.

   The artwork stays large, but the container goes: a big illustration inside a
   grey disc reads as a sticker on a badge. On white, with air around it and a
   letterspaced label, it reads as a plate in a catalogue. Hover brings in a
   soft ground and a rule beneath the tile, so the row has an active state
   without anything bouncing.
   ────────────────────────────────────────────────────────────────────────── */
.cat-quicknav {
  border-bottom: 1px solid #EFF2F0;
  box-shadow: 0 1px 0 rgba(14,26,19,.02);
}
.cat-nav-custom .cat-quicknav-inner { gap: 0; padding: 16px 12px 0; }
.cat-nav-custom .cat-quicknav-item {
  width: 112px;
  gap: 10px;
  padding: 10px 4px 14px;
  border-radius: 0;
  position: relative;
  transition: color .18s;
}
/* The rule that marks the hovered column, drawn on the strip's own baseline. */
.cat-nav-custom .cat-quicknav-item::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: #16211B;
  opacity: 0; transform: scaleX(.5);
  transition: opacity .2s, transform .2s;
}
.cat-nav-custom .cat-quicknav-item:hover::after { opacity: 1; transform: scaleX(1); }

.cat-nav-custom .cat-quicknav-img {
  width: 82px; height: 82px;
  border-radius: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: background .2s, transform .2s;
}
.cat-nav-custom .cat-quicknav-img img {
  object-fit: contain;
  padding: 2px;
  box-sizing: border-box;
}
.cat-nav-custom .cat-quicknav-item:hover { transform: none; color: #0E1A13; }
.cat-nav-custom .cat-quicknav-item:hover .cat-quicknav-img {
  background: #F4F8F6;
  transform: translateY(-2px);
}

.cat-quicknav-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #5A675F;
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
  transition: color .18s;
}
.cat-nav-custom .cat-quicknav-item:hover .cat-quicknav-label { color: #0E1A13; }
.cat-nav-caret { opacity: .45; }

/* ── Category dropdown ──────────────────────────────────────────────────────
   Names were clipped to "AAAAA+ Craft Canna..." by a nowrap/ellipsis rule on
   a 150px column -- and a menu that hides the end of its own labels is no use
   for choosing. The panel is wider, the columns are wider, and a long name
   wraps onto a second line instead of being cut.
   ───────────────────────────────────────────────────────────────────────── */
.cat-nav-dropdown {
  min-width: 300px;
  border: 1px solid #E8EDEA;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(14,26,19,.16);
  padding: 0 0 8px;
  overflow: hidden;
}
.cat-nav-dropdown--wide { min-width: 468px; }
.cat-nav-dd-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  padding: 15px 18px 13px;
  border-bottom: 1px solid #F1F4F2;
  background: #FBFCFB;
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #16211B;
  text-decoration: none;
}
.cat-nav-dd-head::after {
  content: '›';
  font-size: 16px; line-height: 1; opacity: .45;
  transition: transform .15s, opacity .15s;
}
.cat-nav-dd-head:hover { color: #0E1A13; background: #F5F8F6; }
.cat-nav-dd-head:hover::after { transform: translateX(3px); opacity: .9; }

.cat-nav-dd-links { padding: 4px 8px; gap: 0 6px; }
.cat-nav-dropdown--wide .cat-nav-dd-links {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.cat-nav-dd-links a {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
  /* Undo the base rule's clipping: wrap rather than truncate. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  transition: background .12s, color .12s;
}
.cat-nav-dd-links a:hover { background: #F4F8F6; color: #0E1A13; }

@media (max-width: 768px) {
  .cat-nav-custom .cat-quicknav-item { width: 76px; padding: 6px 2px 7px; }
  .cat-nav-custom .cat-quicknav-img { width: 48px; height: 48px; }
  .cat-quicknav-label { font-size: 9px; letter-spacing: .06em; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category hero, refined.

   The band was a flat fill with three stacked blocks of text. The changes are
   all about hierarchy and depth: a soft wash so the field has a centre, rules
   flanking the eyebrow, a larger and tighter title, and the copy held to a
   narrower measure at a lighter weight so the name dominates rather than
   competing with five lines of paragraph.
   ────────────────────────────────────────────────────────────────────────── */
.shop-header--hero {
  padding: 74px 20px 64px;
  background:
    radial-gradient(120% 140% at 50% 0%, #17301F 0%, #0E1A13 58%, #0B150F 100%);
  box-shadow: 0 0 0 100vmax #0B150F;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Eyebrow between two hairlines -- a quiet way to mark the top of the block. */
.shop-header--hero .shop-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  font-size: 10.5px; letter-spacing: .3em;
  color: #86C9A2;
}
.shop-header--hero .shop-eyebrow::before,
.shop-header--hero .shop-eyebrow::after {
  content: '';
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134,201,162,.55));
}
.shop-header--hero .shop-eyebrow::after { transform: scaleX(-1); }

.shop-header--hero h1 {
  font-size: clamp(34px, 5.6vw, 62px);
  letter-spacing: -.005em;
  line-height: 1;
  text-shadow: 0 1px 30px rgba(0,0,0,.35);
}

.shop-header--hero .cat-description { margin-top: 26px; max-width: 54ch; }
.shop-header--hero .cat-desc-preview,
.shop-header--hero .cat-desc-full {
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 400;
  color: rgba(255,255,255,.62);
}

@media (max-width: 560px) {
  .shop-header--hero { padding: 46px 18px 40px; }
  .shop-header--hero .shop-eyebrow { gap: 10px; letter-spacing: .22em; margin-bottom: 14px; }
  .shop-header--hero .shop-eyebrow::before,
  .shop-header--hero .shop-eyebrow::after { width: 18px; }
  .shop-header--hero .cat-description { margin-top: 18px; }
  .shop-header--hero .cat-desc-preview { font-size: 13.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Full-width mega menu.

   The panel used to be a small card anchored to its own icon. It now spans the
   whole strip: the subcategories run as typographic columns and the category's
   photograph sits beside them as the "shop all" plate. Positioning is taken
   off .cat-nav-item and given to the strip, otherwise the panel can never be
   wider than the 112px tile it hangs from.
   ────────────────────────────────────────────────────────────────────────── */
/* Do NOT set position:relative here. The strip is position:sticky with
   top:var(--header-h) at >=1025px so it pins under the header; switching it to
   relative leaves that same top offset applying as a 76px downward shift,
   which opened a large gap under the header. Sticky already establishes the
   containing block the mega panel needs, so only the narrow widths (where the
   sticky rule does not apply) need one. */
@media (max-width: 1024px) {
  .cat-quicknav, .cat-nav-dd { position: relative; }
}

.cat-nav-dropdown.cat-nav-mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  min-width: 0; width: auto;
  transform: translateY(0);
  padding: 0;
  border: 0;
  border-top: 1px solid #EFF2F0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 22px 44px rgba(14,26,19,.13);
}
.cat-mega-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 24px 34px;
}
.cat-mega-lead {
  margin-bottom: 24px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: #9AA69F;
}
.cat-mega-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: start;
}
/* Names flow down each column and wrap to the next, the way a printed index
   reads, instead of across a row. */
.cat-mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 28px;
  grid-auto-flow: row;
}
.cat-mega-cols a {
  display: block;
  padding: 9px 0;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #5A675F;
  text-decoration: none;
  white-space: normal;
  transition: color .14s;
}
.cat-mega-cols a:hover { color: #0E1A13; }

/* The plate: photograph over a caption, as a single target. */
.cat-mega-promo { display: block; text-decoration: none; }
.cat-mega-promo-img {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  /* No plate behind the artwork -- these illustrations already sit on white,
     so the grey only showed as a box around them. */
  background: transparent;
}
.cat-mega-promo-img img {
  width: 100%; height: 100%;
  /* The category artwork is square; cover cropped its top and bottom inside the
     16:10 frame. Contain shows the whole plate whatever its proportions. */
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
  display: block;
  transition: transform .5s ease;
}
.cat-mega-promo:hover .cat-mega-promo-img img { transform: scale(1.04); }
.cat-mega-promo-label {
  display: block;
  margin-top: 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #16211B;
}

@media (max-width: 1024px) {
  .cat-mega-body { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cat-mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-mega-promo { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category strip on phones.

   The "more" cue was a 38px dark disc pinned over the right-hand edge of the
   rail -- it sat on top of the last icon rather than beside it, so the strip
   looked broken at 320px. A fade at the edge says the same thing without
   covering anything, and the rail gets end padding so the last tile can scroll
   clear of it.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-quicknav > .mobile-rail-cue:not([hidden]) { display: none !important; }

  .cat-quicknav { position: relative; }
  .cat-quicknav::after {
    content: '';
    position: absolute; top: 0; bottom: 0; right: 0;
    width: 44px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
  }
  .cat-nav-custom .cat-quicknav-inner {
    justify-content: flex-start;
    gap: 2px;
    padding: 14px 44px 10px 12px;   /* room at the end for the fade */
    scroll-padding-inline: 12px;
  }
  .cat-nav-custom .cat-quicknav-item { width: 72px; padding: 6px 2px 8px; }
  .cat-nav-custom .cat-quicknav-img { width: 46px; height: 46px; border-radius: 12px; }
  .cat-quicknav-label { font-size: 9px; letter-spacing: .06em; min-height: 2.3em; }
  /* The hover rule under each tile is a pointer affordance; it has no meaning
     on touch and only shows up as a stray mark mid-scroll. */
  .cat-nav-custom .cat-quicknav-item::after { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Homepage carousels on phones.

   The rails show 2.25 cards per view, which leaves each card 123px at 320px.
   That was fine when a card was a picture, a name and a price -- but it now
   carries a weight picker and an Add to Cart button, and the button's label
   was being cut off. Product rails show ~1.5 cards instead: wide enough to buy
   from, and the half card still signals the rail scrolls. Promo and deal rails
   keep the 2.25 rhythm, since they are images and not controls.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .carousel > .product-card,
  .fbt-grid > .product-card {
    flex: 0 0 calc((100% - 10px) / 1.5);
    width: calc((100% - 10px) / 1.5);
  }
}
@media (max-width: 380px) {
  /* 1.35 per view left the weight picker ~182px, and labels with no weight
     words to abbreviate ("10 Carts + 2 Carts FREE") still ran past it. */
  .carousel > .product-card,
  .fbt-grid > .product-card {
    flex: 0 0 calc((100% - 10px) / 1.12);
    width: calc((100% - 10px) / 1.12);
  }
  .carousel > .product-card .card-atc select,
  .fbt-grid > .product-card .card-atc select { font-size: 11.5px; padding-left: 8px; }
  /* At this size the full label cannot fit beside a four-figure price. */
  .carousel > .product-card .card-atc-long,
  .fbt-grid > .product-card .card-atc-long { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Shop by category.

   A photo tile per category, directly under the banners. The grid steps from
   two up to six across so the whole range is reachable in one glance on a
   phone as well as a desktop.
   ────────────────────────────────────────────────────────────────────────── */
/* On desktop the header strip already shows all eleven categories, so the
   grid would be the same artwork twice within 300px. It earns its place below
   1025px, where the strip scrolls and hides six of them -- there the grid is
   the only way to see the whole range at once. */
@media (min-width: 1025px) { .home-cats { display: none; } }
.home-cats { padding: 34px 0 6px; background: #fff; }
.home-cats-inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.home-cats-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.home-cats-head h2 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #16211B;
}
.home-cats-all {
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
  white-space: nowrap;
}
.home-cats-all:hover { color: #0E1A13; }

.home-cats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 14px;
}
.home-cat-tile { display: block; text-decoration: none; color: inherit; }
.home-cat-img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #F3F6F4;
  border: 1px solid #EDF1EE;
}
.home-cat-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s ease;
}
.home-cat-tile:hover .home-cat-img img { transform: scale(1.05); }
.home-cat-tile:hover .home-cat-img { border-color: #D9E3DD; }
.home-cat-name {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #3F4C45;
  transition: color .15s;
}
.home-cat-tile:hover .home-cat-name { color: #0E1A13; }

@media (max-width: 1100px) { .home-cats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .home-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .home-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } }
@media (max-width: 430px)  {
  .home-cats { padding: 22px 0 4px; }
  .home-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .home-cats-head h2 { font-size: 11.5px; letter-spacing: .13em; }
  .home-cat-name { font-size: 10.5px; margin-top: 8px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category nav as a text bar (LINX Square pattern).

   The illustrations are replaced by the category names alone: uppercase,
   letterspaced, on one centred line. This is done by hiding the artwork rather
   than changing the markup, so the mega panels, the links and the mobile rail
   all keep working -- and reverting is a matter of deleting this block.

   It also reclaims height: the strip drops from ~157px to ~52px, which puts
   the merchandising that much closer to the top of every page.
   ────────────────────────────────────────────────────────────────────────── */
.cat-nav-custom .cat-quicknav-img { display: none; }

.cat-nav-custom .cat-quicknav-inner {
  gap: 0;
  padding: 0 16px;
  justify-content: center;
}
.cat-nav-custom .cat-quicknav-item {
  width: auto;
  min-width: 0;
  padding: 17px 16px 15px;
  gap: 0;
}
.cat-quicknav-label {
  min-height: 0;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: #2B3831;
  white-space: nowrap;
}
.cat-nav-custom .cat-quicknav-item:hover .cat-quicknav-label { color: #0E1A13; }
.cat-nav-caret { display: none; }   /* the panel opening is the affordance */

/* Underline marks the open column, as on the reference. */
.cat-nav-custom .cat-quicknav-item::after {
  left: 16px; right: 16px; bottom: 0;
  height: 2px;
  background: #16211B;
}

@media (max-width: 1024px) {
  /* Below the desktop breakpoint the names scroll horizontally; they pack far
     more per screen than the icons did, so most of the range is in view. */
  .cat-nav-custom .cat-quicknav-inner {
    justify-content: flex-start;
    padding: 0 10px;
    scroll-padding-inline: 10px;
  }
  .cat-nav-custom .cat-quicknav-item { padding: 15px 12px 13px; }
  .cat-quicknav-label { font-size: 11.5px; letter-spacing: .1em; }
  .cat-quicknav::after { width: 34px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Small screens: no category bar, no category grid.

   The text nav needs room the phone does not have -- at 320px the names run
   together and most of the range is off-screen anyway -- and the homepage grid
   repeated it. Both are dropped below the desktop breakpoint; the hamburger
   drawer carries the full category list with its subcategories, which is the
   better place for it on a phone.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cat-quicknav,
  .cat-nav-dd,
  .home-cats { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Delivery banner above the footer.

   It was a flat bright green field with an emoji truck and a red call button
   fighting the background. It now sits on the same near-black ground as the
   category hero, with the truck drawn as a line icon, the areas set as quiet
   letterspaced chips, and a white call button so the one action on the band
   reads as the action.

   Styled rather than rewritten because the footer markup comes from the
   editable `footer_html` setting, not from the PHP file.
   ────────────────────────────────────────────────────────────────────────── */
.delivery-banner {
  background:
    radial-gradient(120% 160% at 50% 0%, #17301F 0%, #0E1A13 60%, #0B150F 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 44px 0 40px;
  color: #fff;
}
.delivery-banner-top {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 26px;
}
/* The emoji lives in editable content, so it is swapped for a line icon here
   rather than by editing the stored markup. */
.delivery-icon {
  font-size: 0;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC79D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h13v12H1z'/%3E%3Cpath d='M14 8h4.5L23 11.5V16h-9z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.2'/%3E%3C/svg%3E");
  opacity: .95;
}
.delivery-banner-top strong {
  display: block;
  font-size: 22px; font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.delivery-banner-top p {
  margin: 7px 0 0;
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,.62);
  max-width: 62ch;
}

.delivery-cities {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}
.city-pill {
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.78) !important;
  transition: background .15s, border-color .15s, color .15s;
}
.city-pill:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: #fff !important;
}

.delivery-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
}
.delivery-call-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border-radius: 8px;
  /* White, not red: one action on the band, and red against green was the
     loudest thing in the footer. */
  background: #fff; color: #0E1A13;
  font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.delivery-call-btn:hover { background: #EAF2EC; transform: translateY(-1px); }
.delivery-hours {
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

@media (max-width: 560px) {
  .delivery-banner { padding: 32px 0 30px; }
  .delivery-banner-top { flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .delivery-banner-top strong { font-size: 18px; }
  .delivery-banner-top p { font-size: 13px; }
  .delivery-cities { gap: 6px; margin-bottom: 20px; }
  .city-pill { padding: 6px 11px; font-size: 10px; letter-spacing: .07em; }
  .delivery-cta { flex-direction: column; gap: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Intro + trust row between the banners and the product rows.
   ────────────────────────────────────────────────────────────────────────── */
.home-seo-intro {
  max-width: 760px !important;
  margin: 46px auto 0 !important;
  padding: 0 20px !important;
}
.home-seo-intro h1 {
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: #16211B;
  margin: 0 0 12px !important;
}
.home-seo-intro p {
  font-size: 15px !important;
  line-height: 1.75;
  color: #5C6A62 !important;
  margin: 0 auto !important;
  max-width: 62ch;
}

.home-trust {
  margin-top: 40px;
  border-top: 1px solid #EFF2F0;
  border-bottom: 1px solid #EFF2F0;
  background: #FBFCFB;
}
.home-trust-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
}
.home-trust-item {
  display: flex; align-items: flex-start; gap: 12px;
  min-width: 0;
}
.home-trust-item svg {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: #2F7A4F;
  margin-top: 1px;
}
.home-trust-item strong {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #16211B;
  margin-bottom: 3px;
}
.home-trust-item span {
  display: block;
  font-size: 12.5px; line-height: 1.5;
  color: #6E7B74;
}

@media (max-width: 900px) {
  .home-trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
}
@media (max-width: 480px) {
  .home-seo-intro { margin-top: 30px !important; }
  .home-trust { margin-top: 28px; }
  .home-trust-inner { padding: 18px 16px; gap: 14px 14px; }
  .home-trust-item { gap: 10px; }
  .home-trust-item svg { width: 20px; height: 20px; }
  .home-trust-item strong { font-size: 10.5px; letter-spacing: .06em; }
  .home-trust-item span { font-size: 11.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero banners on phones.

   On desktop this is a proper grid ~690px tall. On the mobile rail it was
   showing 2.25 slides per view, which made each banner a 123px square at
   320px -- a strip of thumbnails rather than a hero. One banner fills the
   view now, with a sliver of the next to show the rail scrolls.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .promo-grid .promo-slide,
  .promo-grid .promo-slide-active {
    flex: 0 0 calc((100% - 10px) / 1.12);
    width: calc((100% - 10px) / 1.12);
    /* The promo artwork is authored square, so 4:3 cropped the top and bottom
       off every banner. Match the source instead. */
    aspect-ratio: 1 / 1;
  }
  .promo-grid { gap: 10px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero carousel controls on phones.

   Both arrows were hidden on mobile and replaced by a single right-hand cue,
   so there was no way back to a banner once it had scrolled past. The pair is
   restored, sized for a thumb, and pinned to the left and right edges; the
   duplicate cue on this rail is dropped.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .promo-grid .promo-arrow {
    display: flex !important;
    width: 40px; height: 40px;
    /* Always visible: hover is not available on touch, and an arrow that only
       appears on hover is an arrow that never appears. */
    opacity: 1;
    background: rgba(14,26,19,.62);
    font-size: 20px;
  }
  .promo-grid .promo-arrow-left  { left: 8px; }
  .promo-grid .promo-arrow-right { right: 8px; }
  .promo-grid .promo-dots { display: flex !important; }

  /* The rail cue duplicated the right arrow on this carousel. */
  .promo-grid > .mobile-rail-cue,
  .mobile-rail-peek-wrap > .mobile-rail-cue { display: none !important; }
}