/* =========================================
   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; overflow-x: clip; }
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;
  overflow-x: clip;   /* see style.css: `hidden` alone breaks position: sticky */
}

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; overflow-wrap: anywhere;
}
.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 instead of ellipsising: there is no dropdown to open here, so the
   label is the only thing the customer ever sees; it is never cut. */
.card-atc-field--fixed span { display: block; 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; }
  .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 {
    min-height: 3.6em;
    margin-bottom: 8px;
    font-size: .8rem;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  .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;
  overflow-wrap: break-word; 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;
  overflow-wrap: break-word; margin-bottom: 6px;
}
.article-excerpt {
  font-size: 13px; color: var(--text-secondary); line-height: 1.4;
  overflow-wrap: break-word; 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-wrap: break-word; }
.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;
  overflow-wrap: break-word;
}

.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: 3px 7px;
    font-size: .66rem;
    line-height: 1.2;
    white-space: normal;
  }

  .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; }
  /* Each promo slot renders its own dot row. Flattened into one rail they all
     pile up in the same spot -- five rows of dots drawn over each other, which
     is what looked like collapsing dots. The rail holds every slide from every
     slot, so no single slot's dots describe it; the arrows are the control. */
  .promo-grid .promo-dots { display: none !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; }
}

/* The address is the one header item that must be read rather than recognised.
   With the category bar gone on phones there is room to give it back. */
@media (max-width: 430px) {
  .uw-addr { max-width: 150px; }
}
@media (max-width: 360px) {
  .uw-addr { max-width: 124px; }
  .uw-addr-txt b { font-size: 12.5px; }
}

/* At 320 the header has ~302px and the controls were taking enough of it that
   the address -- the one item that has to be read rather than recognised --
   was clipped. The icons give a few pixels back each. */
@media (max-width: 360px) {
  .site-header .header-inner { gap: 4px !important; }
  .uw-search-btn { padding: 4px 3px !important; }
  .uw-addr { padding: 4px 4px; gap: 3px; max-width: 170px; }
  .uw-addr-caret { width: 10px; height: 10px; }
  .site-header .header-actions { gap: 0 !important; }
  .site-header .header-actions .acct-link { padding: 3px 2px !important; }
  .site-header .cart-btn { padding: 3px 2px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category icons on phones (Uber Eats pattern), on every page.

   Two earlier blocks removed them below the desktop breakpoint: the text-bar
   redesign hides `.cat-quicknav-img` at every width, and "Small screens: no
   category bar" then dropped the whole strip and left only the hamburger. On a
   phone the icons are the fastest way into a category — they read at a glance
   where letterspaced names do not — so the artwork and the strip both come
   back here, as a horizontal rail under the header.

   Desktop is untouched: above 1024px the text bar and its mega panels stay
   exactly as they are. The panels remain hidden on touch, so a tap on a tile
   goes straight to that category, which is what it should do on a phone.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cat-quicknav,
  .cat-nav-dd { display: block !important; }

  .cat-nav-custom .cat-quicknav-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    /* Right padding keeps the last tile clear of the scroll fade. */
    padding: 10px 40px 8px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .cat-nav-custom .cat-nav-item {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }
  .cat-nav-custom .cat-quicknav-item {
    width: 74px;
    padding: 4px 2px 6px;
    gap: 6px;
  }
  .cat-nav-custom .cat-quicknav-img {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto;
  }
  /* Two short lines of normal-case text fit under a 52px tile; the uppercase,
     letterspaced, single-line label of the desktop bar does not. */
  .cat-quicknav-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    white-space: normal;
    line-height: 1.15;
    min-height: 2.3em;
  }
  /* The underline is a pointer affordance; on touch it only flickers mid-scroll. */
  .cat-nav-custom .cat-quicknav-item::after { display: none; }
}

