/* ============================================
   home.css
   Extracted from home.html
   Paste into Flatsome > Theme Options > Custom CSS
   (or into the per-page Custom CSS panel)
   ============================================ */

:root { --promo-h: 48px; }
  @media (max-width: 480px) { :root { --promo-h: 44px; } }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fcfaf4;
    color: #1a1a1a;
    line-height: 1.5;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* Hide age gate for returning verified visitors */
  html.age-verified .age-gate { display: none !important; }
  /* Age gate */
  .age-gate {
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .age-gate.hidden { display: none; }
  .age-gate-card {
    max-width: 440px; text-align: center;
    padding: 48px 36px;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 32px;
    border: 4px solid #fcfaf4;
    box-shadow: 12px 12px 0 rgba(26,26,26,0.9);
    transform: rotate(-1deg);
  }
  .age-gate-logo {
    font-size: 36px; font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #1f5d3f, #ff6b35);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .age-gate h2 {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .age-gate p {
    font-size: 15px;
    opacity: 0.7;
    margin-bottom: 28px;
  }
  .age-gate-btns { display: flex; gap: 10px; }
  .age-btn {
    flex: 1; padding: 16px;
    font-size: 14px; font-weight: 700;
    border-radius: 14px;
    transition: transform 0.2s;
  }
  .age-btn.yes {
    background: #7fb069;
    color: #1a1a1a;
  }
  .age-btn.yes:hover { transform: translateY(-2px); }
  .age-btn.no {
    background: transparent;
    color: #fcfaf4;
    border: 2px solid rgba(255,248,240,0.3);
  }
  .age-btn.no:hover { background: rgba(255,248,240,0.1); }

  /* Promo bar — ONE horizontal line on every viewport (no wrap, no marquee) */
  .promo-bar {
    background: #1a1a1a;
    color: #ff6b35;
    padding: 10px 12px;
    font-size: 13px; font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 9999;
    overflow: hidden;
  }
  .promo-track {
    display: flex; align-items: center; justify-content: center;
    gap: 24px;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 1400px;
    margin: 0 auto;
  }
  .promo-track > span {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
  }
  .promo-track a {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; color: inherit;
    flex-shrink: 0;
  }
  .promo-track a > .promo-highlight {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .promo-track .promo-wholesale { background: #ff6b35; color: #1a1a1a; }
  .promo-track .promo-highlight {
    background: #ff6b35; color: #1a1a1a;
    padding: 3px 11px;
    border-radius: 980px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .promo-track .promo-highlight iconify-icon { color: #1a1a1a; }
  .promo-track iconify-icon { color: #1f5d3f; flex-shrink: 0; }
  /* Long/short text swap — show long on desktop, short on phone */
  .promo-track .short { display: none; }
  .promo-track .long { display: inline; }
  @media (max-width: 820px) {
    .promo-bar { padding: 8px 10px; font-size: 11px; }
    .promo-track { gap: 14px; }
    .promo-track .promo-highlight { padding: 2px 8px; font-size: 11px; }
    .promo-track .short { display: inline; }
    .promo-track .long { display: none; }
  }
  @media (max-width: 480px) {
    .promo-bar { padding: 7px 6px; font-size: 10px; }
    /* Tightened: gap 10→7 + highlight pad 7→5 to fit all 3 items in 390px viewport */
    .promo-track { gap: 7px; overflow: hidden; max-width: 100%; }
    .promo-track .promo-highlight { padding: 2px 6px; font-size: 10px; }
    .promo-track iconify-icon { font-size: 11px; }
  }
  @media (max-width: 380px) {
    .promo-bar { padding: 6px 6px; font-size: 9px; }
    .promo-track { gap: 7px; }
    .promo-track .promo-highlight { padding: 2px 6px; font-size: 9px; }
  }

  /* Header */
  header {
    position: sticky;
    top: var(--promo-h, 48px);
    z-index: 9998;
    background: #fcfaf4;
    border-bottom: 3px solid #1a1a1a;
  }
  .nav-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: #1f5d3f;
    color: #fcfaf4;
    padding: 8px 22px;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    position: relative;
    line-height: 1;
    border: none;
    transition: background 0.2s;
  }
  .logo:hover { background: #ff6b35; }
  .logo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1;
  }
  .logo-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    opacity: 0.85;
    margin: 1px 0;
  }
  .logo-name {
    font-size: 19px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 1px 0;
  }
  /* Hide the old logo-mark; we don't need it anymore */
  .logo-mark { display: none; }
  .nav-links {
    display: flex; gap: 14px; list-style: none;
  }
  .nav-item {
    position: relative;
  }
  .nav-links a {
    font-size: 14px; font-weight: 700;
    color: #1a1a1a;
    padding: 6px 10px;
    border-radius: 980px;
    transition: background 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
    min-width: 100px;
    text-align: center;
    box-sizing: border-box;
  }
  /* Narrower laptops: drop min-width so 6 items fit comfortably with sidebar icons */
  @media (max-width: 1200px) {
    .nav-links { gap: 8px; }
    .nav-links a { min-width: 0; padding: 6px 10px; }
  }
  .nav-links a:hover { background: #7fb069; }
  .nav-trigger .nav-caret {
    font-size: 11px;
    transition: transform 0.2s;
  }
  .nav-item.has-dropdown:hover .nav-trigger .nav-caret {
    transform: rotate(180deg);
  }

  /* Dropdown panels */
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 320px;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 20px;
    box-shadow: 6px 6px 0 #1a1a1a;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
  }
  /* Pseudo-bridge so the gap doesn't kill hover */
  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -17px; left: 0; right: 0;
    height: 17px;
  }
  /* Little arrow pointing up to the trigger */
  .nav-dropdown::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: #fff;
    border-top: 3px solid #1a1a1a;
    border-left: 3px solid #1a1a1a;
  }
  .nav-dropdown-narrow { width: 280px; }
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .dd-item {
    display: flex !important; align-items: center; gap: 12px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: background 0.15s, transform 0.15s !important;
    text-decoration: none;
  }
  .dd-item:hover {
    background: rgba(255, 107, 53, 0.08) !important;
  }
  .dd-item > iconify-icon {
    font-size: 22px;
    color: #1a1a1a;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
  }
  .dd-item.dd-item-all > iconify-icon,
  .dd-item.dd-item-highlight > iconify-icon { color: #ff6b35; }
  .dd-item > div { flex: 1; min-width: 0; }
  .dd-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  .dd-sub {
    font-size: 12px;
    font-weight: 500;
    color: #6b6b6b;
    line-height: 1.3;
  }
  /* Hide subtitles inside dropdown items (cleaner, title-only look) */
  .nav-dropdown .dd-sub { display: none; }
  .nav-dropdown .dd-title { margin-bottom: 0; }
  .dd-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.05em;
  }
  .dd-divider {
    height: 1px;
    background: #f0e8d8;
    margin: 6px 8px;
  }
  .dd-item-highlight {
    background: rgba(255, 107, 53, 0.06) !important;
  }
  .dd-item-highlight:hover {
    background: rgba(255, 107, 53, 0.12) !important;
  }

  .nav-icons { display: flex; gap: 14px; align-items: center; }
  .nav-icons iconify-icon {
    font-size: 22px; color: #1a1a1a;
    cursor: pointer;
  }
  .cart-btn {
    position: relative;
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 10px 16px;
    border-radius: 980px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    transition: background 0.2s;
  }
  .cart-btn:hover { background: #1f5d3f; }
  .cart-btn iconify-icon { color: #fcfaf4; font-size: 18px; }
  .cart-count {
    background: #7fb069; color: #1a1a1a;
    font-size: 11px; font-weight: 700;
    min-width: 22px; height: 22px;
    border-radius: 11px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Welcome / first-order discount modal */

  @keyframes welcomeFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes welcomeSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  
  /* Hero trust chips — subtle proof points beneath the subtitle, forced to one
     visible row at every viewport via long/short text swap (no horizontal scroll). */
  .hero-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 0 14px;
    max-width: 100%;
    white-space: nowrap;
  }
  .hero-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(26, 26, 26, 0.06);
    border: 1.5px solid rgba(26, 26, 26, 0.12);
    border-radius: 980px;
    font-size: 12px;
    flex-shrink: 0;
    font-weight: 700;
    color: #1a1a1a;
    transition: background 0.2s, border-color 0.2s;
  }
  .hero-trust-chip:hover {
    background: rgba(255, 107, 53, 0.12);
    border-color: #ff6b35;
  }
  .hero-trust-chip iconify-icon {
    color: #1f5d3f;
    font-size: 14px;
  }
  /* Long/short text swap — desktop shows long, mobile shows short. */
  .hero-trust-chip .short { display: none; }
  @media (max-width: 640px) {
    .hero-trust { gap: 5px; }
    .hero-trust-chip {
      padding: 5px 10px;
      font-size: 11px;
    }
    .hero-trust-chip iconify-icon { font-size: 12px; }
    .hero-trust-chip .long { display: none; }
    .hero-trust-chip .short { display: inline; }
  }
  /* Hero discount coupon ticket */
  .hero-discount {
    display: inline-flex;
    align-items: stretch;
    background: #1a1a1a;
    color: #fcfaf4;
    border: 3px solid #1a1a1a;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 auto 28px;
    cursor: pointer;
    box-shadow: 6px 6px 0 #ff6b35;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    max-width: 100%;
  }
  .hero-discount:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #ff6b35;
  }
  .hero-discount-left {
    padding: 14px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #ff6b35;
    color: #1a1a1a;
  }
  .hero-discount-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .hero-discount-value {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .hero-discount-divider {
    width: 0;
    border-left: 2px dashed rgba(255, 248, 240, 0.25);
    position: relative;
  }
  .hero-discount-divider::before,
  .hero-discount-divider::after {
    content: "";
    position: absolute;
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fcfaf4;
  }
  .hero-discount-divider::before { top: -7px; }
  .hero-discount-divider::after { bottom: -7px; }
  .hero-discount-right {
    padding: 14px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .hero-discount-code-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255, 248, 240, 0.6);
    line-height: 1;
    margin-bottom: 4px;
  }
  .hero-discount-code {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #ff6b35;
    line-height: 1;
    font-family: "Courier New", monospace;
  }
  @media (max-width: 480px) {
    .hero-discount-left { padding: 12px 16px; }
    .hero-discount-right { padding: 12px 16px; }
    .hero-discount-value { font-size: 20px; }
    .hero-discount-code { font-size: 18px; }
  }

  .hero {
    position: relative;
    padding: 48px 42px 48px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 107, 53, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(31, 93, 63, 0.08) 0%, transparent 60%);
  }
  .hero::before {
    content: "";
    position: absolute;
    top: 10%; left: -5%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.35) 0%, transparent 70%);
    filter: blur(30px);
    animation: float 8s ease-in-out infinite;
  }
  .hero::after {
    content: "";
    position: absolute;
    bottom: 10%; right: -5%;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 93, 63, 0.35) 0%, transparent 70%);
    filter: blur(30px);
    animation: float 10s ease-in-out infinite reverse;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }

  /* New two-column hero layout */
  .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1727px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 75px;
    align-items: center;
  }
  .hero-content {
    text-align: left;
  }

  /* HERO VISUAL: cannabis photo + frame */
  .hero-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 531px;
    width: 100%;
    margin-left: auto;
  }
  .hero-visual-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    border: 4px solid #1a1a1a;
    box-shadow: 12px 12px 0 #ff6b35;
    overflow: visible;
    background: #1a1a1a;
    transform: rotate(-2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hero-visual-frame:hover {
    transform: rotate(-2deg) translate(-4px, -4px);
    box-shadow: 16px 16px 0 #ff6b35;
  }
  .hero-visual-img {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
  }
  .hero-visual-img picture,
  .hero-visual-img img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero-visual-img img {
    object-fit: cover;
    object-position: center;
  }
  .hero-visual-img::after {
    /* subtle gradient overlay to keep chips legible */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);
  }

  /* Floating chip: THC big stat */
  .hero-visual-chip {
    position: absolute;
    background: #fcfaf4;
    border: 3px solid #1a1a1a;
    border-radius: 980px;
    box-shadow: 5px 5px 0 #1a1a1a;
    z-index: 3;
  }
  .hero-visual-chip.chip-tag {
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .hero-visual-chip.chip-tag > iconify-icon {
    color: #ff6b35;
    font-size: 18px;
  }
  .hero-visual-chip.chip-pos-top {
    top: -16px; right: -16px;
    transform: rotate(4deg);
  }
  .hero-visual-chip.chip-pos-bottom {
    bottom: -16px; left: -16px;
    transform: rotate(-3deg);
  }

  @media (max-width: 960px) {
    .hero { padding: 20px 22px 22px; }
    .hero-inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      text-align: center;
    }
    .hero-content { text-align: center; order: 2; min-width: 0; }
    .hero-visual { margin: 0 auto; max-width: 220px; order: 1; }
    .hero-content .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-content .hero-trust { justify-content: center; }
    .hero-content .hero-ctas { justify-content: center; }
    .hero-visual-chip.chip-pos-top { right: -8px; }
    .hero-visual-chip.chip-pos-bottom { left: -8px; }
  }
  @media (max-width: 480px) {
    .hero { padding: 14px 16px 18px; }
    .hero-inner { gap: 16px; }
    .hero-visual { max-width: 180px; }
    .hero-title { font-size: 38px !important; line-height: 0.9; margin-bottom: 12px; }
    .hero-sub { font-size: 13px !important; line-height: 1.45; margin-bottom: 14px; }
    .hero-trust { margin-bottom: 10px; }
    .hero-visual-chip.chip-tag {
      padding: 6px 12px;
      font-size: 10px;
    }
    .hero-visual-chip.chip-tag > iconify-icon { font-size: 12px; }
    .hero-visual-chip.chip-pos-top { top: -10px; right: -4px; }
    .hero-visual-chip.chip-pos-bottom { bottom: -10px; left: -4px; }
  }
  .hero-palm {
    position: absolute;
    width: 90px;
    height: 180px;
    z-index: 1;
    bottom: 0;
    pointer-events: none;
    opacity: 0.3;
  }
  .hero-palm-left {
    left: 2%;
    transform: rotate(-8deg);
  }
  .hero-palm-right {
    right: 2%;
    transform: rotate(8deg) scaleX(-1);
  }
  @media (max-width: 960px) {
    .hero-palm { display: none; }
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 14px;
    background: #1a1a1a;
    color: #ff6b35;
    border-radius: 980px;
    font-size: 15px; font-weight: 700;
    margin-bottom: 40px;
    transform: rotate(-2deg);
    letter-spacing: 0.05em;
  }
  .hero-badge iconify-icon { animation: pulse 2s infinite; color: #ff6b35; }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }
  .hero-title {
    font-size: clamp(50px, 8.26vw, 103px);
    font-weight: 900; letter-spacing: -0.05em;
    line-height: 0.9; margin-bottom: 21px;
    color: #1a1a1a;
  }
  .hero-title .word-1 {
    display: inline-block;
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotate(-2deg);
  }
  .hero-title .word-2 {
    display: inline-block;
    color: #ff6b35;
    transform: rotate(1deg);
    position: relative;
  }
  /* Spray-paint drips beneath the second word */
  .hero-title .word-2::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -8px;
    height: 36px;
    background:
      radial-gradient(circle at 8% 0%, #ff6b35 0 6px, transparent 7px),
      radial-gradient(circle at 26% 0%, #ff6b35 0 4px, transparent 5px),
      radial-gradient(circle at 45% 0%, #ff6b35 0 7px, transparent 8px),
      radial-gradient(circle at 64% 0%, #ff6b35 0 3px, transparent 4px),
      radial-gradient(circle at 85% 0%, #ff6b35 0 5px, transparent 6px);
    background-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
  }
  .hero-title .word-2::before {
    content: "";
    position: absolute;
    left: 18%;
    width: 4px;
    bottom: -28px;
    height: 22px;
    background: #ff6b35;
    border-radius: 0 0 4px 4px;
    opacity: 0.75;
    pointer-events: none;
    box-shadow:
      32px 4px 0 -1px #ff6b35,
      82px -2px 0 -1px #ff6b35,
      150px 6px 0 -1px #ff6b35;
  }
  .hero-sub {
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.5;
    color: #444;
    max-width: 900px; margin: 0 0 26px;
    font-weight: 500;
    /* No line-clamp — full sub-copy must be visible at every breakpoint */
  }
  .hero-ctas {
    display: flex; gap: 14px; justify-content: flex-start;
    flex-wrap: wrap;
  }
  .btn-primary {
    padding: 18px 32px;
    background: #1f5d3f;
    color: #fcfaf4;
    border-radius: 980px;
    font-size: 16px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 6px 6px 0 #1a1a1a;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .btn-primary:hover {
    background: #2a7a52;
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #1a1a1a;
  }
  .btn-secondary {
    padding: 18px 32px;
    background: #fcfaf4;
    color: #1a1a1a;
    border: 3px solid #1a1a1a;
    border-radius: 980px;
    font-size: 16px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background 0.2s;
  }
  .btn-secondary:hover { background: #7fb069; }

  /* Sections — tightened from 36px to 12px top/bottom for less air between sections */
  section { padding: 8px 32px; position: relative; }
  .container { max-width: 1400px; margin: 0 auto; }
  .section-header { text-align: left; margin-bottom: 8px; }
  .section-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 11px; font-weight: 700;
    margin-bottom: 8px;
    transform: rotate(-1deg);
    letter-spacing: 0.05em;
  }
  .section-title {
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 900; letter-spacing: -0.03em;
    line-height: 1;
    color: #1a1a1a;
  }
  .section-title .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Collections */
  /* ========================================================================
     SHOP THE MENU — Mood-inspired cream cards with floating photos
     Cream bg, dark green text-left, transparent photo-right with natural shadow.
     HappyBud signature: black border + offset shadow.
     ======================================================================== */
  /* ========================================================================
     SHOP THE MENU — full-bleed circle cards (matches SHOP BY FEEL treatment
     in circular shape). Each category is a perfect circle with full-bleed
     product photo + white label overlaid on a bottom dark-to-transparent
     scrim for legibility. HappyBud sticker-card border + offset shadow
     preserved.
     ======================================================================== */
  .collections { background: #fcfaf4; padding: 16px 0 32px !important; }
  .collections .section-header { margin-bottom: 20px; }
  /* 7 circles fill the full row width. Each circle capped at a max-width,
     gaps grow to absorb remaining space (space-between distribution). */
  .collections-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 150px));
    justify-content: space-between;
    gap: 20px;
    width: 100%;
  }
  .collection-card {
    position: relative;
    aspect-ratio: 1/1;        /* perfect circle */
    border-radius: 50%;
    background: #f5e8d4;       /* cream fallback while photo loads */
    border: 3px solid #1a1a1a;
    box-shadow: 5px 5px 0 #1a1a1a;
    color: #fcfaf4;
    text-decoration: none;
    overflow: hidden;
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .collection-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #1a1a1a;
  }
  /* Dark-to-transparent scrim at bottom so white label always reads on
     the warm cream product photos. Subtle — product still dominates the top. */
  .collection-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 35%,
      rgba(0, 0, 0, 0.20) 65%,
      rgba(0, 0, 0, 0.62) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
  }
  .collection-card .card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
  }
  .collection-card:hover .card-photo {
    transform: scale(1.06);
  }
  .collection-card .card-name {
    position: absolute;
    bottom: 13%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fcfaf4;
    /* Sized to fit "Concentrates" (longest label) inside the 150px desktop circle */
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    z-index: 2;
    padding: 0 6px;
    margin: 0;
    white-space: nowrap;
    overflow: visible;
  }

  /* Tablet — 7 circles still on one row, smaller per-circle cap, space-between */
  @media (max-width: 980px) {
    .collections-grid {
      grid-template-columns: repeat(7, minmax(0, 110px));
      justify-content: space-between;
      gap: 12px;
    }
    .collection-card .card-name { font-size: clamp(10px, 1.2vw, 13px); padding: 0 5px; }
  }
  /* Mobile — 7 circles in a horizontal SCROLLABLE row (swipe right to see all).
     Crushing 7 to fit a 390px viewport makes labels unreadable, so we scroll. */
  @media (max-width: 640px) {
    .collections-grid {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 10px;
      padding: 6px 22px 14px;
      margin: 0 -22px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      justify-content: flex-start;
    }
    .collections-grid::-webkit-scrollbar { display: none; }
    .collection-card {
      flex: 0 0 96px;
      width: 96px;
      border-width: 2.5px;
      box-shadow: 3px 3px 0 #1a1a1a;
      scroll-snap-align: start;
    }
    .collection-card::after {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 22%,
        rgba(0, 0, 0, 0.32) 55%,
        rgba(0, 0, 0, 0.78) 100%
      );
    }
    .collection-card .card-name {
      font-size: 11px;
      bottom: 12%;
      padding: 0 4px;
      letter-spacing: -0.03em;
    }
  }

  /* Products grid */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* ============================================================
     BEST SELLERS — horizontal scroll row
     Replaces the wrapping 4-col grid with a single-row scroller.
     Each card has a fixed flex-basis so all 8 cards live in one row,
     scrolling right reveals additional cards.
     ============================================================ */
  .products-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
    margin-right: -32px; /* bleed to viewport edge so cards visually run off */
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, 0.3) transparent;
  }
  .products-scroll::-webkit-scrollbar { height: 8px; }
  .products-scroll::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 26, 0.3);
    border-radius: 4px;
  }
  .products-scroll::-webkit-scrollbar-track { background: transparent; }
  .products-scroll .product-card {
    flex: 0 0 calc((100% - 48px) / 4); /* show 4 cards at once on desktop */
    scroll-snap-align: start;
    min-width: 0;
  }
  /* Tablet: ~3 cards visible, scroll for the rest */
  @media (max-width: 1024px) {
    .products-scroll .product-card { flex: 0 0 calc((100% - 32px) / 3); }
  }
  /* Mobile: ~2 visible, scroll for the rest */
  @media (max-width: 768px) {
    .products-scroll { gap: 12px; padding-bottom: 14px; }
    .products-scroll .product-card { flex: 0 0 calc((100% - 12px) / 2); }
  }
  @media (max-width: 480px) {
    .products-scroll { gap: 10px; margin-right: -16px; }
    .products-scroll .product-card { flex: 0 0 70%; } /* peek the next card */
  }

  /* Section-header with right-side "View all" link */
  .section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .section-header-row .section-header-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }
  .section-view-all:hover {
    background: #1a1a1a;
    color: #fcfaf4;
  }
  .section-view-all iconify-icon { font-size: 14px; }
  @media (max-width: 480px) {
    .section-view-all { padding: 6px 12px; font-size: 11px; }
    .section-header-row { align-items: center; }
  }
  .product-card {
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .product-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 #1a1a1a;
  }
  .product-image {
    position: relative;
    height: 180px;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 3px solid #1a1a1a;
  }
  .product-image.f1 {
    background: url("../img/products-v3/sunrise-stack.webp") center/cover, #f5e8d4;
  }
  .product-image.f2 {
    background: url("../img/products-v3/couch-lock-og.webp") center/cover, #f5e8d4;
  }
  .product-image.f3 {
    background:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ede4d3%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fb069%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Cpath%20d%3D%22M200%20200%20m%20-55%200%20a%2055%2055%200%201%200%20110%200%20a%2055%2055%200%201%200%20-110%200%20M200%20105%20V130%20M200%20270%20V295%20M105%20200%20H130%20M270%20200%20H295%20M135%20135%20L155%20155%20M245%20245%20L265%20265%20M265%20135%20L245%20155%20M155%20245%20L135%20265%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22365%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22800%22%20letter-spacing%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.7%22%3EHAPPY%20BUD%3C%2Ftext%3E%3C%2Fsvg%3E") center/cover,
      linear-gradient(135deg, #a8c995 0%, #7fb069 100%);
  }
  .product-image.f4 {
    background:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ede4d3%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%237fb069%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.18%22%2F%3E%3Cpath%20d%3D%22M200%20200%20m%20-55%200%20a%2055%2055%200%201%200%20110%200%20a%2055%2055%200%201%200%20-110%200%20M200%20105%20V130%20M200%20270%20V295%20M105%20200%20H130%20M270%20200%20H295%20M135%20135%20L155%20155%20M245%20245%20L265%20265%20M265%20135%20L245%20155%20M155%20245%20L135%20265%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22365%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22800%22%20letter-spacing%3D%223%22%20fill%3D%22%231a1a1a%22%20opacity%3D%220.7%22%3EHAPPY%20BUD%3C%2Ftext%3E%3C%2Fsvg%3E") center/cover,
      linear-gradient(135deg, #a5e0f7 0%, #5ac0e8 100%);
  }
  .product-image.v1 {
    background: url("../img/products-v3/cloud-nine-vape.webp") center/cover, #f5e8d4;
  }
  .product-image.v2 {
    background: url("../img/products-v3/sour-diesel-vape.webp") center/cover, #f5e8d4;
  }
  .product-image.c1 {
    background: url("../img/products-v3/tangie-badder.webp") center/cover, #f5e8d4;
  }
  .product-image.c2 {
    background: url("../img/products-v3/gmo-diamonds.webp") center/cover, #f5e8d4;
  }
  .product-image.e1 {
    background: url("../img/products-v3/watermelon-drops.webp") center/cover, #f5e8d4;
  }
  .product-image.e2 {
    background: url("../img/products-v3/dark-choc-bar.webp") center/cover, #f5e8d4;
  }
  .product-mark { display: none; }
  .product-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 12px;
    background: #1a1a1a;
    color: #7fb069;
    border-radius: 980px;
    font-size: 11px; font-weight: 700;
    transform: rotate(-3deg);
  }
  .product-body { padding: 14px; }
  .product-category {
    font-size: 12px; font-weight: 600;
    color: #1f5d3f;
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .product-name {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .product-meta {
    font-size: 13px; color: #6b6b6b;
    margin-bottom: 16px;
  }
  .product-footer {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; /* anchor for the +1 added toast */
    gap: 12px;
  }
  /* Merged price+button row (replaces old separate action row) */
  .product-footer-row { margin-top: 6px; }

  /* Small floating "+1 added" feedback that pops next to the round + button */
  .card-add-toast {
    position: absolute;
    right: 48px; /* sits to the left of the 36px round + button + 12px gap */
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #1f5d3f;
    color: #fcfaf4;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 1px 1px 0 #1a1a1a;
    z-index: 2;
  }
  .card-add-toast.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .card-add-toast { transition: opacity 0.01s; transform: translateY(-50%); }
  }
  .product-price {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
  }
  .quick-add {
    padding: 10px 16px;
    background: #1a1a1a;
    color: #7fb069;
    border-radius: 980px;
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.2s;
  }
  .quick-add:hover { background: #1f5d3f; color: #fcfaf4; }

  /* Bundles */
  .bundles {
    background: linear-gradient(135deg, #7fb069 0%, #1f5d3f 100%);
    color: #1a1a1a;
  }
  /* Tightened — was 36px, now 18px to keep rhythm in line with other sections */
  .bundles .section-header { margin-bottom: 10px; }
  /* Bundles — proper 4-col grid (not horizontal scroll) */
  .bundles .products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }
  @media (max-width: 1024px) and (min-width: 641px) {
    .bundles .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px;
    }
  }
  @media (max-width: 640px) {
    .bundles .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px;
    }
    .bundles .product-image { height: 160px; }
    .bundles .product-body { padding: 12px; }
    .bundles .product-name { font-size: 15px; }
    .bundles .product-price { font-size: 16px; }
    .bundles .product-price .strike { font-size: 12px; }
    .bundles .qty-btn { width: 26px; height: 28px; font-size: 14px; }
    .bundles .bundle-add-btn { font-size: 12px; min-height: 32px; }
  }
  /* Bundle product cards on home — match BEST SELLERS card dimensions exactly */
  .bundles .product-card { background: #fff; text-decoration: none; color: inherit; display: block; }
  .bundles .product-image { height: 180px; background-size: cover; background-position: center; border-bottom: 3px solid #1a1a1a; position: relative; }
  .bundles .product-badge { background: #1a1a1a; color: #ff6b35; }
  .bundles .product-badge.sale { background: #ff6b35; color: #1a1a1a; }
  .bundles .strain-chip {
    position: absolute; top: 12px; right: 12px;
    padding: 5px 12px;
    background: rgba(255, 248, 240, 0.92);
    backdrop-filter: blur(4px);
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #1a1a1a;
  }
  .bundles .product-body { padding: 14px; }
  .bundles .product-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.2; color: #1a1a1a; }
  .bundles .product-rating {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6b6b6b;
  }
  .bundles .product-rating .stars { color: #ff6b35; letter-spacing: 1px; }
  .bundles .product-footer {
    display: flex; align-items: center; justify-content: space-between;
    /* match BEST SELLERS — no border-top + no padding-top */
  }
  .bundles .product-price { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: #1a1a1a; }
  .bundles .product-price .strike { color: #b0b0b0; text-decoration: line-through; font-size: 14px; font-weight: 600; margin-right: 8px; }
  /* Shared on bundles + best sellers — product rating row */
  .bundles .product-rating,
  #vape .product-rating {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #6b6b6b;
  }
  .bundles .product-rating .stars,
  #vape .product-rating .stars { color: #ff6b35; letter-spacing: 1px; }
  /* Shared on bundles + best sellers — qty stepper + Add button (Shopify pattern) */
  .bundles .bundle-action-row,
  #vape .bundle-action-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
  }
  /* Solo variant (no qty stepper): single round + button pinned to right of price row */
  .bundles .bundle-action-row-solo,
  #vape .bundle-action-row-solo {
    justify-content: flex-end;
    margin-top: 0; /* tighter — price row already has margin */
  }

  /* ============================================================
     Card add control — DoorDash-style morphing stepper.
     Default state (data-qty="0"): only the round + button is visible.
     With qty >= 1: morphs into an inline [− N +] pill capsule.
     Hitting − to 0 morphs back to the single +.
     ============================================================ */
  .card-add-control {
    display: inline-flex;
    align-items: center;
    border: 2px solid #1a1a1a;
    background: #1f5d3f;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #1a1a1a;
    overflow: hidden;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
    flex-shrink: 0;
    height: 36px;
  }
  .card-add-control:hover {
    box-shadow: 3px 3px 0 #1a1a1a;
    transform: translate(-1px, -1px);
  }
  /* The three children: minus, qty number, plus */
  .card-add-control .card-add-minus,
  .card-add-control .card-add-plus {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #fcfaf4;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .card-add-control .card-add-plus { width: 32px; }
  .card-add-control .card-add-plus iconify-icon { font-size: 18px; }
  .card-add-control .card-add-minus { width: 30px; font-size: 22px; }
  .card-add-control .card-add-minus:hover,
  .card-add-control .card-add-plus:hover { background: rgba(255, 248, 240, 0.14); }
  .card-add-control .card-add-qty {
    min-width: 22px;
    padding: 0 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #fcfaf4;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  /* Default state: hide minus + qty number; show only round + */
  .card-add-control[data-qty="0"] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .card-add-control[data-qty="0"] .card-add-minus,
  .card-add-control[data-qty="0"] .card-add-qty {
    display: none;
  }
  .card-add-control[data-qty="0"] .card-add-plus {
    width: 100%;
    height: 100%;
  }
  /* With qty: switch to dark-green "in cart" tint to signal state */
  .card-add-control:not([data-qty="0"]) {
    background: #1f5d3f;
  }
  .card-add-control:not([data-qty="0"]) .card-add-minus,
  .card-add-control:not([data-qty="0"]) .card-add-plus { color: #fcfaf4; }
  .card-add-control:not([data-qty="0"]) .card-add-qty { color: #fcfaf4; }
  .card-add-control:not([data-qty="0"]) .card-add-minus:hover,
  .card-add-control:not([data-qty="0"]) .card-add-plus:hover { background: rgba(255, 248, 240, 0.14); }

  /* Brief pulse when an item is added (signals destination cart) */
  .cart-count.flash {
    animation: cart-count-pulse 0.5s ease;
  }
  @keyframes cart-count-pulse {
    0%   { transform: scale(1);   background: #ff6b35; }
    40%  { transform: scale(1.35); background: #1f5d3f; color: #fcfaf4; }
    100% { transform: scale(1);   background: #ff6b35; }
  }

  @media (max-width: 480px) {
    .card-add-control { height: 32px; }
    .card-add-control[data-qty="0"] { width: 32px; height: 32px; }
    .card-add-control .card-add-plus { width: 28px; }
    .card-add-control .card-add-plus iconify-icon { font-size: 16px; }
    .card-add-control .card-add-minus { width: 26px; font-size: 20px; }
    .card-add-control .card-add-qty { font-size: 13px; min-width: 20px; }
  }
  .bundles .qty-stepper,
  #vape .qty-stepper {
    display: flex; align-items: center;
    background: #fff;
    border-radius: 980px;
    flex-shrink: 0;
    border: 2px solid #1a1a1a;
  }
  .bundles .qty-btn,
  #vape .qty-btn {
    width: 30px; height: 32px;
    background: #fff; border: none;
    font-size: 16px; font-weight: 800;
    color: #1a1a1a; cursor: pointer;
    border-radius: 980px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .bundles .qty-btn:hover,
  #vape .qty-btn:hover { background: #ede4d3; }
  .bundles .qty-input,
  #vape .qty-input {
    width: 26px; text-align: center;
    background: transparent; border: none;
    font-size: 14px; font-weight: 800;
    color: #1a1a1a;
    padding: 0;
    pointer-events: none;
  }
  .bundles .bundle-add-btn,
  #vape .bundle-add-btn {
    flex: 1;
    min-height: 36px;
    background: #1a1a1a; color: #fcfaf4;
    border: 2px solid #1a1a1a; border-radius: 12px;
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    white-space: nowrap;
  }
  .bundles .bundle-add-btn:hover,
  #vape .bundle-add-btn:hover { background: #ff6b35; color: #1a1a1a; }
  .bundles .bundle-add-btn:active,
  #vape .bundle-add-btn:active { transform: scale(0.97); }
  .bundles .bundle-add-btn.added,
  #vape .bundle-add-btn.added { background: #7fb069; color: #1a1a1a; }
  .bundles .bundle-add-btn iconify-icon,
  #vape .bundle-add-btn iconify-icon { font-size: 14px; }
  .bundle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .bundle-card {
    padding: 22px 24px;
    background: #fcfaf4;
    border: 3px solid #1a1a1a;
    border-radius: 22px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
  }
  .bundle-card:hover {
    transform: translate(-4px, -4px) rotate(-1deg);
    box-shadow: 8px 8px 0 #1a1a1a;
  }
  .bundle-card.featured {
    background: #1a1a1a;
    color: #fcfaf4;
  }
  .bundle-featured-tag {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    padding: 6px 18px;
    background: #7fb069;
    color: #1a1a1a;
    border: 3px solid #1a1a1a;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
  }
  .bundle-card h3 {
    font-size: 24px; font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }
  .bundle-card > p {
    font-size: 13px; font-weight: 500;
    opacity: 0.75;
    margin-bottom: 14px;
  }
  .bundle-items {
    list-style: none;
    margin-bottom: 12px;
    padding: 10px 0;
    border-top: 2px dashed currentColor;
    border-bottom: 2px dashed currentColor;
    opacity: 0.9;
  }
  .bundle-items li {
    font-size: 13px; font-weight: 500;
    padding: 3px 0;
    display: flex; align-items: center; gap: 8px;
  }
  .bundle-items li iconify-icon {
    color: #1f5d3f;
    font-size: 16px;
  }
  .bundle-card.featured .bundle-items li iconify-icon { color: #7fb069; }
  .bundle-price {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 12px;
  }
  .bundle-price .now {
    font-size: 36px; font-weight: 900;
    letter-spacing: -0.03em;
  }
  .bundle-price .was {
    font-size: 16px; font-weight: 600;
    opacity: 0.5;
    text-decoration: line-through;
  }
  .bundle-cta {
    width: 100%; padding: 16px;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    background: #1a1a1a;
    color: #7fb069;
    transition: background 0.2s;
  }
  .bundle-cta:hover { background: #1f5d3f; color: #fcfaf4; }
  .bundle-card.featured .bundle-cta {
    background: #7fb069; color: #1a1a1a;
  }
  .bundle-card.featured .bundle-cta:hover { background: #1f5d3f; color: #fcfaf4; }

  /* Trust badges — band shortened via horizontal layout (no font changes) */
  .trust-strip {
    background: #1a1a1a;
    padding: 10px 32px;
  }
  .trust-track {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .trust-item {
    display: flex; align-items: center; gap: 12px;
    color: #fcfaf4;
    font-size: 14px; font-weight: 700;
  }
  .trust-item iconify-icon {
    font-size: 28px; color: #7fb069;
  }

  /* Our Story section */
  .story-section {
    background: #fcfaf4;
    padding: 120px 32px;
    position: relative;
    overflow: hidden;
  }
  .story-section::before {
    content: "EST 420 · EST 420 · EST 420 · EST 420 · EST 420 · EST 420 ·";
    position: absolute;
    top: 30px;
    left: 0; right: 0;
    font-size: 14px;
    font-weight: 900;
    color: rgba(255, 107, 53, 0.12);
    letter-spacing: 0.3em;
    white-space: nowrap;
    overflow: hidden;
  }
  .story-inner {
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .story-header { text-align: center; margin-bottom: 56px; }
  .story-header .section-eyebrow { margin-bottom: 20px; }
  .story-header h2 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #1a1a1a;
  }
  .story-header h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .story-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.75;
    color: #333;
  }
  .story-body p { margin-bottom: 14px; }
  .story-body p:first-child::first-letter {
    font-size: 64px;
    font-weight: 900;
    float: left;
    line-height: 0.85;
    margin: 6px 12px 0 0;
    color: #ff6b35;
  }
  .story-pullquote {
    margin: 48px auto;
    padding: 36px 40px;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 28px;
    border: 3px solid #1a1a1a;
    box-shadow: 8px 8px 0 #ff6b35;
    position: relative;
    max-width: 680px;
  }
  .story-pullquote::before {
    content: "\201C";
    position: absolute;
    top: -10px; left: 24px;
    font-size: 80px;
    font-weight: 900;
    color: #ff6b35;
    line-height: 1;
  }
  .story-pullquote p {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .story-pullquote .attribution {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ff6b35;
    text-transform: uppercase;
  }
  .story-values {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .story-value {
    text-align: center;
    padding: 32px 24px;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .story-value:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 #1a1a1a;
  }
  .story-value iconify-icon {
    font-size: 36px;
    color: #ff6b35;
    margin-bottom: 16px;
  }
  .story-value h4 {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: #1a1a1a;
  }
  .story-value p {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    font-weight: 500;
  }
  @media (max-width: 768px) {
    .story-values { grid-template-columns: 1fr; }
    .story-body p:first-child::first-letter { font-size: 48px; }
    .story-pullquote { padding: 28px 24px; }
    .story-pullquote p { font-size: 18px; }
  }

  /* Blog section */
  .blog-section {
    background: #ede4d3;
    padding: 100px 32px;
    position: relative;
  }
  .blog-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: repeating-linear-gradient(
      90deg,
      #1a1a1a 0,
      #1a1a1a 12px,
      #ff6b35 12px,
      #ff6b35 24px
    );
  }
  .blog-inner { max-width: 1280px; margin: 0 auto; }
  .blog-header { text-align: center; margin-bottom: 56px; }
  .blog-header h2 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #1a1a1a;
  }
  .blog-header h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .blog-card {
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .blog-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #1a1a1a;
  }
  .blog-image {
    height: 220px;
    position: relative;
    border-bottom: 3px solid #1a1a1a;
    background-size: cover;
    background-position: center;
  }
  .blog-image.b1 {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%231a1a1a%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236b6b6b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Cpath%20d%3D%22M145%20120%20H255%20V300%20H145%20Z%20M170%20155%20H230%20M170%20185%20H230%20M170%20215%20H230%20M170%20245%20H210%22%20stroke%3D%22%23ff6b35%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22365%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22800%22%20letter-spacing%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.7%22%3EHAPPY%20BUD%3C%2Ftext%3E%3C%2Fsvg%3E");
  }
  .blog-image.b2 {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%231a1a1a%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236b6b6b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Cpath%20d%3D%22M145%20120%20H255%20V300%20H145%20Z%20M170%20155%20H230%20M170%20185%20H230%20M170%20215%20H230%20M170%20245%20H210%22%20stroke%3D%22%23ff6b35%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22365%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22800%22%20letter-spacing%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.7%22%3EHAPPY%20BUD%3C%2Ftext%3E%3C%2Fsvg%3E");
  }
  .blog-image.b3 {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%),
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%231a1a1a%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236b6b6b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.18%22%2F%3E%3Cpath%20d%3D%22M145%20120%20H255%20V300%20H145%20Z%20M170%20155%20H230%20M170%20185%20H230%20M170%20215%20H230%20M170%20245%20H210%22%20stroke%3D%22%23ff6b35%22%20stroke-width%3D%2213%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22365%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2220%22%20font-weight%3D%22800%22%20letter-spacing%3D%223%22%20fill%3D%22%23ff6b35%22%20opacity%3D%220.7%22%3EHAPPY%20BUD%3C%2Ftext%3E%3C%2Fsvg%3E");
  }
  .blog-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #ff6b35;
    color: #1a1a1a;
    padding: 5px 12px;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
  }
  .blog-body { padding: 24px; }
  .blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6b6b6b;
    margin-bottom: 12px;
    font-weight: 600;
  }
  .blog-meta .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #6b6b6b;
  }
  .blog-card h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #1a1a1a;
  }
  .blog-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 10px;
  }
  .blog-readmore {
    font-size: 13px;
    font-weight: 800;
    color: #ff6b35;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .blog-cta-strip {
    margin-top: 56px;
    text-align: center;
  }
  .blog-cta-strip a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: #1a1a1a;
    color: #ff6b35;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }
  .blog-cta-strip a:hover {
    background: #ff6b35;
    color: #1a1a1a;
  }
  
  @media (max-width: 820px) { .nav-links { display: none; } }
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
  }

  .community-section {
    background: #fcfaf4;
    padding: 8px 32px 6px;
  }
  .community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .community-grid.community-grid-single {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .community-card {
    position: relative;
    padding: 48px 40px;
    border-radius: 28px;
    border: 3px solid #1a1a1a;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
  }
  .community-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 #1a1a1a;
  }
  .community-card.telegram {
    background: linear-gradient(135deg, #7fb069 0%, #1f5d3f 100%);
    color: #1a1a1a;
  }
  .community-platform-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #7fb069;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 38px;
    margin-bottom: 14px;
    border: 3px solid #1a1a1a;
  }
  .community-platform-label {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(26,26,26,0.9);
    color: #7fb069;
    border-radius: 980px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .community-card h3 {
    font-size: 36px; font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .community-card .members {
    font-size: 15px; font-weight: 600;
    margin-bottom: 20px;
    opacity: 0.85;
  }
  .community-card .members .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #0d3a24;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-dot 2s infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .community-perks {
    list-style: none;
    margin-bottom: 28px;
  }
  .community-perks li {
    font-size: 14px; font-weight: 500;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .community-perks li iconify-icon {
    font-size: 16px;
    flex-shrink: 0;
  }
  .community-card.telegram .community-perks li iconify-icon { color: #1a1a1a; }
  .community-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    align-self: flex-start;
    transition: transform 0.2s;
  }
  .community-card.telegram .community-cta {
    background: #1a1a1a;
    color: #7fb069;
  }
  .community-card:hover .community-cta { transform: translateX(4px); }

  @media (max-width: 640px) {
    .community-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .community-card { padding: 36px 28px; min-height: auto; }
    .community-card h3 { font-size: 30px; }
  }

  .reviews {
    background: #fcfaf4;
  }
  /* Reviews — one row, horizontal scroll on ALL viewports (swipe/drag right to see more) */
  .reviews-grid {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 16px;
    margin: 0;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 320px;
    max-width: 320px;
    padding: 20px 22px;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    scroll-snap-align: start;
  }
  .review-card:nth-child(1) { transform: rotate(-1deg); }
  .review-card:nth-child(2) { transform: rotate(1deg); }
  .review-card:nth-child(3) { transform: rotate(-0.5deg); }
  .review-card:hover {
    transform: rotate(0deg) translate(-3px, -3px);
    box-shadow: 6px 6px 0 #7fb069;
  }
  .review-stars {
    font-size: 20px;
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
  .review-quote {
    font-size: 14px; font-weight: 500;
    line-height: 1.4;
    color: #1a1a1a;
    margin-bottom: 14px;
  }
  .review-author {
    display: flex; align-items: center; gap: 12px;
  }
  .review-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f5d3f, #ff6b35);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    color: #fcfaf4;
    border: 2px solid #1a1a1a;
  }
  .review-author-meta {
    font-size: 13px;
  }
  .review-author-meta strong {
    display: block;
    font-weight: 800;
    margin-bottom: 2px;
  }
  .review-author-meta span {
    color: #6b6b6b;
    font-weight: 500;
  }

  /* Newsletter */
  .newsletter {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    text-align: center;
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
  }
  .newsletter::before {
    content: "🌿";
    position: absolute;
    top: 10%; left: 10%;
    font-size: 80px;
    opacity: 0.25;
    transform: rotate(-15deg);
  }
  .newsletter::after {
    content: "🌱";
    position: absolute;
    bottom: 10%; right: 10%;
    font-size: 80px;
    opacity: 0.25;
    transform: rotate(15deg);
  }
  .newsletter h2 {
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 900; letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
    color: #1a1a1a;
    position: relative; z-index: 2;
  }
  .newsletter-badge {
    display: inline-block;
    background: #1a1a1a;
    color: #ff6b35;
    padding: 8px 18px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    transform: rotate(-2deg);
    position: relative;
    z-index: 2;
  }
  .newsletter-success {
    max-width: 500px;
    margin: 16px auto 0;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 14px;
    padding: 20px 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .newsletter-success.hidden { display: none; }
  .newsletter-success iconify-icon {
    font-size: 22px;
    color: #ff6b35;
  }
  .newsletter-success strong {
    font-family: "Courier New", monospace;
    background: #ff6b35;
    color: #1a1a1a;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 0.04em;
  }
  .newsletter p {
    color: rgba(26,26,26,0.8);
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    max-width: 500px; margin-left: auto; margin-right: auto;
    margin-bottom: 10px;
    position: relative; z-index: 2;
  }
  .newsletter-form {
    max-width: 500px; margin: 0 auto;
    display: flex; gap: 8px;
    background: #1a1a1a;
    border-radius: 980px;
    padding: 6px;
    position: relative; z-index: 2;
  }
  .newsletter-form input {
    flex: 1;
    padding: 14px 22px;
    background: transparent;
    border: none; outline: none;
    color: #fcfaf4;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
  }
  .newsletter-form input::placeholder { color: rgba(255,248,240,0.5); }
  .newsletter-form button {
    padding: 14px 28px;
    background: #7fb069;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 14px; font-weight: 800;
    transition: background 0.2s;
  }
  .newsletter-form button:hover { background: #fcfaf4; }

  /* Footer — tightened from 80/40 to 48/24 */
  footer {
    background: #1a1a1a;
    color: rgba(255,248,240,0.7);
    padding: 14px 32px 8px;
    font-size: 14px;
  }
  .footer-grid {
    max-width: 1400px; margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,248,240,0.1);
  }
  .footer-brand .logo { color: #fcfaf4; margin-bottom: 20px; }
  .footer-brand p {
    margin-bottom: 14px;
    line-height: 1.6;
    max-width: 320px;
    margin-top: 16px;
  }
  .footer-socials { display: flex; gap: 10px; }
  .footer-socials a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,248,240,0.1);
    display: flex; align-items: center; justify-content: center;
    color: #7fb069;
    font-size: 18px;
    transition: background 0.2s;
  }
  .footer-socials a:hover { background: #7fb069; color: #1a1a1a; }
  .footer-col h5 {
    font-size: 13px; font-weight: 800;
    color: #7fb069;
    margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a { transition: color 0.2s; }
  .footer-col a:hover { color: #fcfaf4; }
  .footer-bottom {
    max-width: 1400px; margin: 18px auto 0;
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    font-size: 13px;
  }
  .footer-bottom-links { display: flex; gap: 24px; }

  /* Reveal */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* Responsive — keep desktop horizontal layouts until truly narrow */
  /* Footer compact on tablet+mobile */
  @media (max-width: 1024px) {
    footer { padding: 56px 22px 28px; font-size: 13px; }
    .footer-grid { gap: 40px; padding-bottom: 36px; }
    .footer-brand p { font-size: 13px; max-width: none; }
  }
  @media (max-width: 768px) {
    footer { padding: 40px 18px 24px; }
    .footer-grid { gap: 24px 28px; padding-bottom: 24px; }
    .footer-brand p { margin-bottom: 16px; }
    .footer-col h5 { font-size: 12px; margin-bottom: 10px; }
    .footer-col li { margin-bottom: 7px; }
    .footer-socials a { width: 36px; height: 36px; font-size: 16px; }
    .footer-bottom { margin-top: 20px; font-size: 12px; gap: 10px; flex-direction: column; }
    .footer-bottom-links { gap: 16px; flex-wrap: wrap; }
    /* SHOP THE MENU stays 4-in-row at every viewport (per design ask) */
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    /* Reviews → horizontal scroll on mobile (swipe right to see more) */
    .reviews-grid {
      grid-template-columns: none;
      display: flex;
      overflow-x: auto;
      gap: 14px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px 22px 12px;
      margin: 0 -22px;
    }
    .reviews-grid::-webkit-scrollbar { display: none; }
    .review-card {
      flex: 0 0 78%;
      max-width: 78%;
      scroll-snap-align: start;
    }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  @media (max-width: 640px) {
    section { padding: 40px 22px; }
    .nav-inner { padding: 14px 20px; }
    .nav-icons iconify-icon { display: none; }
    .hero { padding: 32px 22px 40px; }
    .hero-ctas { flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    /* Bundles on phone (Collections stays 4-in-row per circle-design ask) */
    .bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .bundle-card { padding: 14px 12px; }
    .bundle-card h3 { font-size: 16px; }
    .bundle-card > p { font-size: 11px; margin-bottom: 8px; }
    .bundle-items li { font-size: 11px; padding: 2px 0; }
    .bundle-price .now { font-size: 18px; }
    .bundle-price .was { font-size: 12px; }
    .bundle-cta { font-size: 12px; padding: 8px 12px; }
    .products-grid { grid-template-columns: 1fr; }
    /* Reviews carousel — tighter card width on small phones */
    .review-card { flex: 0 0 82%; max-width: 82%; padding: 16px 18px; }
    .review-card:nth-child(1),
    .review-card:nth-child(2),
    .review-card:nth-child(3) { transform: none; }
    .review-stars { font-size: 16px; margin-bottom: 10px; }
    .review-quote { font-size: 13px; margin-bottom: 10px; }
    .newsletter-form { flex-direction: column; background: none; padding: 0; gap: 10px; }
    .newsletter-form input { background: #1a1a1a; border-radius: 14px; padding: 16px 22px; }
    .newsletter-form button { padding: 16px; border-radius: 14px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ============== TRUST STRIP ============== */
  .trust-strip {
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 12px 32px;
    border-top: 3px solid #1a1a1a;
    border-bottom: 3px solid #1a1a1a;
  }
  .trust-strip-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .trust-stat {
    padding: 0 16px;
    border-left: 1px solid rgba(255,248,240,0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
  }
  /* Icons removed from trust strip per design; keep rule defensively in case they come back */
  .trust-stat-icon { display: none; }
  .trust-stat:first-child { border-left: none; }
  .trust-stat-icon {
    width: 44px; height: 44px;
    margin: 0;
    background: rgba(255, 107, 53, 0.12);
    border: 2px solid rgba(255, 107, 53, 0.35);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #ff6b35;
  }
  .trust-stat-icon iconify-icon { font-size: 22px; }
  .trust-stat-number {
    font-family: inherit;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ff6b35;
  }
  .trust-stat-number .suffix {
    font-size: 0.55em;
    vertical-align: super;
    margin-left: 2px;
    font-weight: 800;
    color: #fcfaf4;
  }
  .trust-stat-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,248,240,0.75);
    margin: 0;
    line-height: 1.1;
  }
  .trust-stat-sub {
    font-size: 11px;
    color: rgba(255,248,240,0.5);
    margin: 0;
    line-height: 1.1;
  }
  @media (max-width: 560px) {
    .trust-strip { padding: 22px 12px; }
    .trust-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .trust-stat { padding: 0 6px; border-left: 1px solid rgba(255,248,240,0.12); border-top: none; }
    .trust-stat:first-child { border-left: none; }
    .trust-stat-number { font-size: 20px; }
    .trust-stat-label { font-size: 9px; letter-spacing: 0.06em; }
    .trust-stat-sub { font-size: 9px; }
  }
  @media (max-width: 380px) {
    .trust-strip-inner { gap: 4px; }
    .trust-stat { padding: 0 4px; }
    .trust-stat-number { font-size: 18px; }
    .trust-stat-label { font-size: 8px; }
    .trust-stat-sub { font-size: 8px; }
  }

  
  /* =========== MOBILE HAMBURGER + DRAWER =========== */
  .mobile-nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .mobile-nav-toggle:hover { background: #1a1a1a; }
  .mobile-nav-toggle:hover .hamburger-line { background: #fcfaf4; }
  .hamburger-lines {
    width: 20px; height: 14px;
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hamburger-line {
    width: 100%; height: 2.5px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .mobile-drawer-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(26, 26, 26, 0.55);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s;
  }
  .mobile-drawer-backdrop.is-open {
    display: block;
    opacity: 1;
  }
  .mobile-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #fcfaf4;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer-head {
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #1a1a1a;
    background: #1a1a1a; color: #fcfaf4;
  }
  .mobile-drawer-head .drawer-logo {
    display: inline-flex; align-items: center;
    background: #1f5d3f; color: #fcfaf4;
    padding: 6px 18px;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    line-height: 1;
  }
  .mobile-drawer-head .drawer-logo-name {
    font-size: 16px; font-weight: 900; font-style: italic;
  }
  .mobile-drawer-close {
    width: 40px; height: 40px;
    background: transparent;
    border: 2px solid rgba(255, 248, 240, 0.4);
    border-radius: 10px;
    color: #fcfaf4;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mobile-drawer-close iconify-icon { font-size: 18px; }
  .mobile-drawer-section {
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    padding: 8px 0;
  }
  .md-section-label {
    padding: 14px 22px 6px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b6b6b;
  }
  .md-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    min-height: 48px;
    color: #1a1a1a;
    font-size: 16px; font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
  }
  .md-link:active, .md-link:hover { background: #ede4d3; }
  .md-link iconify-icon {
    font-size: 22px; color: #1f5d3f;
    flex-shrink: 0;
  }
  .md-link.featured {
    background: #1f5d3f; color: #fcfaf4;
    margin: 6px 14px;
    border-radius: 14px;
    min-height: 56px;
  }
  .md-link.featured iconify-icon { color: #ff6b35; }
  .md-link.tg {
    background: linear-gradient(135deg, #229ED9 0%, #1a1a1a 100%);
    color: #fcfaf4;
    margin: 6px 14px;
    border-radius: 14px;
    min-height: 56px;
  }
  .md-link.tg iconify-icon { color: #fcfaf4; }
  .md-sub { font-size: 12px; color: rgba(255, 248, 240, 0.7); font-weight: 500; margin-top: 2px; display: block; }
  .md-link .md-link-text { line-height: 1.2; }
  .md-link .md-link-text small { font-size: 11px; color: #6b6b6b; font-weight: 500; display: block; margin-top: 2px; }
  .md-link.featured .md-link-text small,
  .md-link.tg .md-link-text small { color: rgba(255, 248, 240, 0.75); }
  .mobile-drawer-foot {
    margin-top: auto;
    padding: 22px;
    border-top: 1px solid rgba(26, 26, 26, 0.1);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .md-foot-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px;
    min-height: 50px;
    background: #1a1a1a; color: #fcfaf4;
    border-radius: 12px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
  }
  .md-foot-btn.primary { background: #ff6b35; color: #1a1a1a; }
  .md-foot-btn iconify-icon { font-size: 18px; }
  body.drawer-open { overflow: hidden; }
  @media (max-width: 820px) { .mobile-nav-toggle { display: inline-flex; } }

  
  /* Homepage Vault teaser */
  .hp-vault-tease {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 14px 20px;
    background: #0d0d0d;
    color: #fcfaf4;
    border: 3px solid #1a1a1a;
    border-radius: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
  }
  .hp-vault-tease:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 #ff6b35;
  }
  .hp-vault-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.15);
    color: #ff6b35;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 107, 53, 0.4);
  }
  .hp-vault-icon iconify-icon { font-size: 28px; }
  .hp-vault-body { flex: 1; }
  .hp-vault-eyebrow {
    display: inline-block;
    color: #ff6b35;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
  }
  .hp-vault-title {
    font-size: 18px; font-weight: 700;
    line-height: 1.3; margin-bottom: 4px;
  }
  .hp-vault-title strong { color: #ff6b35; font-weight: 900; }
  .hp-vault-sub {
    font-size: 14px;
    color: rgba(255, 248, 240, 0.65);
    line-height: 1.5;
  }
  .hp-vault-arrow {
    width: 44px; height: 44px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .hp-vault-tease:hover .hp-vault-arrow { transform: translateX(4px); }
  .hp-vault-arrow iconify-icon { font-size: 18px; }
  @media (max-width: 720px) {
    .hp-vault-tease { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
  }

  
  /* =========== MOBILE TAP TARGETS (Apple/Google min 44x44) =========== */
  @media (max-width: 768px) {
    button:not(.hamburger-line):not(.mbb-qty button),
    .btn-primary, .btn-secondary,
    .quick-add, .bundle-cta, .vault-cta,
    .apply-submit, .add-btn,
    .nav-icons a, .md-foot-btn,
    .help-cta-btn {
      min-height: 44px;
    }
    /* Larger touch target on small icons */
    .nav-icons iconify-icon { padding: 8px; }
    /* Avoid iOS zoom on form-field focus by ensuring 16px font-size */
    input, select, textarea { font-size: 16px !important; }
  }

  
  /* === Responsive nav — keep horizontal links visible at half-screen widths === */
  /* Universal: prevent nav items from wrapping or shrinking weirdly */
  .nav-links a { white-space: nowrap; }
  .logo, .nav-icons { flex-shrink: 0; }
  .nav-links { flex-wrap: nowrap; min-width: 0; }

  /* Tier 1: medium screens (981-1200px) — slight compression */
  @media (max-width: 1200px) {
    .nav-links { gap: 16px; }
    .nav-links a { padding: 6px 11px; font-size: 13.5px; }
    .nav-inner { padding: 14px 24px; }
    .logo-name { font-size: 18px; }
    .nav-icons { gap: 12px; }
    .cart-btn { padding: 9px 14px; font-size: 13px; }
  }

  /* Tier 2: narrow desktops & half-screens (821-980px) — aggressive compression */
  @media (max-width: 980px) {
    .nav-inner { padding: 12px 18px; gap: 8px; }
    .nav-links { gap: 4px; }
    .nav-links a { padding: 5px 8px; font-size: 12.5px; }
    .nav-trigger .nav-caret { font-size: 10px; margin-left: 2px; }
    .logo { padding: 6px 14px; }
    .logo-name { font-size: 16px; }
    .logo-tag { font-size: 7.5px; letter-spacing: 0.14em; }
    .nav-icons { gap: 6px; }
    /* Cart button: icon + count only (hide "Bag" label) */
    .cart-btn { padding: 8px 12px; font-size: 0; gap: 6px; }
    .cart-btn iconify-icon { font-size: 18px; }
    .cart-count { font-size: 11px; min-width: 18px; height: 18px; padding: 0 4px; }
    /* Hide the search icon — rarely used, makes room */
    .nav-icons > iconify-icon:first-child { display: none; }
    /* Dropdown: align to right edge so it doesn't overflow on narrow screens */
    .nav-item.has-dropdown:last-of-type .nav-dropdown,
    .nav-item.has-dropdown:nth-last-of-type(2) .nav-dropdown {
      left: auto; right: 0; transform: translateY(-10px);
    }
    .nav-item.has-dropdown:last-of-type:hover .nav-dropdown,
    .nav-item.has-dropdown:nth-last-of-type(2):hover .nav-dropdown {
      transform: translateY(0);
    }
    .nav-item.has-dropdown:last-of-type .nav-dropdown::after,
    .nav-item.has-dropdown:nth-last-of-type(2) .nav-dropdown::after {
      left: auto; right: 26px; transform: rotate(45deg);
    }
  }
/* Community banner — horizontal layout */
.community-banner {
  display: grid;
  grid-template-columns: 1.3fr 1.1fr auto;
  gap: 24px;
  align-items: center;
  padding: 14px 22px;
  border-radius: 22px;
  border: 3px solid #1a1a1a;
  background: linear-gradient(135deg, #7fb069 0%, #1f5d3f 100%);
  color: #1a1a1a;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.community-banner:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 #1a1a1a;
}
.community-banner-decoration {
  position: absolute;
  top: -40px; right: -40px;
  font-size: 280px;
  color: rgba(26, 26, 26, 0.08);
  line-height: 1;
  pointer-events: none;
  transform: rotate(-12deg);
  z-index: 1;
}
.community-banner-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.community-banner-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #7fb069;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 44px;
  flex-shrink: 0;
  border: 3px solid #1a1a1a;
}
.community-banner-text {
  flex: 1;
  min-width: 0;
}
.community-banner-label {
  display: inline-block;
  background: #1a1a1a;
  color: #ff6b35;
  padding: 4px 12px;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.community-banner-text h3 {
  /* Matches .effect-card h3 (Shop by Feel) for site-wide card-title consistency */
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 6px;
  color: #1a1a1a;
  white-space: nowrap;
}
.banner-members {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  margin: 0;
  white-space: nowrap;
}
.banner-members .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0d3a24;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse-dot 2s infinite;
}
.community-banner-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  position: relative;
  z-index: 2;
}
.banner-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}
.banner-perk iconify-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #1a1a1a;
}
.community-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: #1a1a1a;
  color: #7fb069;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.2s;
  position: relative;
  z-index: 2;
}
.community-banner:hover .community-banner-cta {
  transform: translateX(4px);
}
/* Tablet/narrow desktop — shrink title font so nowrap fits in the title column */
@media (max-width: 1100px) and (min-width: 769px) {
  .community-banner-text h3 { font-size: 22px; }
  .banner-members { font-size: 11px; }
  .banner-perk { font-size: 11px; }
  .banner-perk iconify-icon { font-size: 15px; }
  .community-banner-label { font-size: 10px; padding: 3px 9px; }
}
@media (max-width: 768px) {
  .community-banner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px;
    border-width: 2px;
    border-radius: 18px;
  }
  .community-banner-decoration { font-size: 180px; top: -20px; right: -20px; }
  .community-banner-icon { width: 56px; height: 56px; font-size: 30px; border-width: 2px; }
  .community-banner-left { gap: 12px; }
  .community-banner-text h3 { font-size: 22px; margin-bottom: 4px; }
  .community-banner-label { font-size: 9px; padding: 3px 9px; margin-bottom: 6px; }
  .banner-members { font-size: 11px; }
  .community-banner-perks { gap: 6px 14px; }
  .banner-perk { font-size: 11px; gap: 6px; }
  .banner-perk iconify-icon { font-size: 14px; }
  .community-banner-cta { padding: 10px 16px; font-size: 12px; justify-self: start; }
}
@media (max-width: 560px) {
  .community-banner { padding: 12px 14px; gap: 10px; }
  .community-banner-left { flex-direction: row; align-items: center; }
  .community-banner-icon { width: 48px; height: 48px; font-size: 24px; }
  .community-banner-text h3 { font-size: 22px; }
  .community-banner-perks { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .banner-perk { font-size: 10px; }
}

  /* ====================================================================
     SHOP BY FEEL (effects — harmonized to Categories card pattern)
     ==================================================================== */
  .effects-section {
    background: #fcfaf4;
    padding: 6px 0;
  }
  .effects-section .section-header { margin-bottom: 6px; }
  .effects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
  }
  @media (max-width: 640px) { .effects-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
  /* "More feels" tag line below the 6 cards */
  .effects-more {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #6b6b6b;
  }
  .effects-more a { color: #1f5d3f; font-weight: 700; text-decoration: underline; }
  .effects-more a:hover { color: #ff6b35; }
  .effect-card {
    position: relative;
    /* 16:9 keeps all 6 cards visible on one laptop screen in a 3x2 grid */
    aspect-ratio: 16/9;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    padding: 22px 26px;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 3px solid #1a1a1a;
    color: #fcfaf4;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .effect-card:hover {
    transform: translate(-4px, -4px) rotate(-1deg);
    box-shadow: 8px 8px 0 #1a1a1a;
  }

  /* Per-effect gradients (full-bleed + dark overlay) — mirrors Categories */
  .effect-card.chill {
    background: linear-gradient(135deg, rgba(168,201,149,0.45) 0%, rgba(31,93,63,0.88) 100%),
                linear-gradient(135deg, #a8c995 0%, #1f5d3f 100%);
  }
  .effect-card.sleep {
    background: linear-gradient(135deg, rgba(184,165,217,0.5) 0%, rgba(53,38,84,0.92) 100%),
                linear-gradient(135deg, #b8a5d9 0%, #3a2a5e 100%);
  }
  .effect-card.focus {
    background: linear-gradient(135deg, rgba(255,140,90,0.45) 0%, rgba(176,55,15,0.92) 100%),
                linear-gradient(135deg, #ff8c5a 0%, #a83c10 100%);
  }
  .effect-card.social {
    background: linear-gradient(135deg, rgba(255,209,102,0.5) 0%, rgba(140,90,20,0.92) 100%),
                linear-gradient(135deg, #ffd166 0%, #7a5c1a 100%);
  }
  .effect-card.energy {
    background: linear-gradient(135deg, rgba(255,224,102,0.5) 0%, rgba(176,100,12,0.92) 100%),
                linear-gradient(135deg, #ffe066 0%, #9c5e0c 100%);
  }
  .effect-card.relief {
    background: linear-gradient(135deg, rgba(255,143,163,0.5) 0%, rgba(140,42,58,0.92) 100%),
                linear-gradient(135deg, #ff8fa3 0%, #9c2b3a 100%);
  }
  .effect-card.happy {
    background: linear-gradient(135deg, rgba(255,214,102,0.5) 0%, rgba(216,124,18,0.92) 100%),
                linear-gradient(135deg, #ffd666 0%, #d87c12 100%);
  }
  .effect-card.creative {
    background: linear-gradient(135deg, rgba(127,176,105,0.5) 0%, rgba(31,93,63,0.92) 100%),
                linear-gradient(135deg, #7fb069 0%, #1f5d3f 100%);
  }
  .effect-card.aroused {
    background: linear-gradient(135deg, rgba(232,93,117,0.5) 0%, rgba(122,28,53,0.92) 100%),
                linear-gradient(135deg, #e85d75 0%, #7a1c35 100%);
  }
  .effect-card.soothing {
    background: linear-gradient(135deg, rgba(173,210,224,0.5) 0%, rgba(50,98,128,0.92) 100%),
                linear-gradient(135deg, #add2e0 0%, #326280 100%);
  }

  /* Effect-card typography aligned with .collection-card for SHOP THE MENU/FEEL consistency */
  .effect-tag {
    display: inline-flex; align-self: flex-start;
    padding: 6px 14px;
    background: rgba(26,26,26,0.9);
    color: #fcfaf4;
    border-radius: 980px;
    font-size: 12px; font-weight: 700;
  }
  .effect-card h3 {
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 900; letter-spacing: -0.03em;
    line-height: 0.95;
    color: #fcfaf4;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .effect-card h3 br { display: none; }
  .effect-card p {
    font-size: 12px; font-weight: 500;
    color: #fcfaf4; opacity: 0.9;
    margin-bottom: 10px;
    max-width: 280px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    line-height: 1.35;
  }
  .effect-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 980px;
    font-size: 12px; font-weight: 700;
    align-self: flex-start;
  }

  @media (max-width: 1024px) {
    .effects-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .effect-card { aspect-ratio: 3/2; padding: 14px 16px; }
    .effect-card p { display: none; }
  }
  @media (max-width: 640px) {
    .effects-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .effects-section { padding: 32px 0; }
    .effects-section .section-header { margin-bottom: 16px; }
    .effect-card { aspect-ratio: 4/3; padding: 12px 12px; border-radius: 14px; border-width: 2px; }
    .effect-card h3 { font-size: 16px; }
    .effect-tag { font-size: 10px; padding: 3px 8px; }
    .effect-link { padding: 5px 10px; font-size: 10px; }

    /* Match Shop by Feel card-title sizing site-wide */
    .collection-card h3 { font-size: 16px; line-height: 0.95; }
    .community-banner-text h3 { font-size: 16px; line-height: 0.95; }
  }

  /* ====================================================================
     NEW: SHOP BY FEEL — full-bleed lifestyle photo cards (mood.com pattern,
     HappyBud-ified with border + offset shadow + bottom gradient + bold label)
     ==================================================================== */
  .effects-grid-photo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
  }
  /* Phone only — 2 cols × 3 rows so labels stay readable on narrow screens */
  @media (max-width: 480px) {
    .effects-grid-photo { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  }
  .feel-card {
    position: relative;
    aspect-ratio: 2/1;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid #1a1a1a;
    box-shadow: 6px 6px 0 #1a1a1a;
    text-decoration: none;
    color: #fff;
    background-size: cover;
    background-position: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: block;
  }
  /* Phone — taller cards in 2-col layout */
  @media (max-width: 480px) {
    .feel-card { aspect-ratio: 4/3; }
  }
  .feel-card::after {
    /* Bottom gradient for label legibility */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
    transition: background 0.25s ease;
  }
  .feel-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #1a1a1a;
  }
  .feel-card:hover::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.8) 100%);
  }
  .feel-card-label {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  /* Shop CTA pill on the right of each feel card (explicit affordance for photo cards) */
  .feel-card-cta {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #fff;
    color: #1a1a1a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.18s, transform 0.18s;
  }
  .feel-card-cta iconify-icon { font-size: 10px; }
  .feel-card:hover .feel-card-cta {
    background: #ff6b35;
    color: #1a1a1a;
    transform: translateX(2px);
  }
  /* Phone — smaller label, hide CTA (tap-anywhere card is clear at phone size) */
  @media (max-width: 480px) {
    .feel-card-label { left: 14px; bottom: 12px; font-size: 18px; }
    .feel-card-cta { display: none; }
  }
  /* Gradient placeholders for moods without photos yet (warm brand palette) */
  .feel-card-gradient.feel-sleep {
    background: linear-gradient(135deg, #1f5d3f 0%, #0d2a1c 100%);
  }
  .feel-card-gradient.feel-social {
    background: linear-gradient(135deg, #ff8c5a 0%, #b8451a 100%);
  }
  .feel-card-gradient.feel-energy {
    background: linear-gradient(135deg, #f5b042 0%, #d8651f 100%);
  }
  .feel-card-gradient.feel-relief {
    background: linear-gradient(135deg, #b8a5d9 0%, #5a4477 100%);
  }
  /* Happy mood — sunshine yellow to warm orange (uplifting, smiley) */
  .feel-card-gradient.feel-happy {
    background: linear-gradient(135deg, #ffd54f 0%, #ff8c1a 100%);
  }
  /* Soft repeating dot pattern overlay for placeholder cards (gives texture) */
  .feel-card-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
  }
  /* "Photo coming" pill on placeholder cards — discreet, top-right */
  .feel-card-gradient .feel-card-label::after {
    content: "";
  }
  /* Phone hover/visual tweaks (the grid layout for narrow widths is handled
     in the breakpoints further up — see .effects-grid-photo @media rules) */
  @media (max-width: 480px) {
    .feel-card { border-radius: 14px; box-shadow: 4px 4px 0 #1a1a1a; }
    .feel-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1a1a1a; }
    .feel-card-label { left: 12px; bottom: 10px; }
  }

  /* ====================================================================
     Brand-level review band (synchronised: 4.9 / 5,124 verified buyers)
     ==================================================================== */
  /* See-reviews band — matches the HappyBud sticker-card aesthetic:
     cream bg, 3px black border, diagonal offset shadow, dark text, green canonical CTA. */
  .brand-trust-band {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    background: #fff8ef;
    color: #1a1a1a;
    border: 3px solid #1a1a1a;
    border-radius: 18px;
    text-decoration: none;
    box-shadow: 5px 5px 0 #1a1a1a;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    margin-top: 0;
    margin-bottom: 0;
  }
  .brand-trust-band + .product-tabs,
  .brand-trust-band + section { margin-top: 14px; }
  .brand-trust-band:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #1a1a1a;
  }
  .brand-trust-stars {
    color: #ff6b35;
    font-size: 22px;
    letter-spacing: -1px;
  }
  .brand-trust-rating {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #1f5d3f;
  }
  .brand-trust-divider {
    width: 1px;
    height: 36px;
    background: rgba(26, 26, 26, 0.18);
  }
  .brand-trust-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .brand-trust-copy strong {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
  }
  .brand-trust-copy span {
    font-size: 13px;
    font-weight: 500;
    color: #6b6b6b;
  }
  .brand-trust-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #1f5d3f;
    color: #fcfaf4;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: background 0.15s ease;
  }
  .brand-trust-band:hover .brand-trust-cta {
    background: #2a7a52;
  }
  /* When band sits on the cream homepage background, give it side padding */
  section + .brand-trust-band,
  .hero + .brand-trust-band {
    margin: 18px auto 0;
    width: calc(100% - 64px);
  }
  @media (max-width: 1024px) {
    .brand-trust-band {
      grid-template-columns: auto auto 1fr auto;
      grid-template-areas: "stars rating copy cta";
      row-gap: 8px;
      column-gap: 10px;
      align-items: center;
    }
    .brand-trust-stars { grid-area: stars; }
    .brand-trust-rating { grid-area: rating; }
    .brand-trust-copy { grid-area: copy; }
    .brand-trust-divider { display: none; }
    .brand-trust-cta { grid-area: cta; justify-self: end; padding: 6px 10px; font-size: 11px; }
  }
  @media (max-width: 560px) {
    .brand-trust-band { padding: 10px 12px; gap: 8px; box-shadow: 4px 4px 0 #1a1a1a; border-radius: 14px; }
    .brand-trust-stars { font-size: 14px; }
    .brand-trust-rating { font-size: 18px; }
    .brand-trust-copy strong { font-size: 11px; }
    .brand-trust-copy span { font-size: 10px; }
    .brand-trust-cta { padding: 5px 9px; font-size: 10px; gap: 4px; }
    .brand-trust-cta iconify-icon { font-size: 12px; }
  }
  section + .brand-trust-band,
  .hero + .brand-trust-band { margin-top: 20px; }

  /* Footer rating pill (small social-proof anchor in footer-brand) */
  .footer-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 8px 14px;
    background: rgba(255,107,53,0.12);
    border: 1px solid rgba(255,107,53,0.35);
    border-radius: 980px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .footer-rating-pill:hover {
    background: rgba(255,107,53,0.22);
    border-color: #ff6b35;
  }
  .footer-rating-stars {
    color: #ff6b35;
    font-size: 13px;
    letter-spacing: -0.5px;
  }
  .footer-rating-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .footer-rating-text strong { font-weight: 900; }

/* (Shop toggle banner CSS removed — replaced by two separate visible sections: SHOP THE MENU + SHOP BY FEEL) */

/* ============== SHOP DROPDOWN: 2-COLUMN MEGA-MENU (Category + Feel) ============== */
.nav-dropdown.nav-dropdown-mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  min-width: 480px;
  padding: 18px;
  align-items: start;
  /* Override base .nav-dropdown centering — anchor to left of trigger so wide panel stays on-screen */
  left: 0;
  transform: translateX(0) translateY(-10px);
}
.nav-item.has-dropdown:hover .nav-dropdown.nav-dropdown-mega,
.nav-item.has-dropdown:focus-within .nav-dropdown.nav-dropdown-mega {
  transform: translateX(0) translateY(0);
}
.nav-dropdown.nav-dropdown-mega::after {
  /* Arrow tip aligned with Shop trigger center instead of dropdown center */
  left: 32px;
  transform: rotate(45deg);
}
.nav-dropdown.nav-dropdown-mega .dd-col {
  display: flex;
  flex-direction: column;
}
.nav-dropdown.nav-dropdown-mega .dd-col-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #6b6b6b;
  padding: 0 12px 8px;
  text-transform: uppercase;
  border-bottom: 1px dashed #d8d2c4;
  margin-bottom: 6px;
}
.nav-dropdown.nav-dropdown-mega .dd-item { padding: 8px 12px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-title { font-size: 13px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-sub { font-size: 11px; }

  /* ====================================================================
     iPhone SE / older Android (320-380px) — narrowest-width polish
     ==================================================================== */
  @media (max-width: 380px) {
    /* Hero CTAs stack vertically with full-width buttons */
    .hero-ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .hero-ctas .btn-primary,
    .hero-ctas .btn-secondary {
      width: 100%;
      justify-content: center;
    }
    /* Bundle price block wraps so "was" doesn't push off-screen */
    .bundle-price { flex-wrap: wrap; gap: 6px; }
    /* Effects section tighter */
    .effects-section { padding: 48px 0; }
    .effects-grid { gap: 10px; padding: 0 4px; }
    .effect-card { padding: 22px 18px; }
    .effect-name { font-size: 20px; }
    .effect-sub { font-size: 13px; }
    /* Brand trust band tighter */
    .brand-trust-band { padding: 14px 14px; gap: 10px; }
    .brand-trust-rating { font-size: 24px; }
    /* Promo bar marquee faster (less waiting between visible messages) */
    .promo-track { animation-duration: 18s; }
    /* Welcome modal slightly tighter */

  }

  /* ====================================================================
     Accessibility: respect prefers-reduced-motion (WCAG 2.3.3)
     ==================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .promo-track {
      animation: none !important;
      transform: translateX(0) !important;
    }
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* === Logo image override (replaces .logo-stack text mark) === */
  .logo {
    background: transparent !important;
    padding: 0 !important;
    clip-path: none !important;
    color: inherit !important;
    transition: transform 0.2s;
  }
  .logo:hover { background: transparent !important; transform: translateY(-1px); }
  .logo-img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 200px;
  }
  /* Footer logo: invert to light variant on dark background */
  .footer-brand .logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  @media (max-width: 768px) {
    .logo-img { height: 44px; max-width: 170px; }
  }
  @media (max-width: 480px) {
    .logo-img { height: 38px; max-width: 140px; }
  }

  /* ====================================================================
     MOBILE E-COMMERCE NORMALIZATION (standard phone patterns)
     ==================================================================== */

  /* ≤640px (phone) — 2-col product grids, tighter cards, compact hero */
  @media (max-width: 640px) {
    /* Product grids — 2 columns (standard e-comm on phone, NOT single col) */
    .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
    }
    /* Product cards — compact, tighter */
    .product-card {
      border-radius: 14px !important;
      border-width: 2px !important;
    }
    .product-image {
      height: 130px !important;
    }
    .product-body {
      padding: 10px !important;
    }
    .product-category {
      font-size: 10px !important;
      margin-bottom: 2px !important;
    }
    .product-name {
      font-size: 13px !important;
      margin-bottom: 2px !important;
      line-height: 1.15 !important;
    }
    .product-meta {
      font-size: 10px !important;
      margin-bottom: 4px !important;
    }
    .product-meta > span {
      font-size: 10px !important;
    }
    .product-rating {
      font-size: 10px !important;
    }
    .product-price {
      font-size: 14px !important;
    }
    .quick-add,
    .related-card-add {
      font-size: 11px !important;
      padding: 5px 8px !important;
    }
    .product-footer {
      gap: 4px !important;
    }
    .product-badge {
      font-size: 9px !important;
      padding: 3px 7px !important;
      top: 6px !important;
      left: 6px !important;
    }
    .product-fav {
      top: 6px !important;
      right: 6px !important;
    }
    /* Section padding — tighter */
    section {
      padding: 32px 14px !important;
    }
    /* Page-hero — tighter */
    .page-hero,
    .contact-hero,
    .about-hero,
    .bundles-hero,
    .faq-hero,
    .reviews-hero,
    .rewards-hero,
    .category-hero,
    .post-hero,
    .blog-hero {
      padding: 28px 16px 16px !important;
    }
    /* Headlines slightly tighter on mobile but readable */
    .page-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .bundles-hero h1,
    .faq-hero h1,
    .reviews-hero h1,
    .rewards-hero h1,
    .category-hero h1,
    .post-hero h1,
    .blog-hero h1 {
      font-size: clamp(28px, 9vw, 42px) !important;
    }
    /* Buttons — bigger tap targets, full-ish width */
    .btn-primary,
    .btn-secondary,
    .vault-cta,
    .hero-cta-primary,

    /* Container padding */
    .container {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  /* ≤480px (small phone) — even tighter */
  @media (max-width: 480px) {
    .product-image { height: 110px !important; }
    .product-name { font-size: 12px !important; }
    .product-price { font-size: 13px !important; }
    section { padding: 28px 12px !important; }
  }

  /* ≤380px (iPhone SE) — minimum sane */
  @media (max-width: 380px) {
    .products-grid {
      gap: 8px !important;
    }
    .product-image { height: 95px !important; }
    .product-body { padding: 8px !important; }
    .product-name { font-size: 11px !important; }
    .product-price { font-size: 12px !important; }
  }

/* ============================================
   BEHIND THE SCENES — Video placeholder section
   Replace .bts-thumb with YouTube iframes per the HTML comment in home.html
   ============================================ */
.bts-section {
  background: #fcfaf4;
  padding: 6px 32px;
}
.bts-section .section-header { margin-bottom: 8px; text-align: left; }
.bts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
}
.bts-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
}
.bts-card:hover { transform: translateY(-4px); }
.bts-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  border: 3px solid #1a1a1a;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
  transition: box-shadow 0.2s;
}
.bts-card:hover .bts-thumb { box-shadow: 6px 6px 0 #1a1a1a; }
/* Placeholder thumbnails — distinct gradients so each feels real before videos drop */
.bts-thumb-1 {
  background:
    linear-gradient(135deg, rgba(127,176,105,0.5) 0%, rgba(31,93,63,0.85) 100%),
    radial-gradient(circle at 30% 40%, #7fb069 0%, #1f5d3f 100%);
}
.bts-thumb-2 {
  background:
    linear-gradient(135deg, rgba(255,213,107,0.4) 0%, rgba(140,90,20,0.85) 100%),
    radial-gradient(circle at 70% 60%, #ffd56b 0%, #8c5a14 100%);
}
.bts-thumb-3 {
  background:
    linear-gradient(135deg, rgba(168,200,224,0.4) 0%, rgba(38,76,112,0.88) 100%),
    radial-gradient(circle at 50% 50%, #a8c8e0 0%, #264c70 100%);
}
.bts-thumb-4 {
  background:
    linear-gradient(135deg, rgba(255,140,90,0.45) 0%, rgba(140,55,15,0.88) 100%),
    radial-gradient(circle at 40% 70%, #ff8c5a 0%, #8c370f 100%);
}
.bts-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  background: rgba(255,255,255,0.95);
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 40px;
  color: #1a1a1a;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 4px 4px 0 #1a1a1a;
}
.bts-card:hover .bts-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ff6b35;
}
.bts-duration {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(26,26,26,0.9);
  color: #fcfaf4;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
}
.bts-card-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin-bottom: 4px;
  line-height: 1.25;
}
.bts-card-meta {
  font-size: 12px;
  color: #6b6b6b;
  font-weight: 500;
}
.bts-channel-link {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #6b6b6b;
  font-weight: 500;
}
.bts-channel-link a {
  color: #1f5d3f;
  font-weight: 700;
  text-decoration: underline;
}
.bts-channel-link a:hover { color: #ff6b35; }
/* Responsive: 4 → 2 on tablet, 2 → 1 on phone */
@media (max-width: 1024px) {
  .bts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .bts-section { padding: 48px 22px; }
  .bts-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bts-play { width: 44px; height: 44px; font-size: 20px; border-width: 2px; }
  .bts-card-title { font-size: 13px; }
  .bts-card-meta { font-size: 11px; }
  .bts-duration { font-size: 10px; padding: 3px 7px; }
}

/* ============ VAULT BADGE — stand out from $149 bundles ============ */
.bundles .product-badge.vault-badge {
  background: linear-gradient(135deg, #1a1a1a 0%, #1f5d3f 100%);
  color: #ffd56b;
  border: 2px solid #ffd56b;
  font-size: 10px;
  padding: 5px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 #1a1a1a;
}
@media (max-width: 1024px) {
  .bundles .product-badge.vault-badge { font-size: 8px; padding: 4px 8px; }
}

/* ====================================================================
   UNIFORM SECTION RHYTHM — every adjacent pair of homepage sections
   has the same 52px vertical gap (matches the FAMILY → PEOPLE SPEAK
   gap the user picked as the baseline). Top + bottom padding = 26px
   per section, so 26 + 26 = 52px gap between any two adjacent sections.
   Horizontal padding kept per-section to preserve existing container widths.
   Hero section excluded — it's the page intro and has its own scale.
   ==================================================================== */
.collections,
.effects-section,
section#vape,
.bundles,
.community-section,
.reviews,
.bts-section,
.newsletter {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}
/* Slightly tighter on phone — every section gets 36px gap (18+18) on phone */
@media (max-width: 640px) {
  .collections,
  .effects-section,
  section#vape,
  .bundles,
  .community-section,
  .reviews,
  .bts-section,
  .newsletter {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* ====================================================================
   BEHIND-THE-SCENES — YouTube CTA card (replaces empty placeholders)
   Single-card alternative; WP dev restores 2-card layout when videos land.
   ==================================================================== */
.bts-youtube-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 32px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1f1f 100%);
  border: 3px solid #1a1a1a;
  border-radius: 22px;
  text-decoration: none;
  color: #fcfaf4;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.bts-youtube-cta::before {
  content: "";
  position: absolute;
  top: -20px; right: -20px; bottom: -20px;
  width: 40%;
  background: radial-gradient(circle at 70% 50%, rgba(255,0,0,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.bts-youtube-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #ff6b35;
}
.bts-yt-icon {
  width: 72px; height: 72px;
  background: #ff0000;
  border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.bts-yt-icon iconify-icon { font-size: 44px; color: #fff; }
.bts-yt-body { position: relative; z-index: 1; }
.bts-yt-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ff6b35;
  margin-bottom: 6px;
}
.bts-yt-title {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fcfaf4;
  margin-bottom: 4px;
}
.bts-yt-sub {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 248, 240, 0.72);
  line-height: 1.4;
  margin: 0;
}
.bts-yt-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #ff6b35;
  color: #1a1a1a;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.bts-youtube-cta:hover .bts-yt-cta { background: #fcfaf4; }
@media (max-width: 768px) {
  .bts-youtube-cta {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    text-align: center;
  }
  .bts-yt-icon { margin: 0 auto; width: 56px; height: 56px; }
  .bts-yt-icon iconify-icon { font-size: 32px; }
  .bts-yt-title { font-size: 22px; }
  .bts-yt-sub { font-size: 13px; }
  .bts-yt-cta { justify-self: center; padding: 12px 20px; }
}

/* MOBILE-OVERFLOW-GUARD */
@media (max-width: 820px) {
  html, body { overflow-x: hidden !important; }
}

/* Dark variant of .dd-tag — dark bg, orange text. Used on the Bulk dropdown
   item so it visually distinguishes from the Bundles tag (orange bg, dark text).
   Matches the BULK badge palette used on the bulk product cards. */
.dd-tag.dd-tag-dark {
  background: #1a1a1a;
  color: #ff6b35;
}

/* ============================================================
   V3 HERO — full-bleed cinematic override
   Activated when .hero has the additional class .hero-cinematic.
   Takes over the section: photo fills the viewport, dark gradient
   at bottom for legibility, content overlays bottom-left.
   ============================================================ */
.hero.hero-cinematic {
  padding: 0;
  min-height: 78vh;
  background: #1a1a1a;          /* fallback while photo loads */
  display: flex;
  align-items: flex-end;        /* anchor content to bottom */
  position: relative;
  overflow: hidden;
}
.hero.hero-cinematic::before,
.hero.hero-cinematic::after {
  display: none;                /* kill the blur blobs from the old hero */
}

/* Background photo — fills the section, behind everything */
.hero.hero-cinematic .hero-bg-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero.hero-cinematic .hero-bg-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;     /* bias to the right where the bud sits */
  display: block;
}

/* Dark gradient overlay for headline legibility — sits between photo and content */
.hero.hero-cinematic .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(26, 26, 26, 0.55) 0%,
      rgba(26, 26, 26, 0.30) 40%,
      rgba(26, 26, 26, 0.00) 70%),
    linear-gradient(to bottom,
      rgba(26, 26, 26, 0.00) 35%,
      rgba(26, 26, 26, 0.45) 75%,
      rgba(26, 26, 26, 0.80) 100%);
  pointer-events: none;
}

/* Content sits on top of photo + overlay */
.hero.hero-cinematic .hero-inner {
  position: relative;
  z-index: 2;
  display: block;                /* override the old grid layout */
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 42px 64px;
}
.hero.hero-cinematic .hero-content {
  max-width: 640px;             /* keep text readable line length */
  color: #fcfaf4;
}

/* Headline — bigger + lighter, with subtle shadow for any photo */
.hero.hero-cinematic .hero-title {
  font-size: clamp(64px, 11vw, 152px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: #fcfaf4;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
  margin: 0 0 22px;
}
.hero.hero-cinematic .hero-title .word-1 { color: #fcfaf4; }
.hero.hero-cinematic .hero-title .word-2 { color: #ff6b35; }

/* Sub paragraph — lighter, readable on dark bg */
.hero.hero-cinematic .hero-sub {
  color: rgba(252, 250, 244, 0.92);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 24px;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero.hero-cinematic .hero-sub strong {
  color: #ff6b35;
  font-weight: 800;
}

/* Trust chips — translucent dark + backdrop blur so they read on any photo */
.hero.hero-cinematic .hero-trust {
  margin: 0 0 26px;
}
.hero.hero-cinematic .hero-trust-chip {
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(252, 250, 244, 0.18);
  color: #fcfaf4;
  font-weight: 700;
}
.hero.hero-cinematic .hero-trust-chip iconify-icon {
  color: #ff6b35;
}

/* CTAs — primary stays orange, secondary becomes outlined-white for contrast */
.hero.hero-cinematic .hero-ctas .btn-primary {
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
}
.hero.hero-cinematic .hero-ctas .btn-secondary {
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fcfaf4;
  border: 2px solid rgba(252, 250, 244, 0.55);
}
.hero.hero-cinematic .hero-ctas .btn-secondary:hover {
  background: #fcfaf4;
  color: #1a1a1a;
  border-color: #fcfaf4;
}

/* Tablet — slightly tighter padding, headline still big */
@media (max-width: 1024px) {
  .hero.hero-cinematic {
    min-height: 72vh;
  }
  .hero.hero-cinematic .hero-inner {
    padding: 60px 32px 52px;
  }
}

/* Mobile — anchor content to bottom, full overlay for legibility, smaller headline */
@media (max-width: 640px) {
  .hero.hero-cinematic {
    min-height: 78vh;
  }
  .hero.hero-cinematic .hero-bg-picture img {
    object-position: 60% 40%;
  }
  .hero.hero-cinematic .hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(26, 26, 26, 0.00) 25%,
        rgba(26, 26, 26, 0.55) 65%,
        rgba(26, 26, 26, 0.90) 100%);
  }
  .hero.hero-cinematic .hero-inner {
    padding: 32px 20px 36px;
  }
  .hero.hero-cinematic .hero-title {
    font-size: clamp(48px, 13vw, 80px);
    margin-bottom: 14px;
  }
  .hero.hero-cinematic .hero-sub {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .hero.hero-cinematic .hero-trust { margin-bottom: 20px; }
}

/* ============================================================
   V3 HERO — light variant (.hero-cinematic-light)
   For warm cream/peach product hero photos (Apple-style).
   Inverts text color (dark on light), softens the overlay,
   solidifies trust chips so they read on light background.
   ============================================================ */
.hero.hero-cinematic.hero-cinematic-light .hero-overlay {
  /* Soft cream fade at the bottom for legibility instead of dark vignette */
  background:
    linear-gradient(to bottom,
      rgba(252, 250, 244, 0.00) 55%,
      rgba(252, 250, 244, 0.55) 100%);
}
.hero.hero-cinematic.hero-cinematic-light .hero-title {
  color: #1a1a1a;
  text-shadow: 0 2px 24px rgba(252, 250, 244, 0.55);
}
.hero.hero-cinematic.hero-cinematic-light .hero-title .word-1 { color: #1f5d3f; }
.hero.hero-cinematic.hero-cinematic-light .hero-title .word-2 { color: #ff6b35; }
.hero.hero-cinematic.hero-cinematic-light .hero-trust-chip {
  background: rgba(252, 250, 244, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(26, 26, 26, 0.22);
  color: #1a1a1a;
  font-weight: 700;
}
.hero.hero-cinematic.hero-cinematic-light .hero-trust-chip iconify-icon {
  color: #1f5d3f;
}
.hero.hero-cinematic.hero-cinematic-light .hero-ctas .btn-primary {
  /* Primary already orange — bump shadow to 0 darkness on light bg */
  box-shadow: 5px 5px 0 #1a1a1a;
}
.hero.hero-cinematic.hero-cinematic-light .hero-ctas .btn-secondary {
  background: rgba(252, 250, 244, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
}
.hero.hero-cinematic.hero-cinematic-light .hero-ctas .btn-secondary:hover {
  background: #1a1a1a;
  color: #fcfaf4;
  border-color: #1a1a1a;
}

/* ============================================================
   V3 HERO — TRIPTYCH variant (.hero-triptych)
   Symmetric 3-column layout: product LEFT · headline CENTER · product RIGHT.
   Products are clickable links to their category pages. Unified warm
   cream background bridges the two product photos (which have matching
   warm cream/peach studio bgs from Nano Banana).
   ============================================================ */
.hero.hero-triptych {
  padding: 0;
  min-height: 70vh;
  /* Soft warm gradient that matches the studio bg of both product photos */
  background: linear-gradient(135deg, #f6e9d8 0%, #fcfaf4 50%, #f6e0c8 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero.hero-triptych::before,
.hero.hero-triptych::after {
  display: none;
}

.hero-tri-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Side products: pure beauty shots floating on the unified warm bg.
   Decorative only — not clickable, no hover, no tag. The centered CTAs own the
   conversion path; these photos just draw the eye. */
.hero-tri-product {
  position: relative;
  display: block;
  pointer-events: none;     /* belt + suspenders: photos do nothing on hover */
}
.hero-tri-product picture {
  display: block;
  width: 100%;
}
.hero-tri-product img {
  display: block;
  width: 100%;
  height: auto;
  /* Photos already have matching warm bgs — they blend seamlessly with the section */
}

/* Center content — fully centered alignment */
.hero-tri-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.hero-tri-content .hero-title {
  font-size: clamp(64px, 8.5vw, 132px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  color: #1a1a1a;
}
.hero-tri-content .hero-title .word-1 { color: #1f5d3f; }
.hero-tri-content .hero-title .word-2 { color: #ff6b35; }

.hero-tri-content .hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  max-width: 460px;
}
.hero-tri-content .hero-trust-chip {
  background: rgba(252, 250, 244, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(26, 26, 26, 0.18);
  color: #1a1a1a;
  font-weight: 700;
}
.hero-tri-content .hero-trust-chip iconify-icon {
  color: #1f5d3f;
}

.hero-tri-content .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

/* Tablet — products shrink slightly, content stays prominent */
@media (max-width: 1024px) {
  .hero-tri-inner {
    grid-template-columns: 0.85fr 1.2fr 0.85fr;
    gap: 16px;
    padding: 44px 24px;
  }
  .hero-tri-content .hero-title {
    font-size: clamp(56px, 9vw, 96px);
  }
}

/* Mobile — stack: products in a 2-col mini row on top, content below */
@media (max-width: 720px) {
  .hero.hero-triptych {
    min-height: 0;
  }
  .hero-tri-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "content content";
    gap: 14px;
    padding: 28px 18px 36px;
  }
  .hero-tri-left { grid-area: left; }
  .hero-tri-right { grid-area: right; }
  .hero-tri-content {
    grid-area: content;
    margin-top: 8px;
    gap: 16px;
  }
  .hero-tri-content .hero-title {
    font-size: clamp(48px, 13vw, 76px);
  }
  .hero-tri-content .hero-trust {
    max-width: 100%;
  }
}

/* ============================================================
   V3 HERO — DIPTYCH variant (.hero-diptych)
   Two big photos fill the hero (50/50 split). Products are positioned
   toward the OUTER edges so the seam between photos stays empty for the
   centered text overlay. Dark headline (green + orange) reads cleanly
   on the warm cream/peach photo backgrounds.
   ============================================================ */
.hero.hero-diptych {
  padding: 0;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
  background: #f6e9d8;        /* fallback while photos load */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero.hero-diptych::before,
.hero.hero-diptych::after {
  display: none;              /* kill any inherited blur blobs */
}

/* Background photos: 2 halves, each 50% width, full hero height */
.hero-dip-photos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 0;
}
.hero-dip-photo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-dip-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Left photo: bias the JAR to the LEFT edge, leaving cream space on the right
   side of the half (toward the seam) for clean text overlay. */
.hero-dip-photo-left img {
  object-position: 25% 50%;
}
/* Right photo: bias the PEN to the RIGHT edge, leaving cream space on the left
   side of the half (toward the seam). */
.hero-dip-photo-right img {
  object-position: 75% 50%;
}

/* Centered text overlay — sits on top of both photos at the seam */
.hero-dip-overlay {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero.hero-diptych .hero-title {
  font-size: clamp(72px, 10vw, 156px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  color: #1a1a1a;
}
.hero.hero-diptych .hero-title .word-1 { color: #1f5d3f; }
.hero.hero-diptych .hero-title .word-2 { color: #ff6b35; }

.hero.hero-diptych .hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  max-width: 520px;
}
.hero.hero-diptych .hero-trust-chip {
  background: rgba(252, 250, 244, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(26, 26, 26, 0.22);
  color: #1a1a1a;
  font-weight: 700;
}
.hero.hero-diptych .hero-trust-chip iconify-icon {
  color: #1f5d3f;
}

.hero.hero-diptych .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.hero.hero-diptych .hero-ctas .btn-secondary {
  background: rgba(252, 250, 244, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Tablet — slightly tighter overlay padding */
@media (max-width: 1024px) {
  .hero.hero-diptych { min-height: 70vh; }
  .hero.hero-diptych .hero-title {
    font-size: clamp(64px, 10vw, 116px);
  }
}

/* Mobile — stack the photos vertically + position overlay between them */
@media (max-width: 720px) {
  .hero.hero-diptych {
    min-height: 0;
    flex-direction: column;
  }
  .hero-dip-photos {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr 1fr;   /* still 2 cols on mobile (smaller) */
    grid-template-rows: auto;
    height: 38vh;
    min-height: 280px;
  }
  .hero-dip-photo-left img { object-position: 30% 50%; }
  .hero-dip-photo-right img { object-position: 70% 50%; }
  .hero-dip-overlay {
    position: relative;
    padding: 28px 18px 36px;
    background: #f6e9d8;          /* warm cream extends the photo aesthetic */
    z-index: 2;
    gap: 16px;
    max-width: 100%;
  }
  .hero.hero-diptych .hero-title {
    font-size: clamp(48px, 13vw, 80px);
  }
  .hero.hero-diptych .hero-trust { max-width: 100%; }
}

/* ============================================================
   V3.2 HERO — .hero-bg
   Single full-bleed hero photo (products on RIGHT, empty cream LEFT).
   Text overlay anchored LEFT, always overlays photo at every breakpoint.
   Trust chips locked to one row at every viewport (long/short text swap).
   ============================================================ */
.hero.hero-bg {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  background: #f2e0cc;
  display: flex;
  align-items: center;
  padding: 0;
}
.hero.hero-bg::before,
.hero.hero-bg::after { display: none; }

.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero-bg-photo img {
  width: 100%;
  height: 100%;
  /* Cover: photo fills the container width at every viewport. Anchor bottom-right
     so products stay in frame; the source's empty cream area on the left flows
     naturally with no visible patch. */
  object-fit: cover;
  object-position: right bottom;
  display: block;
}

.hero-bg-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  justify-content: flex-start;
}

.hero-bg-overlay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
  max-width: 56%;
}

.hero.hero-bg .hero-title {
  font-size: clamp(64px, 8.4vw, 140px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  text-align: left;
  color: #1a1a1a;
}
.hero.hero-bg .hero-title .word-1 { color: #1f5d3f; }
.hero.hero-bg .hero-title .word-2 { color: #ff6b35; }

.hero.hero-bg .hero-trust {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}
.hero.hero-bg .hero-trust-chip {
  background: rgba(252, 250, 244, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(26, 26, 26, 0.22);
  color: #1a1a1a;
  font-weight: 700;
  flex-shrink: 0;
}
.hero.hero-bg .hero-trust-chip iconify-icon {
  color: #1f5d3f;
}

.hero.hero-bg .hero-ctas {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  flex-wrap: wrap;
}

/* Tablet — overlay tighter, products still on right */
@media (max-width: 1024px) {
  .hero.hero-bg { min-height: 64vh; }
  .hero-bg-inner { padding: 0 32px; }
  .hero-bg-overlay { max-width: 60%; }
  .hero.hero-bg .hero-title {
    font-size: clamp(56px, 9.5vw, 116px);
  }
}

/* Mobile — text STILL overlays photo (no stacking), with subtle scrim for legibility.
   The mobile hero image is portrait/landscape that keeps products visible on the
   right; overlay sits on the left with cream-to-transparent gradient backing. */
@media (max-width: 720px) {
  .hero.hero-bg {
    min-height: 72vh;
    align-items: center;
  }
  .hero-bg-photo img {
    /* Mobile: bias right (so products stay in frame) AND fully bottom-anchored
       (gummies sit at the very bottom edge of the source — anything less than
       100% bottom clips them). */
    object-position: 75% bottom;
  }
  .hero-bg-inner {
    padding: 0 20px;
  }
  .hero-bg-overlay {
    max-width: 78%;
    gap: 16px;
    position: relative;
  }
  /* Scrim behind text so it reads on any photo region */
  .hero-bg-overlay::before {
    content: '';
    position: absolute;
    inset: -16px -32px -16px -20px;
    background: linear-gradient(to right,
      rgba(252, 250, 244, 0.96) 0%,
      rgba(252, 250, 244, 0.86) 45%,
      rgba(252, 250, 244, 0.45) 80%,
      rgba(252, 250, 244, 0) 100%);
    z-index: -1;
    border-radius: 12px;
  }
  .hero.hero-bg .hero-title {
    font-size: clamp(48px, 14vw, 84px);
  }
  .hero.hero-bg .hero-trust { gap: 5px; }
  .hero.hero-bg .hero-trust-chip {
    padding: 5px 10px;
    font-size: 11px;
  }
  .hero.hero-bg .hero-trust-chip iconify-icon { font-size: 12px; }
}

/* Live channel preview card — replaces the old thin .community-strip ribbon.
   Sticker-card vocabulary (2px border, 5px offset shadow). Two columns on
   desktop, stacks on mobile. Reads as "look at the channel in real time". */
.community-strip-section {
  padding: 16px 0 !important;
  background: #fcfaf4;
}

/* Slim Telegram CTA card — community-capture closer placed before footer.
   Telegram-blue side panel + 3 benefit chips + green CTA pill. Replaces the
   earlier chat-bubble preview card; bubbles were doing less work after the
   content went evergreen, and the slim shape better matches the page-closer role. */
.community-strip-section {
  padding: 20px 16px !important;
  background: #fcfaf4;
}
.tg-cta-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  background: #fcfaf4;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #1a1a1a;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tg-cta-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #1a1a1a;
}
.tg-cta-panel {
  flex: 0 0 96px;
  background: #229ED9;
  border-right: 2px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #fcfaf4;
}
.tg-cta-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 22px;
  gap: 10px;
  min-width: 0;
}
.tg-cta-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tg-cta-header strong {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.tg-cta-sub {
  font-size: 11px;
  font-weight: 800;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tg-cta-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tg-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f5f3eb;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
}
.tg-perk-icon { font-size: 13px; }
.tg-cta-button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  margin-right: 18px;
  background: #1f5d3f;
  color: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #1a1a1a;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: background 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.tg-cta-card:hover .tg-cta-button { background: #2a7a52; }

@media (max-width: 768px) {
  .tg-cta-card { flex-wrap: wrap; }
  .tg-cta-panel {
    flex: 0 0 100%;
    height: 56px;
    border-right: none;
    border-bottom: 2px solid #1a1a1a;
    font-size: 28px;
  }
  .tg-cta-body {
    flex: 1 1 100%;
    padding: 14px 16px 4px;
  }
  .tg-cta-button {
    align-self: stretch;
    margin: 0 16px 16px;
    justify-content: center;
  }
  .tg-cta-perks { gap: 6px; }
  .tg-perk { font-size: 11px; padding: 5px 10px; }
}