@media (max-width: 380px) {
  .cat-nav-custom .cat-quicknav-item { width: 66px; }
  .cat-nav-custom .cat-quicknav-img { width: 46px; height: 46px; }
  .cat-quicknav-label { font-size: 9px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   "There is more to the right" on the category rail.

   The clipped tile was being swallowed by the white fade, so the row read as
   if it ended at the fourth icon. The fade is narrowed and lightened until it
   only softens the edge, and the shared rail chevron — already built in
   carousel.js, and disabled here earlier because the old 38px disc covered the
   last icon — comes back at 28px beside the artwork rather than on top of it.
   It scrolls the rail by one tile per tap and stays until the end of the row.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-quicknav::after {
    width: 30px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 90%);
  }
  /* Room for the chevron so a tile never sits under it. */
  .cat-nav-custom .cat-quicknav-inner { padding-right: 36px; }

  .cat-quicknav > .mobile-rail-cue:not([hidden]) {
    display: flex !important;
    top: 36px;            /* the centre of the 52px sticker, above its label */
    right: 3px;
    width: 28px;
    height: 28px;
    font-size: 17px;
    background: rgba(20,36,40,.82);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
}

@media (max-width: 380px) {
  .cat-quicknav > .mobile-rail-cue:not([hidden]) {
    top: 33px;
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Category rail: both arrows, centred on the row.

   The chevron sat on the artwork's centre line, which read as belonging to the
   icon beside it rather than to the row. Both arrows are centred on the rail
   as a whole, and the left one appears only once the row has actually moved,
   with a matching fade on that edge so the first tiles look scrolled away
   rather than cut.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-quicknav > .mobile-rail-cue:not([hidden]) { top: 50%; }

  .cat-quicknav > .mobile-rail-cue-back:not([hidden]) {
    right: auto;
    left: 3px;
  }
  /* Room at both ends so a tile never sits under an arrow. */
  .cat-nav-custom .cat-quicknav-inner { padding-left: 36px; scroll-padding-inline: 36px; }

  /* Left-edge fade, mirroring the right one, while there is anything behind. */
  .cat-quicknav:not(.mobile-peek-at-start)::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 30px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(270deg, rgba(255,255,255,0), rgba(255,255,255,.92) 90%);
  }
  /* At the end of the row the right arrow is gone, so its fade goes too. */
  .cat-quicknav.mobile-peek-at-end::after { opacity: 0; }
}

@media (max-width: 380px) {
  .cat-nav-custom .cat-quicknav-inner { padding-left: 32px; padding-right: 32px; }
  .cat-quicknav > .mobile-rail-cue-back:not([hidden]) { left: 2px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phones: two products per row, at a size you can scan.

   The listing grid had fallen back to one card per row (the auto-fill minimum
   of 276px, and an explicit one-column rule at 380px), so a phone screen showed
   a single product and half of the next. Two columns put four products in view,
   which is the density the reference apps use.

   Everything inside the card is scaled to the ~142px column rather than being
   left at desktop size: the name clamps to two lines, the "Select Weight"
   caption goes (the field itself says that), and the button drops the words
   "to Cart" so "Add $200" fits on one line at 320px. Nothing here changes the
   markup or what the card does.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .product-card .card-body { padding: 9px 10px 8px; gap: 4px; }
  /* Full names, no "...": "West Coast Connection White Walker Hash" is the
     only thing telling it apart from the Pink Lemonade card beside it. */
  .product-card .card-name {
    font-size: 12.5px;
    line-height: 1.25;
    margin-bottom: 2px;
  }
  .product-card .card-price { font-size: 12.5px; }
  .product-card .card-rating { font-size: 10.5px; }
  .product-card .card-badges { gap: 4px; }
  .product-card .badge { padding: 2px 6px; font-size: 9.5px; }
  .card-thc-chip { padding: 2px 6px; font-size: 9px; bottom: 6px; left: 6px; }

  .card-atc { padding: 8px 9px 9px; gap: 5px; }
  .card-atc-label { display: none; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 32px; font-size: 11px; padding-left: 8px; }
  .card-atc select {
    padding-right: 20px;
    background-position: right 6px center;
    text-overflow: ellipsis;
  }
  .card-atc-field--fixed { padding: 6px 8px; }
  .card-atc-field--fixed span { font-size: 11px; }
  .card-atc-btn { padding: 9px 6px; font-size: 11px; gap: 4px; }
  /* "Add to Cart $1,200" cannot hold one line in a 142px card; "Add $1,200" can. */
  .card-atc-long { display: none; }

  /* Rails follow the grid: more than two cards in view instead of one and a half. */
  .carousel > .product-card,
  .fbt-grid > .product-card {
    flex: 0 0 calc((100% - 20px) / 2.2);
    width: calc((100% - 20px) / 2.2);
  }
}

@media (max-width: 380px) {
  /* Still two up at 320px — the column is ~142px, which the scaled-down card fits. */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .product-card .card-name { font-size: 12px; }
  .product-card .card-price { font-size: 12px; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 30px; font-size: 10.5px; }
  .card-atc-btn { padding: 8px 5px; font-size: 10.5px; }
  .carousel > .product-card,
  .fbt-grid > .product-card {
    flex: 0 0 calc((100% - 16px) / 2.05);
    width: calc((100% - 16px) / 2.05);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phones: no dead space inside the card.

   Grid rows stretch every card to the tallest in the row, and the card uses
   `margin-top: auto` on the price line and the buy block to pin them to the
   bottom — so on a shorter card that spare height opened as a band of white
   between the badges and the price. Cards take their own height here instead,
   which leaves the auto margins nothing to push against and closes the gaps.
   The trade is that two cards in a row no longer end at the same line, which is
   how the reference apps lay them out anyway.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .product-grid { align-items: start; }
  .carousel,
  .fbt-grid { align-items: flex-start; }

  .product-card .card-badges { margin-top: 0; padding-top: 0; }
  .card-buyline { margin-top: 0; padding-top: 2px; gap: 2px; }
  .product-card .card-atc { margin-top: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phones: four products in one view, in a straight grid.

   Letting each card take its own height fixed the white band but broke the
   rows: the two columns started and ended on different lines. The row goes
   back to a single height, the buy block is pinned to the bottom again so the
   buttons line up, and the dead space is removed by making the card shorter
   rather than by unpinning anything:

     image 4:3 instead of square   ~35px
     chips dropped                 ~22px   (they stay on the product page)
     tighter body, picker, button  ~40px

   That puts a card near 265px at 320px wide, so two rows of two are visible at
   once, which is the four-in-view of the reference app.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .product-grid { align-items: stretch; }
  .carousel,
  .fbt-grid { align-items: stretch; }
  /* Pinned again: with equal-height rows this is what aligns the buttons. */
  .product-card .card-atc { margin-top: auto; }

  .product-card .card-img-wrap { aspect-ratio: 4 / 3; }
  .product-card .card-badges { display: none; }

  .product-card .card-body { padding: 8px 9px 6px; gap: 3px; }
  .product-card .card-name { font-size: 12px; line-height: 1.2; margin-bottom: 0; }
  .card-buyline { margin-top: 0; padding-top: 2px; gap: 1px; }
  .card-buyline .card-price { font-size: 12.5px; }
  .product-card .card-rating { font-size: 10px; }

  .card-atc { padding: 7px 8px 8px; gap: 4px; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 28px; font-size: 10.5px; padding-left: 7px; }
  .card-atc-field--fixed { padding: 5px 7px; }
  .card-atc-field--fixed span { font-size: 10.5px; }
  .card-atc-btn { padding: 7px 5px; font-size: 10.5px; }

  /* The category rail loses a third of its height: the icons still read at
     44px, and the row stops eating the top of every page. */
  .cat-nav-custom .cat-quicknav-inner { padding-top: 8px; padding-bottom: 6px; }
  .cat-nav-custom .cat-quicknav-item { width: 66px; padding: 2px 2px 4px; gap: 4px; }
  .cat-nav-custom .cat-quicknav-img { width: 44px; height: 44px; }
  .cat-quicknav-label { font-size: 9px; min-height: 2.2em; }
  .cat-quicknav > .mobile-rail-cue:not([hidden]) { width: 26px; height: 26px; font-size: 16px; }
}

@media (max-width: 380px) {
  .product-card .card-name { font-size: 11.5px; }
  .card-buyline .card-price { font-size: 12px; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 27px; font-size: 10px; }
  .card-atc-btn { padding: 7px 4px; font-size: 10px; }
  .cat-nav-custom .cat-quicknav-item { width: 62px; }
  .cat-nav-custom .cat-quicknav-img { width: 42px; height: 42px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Desktop: a denser grid.

   The column minimum was 276px, which fills a 1450px content area with five
   cards. At 190px the same area takes seven, and the grid keeps scaling with
   the window rather than being pinned to a count. The card is retuned for the
   narrower column: the name and price come down a step, and the picker and
   button lose the padding they only had room for at 276px. The full "Add to
   Cart $1,200" label still fits on one line at this width, so desktop keeps it.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
  }

  .product-card .card-body { padding: 10px 11px 8px; gap: 4px; }
  .product-card .card-name { font-size: 13px; line-height: 1.25; }
  .product-card .card-badges { gap: 4px; }
  .product-card .badge { padding: 2px 7px; font-size: 10px; }
  .card-buyline { gap: 2px; padding-top: 3px; }
  .card-buyline .card-price { font-size: 14px; }
  .product-card .card-rating { font-size: 11px; }

  .card-atc { padding: 9px 10px 10px; gap: 5px; }
  .card-atc-label { font-size: 9.5px; }
  .card-atc select,
  .card-atc-field--fixed { min-height: 34px; font-size: 12px; padding-left: 9px; }
  .card-atc select { padding-right: 22px; background-position: right 7px center; }
  .card-atc-btn { padding: 9px 8px; font-size: 12px; gap: 4px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sale cards: smaller, and buyable from the card.

   The grey block listing every sale weight was the tallest element on the
   card — on a phone it pushed the action off the screen. The weights are a
   choice, so the card now carries the same "Select Weight" + Add control the
   product cards use (it prices each option at its sale price), and the grid
   packs to the same density as the product grid.

   That control is built to sit flush against the card edges, so inside the
   sale card's padded body it is pulled back out to the edges.
   ────────────────────────────────────────────────────────────────────────── */
/* The card is a column and the body fills it, so the buy block can sit on the
   card's bottom edge. Without this the block ended wherever the name and price
   happened to end, and two cards in a row disagreed by a line of text. */
.sales-deal-card { display: flex; flex-direction: column; }
.sales-card-image { flex: 0 0 auto; }
.sales-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.sales-card-body .card-atc { margin: auto -16px -16px; border-radius: 0; }

@media (min-width: 1025px) {
  .sales-deal-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
  }
  .sales-card-image { aspect-ratio: 4 / 3; }
  .sales-card-body { padding: 11px 12px 13px; }
  .sales-card-body .card-atc { margin: auto -12px -13px; padding: 9px 12px 11px; }
  .sales-card-meta { gap: 4px; margin-bottom: 7px; }
  .sales-card-meta span { min-height: 20px; padding: 0 7px; font-size: .66rem; }
  .sales-card-body h3 { font-size: .88rem; line-height: 1.25; margin: 0 0 7px; }
  .sales-card-price { font-size: .88rem; margin: 0 0 9px; }
  .sales-save-line { font-size: .74rem; margin: -4px 0 9px; }
  .sales-option-list { gap: 5px; padding: 8px; }
  .sales-option-row { font-size: .74rem; }
  .sales-option-more { font-size: .72rem; }
}

@media (max-width: 768px) {
  .sales-card-body { padding: 9px 10px 11px; }
  .sales-card-body .card-atc { margin: auto -10px -11px; padding: 8px 10px 10px; }
  .sales-card-meta { gap: 4px; margin-bottom: 6px; }
  .sales-card-meta span { min-height: 19px; padding: 0 6px; font-size: .62rem; }
  .sales-card-body h3 { font-size: .82rem; line-height: 1.22; margin: 0 0 6px; }
  .sales-card-price { font-size: .82rem; margin: 0 0 8px; }
  .sales-option-row { font-size: .7rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   Sale cards on phones: same scale as the shop cards.

   The deal card kept desktop proportions on a 143px column — a square photo,
   a 14px name and a 13px price range that wrapped to two lines — so two cards
   filled the screen. Everything comes down one step and the artwork goes to
   4:3, which is what the shop grid uses.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .sales-card-image { aspect-ratio: 4 / 3; }

  .sales-discount-badge,
  .sales-expiry-pill {
    min-height: 18px;
    padding: 0 6px;
    font-size: .58rem;
  }

  .sales-card-body { padding: 8px 9px 9px; }
  .sales-card-body .card-atc { margin: auto -9px -9px; padding: 8px 9px 9px; }

  .sales-card-meta { gap: 3px; margin-bottom: 5px; }
  .sales-card-meta span { min-height: 17px; padding: 0 6px; font-size: .58rem; }

  .sales-card-body h3 {
    margin: 0 0 5px;
    font-size: .78rem;
    line-height: 1.22;
    overflow-wrap: break-word;
  }

  /* The range is one string; at this size it has to stay on one line. */
  .sales-card-price,
  .sales-card-price * {
    font-size: .74rem;
    line-height: 1.25;
  }
  .sales-card-price { margin: 0 0 6px; }
  .sales-save-line { margin: -2px 0 6px; font-size: .64rem; }

  .sales-card-body .card-atc select,
  .sales-card-body .card-atc .card-atc-field--fixed { min-height: 28px; font-size: 10px; }
  .sales-card-body .card-atc-btn { padding: 7px 5px; font-size: 10px; }
  .sales-card-cta { padding: 8px 10px; font-size: .74rem; }
}

/* ── Related / From-the-blog articles section — responsive header + fluid cards ──
   The header is a flex row with the title block and the two "View All" pills.
   Below ~640px the title column collapses and the pills stack, so the header is
   turned into a column, the pills share one full-width row, and the cards become
   viewport-relative so the peek is the same on every phone width. */
.articles-section .section-header {
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.articles-section .section-header > div:first-child {
  flex: 1 1 240px;
  min-width: 0;
}
.articles-section .section-header > div:last-child {
  flex: 0 0 auto;
}
.articles-section .section-title,
.articles-section .section-subtitle {
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .articles-section .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .articles-section .section-header > div:first-child { flex: 1 1 auto; }
  .articles-section .section-header > div:last-child {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .articles-section .section-pill-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }
  .articles-section .section-title { font-size: 17px; line-height: 1.25; }
  .articles-section .section-subtitle { font-size: 12.5px; line-height: 1.35; }

  .articles-section .articles-carousel { gap: 12px; }
  .articles-section .article-card { width: min(78vw, 260px); }
  .articles-section .article-card .article-body { padding: 10px 12px; }
  .articles-section .article-card .article-meta { font-size: 11px; margin-bottom: 4px; }
  .articles-section .article-card .article-title { font-size: 13px; margin-bottom: 4px; }
  .articles-section .article-card .article-excerpt { font-size: 12px; }
  .articles-section .article-card .article-readmore { font-size: 12px; }
}

@media (max-width: 380px) {
  .articles-section .section-pill-btn { font-size: 11px; padding: 8px 4px; }
  .articles-section .article-card { width: min(82vw, 240px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   No gap between the header and the category bar.

   .page-body pads its top by the header height + 14px so page content clears
   the fixed header. The category bar is the first thing in .page-body, so
   those 14px showed as a grey strip between the header and the bar -- and,
   since the bar is sticky at top: var(--header-h), the strip closed up only
   once you scrolled. Pull the bar up by the same 14px so it meets the header.
   ────────────────────────────────────────────────────────────────────────── */
.page-body > .cat-nav-dd { margin-top: -14px; }

/* ──────────────────────────────────────────────────────────────────────────
   Footer: same look on every page.

   Single articles, blog posts and author pages also load the legacy
   style.css, which sets its own body font size / line height, heading and
   paragraph line heights, and .container margins. The footer inherited all of
   it, so on those pages the copyright line broke apart on phones and the
   columns shifted. Pin the values it gets everywhere else. (The legacy
   footer's own rules are scoped to .site-footer--legacy in style.css.)
   ────────────────────────────────────────────────────────────────────────── */
.site-footer:not(.site-footer--legacy) { font-size: 16px; line-height: 1.5; }
.site-footer:not(.site-footer--legacy) :is(h4, p) { line-height: inherit; }
.site-footer:not(.site-footer--legacy) .footer-bottom > span a { color: inherit; }
.site-footer:not(.site-footer--legacy) > .container {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ──────────────────────────────────────────────────────────────────────────
   Category rail on phones and tablets: Uber Eats proportions.

   Matched against the Uber Eats grocery grid, where each icon's artwork is
   ~50px on a phone -- and stays that size on a small phone rather than
   shrinking -- over plain regular-weight names on up to two lines. Our icon
   files carry ~15% white margin around the artwork (it fills 75-96% of the
   512px square), so a 50px box showed only ~42px of art; the box is sized so
   the artwork itself lands at Uber's size. The rail's 36px end padding (kept
   so no tile sat under an arrow) is cut to the page gutter: the arrows float
   over the faded edge instead, as on the reference, and the first icon starts
   where the page content starts.

   "Concentrates" is one unbreakable word (75px at 11.5px), so labels may spill
   a few pixels into the gap rather than forcing every column wider.
   This block overrides the size rules above it; the rail, arrows and
   scrolling are unchanged.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cat-nav-custom .cat-quicknav-inner {
    padding: 12px 12px 10px;
    scroll-padding-inline: 12px;
    gap: 6px;
  }
  .cat-nav-custom .cat-quicknav-item { width: 88px; padding: 0; gap: 6px; }
  .cat-nav-custom .cat-quicknav-img { width: 72px; height: 72px; }
  .cat-quicknav-label {
    margin-inline: -5px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    min-height: 2.5em;          /* room for two lines, so every column lines up */
    color: #1F2622;
  }
}
@media (max-width: 768px) {
  .cat-nav-custom .cat-quicknav-item { width: 76px; }
  .cat-nav-custom .cat-quicknav-img { width: 64px; height: 64px; }
  .cat-quicknav-label { font-size: 12px; }
}
@media (max-width: 380px) {
  .cat-nav-custom .cat-quicknav-inner { padding-left: 10px; padding-right: 10px; scroll-padding-inline: 10px; gap: 4px; }
  .cat-nav-custom .cat-quicknav-item { width: 72px; }
  .cat-nav-custom .cat-quicknav-img { width: 62px; height: 62px; }
  .cat-quicknav-label { font-size: 11.5px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Product card images: never cropped.

   The phone grid cut the image box to 4:3 to fit four cards in view, but the
   product shots are square artwork with the strain name and price printed to
   the edges, and `object-fit: cover` then sliced the top and bottom off them
   ("FUTURE HAZE" lost its first line). The box is square again at every width,
   and the image is contained rather than cropped, so any non-square upload is
   shown whole on white instead of being trimmed.
   ────────────────────────────────────────────────────────────────────────── */
.product-card .card-img-wrap { aspect-ratio: 1 / 1; background: #fff; }
.product-card .card-img { object-fit: contain; }

/* ──────────────────────────────────────────────────────────────────────────
   Product cards on phones: a round "+" on the photo is the Add button.

   The weight <select> and the full-width Add row are gone on phones. The
   purchase form is laid over the square photo (it is transparent and lets taps
   through), and its only visible part is a white "+" in the photo's corner.
   With several weights the "+" opens a sheet (footer-v2.php) listing each
   weight with its price, and the one picked is added; with one weight it adds
   straight away. Once the chosen weight is in the cart the "+" shows the count.
   The hidden <select> still drives the form, so the cart is untouched. Desktop
   keeps the dropdown and button, and other cards using the same row (sales
   page) keep the small dots circle beside their button.
   ────────────────────────────────────────────────────────────────────────── */
.card-atc-more,
.card-atc-weight { display: none; }

@media (max-width: 768px) {
  .card-atc-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand, #05944F);
    box-shadow: 0 2px 6px rgba(5, 148, 79, .28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, background .15s;
  }
  .card-atc-dots { display: inline-flex; align-items: center; gap: 3px; }
  .card-atc-dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; }
  .card-atc-more:active { transform: scale(.92); }
  .card-atc-more:focus-visible { outline: 2px solid #034D29; outline-offset: 2px; }

  .product-card { position: relative; }
  /* The form covers exactly the square photo at the top of the card. */
  .product-card form.card-atc {
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    z-index: 2;
  }
  .product-card form.card-atc > *:not(.card-atc-btn):not(.card-atc-step) { display: none !important; }

  /* Round "+" (nothing in the cart yet) and the "- n +" pill (once it is)
     share one look and one corner, so adding never moves the control. */
  .product-card form.card-atc .card-atc-btn,
  .product-card form.card-atc .card-atc-step {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 40px;
    margin: 0;
    border: 0;
    background: #fff;
    color: #16211B;
    box-shadow: 0 2px 10px rgba(14, 26, 19, .22);
    pointer-events: auto;
  }
  .product-card form.card-atc .card-atc-btn {
    display: block;
    width: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;             /* the label stays for screen readers; "+" is drawn */
    transform: none;
  }
  .product-card form.card-atc .card-atc-step {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 0;
    padding: 0 3px;
    border-radius: 20px;
  }
  /* "+" drawn as two bars, so it sits dead centre whatever the font. */
  .product-card form.card-atc .card-atc-btn::before,
  .product-card form.card-atc .card-atc-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 1px;
    background: currentColor;
  }
  .product-card form.card-atc .card-atc-btn::after { transform: rotate(90deg); }
  .product-card form.card-atc .card-atc-btn:hover { background: #fff; box-shadow: 0 4px 14px rgba(14, 26, 19, .28); }
  .product-card form.card-atc .card-atc-btn:active { transform: scale(.92); }
  .product-card form.card-atc .card-atc-btn:focus-visible { outline: 2px solid var(--brand, #05944F); outline-offset: 2px; }
  .product-card form.card-atc .card-atc-btn.is-busy { opacity: .6; }

  .product-card .card-atc-step .card-atc-step-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #16211B;
    font-size: 20px;
    font-weight: 500;
  }
  .product-card .card-atc-step .card-atc-step-btn:hover { background: #F1F4F2; }
  .product-card .card-atc-step .card-atc-step-btn:focus-visible { outline: 2px solid var(--brand, #05944F); outline-offset: -2px; }
  .product-card .card-atc-step .card-atc-step-qty {
    flex: 0 0 auto;
    min-width: 14px;
    font-size: 14px;
    font-weight: 700;
  }
}
@media (max-width: 380px) {
  .card-atc-more { width: 30px; height: 30px; }
  .card-atc-dots { gap: 2.5px; }
  .card-atc-dots i { width: 3.5px; height: 3.5px; }
  .product-card form.card-atc .card-atc-btn,
  .product-card form.card-atc .card-atc-step { height: 36px; right: 8px; bottom: 8px; }
  .product-card form.card-atc .card-atc-btn { width: 36px; }
  .product-card form.card-atc .card-atc-btn::before,
  .product-card form.card-atc .card-atc-btn::after { width: 14px; margin-left: -7px; }
  .product-card .card-atc-step .card-atc-step-btn { width: 30px; height: 30px; font-size: 18px; }
  .product-card .card-atc-step .card-atc-step-qty { font-size: 13px; }
}

/* The sheet the circle opens. */
.wsheet { position: fixed; inset: 0; z-index: 9300; }
.wsheet[hidden] { display: none; }
.wsheet-backdrop { position: absolute; inset: 0; background: rgba(14, 24, 19, .45); opacity: 0; transition: opacity .2s; }
.wsheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 75vh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.wsheet-panel::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 4px;
  background: #DDE3DF; margin: 0 auto 10px;
}
.wsheet.is-open .wsheet-backdrop { opacity: 1; }
.wsheet.is-open .wsheet-panel { transform: none; }
.wsheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 0 12px; border-bottom: 1px solid #EEF1EF; }
.wsheet-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0E7A43; }
.wsheet-title { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; color: #16211B; line-height: 1.3; }
.wsheet-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #F1F4F2; color: #16211B; font-size: 20px; line-height: 1; }
.wsheet-list { display: flex; flex-direction: column; padding-top: 6px; }
.wsheet-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px; padding: 12px 4px;
  border-bottom: 1px solid #F1F4F2;
  text-align: left; font-size: 15px; color: #16211B;
}
.wsheet-opt:last-child { border-bottom: 0; }
.wsheet-opt-label { font-weight: 600; min-width: 0; }
.wsheet-opt-price { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsheet-opt.is-selected { color: #0E7A43; }
.wsheet-opt.is-selected .wsheet-opt-label::before { content: "\2713"; margin-right: 8px; }
.wsheet-opt:focus-visible { outline: 2px solid #0E7A43; outline-offset: -2px; border-radius: 8px; }
html.wsheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wsheet-panel, .wsheet-backdrop { transition: none; } }

/* ──────────────────────────────────────────────────────────────────────────
   Add to cart: feedback, quantity stepper, unavailable state, weight sheet.
   Presentation only -- see redesign_card_purchase_row() and footer-v2.php.
   ────────────────────────────────────────────────────────────────────────── */

/* Toast: what was added, with a way to the cart; red when the server refuses. */
#uw-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 10001;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(92vw, 460px);
  padding: 12px 18px; border-radius: 12px;
  background: #111; color: #fff;
  font: 500 14px/1.35 -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#uw-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#uw-toast.is-error { background: #8f1d1d; }
#uw-toast b { font-weight: 700; }
#uw-toast .uw-toast-msg { flex: 1 1 auto; min-width: 0; }
#uw-toast a { flex: 0 0 auto; color: #9fe0b8; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.uw-toast-ok {
  flex: 0 0 auto;
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand, #05944F); color: #fff; font-size: 12px; font-weight: 800;
}
@media (max-width: 768px) { #uw-toast { bottom: 18px; font-size: 13px; } }
/* Lift it above the cart page's sticky checkout bar. */
@media (max-width: 640px) { body:has(.cx-bar) #uw-toast { bottom: 88px; } }

/* The header cart count bumps when it changes. */
@keyframes uw-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.cart-count.uw-bump { animation: uw-bump .45s cubic-bezier(.3, 1.6, .5, 1); }

/* `hidden` must win over the display rules these controls already carry. */
.card-atc [hidden] { display: none !important; }

/* Busy state while a request is in flight. */
.card-atc-btn.is-busy { opacity: .7; cursor: progress; }

/* "- n +": replaces Add once this weight is in the cart. */
.card-atc-step {
  grid-area: button;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 3px;
  border-radius: 10px;
  background: var(--brand, #05944F);
  color: #fff;
}
.card-atc-step.is-busy { opacity: .7; pointer-events: none; }
.card-atc-step-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 8px;
  color: #fff; font-size: 20px; font-weight: 600; line-height: 1;
  transition: background .15s;
}
.card-atc-step-btn:hover { background: rgba(255, 255, 255, .16); }
.card-atc-step-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.card-atc-step-qty { flex: 1 1 auto; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .product-card .card-atc-step { min-height: 38px; padding: 2px; }
  .card-atc-step-btn { width: 32px; height: 32px; font-size: 18px; }
  .card-atc-step-qty { font-size: 14px; }
}
@media (max-width: 380px) {
  .card-atc-step-btn { width: 28px; height: 28px; }
}

/* No buyable weight: the reason, and a greyed button -- not a missing one. */
.card-atc--na {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px 12px; margin-top: auto;
  border-top: 1px solid #EFF2F0;
}
.card-atc-na-why { font-size: 11.5px; font-weight: 600; color: #8a5a00; text-align: center; }
.card-atc--na .card-atc-btn { background: #E7EBE8; color: #7C8781; cursor: not-allowed; box-shadow: none; transform: none; }

/* Desktop dropdown: unavailable sizes read as unavailable. */
.card-atc select option:disabled { color: #A5ADA8; }

/* Weight sheet rows: price per gram, "Best value", "In cart", unavailable. */
.wsheet-opt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wsheet-opt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wsheet-ppg { font-size: 12px; font-weight: 500; color: #6B7570; font-variant-numeric: tabular-nums; }
.wsheet-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.wsheet-tag--best { background: #E6F5EC; color: #0B6B3A; }
.wsheet-tag--cart { background: #EEF1F5; color: #34414D; }
.wsheet-why { font-size: 12px; font-weight: 600; color: #9A6A00; }
.wsheet-opt.is-disabled { cursor: not-allowed; }
.wsheet-opt.is-disabled .wsheet-opt-label,
.wsheet-opt.is-disabled .wsheet-opt-price { color: #A5ADA8; }
.wsheet-opt.is-disabled .wsheet-opt-price { text-decoration: line-through; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   Homepage, Uber Eats layout (index.php, .uhome).

   Black type on white, grey pill controls, round category stickers, big
   rounded product photos with a white "+" on them, and plain bold row
   headings with "See all" and round arrows. Scoped to .uhome so the shop,
   product and sales pages keep their own look.
   ══════════════════════════════════════════════════════════════════════════ */
/* The rail below replaces the header's category strip on this page only. */
.page-body:has(.uhome) > .cat-quicknav { display: none !important; }

.uhome {
  --uh-ink: #000;
  --uh-muted: #545454;
  --uh-pill: #F3F3F3;
  --uh-pill-hover: #E6E6E6;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 32px;
  color: var(--uh-ink);
}

/* Category stickers ─────────────────────────────────────────────────────── */
.uh-cats { position: relative; margin: 18px 0 4px; }
.uh-cats-track {
  display: flex; gap: 6px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px 52px 6px 0;
}
.uh-cats-track::-webkit-scrollbar { display: none; }
.uh-cat {
  flex: 0 0 auto; width: 100px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--uh-ink); text-decoration: none;
  scroll-snap-align: start;
}
.uh-cat-img {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.uh-cat-img img { width: 66px; height: 66px; object-fit: contain; }
.uh-cat:hover .uh-cat-img { background: var(--uh-pill); transform: translateY(-2px); }
.uh-cat-name { font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; }
.uh-cats-next,
.uh-cats-prev {
  position: absolute; right: 0; top: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: #fff; color: var(--uh-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.uh-cats-prev { right: auto; left: 0; }
.uh-cats-prev, .uh-cats-next { z-index: 2; }
.uh-cats-next:hover,
.uh-cats-prev:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.uh-cats-next[hidden],
.uh-cats-prev[hidden] { display: none; }
/* Soft fade under each arrow so the rail reads as "more this way". */
.uh-cats::before,
.uh-cats::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s;
}
.uh-cats::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)); }
.uh-cats::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)); }
.uh-cats:has(.uh-cats-prev:not([hidden]))::before,
.uh-cats:has(.uh-cats-next:not([hidden]))::after { opacity: 1; }

/* Offer cards: snap per card, round white arrows at both ends. */
.uhome .uh-offers .deal-carousel { scroll-snap-type: x mandatory; scroll-padding-left: 0; }
.uhome .uh-offers .deal-card { scroll-snap-align: start; }
.uhome .uh-offers .deal-arrow {
  width: 44px; height: 44px; font-size: 26px;
  background: #fff; color: #000; opacity: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.uhome .uh-offers .deal-arrow-left { left: -14px; }
.uhome .uh-offers .deal-arrow-right { right: -14px; }

/* Quick filter chips ────────────────────────────────────────────────────── */
.uh-chips {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 10px 0 20px;
}
.uh-chips::-webkit-scrollbar { display: none; }
.uh-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px;
  border-radius: 999px; background: var(--uh-pill);
  color: var(--uh-ink); font-size: 15px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .15s;
}
.uh-chip:hover { background: var(--uh-pill-hover); color: var(--uh-ink); }

/* Promo banners: one row of equal rounded cards, Uber-style ──────────────── */
.uhome .uh-banners { gap: 14px; }
.uh-banner {
  flex: 0 0 auto; width: 300px; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden; background: var(--uh-pill);
  scroll-snap-align: start;
}
.uh-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.uh-banner:hover img { transform: scale(1.03); }

/* Page title and store facts: plain text, like Uber's result heading ─────── */
.uh-intro { padding: 34px 0 0; }
.uh-intro h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em; color: var(--uh-ink);
}
.uh-intro-text { max-width: 820px; margin: 0 0 10px; color: var(--uh-muted); font-size: 15px; line-height: 1.55; }
.uh-meta { display: flex; flex-wrap: wrap; row-gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--uh-muted); font-size: 14px; }
.uh-meta li + li::before { content: "\2022"; margin: 0 9px; color: #AFAFAF; }
.uh-meta strong { color: var(--uh-ink); font-weight: 600; }

/* Row headings ──────────────────────────────────────────────────────────── */
.uhome .uh-row { padding-top: 34px; }
.uhome .uh-offers { padding-top: 2px; }
.uhome .uh-row-head { align-items: center; gap: 10px; margin-bottom: 14px; padding-top: 0; }
.uh-row-titles { margin-right: auto; min-width: 0; }
.uhome .section-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px); font-weight: 700;
  line-height: 1.2; letter-spacing: -.02em; color: var(--uh-ink);
}
.uh-row-sub { margin: 3px 0 0; color: var(--uh-muted); font-size: 14px; }
.uhome .section-link {
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 999px;
  background: var(--uh-pill); color: var(--uh-ink);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.uhome .section-link:hover { background: var(--uh-pill-hover); color: var(--uh-ink); }
.uhome .carousel-nav { gap: 8px; margin-left: 0; }
.uhome .nav-arrow {
  width: 40px; height: 40px;
  border: 0; background: var(--uh-pill); color: var(--uh-ink);
  font-size: 24px; line-height: 1;
}
.uhome .nav-arrow:hover:not(:disabled) { background: var(--uh-pill-hover); transform: none; }
.uhome .nav-arrow:disabled { opacity: .35; }

/* Offer cards ───────────────────────────────────────────────────────────── */
.uhome .deal-carousel { padding: 0 0 4px; gap: 14px; }
.uhome .deal-card {
  width: 400px; min-height: 150px;
  border-radius: 16px; padding: 22px 22px 22px 24px;
  color: var(--uh-ink); text-decoration: none;
}
.uhome .deal-card.deal-green  { background: #DFF3E4; }
.uhome .deal-card.deal-yellow { background: #FFF1C2; }
.uhome .deal-card.deal-orange { background: #FFE2CC; }
.uhome .deal-card.deal-purple { background: #ECE0FA; }
.uhome .deal-card.deal-pink   { background: #FCDDE8; }
.uhome .deal-card.deal-blue   { background: #DCEBFB; }
.uhome .deal-card .deal-text h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.uhome .deal-card .deal-text p { color: #333; font-size: 14px; line-height: 1.45; margin-bottom: 14px; }
.uhome .deal-card .deal-cta { padding: 8px 16px; background: var(--uh-ink); font-size: 14px; }
.uhome .deal-card .deal-img { width: 112px; height: 112px; border-radius: 12px; background: #fff; object-fit: contain; }

/* Product cards: photo first, text below, no box ───────────────────────── */
/* Every page, not only the homepage: one card design across the store.
   The colour tokens live on .uhome, so the cards carry their own copy. */
.page-body .product-card { --uh-ink: #000; --uh-muted: #545454; --uh-pill: #F3F3F3; --uh-pill-hover: #E6E6E6; }
.uhome .carousel { gap: 18px; padding-bottom: 6px; }
.uhome .carousel > .product-card { width: 244px; }
.page-body .product-card {
  position: relative;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; overflow: visible;
}
.page-body .product-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.page-body .product-card .card-img-wrap { border-radius: 12px; overflow: hidden; background: #F6F6F6; }
.page-body .product-card .card-img { transition: transform .35s ease; }
.page-body .product-card:hover .card-img { transform: scale(1.04); }
.page-body .product-card .card-body { padding: 10px 2px 0; gap: 3px; }
.page-body .product-card .card-name {
  min-height: 0; margin: 0;
  font-size: 16px; font-weight: 500; line-height: 1.3;
  letter-spacing: -.01em; color: var(--uh-ink);
}
.page-body .product-card .card-badges { display: none; }
.page-body .product-card .card-buyline { gap: 2px 8px; margin-top: 2px; padding-top: 0; }
/* Price follows the name directly instead of dropping to the card's foot. */
.page-body .product-card .card-link { flex: 0 0 auto; }
.page-body .product-card .card-price,
.page-body .product-card .card-buyline .card-price { font-size: 15px; font-weight: 400; color: var(--uh-ink); }
.page-body .product-card .card-rating { font-size: 13px; color: var(--uh-muted); }
.page-body .product-card .card-thc-chip { background: rgba(0, 0, 0, .72); }

/* The phone "+" (see "Product cards on phones") at every width here. */
@media (min-width: 769px) {
  .page-body .product-card form.card-atc {
    position: absolute; top: 0; left: 0; right: 0;
    aspect-ratio: 1 / 1; display: block;
    margin: 0; padding: 0; border: 0; background: none;
    pointer-events: none; z-index: 2;
  }
  .page-body .product-card form.card-atc > *:not(.card-atc-btn):not(.card-atc-step) { display: none !important; }
  .page-body .product-card form.card-atc .card-atc-btn,
  .page-body .product-card form.card-atc .card-atc-step {
    position: absolute; right: 12px; bottom: 12px;
    height: 42px; margin: 0; border: 0;
    background: #fff; color: var(--uh-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    pointer-events: auto;
  }
  .page-body .product-card form.card-atc .card-atc-btn {
    display: block; width: 42px; padding: 0;
    border-radius: 50%; font-size: 0; transform: none;
  }
  .page-body .product-card form.card-atc .card-atc-btn::before,
  .page-body .product-card form.card-atc .card-atc-btn::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 16px; height: 2px; margin: -1px 0 0 -8px;
    border-radius: 1px; background: currentColor;
  }
  .page-body .product-card form.card-atc .card-atc-btn::after { transform: rotate(90deg); }
  .page-body .product-card form.card-atc .card-atc-btn:hover { background: #fff; transform: scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, .24); }
  .page-body .product-card form.card-atc .card-atc-step {
    display: flex; align-items: center; gap: 2px;
    min-height: 0; padding: 0 4px; border-radius: 21px;
  }
  .page-body .product-card .card-atc-step .card-atc-step-btn {
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--uh-ink); font-size: 20px; font-weight: 500;
  }
  .page-body .product-card .card-atc-step .card-atc-step-btn:hover { background: var(--uh-pill); }
  .page-body .product-card .card-atc-step .card-atc-step-qty { flex: 0 0 auto; min-width: 16px; font-size: 15px; font-weight: 700; }

  /* On a wide screen the weight list is a centred dialog, not a bottom sheet. */
  .wsheet-panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(440px, calc(100vw - 48px)); max-height: 80vh;
    border-radius: 16px;
    transform: translate(-50%, -46%); opacity: 0;
    transition: transform .2s, opacity .2s;
  }
  .wsheet.is-open .wsheet-panel { transform: translate(-50%, -50%); opacity: 1; }
  .wsheet-panel::before { display: none; }
}

/* Phones ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .uhome { padding: 0 16px 24px; }
  .uh-cats { margin-top: 12px; }
  .uh-cats-track { gap: 2px; padding-right: 0; }
  .uh-cats-prev { display: none; }
  .uh-cats::before, .uh-cats::after { display: none; }
  /* Uber-sized stickers: big artwork, ~3.5 per row at 320px so the next one peeks. */
  .uh-cat { width: 80px; gap: 4px; }
  .uh-cat-img { width: 76px; height: 76px; }
  .uh-cat-img img { width: 68px; height: 68px; }
  /* Run the row to the screen edges (it sat 28px in from each side), so the
     next sticker is visibly cut by the screen rather than hidden by padding. */
  .uh-cats-track {
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
    scroll-snap-type: none;   /* snapping pulled the first sticker under the edge */
  }
  .uh-cat-name { font-size: 13px; font-weight: 500; }
  .uh-cats-next { display: none; }
  .uh-chips { padding: 8px 0 16px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .uh-chip { height: 38px; padding: 0 14px; font-size: 14px; }
  .uh-banner { width: 62vw; max-width: 260px; border-radius: 12px; }
  .uh-intro { padding-top: 26px; }
  .uh-intro-text { font-size: 14px; }
  .uh-meta { font-size: 13px; }
  .uhome .uh-row { padding-top: 26px; }
  .uhome .section-link { padding: 7px 13px; font-size: 14px; }
  .uhome .carousel-nav { display: none; }
  .uhome .carousel { gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding-left: 16px; }
  .uhome .carousel > .product-card { width: 44vw; max-width: 220px; }
  .page-body .product-card .card-name { font-size: 14.5px; }
  .page-body .product-card .card-price,
  .page-body .product-card .card-buyline .card-price { font-size: 14px; }
  .uhome .deal-carousel { margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; }
  /* Undo the generic phone rule that squeezes offer panels to 2.25 per row. */
  .uhome .deal-card {
    flex: 0 0 auto; width: 84vw; max-width: 360px; min-height: 132px;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 18px; border-radius: 16px;
  }
  .uhome .deal-card .deal-text h3 { font-size: 17px; }
  .uhome .deal-card .deal-text p { font-size: 13px; margin-bottom: 10px; }
  .uhome .deal-card .deal-img { width: 88px; height: 88px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phones: every homepage rail says it scrolls, without covering anything.

   At 320px, round arrows over the rails sat on top of the cards, chips and
   CTA buttons. Instead:
   - category stickers and chips fade out at whichever edge has more behind
     it (a mask on the rail itself, so nothing is drawn over the content);
   - offer cards, featured banners and product rows get a short position bar
     underneath, the way app carousels show "there is more this way".
   carousel.js (initMobilePeekRails) toggles .mobile-peek-more / -less and
   sizes the bar.
   ────────────────────────────────────────────────────────────────────────── */
.mobile-rail-progress { display: none; }

@media (max-width: 768px) {
  /* No overlay arrows on the homepage rails. */
  .uhome .mobile-rail-cue { display: none !important; }

  /* Edge fades for the sticker and chip rows. */
  .uhome .mobile-peek-more > .uh-cats-track,
  .uhome .mobile-peek-more > .uh-chips {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .uhome .mobile-peek-less > .uh-cats-track,
  .uhome .mobile-peek-less > .uh-chips {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
            mask-image: linear-gradient(90deg, transparent, #000 44px);
  }
  .uhome .mobile-peek-less.mobile-peek-more > .uh-cats-track,
  .uhome .mobile-peek-less.mobile-peek-more > .uh-chips {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  }

  /* The bigger stickers leave only ~30px of the next one on screen; a
     narrower fade keeps that peek visible. */
  .uhome .mobile-peek-more > .uh-cats-track {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), rgba(0,0,0,.25));
            mask-image: linear-gradient(90deg, #000 calc(100% - 18px), rgba(0,0,0,.25));
  }
  .uhome .mobile-peek-less > .uh-cats-track {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 18px);
            mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 18px);
  }
  .uhome .mobile-peek-less.mobile-peek-more > .uh-cats-track {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 18px, #000 calc(100% - 18px), rgba(0,0,0,.25));
            mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 18px, #000 calc(100% - 18px), rgba(0,0,0,.25));
  }

  /* Position bar for the card rows. */
  .uhome .mobile-rail-progress:not([hidden]) {
    display: block;
    position: relative;
    width: 56px; height: 4px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: #E8E8E8;
    overflow: hidden;
  }
  .uhome .mobile-rail-progress > span {
    position: absolute; top: 0; bottom: 0; left: 0;
    min-width: 12px;
    border-radius: inherit;
    background: #000;
    transition: left .12s linear;
  }
  /* The sticker and chip rows use the fade instead. */
  .uhome .uh-cats .mobile-rail-progress,
  .uhome .mobile-rail-peek-wrap:has(> .uh-chips) > .mobile-rail-progress { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Phones: the header category strip on every other page matches the
   homepage rail -- same big stickers, no dark arrow over the last one; the
   fade at the right edge and the half-visible next sticker say it scrolls.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-quicknav > .mobile-rail-cue:not([hidden]) { display: none !important; }
  .cat-nav-custom .cat-quicknav-inner {
    padding-left: 16px; padding-right: 16px;
    scroll-padding-inline: 16px;
    gap: 2px;
  }
  .cat-nav-custom .cat-quicknav-item { width: 80px; padding: 2px 2px 4px; gap: 4px; }
  .cat-nav-custom .cat-quicknav-img { width: 68px; height: 68px; }
  .cat-nav-custom .cat-quicknav-img img { width: 100%; height: 100%; object-fit: contain; }
  .cat-quicknav-label { font-size: 13px; font-weight: 500; }
  .cat-quicknav::after { width: 18px; }
  .cat-quicknav:not(.mobile-peek-at-start)::before { width: 18px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Homepage intro: a hero panel instead of a loose run of text.

   The H1, paragraph and store facts sat on the page as plain text with a
   bullet-separated line, which read as unfinished. They now sit on a soft
   green panel: an eyebrow for the service area, the H1, the copy, two
   actions, and the facts as icon tiles.
   ────────────────────────────────────────────────────────────────────────── */
.uhome .uh-intro {
  margin-top: 36px;
  padding: 40px 44px;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34, 139, 76, .14), rgba(34, 139, 76, 0) 55%),
    linear-gradient(180deg, #F3F8F4, #EDF4EF);
  border: 1px solid #E1ECE4;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.uh-intro-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 6px 12px;
  border-radius: 999px; background: #fff;
  color: #1E6B3C; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.uh-intro-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22A55A; box-shadow: 0 0 0 4px rgba(34, 165, 90, .18);
}
.uhome .uh-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.18; letter-spacing: -.025em;
}
.uhome .uh-intro-text { margin: 0 0 22px; max-width: 620px; font-size: 16px; line-height: 1.6; color: #4B5B50; }
.uh-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.uh-intro-cta {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  border-radius: 999px; background: #000; color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .15s, background .15s;
}
.uh-intro-cta:hover { background: #1a1a1a; color: #fff; transform: translateY(-1px); }
.uh-intro-link {
  color: #1E6B3C; font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(30, 107, 60, .25);
}
.uh-intro-link:hover { color: #14512C; border-bottom-color: currentColor; }

/* Store facts as tiles. */
.uhome .uh-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.uhome .uh-meta li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 16px;
  background: #fff; border: 1px solid #E6EEE8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  min-width: 0;
}
.uhome .uh-meta li + li::before { content: none; }
.uhome .uh-meta li:last-child { grid-column: 1 / -1; }
.uh-meta-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: #E8F4EC; color: #1E6B3C;
}
.uhome .uh-meta li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.uhome .uh-meta strong { font-size: 14.5px; font-weight: 650; color: var(--uh-ink); line-height: 1.25; }
.uhome .uh-meta small { font-size: 13px; color: #5E6E63; line-height: 1.3; }

@media (max-width: 960px) {
  .uhome .uh-intro { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .uhome .uh-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uhome .uh-meta li:last-child { grid-column: auto; }
}
@media (max-width: 768px) {
  .uhome .uh-intro { margin-top: 28px; padding: 24px 18px; border-radius: 20px; gap: 20px; }
  .uhome .uh-intro h1 { font-size: 22px; }
  .uhome .uh-intro-text { font-size: 14.5px; margin-bottom: 18px; }
  .uh-intro-cta { height: 44px; padding: 0 20px; font-size: 14.5px; }
  .uh-intro-link { font-size: 14.5px; }
  .uhome .uh-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .uhome .uh-meta li { padding: 11px; gap: 10px; border-radius: 14px; }
  .uhome .uh-meta li:last-child { grid-column: 1 / -1; }
  .uh-meta-ico { width: 34px; height: 34px; border-radius: 10px; }
  .uh-meta-ico svg { width: 18px; height: 18px; }
  .uhome .uh-meta strong { font-size: 13.5px; }
  .uhome .uh-meta small { font-size: 12px; }
}
@media (max-width: 360px) {
  .uhome .uh-intro { padding: 20px 14px; }
  .uhome .uh-meta li { padding: 10px 9px; gap: 8px; }
  .uh-meta-ico { width: 30px; height: 30px; }
  .uh-meta-ico svg { width: 16px; height: 16px; }
  .uhome .uh-meta strong { font-size: 12.5px; }
  .uhome .uh-meta small { font-size: 11.5px; }
}
/* Narrow phones: tiles stack icon over text so the labels never break mid-word. */
@media (max-width: 420px) {
  .uhome .uh-intro { padding: 20px 14px; }
  .uh-intro-eyebrow { font-size: 11.5px; padding: 5px 10px; gap: 7px; white-space: nowrap; max-width: 100%; }
  .uh-intro-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(34, 165, 90, .18); }
  .uhome .uh-intro h1 { font-size: 21px; }
  .uhome .uh-intro-text { font-size: 14px; line-height: 1.55; }
  .uh-intro-actions { gap: 10px 14px; }
  .uh-intro-cta { height: 42px; padding: 0 18px; font-size: 14px; }
  .uh-intro-link { font-size: 14px; }
  .uhome .uh-meta li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .uhome .uh-meta li:last-child { flex-direction: row; align-items: center; }
  .uh-meta-ico { width: 32px; height: 32px; border-radius: 10px; }
  .uh-meta-ico svg { width: 17px; height: 17px; }
  .uhome .uh-meta strong { font-size: 13.5px; }
  .uhome .uh-meta small { font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Homepage category row follows the page.

   The sticker row sticks under the fixed header, the way the category strip
   already does on the other pages. It keeps its full size while stuck (a
   compact version read as too small); .is-stuck, set by the sentinel script
   in index.php, only adds the bottom edge so it separates from the content.
   ────────────────────────────────────────────────────────────────────────── */
.uhome .uh-cats {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: #fff;
  /* Paint the white bar edge to edge although .uhome is padded. */
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax -12px);
}
.uhome .uh-cats.is-stuck {
  box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax #ECECEC, 0 8px 12px -8px rgba(0, 0, 0, .22);
}
.uh-cats-sentinel { height: 1px; margin-bottom: -1px; }

/* Phones: round arrows at the screen edges, centred on the artwork. The
   right one shows while there is more to the right, the left one once the
   row has moved (the inline script in index.php toggles [hidden]). */
@media (max-width: 768px) {
  .uhome .uh-cats-next,
  .uhome .uh-cats-prev {
    display: grid;
    top: 25px;
    width: 32px; height: 32px;
    z-index: 3;
    background: #fff; color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  }
  .uhome .uh-cats-next { right: calc(50% - 50vw + 6px); }
  .uhome .uh-cats-prev { left: calc(50% - 50vw + 6px); right: auto; }
  .uhome .uh-cats-next svg,
  .uhome .uh-cats-prev svg { width: 16px; height: 16px; }
  .uhome .uh-cats-next[hidden],
  .uhome .uh-cats-prev[hidden] { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Offer cards on phones: show the description.

   A generic small-screen rule (deal cards squeezed 2.25 per row) hid the
   description, stretched the button to full width and forced a three-line
   title box. The homepage cards are one wide card per view, so they get the
   description back (up to three lines), a natural-width button, and a
   slightly smaller picture to give the text room.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .uhome .deal-card { align-items: stretch; }
  .uhome .deal-card .deal-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
  .uhome .deal-card .deal-text h3 {
    display: block; min-height: 0; margin: 0 0 6px;
    font-size: 17px; line-height: 1.2;
  }
  .uhome .deal-card .deal-text p {
    display: block;
    margin: 0 0 12px;
    font-size: 13px; line-height: 1.4; color: #333;
  }
  .uhome .deal-card .deal-cta {
    width: auto; align-self: flex-start;
    margin-top: auto;
    padding: 9px 16px; font-size: 13.5px;
  }
  .uhome .deal-card .deal-img { width: 76px; height: 76px; align-self: center; }
}
@media (max-width: 360px) {
  .uhome .deal-card { padding: 16px 14px; gap: 10px; }
  .uhome .deal-card .deal-text h3 { font-size: 16px; }
  .uhome .deal-card .deal-text p { font-size: 12.5px; }
  .uhome .deal-card .deal-img { width: 64px; height: 64px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Desktop: one category bar everywhere, with stickers and hover menus.

   Above 1024px the other pages still showed the old uppercase text bar
   ("Category nav as a text bar" hides the artwork), while the homepage showed
   its own sticker row -- which has no subcategory menus, so hovering a
   category there did nothing. Desktop now uses the header's category bar on
   every page, homepage included, restyled as the homepage stickers: same
   artwork, sentence-case names, and the mega panel of subcategories on hover.
   Phones keep the homepage rail and the header rail exactly as they were.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /* Homepage: swap its own row for the header bar (which has the menus). */
  .page-body:has(.uhome) > .cat-quicknav { display: block !important; }
  .uhome .uh-cats,
  .uhome .uh-cats-sentinel { display: none !important; }
  .uhome .uh-chips { padding-top: 16px; }

  .cat-nav-custom .cat-quicknav-inner {
    justify-content: center;
    gap: 4px;
    padding: 12px 16px 8px;
  }
  .cat-nav-custom .cat-quicknav-item {
    width: 100px;
    padding: 0 2px 10px;
    gap: 8px;
  }
  .cat-nav-custom .cat-quicknav-img {
    display: grid; place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto;
    border-radius: 50%;
  }
  .cat-nav-custom .cat-quicknav-img img {
    width: 68px; height: 68px;
    padding: 0;
    object-fit: contain;
  }
  .cat-nav-custom .cat-quicknav-item:hover .cat-quicknav-img,
  .cat-nav-custom .cat-nav-item:hover .cat-quicknav-img {
    background: #F3F3F3 !important;
    transform: translateY(-2px);
  }
  .cat-quicknav-label {
    min-height: 2.5em;
    align-items: flex-start;
    font-size: 14px; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    line-height: 1.25;
    white-space: normal;
    color: #000;
  }
  /* Short bar under the open category, under its name. */
  .cat-nav-custom .cat-quicknav-item::after { left: 30px; right: 30px; bottom: 2px; height: 3px; background: #000; }
}
/* Narrower desktops: smaller stickers so all eleven still fit on one line
   (the bar cannot scroll here -- it must stay overflow:visible for the menus). */
@media (min-width: 1025px) and (max-width: 1240px) {
  .cat-nav-custom .cat-quicknav-inner { gap: 0; padding-left: 8px; padding-right: 8px; }
  .cat-nav-custom .cat-quicknav-item { width: 82px; }   /* twelve items incl. Pre-Rolls */
  .cat-nav-custom .cat-quicknav-img { width: 62px; height: 62px; }
  .cat-nav-custom .cat-quicknav-img img { width: 56px; height: 56px; }
  .cat-quicknav-label { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Category hero worlds (shop.php, .uw-hero--<theme>).

   The category banner was the same flat dark green on every page, with no
   imagery. Each category now has its own colour world: drifting light blooms,
   a paint-splatter and film-grain texture, the category's sticker art shown
   big and tilted (plus a faded echo), a gradient or neon title, and one
   signature motion -- neon + smoke on Vapes, a slowly turning bud on Flower,
   falling gummies on Edibles, a colour-melting field on Mushrooms.
   Presentation only: the text, links and filters are unchanged, the effects
   layer is aria-hidden, and every animation stops for reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */
.shop-header--hero.uw-hero {
  --hx-base: #0B150F;
  --hx-1: #1F7A3A; --hx-2: #9BE15D; --hx-3: #E7C45A;
  --hx-accent: #9BE15D;
  --hx-title: #C9F27B;
  background: var(--hx-base);
  box-shadow: 0 0 0 100vmax var(--hx-base);
  border-bottom: 0;
  isolation: isolate;
  min-height: 300px;
}

/* Effects layer: full viewport width, clipped to the band. */
.shop-header--hero > .uw-hero-fx {
  position: absolute; z-index: 0;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
}
/* Paint splatter. */
.uw-hero-fx::before {
  content: ''; position: absolute; inset: 0; opacity: .35;
  background:
    radial-gradient(circle at 8% 22%,  var(--hx-2) 0 3px, transparent 4px),
    radial-gradient(circle at 11% 30%, var(--hx-2) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 19% 78%, var(--hx-3) 0 5px, transparent 6px),
    radial-gradient(circle at 24% 70%, var(--hx-3) 0 2px, transparent 3px),
    radial-gradient(circle at 71% 15%, var(--hx-2) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 83% 84%, var(--hx-3) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 76%, var(--hx-2) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 93% 28%, var(--hx-2) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 90%, var(--hx-2) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 8%,  var(--hx-3) 0 1.5px, transparent 2.5px);
}
/* Film grain, so the field reads as a printed surface rather than a flat fill. */
.uw-hero-fx::after {
  content: ''; position: absolute; inset: 0; opacity: .09; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Light blooms. */
.uw-hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55;
  animation: uwHeroDrift 18s ease-in-out infinite alternate;
}
.uw-hero-glow--a { width: 520px; height: 420px; left: 6%;  top: -30%; background: var(--hx-1); }
.uw-hero-glow--b { width: 440px; height: 380px; right: 8%; bottom: -35%; background: var(--hx-2); opacity: .32; animation-duration: 22s; animation-delay: -6s; }
.uw-hero-glow--c { width: 300px; height: 300px; left: 44%; top: 30%;  background: var(--hx-3); opacity: .22; animation-duration: 26s; animation-delay: -12s; }
@keyframes uwHeroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 24px, 0) scale(1.15); }
}

/* The category's sticker, big and tilted, with a faded echo on the far side. */
.uw-hero-art { position: absolute; display: block; height: auto; user-select: none; }
/* Badge = the sticker inside a spinning "UPER WEED ✦ <CATEGORY>" stamp. */
.uw-hero-badge {
  position: absolute;
  right: max(3vw, calc(50% - 640px));
  top: 50%;
  width: clamp(170px, 17vw, 240px);
  aspect-ratio: 1;
  translate: 0 -50%;
  animation: uwHeroFloat 7s ease-in-out infinite;
}
.uw-hero-badge .uw-hero-art--main {
  position: absolute; inset: 11%;
  width: 78%;
  rotate: 11deg;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)) drop-shadow(0 0 30px var(--hx-2));
}
.uw-hero-ring {
  position: absolute; inset: -12%;
  width: 124%; height: 124%;
  overflow: visible;
  animation: uwRingSpin 28s linear infinite;
}
.uw-hero-ring text {
  fill: var(--hx-accent);
  font: 800 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .12em;
}
@keyframes uwRingSpin { to { rotate: 360deg; } }
.uw-hero-art--echo {
  left: max(2vw, calc(50% - 660px));
  bottom: -34px;
  width: clamp(120px, 13vw, 200px);
  rotate: -17deg;
  opacity: .26;
  filter: blur(.5px) saturate(1.2);
  animation: uwHeroFloat 9s ease-in-out infinite reverse;
}
@keyframes uwHeroFloat {
  0%, 100% { translate: 0 -50%; }
  50%      { translate: 0 calc(-50% - 14px); }
}
.uw-hero-art--echo { translate: 0 0; animation-name: uwHeroBob; }
@keyframes uwHeroBob { 50% { translate: 0 -10px; } }

/* Type on top of the world. */
.uw-hero .shop-eyebrow { color: var(--hx-accent); }
.uw-hero .shop-eyebrow::before,
.uw-hero .shop-eyebrow::after { background: linear-gradient(90deg, transparent, var(--hx-accent)); }
.uw-hero h1 {
  width: fit-content; margin-inline: auto;   /* gradient spans the word, not the page */
  background: linear-gradient(100deg, #fff 15%, var(--hx-title) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.45));
}
.uw-hero .cat-desc-preview,
.uw-hero .cat-desc-full {
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* ── The worlds ─────────────────────────────────────────────────────────── */
.uw-hero.uw-hero--vapes        { --hx-base: #0C0520; --hx-1: #7B2FFF; --hx-2: #00E5FF; --hx-3: #FF3DF2; --hx-accent: #6FF6FF; --hx-title: #B99BFF; }
.uw-hero.uw-hero--flower       { --hx-base: #05170B; --hx-1: #1F7A3A; --hx-2: #9BE15D; --hx-3: #E7C45A; --hx-accent: #B5EC7A; --hx-title: #C9F27B; }
.uw-hero.uw-hero--prerolls     { --hx-base: #12140A; --hx-1: #56741C; --hx-2: #D9B26F; --hx-3: #9BE15D; --hx-accent: #E3CB8F; --hx-title: #E8D49A; }
.uw-hero.uw-hero--edibles      { --hx-base: #26051D; --hx-1: #FF4FB8; --hx-2: #B6F36B; --hx-3: #FF9F43; --hx-accent: #FF9AD5; --hx-title: #FFB3E1; }
.uw-hero.uw-hero--hash         { --hx-base: #180C03; --hx-1: #C2621B; --hx-2: #FF9F1C; --hx-3: #FFD166; --hx-accent: #FFC76B; --hx-title: #FFC76B; }
.uw-hero.uw-hero--concentrates { --hx-base: #1A0F02; --hx-1: #FF8A00; --hx-2: #FFB400; --hx-3: #FFE08A; --hx-accent: #FFD166; --hx-title: #FFD166; }
.uw-hero.uw-hero--mushrooms    { --hx-base: #120828; --hx-1: #FF5EDB; --hx-2: #7CFFB2; --hx-3: #5B8CFF; --hx-accent: #C7A6FF; --hx-title: #7CFFB2; }
.uw-hero.uw-hero--tobacco      { --hx-base: #140D07; --hx-1: #A0612B; --hx-2: #D9A36A; --hx-3: #6B4424; --hx-accent: #E7B98A; --hx-title: #F1C99A; }
.uw-hero.uw-hero--wholesale    { --hx-base: #03171B; --hx-1: #0FA37F; --hx-2: #F2C14E; --hx-3: #1A6FA3; --hx-accent: #F2C14E; --hx-title: #F2C14E; }
.uw-hero.uw-hero--accessories  { --hx-base: #0A1016; --hx-1: #3AA0FF; --hx-2: #8FE3FF; --hx-3: #7B61FF; --hx-accent: #9FE8FF; --hx-title: #9FE8FF; }
.uw-hero.uw-hero--deals        { --hx-base: #1C0606; --hx-1: #FF3B3B; --hx-2: #FFB800; --hx-3: #FF6B6B; --hx-accent: #FFD34D; --hx-title: #FFD34D; }
/* Worlds for pages that are not a category (shop.php): the full menu and
   search, New Arrivals, Top Rated. */
.uw-hero.uw-hero--menu { --hx-base: #06150C; --hx-1: #1C7A43; --hx-2: #7EE08A; --hx-3: #E7C45A; --hx-accent: #8FE3A0; --hx-title: #B8F27B; }
.uw-hero.uw-hero--new  { --hx-base: #03141A; --hx-1: #00B3A4; --hx-2: #C6FF3D; --hx-3: #3DA5FF; --hx-accent: #7CF5E4; --hx-title: #C6FF3D; }
.uw-hero.uw-hero--top  { --hx-base: #0E0B1F; --hx-1: #5B3FD1; --hx-2: #FFD24D; --hx-3: #FF9F43; --hx-accent: #FFD978; --hx-title: #FFD24D; }

/* ── Signature motions ──────────────────────────────────────────────────── */
/* Vapes: a neon sign in drifting vapour. */
.uw-hero--vapes h1 {
  background: none;
  -webkit-text-fill-color: #fff; color: #fff;
  filter: none;
  text-shadow: 0 0 4px #fff, 0 0 14px var(--hx-2), 0 0 32px var(--hx-2), 0 0 64px var(--hx-1);
  animation: uwNeon 6s linear infinite;
}
@keyframes uwNeon {
  0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; }
  20%, 62% { opacity: .72; }
}
.uw-hero--vapes .uw-hero-glow { filter: blur(90px); opacity: .42; }
.uw-hero--vapes .uw-hero-glow--a { width: 760px; height: 300px; animation: uwSmoke 16s ease-in-out infinite alternate; }
.uw-hero--vapes .uw-hero-glow--b { width: 680px; height: 260px; animation: uwSmoke 20s ease-in-out infinite alternate-reverse; }
.uw-hero--vapes .uw-hero-glow--c { width: 520px; height: 220px; opacity: .3; animation: uwSmoke 24s ease-in-out infinite alternate; }
@keyframes uwSmoke {
  from { transform: translate3d(-120px, 10px, 0) scaleX(1); }
  to   { transform: translate3d(140px, -20px, 0) scaleX(1.3); }
}

/* Flower: the bud turns, slowly. */
.uw-hero--flower .uw-hero-art--main { animation: uwHeroSpin 70s linear infinite; }
@keyframes uwHeroSpin { from { rotate: 11deg; } to { rotate: 371deg; } }

/* Hash: a warm spotlight that breathes. */
.uw-hero--hash .uw-hero-glow--c { opacity: .38; animation: uwPulse 5s ease-in-out infinite; }
@keyframes uwPulse { 50% { transform: scale(1.35); opacity: .55; } }

/* Mushrooms: the whole field melts through colours. */
.uw-hero--mushrooms .uw-hero-glow { animation-name: uwHeroDrift, uwMelt; animation-duration: 18s, 14s; animation-timing-function: ease-in-out, linear; animation-iteration-count: infinite; animation-direction: alternate, normal; }
@keyframes uwMelt { from { filter: blur(70px) hue-rotate(0deg); } to { filter: blur(70px) hue-rotate(360deg); } }
.uw-hero--mushrooms h1 { background-image: linear-gradient(100deg, #fff 20%, #C7A6FF 55%, #7CFFB2 90%); }

/* Edibles: gummies falling through the band. */
.uw-hero-drop {
  position: absolute; top: -70px; width: 44px; height: auto;
  opacity: .5; rotate: 0deg;
  animation: uwFall 9s linear infinite;
}
.uw-hero-drop--1 { left: 6%;  animation-delay: 0s;    width: 38px; }
.uw-hero-drop--2 { left: 18%; animation-delay: -3s;   width: 30px; animation-duration: 11s; }
.uw-hero-drop--3 { left: 33%; animation-delay: -6.5s; width: 26px; opacity: .35; }
.uw-hero-drop--4 { left: 64%; animation-delay: -1.5s; width: 34px; animation-duration: 10s; }
.uw-hero-drop--5 { left: 78%; animation-delay: -5s;   width: 28px; opacity: .4; }
.uw-hero-drop--6 { left: 91%; animation-delay: -8s;   width: 40px; animation-duration: 12s; }
@keyframes uwFall {
  from { transform: translate3d(0, 0, 0);          rotate: -20deg; }
  to   { transform: translate3d(30px, 520px, 0);   rotate: 200deg; }
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */
/* Tablets: the title sits closer to the art, so the art steps back. */
@media (max-width: 1100px) {
  .uw-hero-badge { right: 8px; width: clamp(150px, 20vw, 200px); opacity: .6; }
  .uw-hero-art--echo { left: -30px; opacity: .18; }
}
/* Phones: the badge becomes the hero image, centred above the title, and the
   paragraph is held to four lines behind a "Read more" (the full text stays
   in the page). */
@media (max-width: 560px) {
  .shop-header--hero.uw-hero { min-height: 0; padding-top: 196px; padding-bottom: 30px; }
  .uw-hero-glow--a { width: 300px; height: 260px; }
  .uw-hero-glow--b { width: 260px; height: 240px; }
  .uw-hero-glow--c { width: 180px; height: 180px; }
  .uw-hero--vapes .uw-hero-glow--a { width: 420px; height: 200px; }
  .uw-hero--vapes .uw-hero-glow--b { width: 380px; height: 180px; }
  .uw-hero-badge {
    top: 26px; right: auto; left: 50%;
    width: 150px; opacity: 1;
    translate: -50% 0;
    animation-name: uwHeroBobC;
  }
  .uw-hero-ring text { font-size: 14px; }
  /* A soft disc of light behind the badge so it pops off the field. */
  .uw-hero-badge::before {
    content: ''; position: absolute; inset: -6%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--hx-2) 38%, transparent) 0%, transparent 68%);
  }
  .uw-hero-art--echo { top: 24px; bottom: auto; left: -34px; width: 96px; opacity: .22; }
  .uw-hero h1 { font-size: clamp(34px, 11vw, 44px); }

  /* The description is shown in full on phones too: no clamp, no "Read more". */
  .uw-hero .cat-description { margin-top: 14px; position: relative; }
  .uw-hero-drop { width: 26px !important; }
  .uw-hero-drop--3, .uw-hero-drop--5 { display: none; }
}

@media (max-width: 400px) {
  .shop-header--hero.uw-hero { padding-top: 180px; }
  .uw-hero-badge { width: 136px; top: 22px; }
}
@keyframes uwHeroBobC { 50% { translate: -50% -8px; } }

@media (prefers-reduced-motion: reduce) {
  .uw-hero *, .uw-hero *::before, .uw-hero *::after { animation: none !important; }
  .uw-hero-drop { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Menu drawer, app-style (header-v2.php, .dw).

   The drawer was a stack of grey buttons, three mismatched contact buttons
   and a long text accordion of ~60 subcategories. It is now laid out like an
   app menu: a branded header with sign-in and cart, search, a delivery card,
   the category stickers as a grid (a tap slides that category's
   subcategories in from the right), a Discover grid, one "Order by phone"
   card with a live open/closed badge, and the delivery and learn links as
   tidy rows. Presentation only -- every destination is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
.drawer.dw {
  width: min(400px, 90vw); max-width: none;
  background: #F4F6F4;
  color: #111;
  overflow: hidden;              /* .dw-body scrolls; panels slide over it */
  border-radius: 0 22px 22px 0;
  box-shadow: 18px 0 50px rgba(0, 0, 0, .28);
}
.dw-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.dw .dw-i { display: block; flex: 0 0 auto; }

/* Header */
.dw-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 16px 18px 20px;
  color: #fff;
  background: radial-gradient(130% 120% at 0% 0%, #22653D 0%, #0E1A13 62%);
}
.dw-head-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dw-head-fx::before {
  content: ''; position: absolute; inset: 0; opacity: .45;
  background:
    radial-gradient(circle at 93% 46%, #9BE15D 0 3px, transparent 4px),
    radial-gradient(circle at 88% 52%, #9BE15D 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 40%, #E7C45A 0 2px, transparent 3px),
    radial-gradient(circle at 55% 6%,  #9BE15D 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 97% 58%, #9BE15D 0 2px, transparent 3px),
    radial-gradient(260px 180px at 100% 100%, rgba(155, 225, 93, .28), transparent 70%);
}
.dw-head-fx::after {
  content: ''; position: absolute; inset: 0; opacity: .1; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dw-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dw-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.dw-brand:hover { color: #fff; }
.dw-logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.drawer.dw .dw-close {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.drawer.dw .dw-close:hover { background: rgba(255, 255, 255, .22); }
.dw-hello { margin: 20px 0 16px; }
.dw-hello strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.dw-hello span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.dw-head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: transform .15s, background .15s;
}
.dw-btn:active { transform: scale(.97); }
.dw-btn--light { background: #fff; color: #0E1A13; }
.dw-btn--light:hover { color: #0E1A13; background: #EDF7F0; }
.dw-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.dw-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.dw-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #22A55A; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800;
}

/* Search */
.dw-search {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 14px 0; padding: 0 6px 0 14px; height: 50px;
  background: #fff; border-radius: 14px; color: #6B7280;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px #E4E8E4;
  transition: box-shadow .15s;
}
.dw-search:focus-within { box-shadow: 0 0 0 2px #22A55A; }
.dw-search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none; padding: 0;
  font: inherit; font-size: 15px; color: #111;
}
.dw-search-go {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer;
  background: #0E1A13; color: #fff;
}

/* Delivery card */
.dw-promo {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 14px 0; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(100deg, #E3F4EA, #F0F8E6);
  box-shadow: inset 0 0 0 1px #CFE8D8;
  color: #0E1A13; text-decoration: none;
}
.dw-promo:hover { color: #0E1A13; }
.dw-promo-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #1E8C4E; color: #fff; flex: 0 0 auto; }
.dw-promo-text { flex: 1 1 auto; min-width: 0; }
.dw-promo-text strong { display: block; font-size: 14.5px; font-weight: 800; }
.dw-promo-text small { display: block; margin-top: 1px; font-size: 12.5px; color: #4B5B50; }
.dw-promo > .dw-i:last-child { color: #1E8C4E; }

/* Section heading */
.dw-block { margin: 22px 14px 0; }
.dw-label { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.dw-label > span { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #6B7280; }
.dw-label > a { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 700; color: #14803F; text-decoration: none; }

/* Category stickers */
.dw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dw-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px 10px; margin: 0;
  border: 0; border-radius: 16px;
  background: #fff; color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px #E9EDE9;
  font: inherit; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.dw-tile:hover { color: #111; box-shadow: 0 6px 16px rgba(0, 0, 0, .08), 0 0 0 1px #CFE3D5; }
.dw-tile:active { transform: scale(.96); }
.dw-tile-img { width: 58px; height: 58px; display: grid; place-items: center; }
.dw-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.dw-tile-name { min-height: 2.4em; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }
/* Stickers pop in one after another each time the menu opens. */
.drawer.dw.open .dw-tile { animation: dwPop .38s cubic-bezier(.2, .8, .3, 1.2) both; }
.drawer.dw.open .dw-tile:nth-child(1) { animation-delay: 0.09s; }
.drawer.dw.open .dw-tile:nth-child(2) { animation-delay: 0.11s; }
.drawer.dw.open .dw-tile:nth-child(3) { animation-delay: 0.14s; }
.drawer.dw.open .dw-tile:nth-child(4) { animation-delay: 0.16s; }
.drawer.dw.open .dw-tile:nth-child(5) { animation-delay: 0.18s; }
.drawer.dw.open .dw-tile:nth-child(6) { animation-delay: 0.21s; }
.drawer.dw.open .dw-tile:nth-child(7) { animation-delay: 0.23s; }
.drawer.dw.open .dw-tile:nth-child(8) { animation-delay: 0.26s; }
.drawer.dw.open .dw-tile:nth-child(9) { animation-delay: 0.28s; }
.drawer.dw.open .dw-tile:nth-child(10) { animation-delay: 0.31s; }
.drawer.dw.open .dw-tile:nth-child(11) { animation-delay: 0.34s; }
.drawer.dw.open .dw-tile:nth-child(12) { animation-delay: 0.36s; }
.drawer.dw.open .dw-tile:nth-child(13) { animation-delay: 0.39s; }
.drawer.dw.open .dw-tile:nth-child(14) { animation-delay: 0.41s; }
.drawer.dw.open .dw-tile:nth-child(15) { animation-delay: 0.43s; }
@keyframes dwPop { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* Discover */
.dw-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-pick {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px; border-radius: 14px;
  background: #fff; color: #111; text-decoration: none;
  box-shadow: 0 0 0 1px #E9EDE9;
}
.dw-pick:hover { color: #111; box-shadow: 0 0 0 1px #CFE3D5, 0 4px 12px rgba(0, 0, 0, .06); }
.dw-pick > span:last-child { min-width: 0; }
.dw-pick strong { display: block; font-size: 13.5px; font-weight: 700; }
.dw-pick small { display: block; font-size: 11.5px; line-height: 1.3; color: #6B7280; }
.dw-pick-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.dw-pick-ico--deal { background: #FDECEC; color: #D0342C; }
.dw-pick-ico--new  { background: #EEF0FF; color: #4F46E5; }
.dw-pick-ico--top  { background: #FFF5D6; color: #B7791F; }
.dw-pick-ico--acc  { background: #E3F4EA; color: #14803F; }

/* Order by phone */
.dw-help {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 22px 14px 0; padding: 16px; border-radius: 18px;
  background: #0E1A13; color: #fff;
}
.dw-help::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(220px 160px at 100% 0%, rgba(34, 165, 90, .35), transparent 70%);
}
.dw-help-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dw-help-top strong { display: block; font-size: 15.5px; font-weight: 800; }
.dw-help-top small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .66); }
.dw-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dw-status[hidden] { display: none; }
.dw-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dw-status.is-open { background: rgba(34, 165, 90, .18); color: #7BE3A4; }
.dw-status.is-open::before { box-shadow: 0 0 0 0 rgba(123, 227, 164, .7); animation: dwLive 2s infinite; }
.dw-status.is-closed { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
@keyframes dwLive { 70% { box-shadow: 0 0 0 7px rgba(123, 227, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(123, 227, 164, 0); } }
.dw-help-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dw-round {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 4px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background .15s, transform .15s;
}
.dw-round:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.dw-round:active { transform: scale(.96); }
.dw-round .dw-i { box-sizing: border-box; width: 42px; height: 42px; padding: 11px; border-radius: 50%; }
.dw-round--call .dw-i { background: #22A55A; }
.dw-round--text .dw-i { background: #fff; color: #0E1A13; }
.dw-round--wa   .dw-i { background: #25D366; }

/* Link rows */
.dw-rows { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E9EDE9; }
.dw-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  color: #111; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.dw-row + .dw-row { border-top: 1px solid #F0F2F0; }
.dw-row > span { flex: 1 1 auto; min-width: 0; }
.dw-row > .dw-i:first-child { color: #14803F; }
.dw-row > .dw-i:last-child { color: #A6ADA8; }
.dw-row:hover, .dw-row:active { color: #111; background: #F5F9F6; }

/* Footer */
.dw-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 22px 14px 0; font-size: 12.5px; color: #6B7280; }
.dw-foot > a, .dw-foot > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.dw-foot > .dw-foot-phone { color: #14803F; font-weight: 700; }

/* Subcategory panels */
.dw-sub {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: #F4F6F4;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.25, .8, .25, 1);
}
.dw-sub[hidden] { display: none; }
.dw-sub.is-open { transform: none; }
.dw-sub-head { display: flex; align-items: center; gap: 10px; padding: 14px; background: #0E1A13; color: #fff; }
.dw-sub-back {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.dw-sub-back:hover { background: rgba(255, 255, 255, .22); }
.dw-sub-title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.dw-sub-x {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: rgba(255, 255, 255, .8);
}
.dw-sub-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.dw-sub-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px)); }
.dw-sub-hero {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(100deg, #E3F4EA, #F0F8E6);
  box-shadow: inset 0 0 0 1px #CFE8D8;
  color: #0E1A13; text-decoration: none;
}
.dw-sub-hero:hover { color: #0E1A13; }
.dw-sub-hero img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.dw-sub-hero > span { flex: 1 1 auto; min-width: 0; }
.dw-sub-hero strong { display: block; font-size: 15px; font-weight: 800; }
.dw-sub-hero small { display: block; margin-top: 1px; font-size: 12.5px; color: #4B5B50; }
.dw-sub-hero > .dw-i { color: #1E8C4E; }

/* The floating chat button sat on top of the open menu. */
body:has(.drawer.open) .uwai-btn { display: none !important; }

@media (max-width: 360px) {
  .dw-tile-img { width: 50px; height: 50px; }
  .dw-tile-name { font-size: 11.5px; }
  .dw-picks { grid-template-columns: 1fr; }
  .dw-hello strong { font-size: 19px; }
  .dw-help-top { flex-direction: column; gap: 10px; }
  .dw-round { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw *, .dw-sub { animation: none !important; transition: none !important; }
}

/* Drawer order: "Order by phone" sits in the header (first thing seen),
   the sign-in / cart card closes the menu at the bottom. */
.dw-head { padding-bottom: 18px; }
.dw-head-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dw-account {
  margin: 22px 14px 0; padding: 18px 16px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px #E9EDE9;
}
.dw-account .dw-hello { margin: 0 0 14px; }
.dw-account .dw-hello strong { font-size: 17px; color: #111; }
.dw-account .dw-hello span { color: #6B7280; font-size: 13px; }
.dw-account .dw-btn--light { background: #0E1A13; color: #fff; }
.dw-account .dw-btn--light:hover { background: #1B3325; color: #fff; }
.dw-account .dw-btn--ghost { background: #F4F6F4; color: #0E1A13; box-shadow: inset 0 0 0 1px #E1E6E1; }
.dw-account .dw-btn--ghost:hover { background: #EAF1EC; color: #0E1A13; }

/* ──────────────────────────────────────────────────────────────────────────
   Sales page: deals in the homepage card design.

   Product deals now render through redesign_product_card() (sales.php), so
   they are the same photo-first card with the round "+" as everywhere else.
   Bundle and Mix & Match deals keep their own markup (they open the bundle
   page rather than adding a weight), restyled here to match: no box, a
   rounded square photo, the name and price under it, a small pill to open.
   ────────────────────────────────────────────────────────────────────────── */
.sales-deal-grid { gap: 28px 18px; }
.sales-card-slot { min-width: 0; }
.sales-card-slot > .product-card { width: 100%; height: 100%; }

.sales-deal-card,
.sales-deal-card:hover {
  overflow: visible;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none; transform: none;
}
.sales-deal-card .sales-card-image {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #F6F6F6;
}
.sales-deal-card .sales-card-image img { object-fit: cover; }
.sales-deal-card .sales-card-body { padding: 10px 2px 0; }
.sales-deal-card .sales-card-meta { display: none; }
.sales-deal-card .sales-card-body h3 { margin: 0 0 3px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.sales-deal-card .sales-card-body h3 a { color: #000; }
.sales-deal-card .sales-card-desc { margin: 0 0 4px; font-size: 13.5px; color: #545454; }
.sales-deal-card .sales-card-price { font-size: 15px; font-weight: 400; color: #000; }
.sales-deal-card .sales-card-price s { color: #8A8A8A; }
.sales-deal-card .sales-save-line { margin-top: 2px; font-size: 13px; font-weight: 600; color: #137A3E; }
.sales-deal-card .sales-card-cta {
  display: inline-flex; align-items: center;
  width: auto; height: 36px; margin-top: 10px; padding: 0 16px;
  border-radius: 999px; background: #000; color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.sales-deal-card .sales-card-cta:hover { background: #222; color: #fff; }
.sales-deal-card .sales-discount-badge { border-radius: 999px; }


/* Signature motions for the non-category worlds.
   New Arrivals: the gift box bounces in like something just dropped.
   Top Rated: a slow gold shine sweeps across the title.
   All worlds: the store facts line becomes a glass pill. */
.uw-hero--new .uw-hero-art--main { animation: uwHeroDrop 4.8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes uwHeroDrop {
  0%, 62%, 100% { transform: translateY(0) scale(1); }
  70% { transform: translateY(-14px) scale(1.04); }
  78% { transform: translateY(0) scale(.98); }
  86% { transform: translateY(-5px) scale(1.01); }
}
.uw-hero--top h1 {
  background-image: linear-gradient(100deg, #fff 20%, #FFD24D 40%, #FFF6D0 50%, #FFD24D 60%, #fff 80%);
  background-size: 250% 100%;
  animation: uwHeroShine 6s ease-in-out infinite;
}
@keyframes uwHeroShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.uw-hero .shop-meta {
  display: inline-block;
  margin-top: 20px; padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx-accent) 35%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .86);
}
@media (max-width: 560px) {
  .uw-hero .shop-meta { display: block; margin-top: 16px; padding: 8px 14px; border-radius: 16px; font-size: 12.5px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .uw-hero--new .uw-hero-art--main, .uw-hero--top h1 { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Brand name under the logo tile (phones and tablets).

   Below 1200px the header hid the "Uper Weed" wordmark to save room, leaving
   only the tile. It now sits small under the tile instead, so the name is
   always readable without taking any width from the rest of the bar. The
   selectors outrank the older !important "display:none" rules on purpose.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .site-header .header-inner .logo {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  .site-header .header-inner .logo .logo-text {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    color: #0E1A13 !important;
  }
  .site-header .header-inner .logo .logo-weed { color: #22A55A !important; }
}
@media (max-width: 768px) {
  .site-header .header-inner .logo-img { width: 32px !important; height: 32px !important; }
  .site-header .header-inner .logo .logo-text { font-size: 10px !important; }
}

/* Homepage offer cards: a small tag says what each card is (deal, bundle,
   new, wholesale, category). */
.uhome .deal-card .deal-tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  margin: 0 0 8px; padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
.uhome .deal-card .deal-img--sticker { background: transparent; }
@media (max-width: 768px) {
  .uhome .deal-card .deal-tag { margin-bottom: 6px; font-size: 10px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Homepage offer cards on phones: a large picture.

   Side by side with all the text, the picture had to shrink to 64-76px.
   On phones the card becomes a small grid instead: tag and title beside a
   big square picture (about 40% of the card), then the description and the
   button across the full width below. Desktop is unchanged.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .uhome .deal-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "tag img" "title img" "desc desc" "cta cta";
    column-gap: 14px; row-gap: 0;
    align-items: start;
  }
  .uhome .deal-card .deal-text { display: contents; }
  .uhome .deal-card .deal-tag { grid-area: tag; margin-bottom: 8px; }
  .uhome .deal-card .deal-text h3 { grid-area: title; margin: 0; font-size: 18px; line-height: 1.2; }
  .uhome .deal-card .deal-text p { grid-area: desc; margin: 12px 0 14px; font-size: 13.5px; line-height: 1.45; }
  .uhome .deal-card .deal-cta { grid-area: cta; justify-self: start; margin-top: 0; }
  .uhome .deal-card .deal-img {
    grid-area: img;
    width: 100%; height: auto; max-width: none;
    aspect-ratio: 1 / 1;
    align-self: start;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35);
  }
  .uhome .deal-card .deal-img--sticker { object-fit: contain; box-shadow: none; }
}
@media (max-width: 360px) {
  .uhome .deal-card { column-gap: 12px; }
  .uhome .deal-card .deal-img { width: 100%; height: auto; }
  .uhome .deal-card .deal-text h3 { font-size: 16.5px; }
  .uhome .deal-card .deal-text p { font-size: 13px; }
}
@media (max-width: 768px) {
  .uhome .deal-card .deal-tag { justify-self: start; }
}

/* Offer cards: picture is first in the markup; keep it on the right. */
.uhome .deal-card .deal-img { order: 2; }

/* Phones: the description follows the heading straight away, beside the
   picture, and wraps under it when long; the button sits below everything.
   (Replaces the grid above, which left a gap under short headings.) */
@media (max-width: 768px) {
  .uhome .deal-card { display: block !important; }
  .uhome .deal-card::after { content: ''; display: block; clear: both; }
  .uhome .deal-card .deal-text { display: block; }
  .uhome .deal-card .deal-img {
    float: right;
    width: 42%;
    margin: 0 0 10px 14px;
  }
  .uhome .deal-card .deal-tag { display: inline-flex; margin: 0 0 8px; }
  .uhome .deal-card .deal-text h3 { margin: 0 0 6px; }
  .uhome .deal-card .deal-text p {
    display: block; -webkit-line-clamp: unset; overflow: visible;
    margin: 0 0 14px;
  }
  .uhome .deal-card .deal-cta { display: table; clear: both; margin: 0; }
}

/* ── Category pills: a colour per pill ──────────────────────────────────────
   The row under a category hero (All Vapes · 1G Vapes · 2G Vapes …, and the
   top-level category row on /shop) gives each pill its own colour: a soft tint
   with matching text, filled solid when it is the selected one. Ten colours
   cycle by position; every text/background pair keeps at least 4.5:1 contrast.
   Scoped to #pillsNav so other chip rows (Mix & Match filters) are unchanged. */
#pillsNav .pill {
  --pc: #0E7A43; --pc-soft: #E7F5EC; --pc-line: #BFE3CC; --pc-ink: #0B5C33;
  background: var(--pc-soft); border-color: var(--pc-line); color: var(--pc-ink);
}
#pillsNav .pill:nth-child(10n+2)  { --pc: #6D3FD1; --pc-soft: #F0EAFD; --pc-line: #D8CBF7; --pc-ink: #5230A6; }
#pillsNav .pill:nth-child(10n+3)  { --pc: #1D6FD8; --pc-soft: #E7F0FD; --pc-line: #C4D9F7; --pc-ink: #1757AA; }
#pillsNav .pill:nth-child(10n+4)  { --pc: #B94F0A; --pc-soft: #FDEFE4; --pc-line: #F6D2B6; --pc-ink: #9A4208; }
#pillsNav .pill:nth-child(10n+5)  { --pc: #C2327A; --pc-soft: #FCE8F2; --pc-line: #F2C4DB; --pc-ink: #9A2661; }
#pillsNav .pill:nth-child(10n+6)  { --pc: #087571; --pc-soft: #E2F5F4; --pc-line: #B9E3E1; --pc-ink: #06605D; }
#pillsNav .pill:nth-child(10n+7)  { --pc: #C8323A; --pc-soft: #FDEAEA; --pc-line: #F3C6C8; --pc-ink: #9E262D; }
#pillsNav .pill:nth-child(10n+8)  { --pc: #9A5A08; --pc-soft: #FDF3DE; --pc-line: #F0DDB0; --pc-ink: #7E4906; }
#pillsNav .pill:nth-child(10n+9)  { --pc: #3F4BC9; --pc-soft: #EBEDFC; --pc-line: #CDD2F6; --pc-ink: #323CA3; }
#pillsNav .pill:nth-child(10n+10) { --pc: #537A10; --pc-soft: #F0F7E1; --pc-line: #D5E8B3; --pc-ink: #43640C; }
#pillsNav .pill:hover { background: var(--pc-soft); border-color: var(--pc); color: var(--pc-ink); }
#pillsNav .pill.active,
#pillsNav .pill.active:hover {
  background: var(--pc); border-color: var(--pc); color: #fff;
  box-shadow: 0 4px 12px -6px var(--pc);
}