/* ============================================
   flower.css
   Extracted from flower.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; } }
  /* ========================================
     SHARED STYLES (header, footer, promo bar, products)
     Same patterns as shop.html so developer reuses them.
     ======================================== */
  *, *::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;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* Promo bar */
  .promo-bar {
    background: #1a1a1a;
    color: #ff6b35;
    padding: 12px 0;
    font-size: 14px; font-weight: 600;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 9999;
  }
  .promo-track {
    display: flex; gap: 48px;
    animation: scroll 24s linear infinite;
    white-space: nowrap; width: max-content;
  }
  .promo-track span { display: inline-flex; align-items: center; gap: 12px; }
  /* Wholesale link inside the scrolling marquee — match span layout */
  .promo-track a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
  }
  .promo-track a > .promo-highlight {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  /* Canonical wholesale link in promo bar — styled as orange pill */
  .promo-track .promo-wholesale {
    background: #ff6b35;
    color: #1a1a1a;
  }


  .promo-track .promo-highlight {
    background: #ff6b35; color: #1a1a1a;
    padding: 4px 14px; border-radius: 980px;
    font-weight: 800; letter-spacing: 0.02em;
  }
  .promo-track .promo-highlight iconify-icon { color: #1a1a1a; }
  .promo-track iconify-icon { color: #1f5d3f; }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* 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;
    background: #1f5d3f; color: #fcfaf4;
    padding: 8px 22px;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
    line-height: 1; 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; margin: 1px 0;
  }
  .nav-links {
    display: flex; gap: 14px; list-style: none;
  }
  .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, .nav-links a.active { background: #ff6b35; }
  .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: #ff6b35; 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;
  }

  /* ========================================
     PAGE-SPECIFIC: CATEGORY (Flower)
     ======================================== */

  /* Category hero — bigger, more visual than shop page */
  .category-hero {
    position: relative;
    padding: 14px 32px 10px;
    border-bottom: 3px solid #1a1a1a;
    background:
      radial-gradient(ellipse 60% 80% at 80% 50%, rgba(31, 93, 63, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse 50% 70% at 10% 100%, rgba(255, 107, 53, 0.12) 0%, transparent 60%),
      #fcfaf4;
    overflow: hidden;
  }
  /* Decorative leaf icon in the background */
  .category-hero-decoration {
    position: absolute;
    top: 50%; right: -40px;
    transform: translateY(-50%) rotate(-12deg);
    font-size: 320px;
    color: rgba(31, 93, 63, 0.08);
    pointer-events: none;
    z-index: 1;
  }
  .category-hero-inner {
    max-width: 1400px; margin: 0 auto;
    position: relative; z-index: 2;
  }
  .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    color: #6b6b6b;
    margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .breadcrumb a:hover { color: #ff6b35; }
  .breadcrumb iconify-icon { font-size: 10px; }
  .category-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    transform: rotate(-1deg);
  }
  .category-eyebrow iconify-icon { color: #ff6b35; }
  .category-hero h1 {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900; letter-spacing: -0.05em;
    line-height: 0.9;
    margin-bottom: 20px;
  }
  .category-hero h1 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .category-tagline {
    font-size: 19px;
    line-height: 1.55;
    color: #444;
    max-width: 640px;
    margin-bottom: 10px;
    font-weight: 500;
  }
  /* Category stats strip — quick visual proof points */
  .category-stats {
    display: flex; gap: 36px; flex-wrap: wrap;
    margin-top: 8px;
  }
  .category-stat .number {
    font-size: 36px; font-weight: 900;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
  }
  .category-stat .label {
    font-size: 12px; font-weight: 700;
    color: #6b6b6b;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 4px;
  }

  /* Strain type quick-tabs (sub-category) */
  .strain-tabs {
    max-width: 1400px; margin: 0 auto;
    padding: 32px 32px 0;
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .strain-tab {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    transition: background 0.2s, color 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .strain-tab:hover { background: #ff6b35; }
  .strain-tab.active {
    background: #1a1a1a; color: #ff6b35;
  }
  .strain-tab .count {
    font-size: 11px; opacity: 0.7; font-weight: 600;
  }

  /* Toolbar (sort + count) */
  .toolbar {
    max-width: 1400px; margin: 18px auto 0;
    padding: 0 32px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
  }
  .result-count {
    font-size: 15px; font-weight: 600;
    color: #555;
  }
  .result-count strong { color: #1a1a1a; }
  .sort-select {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
  }
  .sort-select:hover { background: #ff6b35; color: #1a1a1a; }

  /* Shop layout */
  .shop-layout {
    max-width: 1400px; margin: 0 auto;
    padding: 32px 32px 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .filter-sidebar { position: sticky; top: 100px; align-self: start; }
  .filter-group {
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
  }
  .filter-group h4 {
    font-size: 14px; font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
  }
  .filter-options { display: flex; flex-direction: column; gap: 8px; }
  .filter-option {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
  }
  .filter-option:hover { background: #fcfaf4; }
  .filter-option input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #ff6b35;
    cursor: pointer;
  }
  .filter-option .count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
  }
  /* Price range slider mock */
  .price-range {
    margin: 8px 0 4px;
  }
  .price-range-values {
    display: flex; justify-content: space-between;
    font-size: 13px; font-weight: 700;
    margin-top: 12px;
  }
  .price-range input[type="range"] {
    width: 100%;
    accent-color: #ff6b35;
  }
  .filter-clear {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: background 0.2s, color 0.2s;
  }
  .filter-clear:hover { background: #1a1a1a; color: #fcfaf4; }

  .mobile-filter-btn {
    display: none;
    padding: 12px 20px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    align-items: center; gap: 8px;
    margin-bottom: 20px;
  }

  /* Product grid */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1320px;
    margin: 0 auto;
  }
  .product-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;
  }
  .product-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 #1a1a1a;
  }
  .product-image {
    position: relative;
    height: 240px;
    border-bottom: 3px solid #1a1a1a;
    background-size: cover; background-position: center;
  }
  .product-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 12px;
    background: #1a1a1a; color: #fcfaf4;
    border-radius: 980px;
    font-size: 11px; font-weight: 800;
    transform: rotate(-3deg);
  }
  .product-badge.sale { background: #ff6b35; color: #1a1a1a; }
  /* Strain type chip in upper right */
  .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;
  }
  .strain-chip.indica { background: #c5a0f7; }
  .strain-chip.sativa { background: #ffd56b; }
  .strain-chip.hybrid { background: #7fb069; color: #1a1a1a; }
  .product-body { padding: 20px; }
  .product-name {
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .product-meta {
    font-size: 13px; color: #6b6b6b;
    margin-bottom: 14px;
    display: flex; gap: 12px;
    flex-wrap: wrap;
  }
  .product-meta span { display: inline-flex; align-items: center; gap: 4px; }
  .product-rating {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #6b6b6b;
  }
  .product-rating .stars { color: #ff6b35; letter-spacing: 1px; }
  .product-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 2px dashed #e0d8c8;
    padding-top: 14px;
  }
  .product-price {
    font-size: 20px; font-weight: 900;
    letter-spacing: -0.02em;
  }
  .product-price .strike {
    color: #b0b0b0;
    text-decoration: line-through;
    font-size: 14px; font-weight: 600;
    margin-right: 8px;
  }
  .quick-add {
    padding: 10px 18px;
    background: #1a1a1a;
    color: #1f5d3f;
    border-radius: 980px;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.2s;
  }
  .quick-add:hover { background: #1f5d3f; color: #fcfaf4; }

  /* Pagination */
  .pagination {
    margin-top: 10px;
    display: flex; justify-content: center; gap: 8px;
    flex-wrap: wrap;
  }
  .pagination button {
    min-width: 44px; height: 44px;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    background: #fff;
    font-size: 14px; font-weight: 800;
    transition: background 0.2s, color 0.2s;
  }
  .pagination button:hover { background: #ff6b35; }
  .pagination button.active { background: #1a1a1a; color: #ff6b35; }
  .pagination button.disabled { opacity: 0.4; cursor: not-allowed; }

  /* Educational content section (SEO + customer education) */
  .category-edu {
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 14px 32px;
    position: relative;
    overflow: hidden;
  }
  .category-edu::before {
    content: "GROWN RIGHT · GROWN RIGHT · GROWN RIGHT · GROWN RIGHT · ";
    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;
  }
  .edu-inner {
    max-width: 1200px; margin: 0 auto;
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .edu-content h2 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900; letter-spacing: -0.04em;
    line-height: 1; margin-bottom: 14px;
  }
  .edu-content h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .edu-content p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 248, 240, 0.8);
    margin-bottom: 16px;
  }
  .edu-faq {
    display: flex; flex-direction: column; gap: 12px;
  }
  .edu-faq-item {
    background: rgba(255, 248, 240, 0.05);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 16px;
    padding: 20px 24px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .edu-faq-item:hover { background: rgba(255, 248, 240, 0.08); }
  .edu-faq-item summary {
    font-size: 16px; font-weight: 800;
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
  }
  .edu-faq-item summary::-webkit-details-marker { display: none; }
  .edu-faq-item summary iconify-icon {
    color: #ff6b35;
    font-size: 18px;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .edu-faq-item[open] summary iconify-icon { transform: rotate(180deg); }
  .edu-faq-item p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 248, 240, 0.7);
  }
  
  @media (max-width: 820px) { .nav-links { display: none; } }
@media (max-width: 1024px) {
    .edu-inner { grid-template-columns: 1fr; gap: 40px; }
  }

  /* Footer */
  footer {
    background: #1a1a1a;
    color: rgba(255, 248, 240, 0.7);
    padding: 40px 32px 28px;
    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 { margin-bottom: 20px; }
  .footer-brand p {
    margin: 20px 0 24px;
    line-height: 1.6;
    max-width: 320px;
  }
  .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: #ff6b35; font-size: 18px;
    transition: background 0.2s;
  }
  .footer-socials a:hover { background: #ff6b35; color: #1a1a1a; }
  .footer-col h5 {
    font-size: 13px; font-weight: 800;
    color: #ff6b35; 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: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; }

  /* Responsive */
  @media (max-width: 1024px) {
    
    .shop-layout {
      grid-template-columns: 1fr;
      padding: 32px 22px 60px;
    }
    .filter-sidebar { position: static; display: none; }
    .filter-sidebar.open { display: block; }
    .mobile-filter-btn { display: inline-flex; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .category-hero-decoration { font-size: 200px; right: -60px; }
  }
  @media (max-width: 640px) {
    .nav-icons iconify-icon:not(.cart-btn iconify-icon) { display: none; }
    .category-hero { padding: 40px 22px 28px; }
    .products-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .category-stats { gap: 20px; }
    .category-hero-decoration { display: none; }
  }

  /* ============== UNIFIED DROPDOWN NAV ============== */
  .nav-item { position: relative; }
  .nav-trigger { display: inline-flex; align-items: center; gap: 4px; }
  .nav-trigger .nav-caret {
    font-size: 11px;
    transition: transform 0.2s;
  }
  .nav-item.has-dropdown:hover .nav-trigger .nav-caret { transform: rotate(180deg); }
  .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;
  }
  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -17px; left: 0; right: 0;
    height: 17px;
  }
  .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: 300px; }
  .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 !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; }

  /* =========== 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; } }

  /* =========== 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; }
  }

  /* Cannabinoid pills (THC / CBD) */

  .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);
    }
  }
/* Minimal category label bar (left-aligned big title) */
.category-label-bar {
  background: #fcfaf4;
  border-bottom: 3px solid #1a1a1a;
  padding: 16px 32px 12px;
}
.category-label-bar .container {
  max-width: 1320px;
  margin: 0 auto;
}
.category-label-bar .category-label-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.category-label-bar .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.category-label-bar .breadcrumb a:hover { color: #ff6b35; }
.category-label-bar .breadcrumb iconify-icon { font-size: 10px; }
.category-title-big {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1a1a1a;
  margin: 0;
}
.category-title-icon {
  font-size: 0.85em;
  color: #ff6b35;
}
@media (max-width: 640px) {
  .category-label-bar { padding: 24px 20px 20px; }
  .category-title-big { font-size: 36px; gap: 12px; }
}


/* ============== SHOP DROPDOWN: 3-COLUMN MEGA-MENU (Category + Feel + More) ============== */
.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; }


/* ============== CATEGORY FEEL CHIPS (mood.com pattern) ============== */
.category-feel-chips {
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 18px 32px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.category-feel-label {
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.feel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.feel-chip iconify-icon { font-size: 14px; }
.feel-chip:hover { background: #ff6b35; color: #1a1a1a; }
.feel-chip-all { background: #1a1a1a; color: #ff6b35; }
.feel-chip-all:hover { background: #ff6b35; color: #1a1a1a; }
@media (max-width: 640px) {
  /* Horizontal scroll rail — same pattern as .shop-cat-circles */
  .category-feel-chips {
    padding: 14px 20px 4px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }
  .category-feel-chips::-webkit-scrollbar { height: 4px; }
  .category-feel-chips::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 4px; }
  .category-feel-label {
    width: auto;
    margin-bottom: 0;
    margin-right: 2px;
    flex: 0 0 auto;
    align-self: center;
  }
  .feel-chip {
    font-size: 12px;
    padding: 7px 12px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Strain-type sub-category tabs — also horizontal scroll on mobile */
  .strain-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    padding: 18px 20px 4px;
    gap: 8px;
  }
  .strain-tabs::-webkit-scrollbar { height: 4px; }
  .strain-tabs::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 4px; }
  .strain-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 13px;
  }
}

  /* ====================================================================
     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;
    }
  }

  /* ====================================================================
     Refine drawer + load-more (mood.com pattern — same as shop.css)
     ==================================================================== */
  .toolbar-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .refine-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 980px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    border: 2px solid #1a1a1a;
    transition: background 0.2s, color 0.2s;
  }
  .refine-btn:hover { background: #ff6b35; color: #1a1a1a; }
  .refine-btn iconify-icon { font-size: 16px; }
  .refine-btn .refine-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    background: #ff6b35; color: #1a1a1a;
    border-radius: 980px;
    font-size: 11px; font-weight: 900;
    margin-left: 2px;
  }
  .refine-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
  }
  body:has(.refine-drawer.open) .refine-backdrop { opacity: 1; pointer-events: auto; }
  .refine-drawer.open + .refine-backdrop { opacity: 1; pointer-events: auto; }
  .refine-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #fff;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  }
  .refine-drawer.open { transform: translateX(0); }
  .refine-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 2px solid #1a1a1a;
    background: #fcfaf4;
  }
  .refine-drawer-head h3 {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
  }
  .refine-close {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(26,26,26,0.08);
    color: #1a1a1a;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
  }
  .refine-close:hover { background: #1a1a1a; color: #fcfaf4; }
  .refine-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 24px;
  }
  .refine-drawer .filter-group {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 14px;
  }
  .refine-drawer .filter-group h4 {
    font-size: 12px; font-weight: 900;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #6b6b6b;
  }
  .refine-drawer .filter-options { display: flex; flex-direction: column; gap: 8px; }
  .refine-drawer .filter-option {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
  }
  .refine-drawer .filter-option:hover { background: #fcfaf4; }
  .refine-drawer .filter-option input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #ff6b35;
    cursor: pointer;
  }
  .refine-drawer .filter-option .count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
  }
  .refine-drawer-foot {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 2px solid #1a1a1a;
    background: #fcfaf4;
  }
  .refine-clear {
    padding: 12px;
    background: transparent;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
  }
  .refine-clear:hover { background: #1a1a1a; color: #fcfaf4; }
  .refine-apply {
    padding: 12px;
    background: #ff6b35;
    color: #1a1a1a;
    border-radius: 12px;
    font-size: 14px; font-weight: 900;
    cursor: pointer;
    border: 2px solid #1a1a1a;
  }
  .refine-apply:hover { background: #1a1a1a; color: #ff6b35; }

  /* Load more button */
  .load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
  }
  .load-more-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px;
    background: #1a1a1a;
    color: #1a1a1a;
    border-radius: 980px;
    font-size: 15px; font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 2px solid #1a1a1a;
    transition: background 0.2s, color 0.2s, transform 0.2s;
  }
  .load-more-btn:hover {
    background: #1f5d3f;
    color: #fcfaf4;
    transform: translateY(-2px);
  }
  .load-more-btn iconify-icon { font-size: 18px; }
  .load-more-meta {
    font-size: 13px; font-weight: 500;
    color: #6b6b6b;
  }
  .load-more-meta strong { color: #1a1a1a; font-weight: 800; }

  /* Hide mobile-filter-btn (no longer used) */
  .mobile-filter-btn { display: none !important; }

  @media (max-width: 768px) {
    .refine-drawer { max-width: 100%; }
  }
  @media (max-width: 640px) {
    .toolbar-controls { flex-wrap: wrap; }
    .load-more-btn { padding: 14px 28px; font-size: 14px; }
  }

  /* Rating now shown — bundles-style card pattern includes ★★★★★ row */
  .products-grid .product-card .product-rating { display: flex; }


  /* === 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,
    .welcome-cta {
      padding: 12px 18px !important;
      font-size: 14px !important;
    }
    /* Container padding */
    .container {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  /* ≤480px (small phone) — even tighter */
  @media (max-width: 480px) {
    .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; }
  }

/* ====================================================================
   PROMO BAR — ONE horizontal line on every viewport (no marquee, no wrap)
   Overrides the old auto-scroll animation. Long copy on desktop, short on phone.
   ==================================================================== */
.promo-bar {
  padding: 10px 12px !important;
  overflow: hidden !important;
}
.promo-track {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 1400px;
  margin: 0 auto !important;
  animation: none !important;
}
.promo-track > span,
.promo-track > a { flex-shrink: 0 !important; }
.promo-track .short { display: none; }
.promo-track .long { display: inline; }
@media (max-width: 820px) {
  .promo-bar { padding: 8px 10px !important; font-size: 11px !important; }
  .promo-track { gap: 14px !important; }
  .promo-track .promo-highlight { padding: 2px 8px !important; font-size: 11px !important; }
  .promo-track .short { display: inline; }
  .promo-track .long { display: none; }
}
@media (max-width: 480px) {
  .promo-bar { padding: 7px 6px !important; font-size: 10px !important; }
  /* Tightened: gap 10→7 + highlight pad 7→5 to fit all 3 items in 390px viewport */
  .promo-track { gap: 7px !important; overflow: hidden !important; max-width: 100% !important; }
  .promo-track .promo-highlight { padding: 2px 6px !important; font-size: 10px !important; }
  .promo-track iconify-icon { font-size: 11px !important; }
}
@media (max-width: 380px) {
  .promo-bar { padding: 6px 6px !important; font-size: 9px !important; }
  .promo-track { gap: 7px !important; }
  .promo-track .promo-highlight { padding: 2px 6px !important; font-size: 9px !important; }
}

/* ============== QTY STEPPER + ADD BUTTON (Shopify pattern, matches bundles + homepage) ============== */
.bundle-action-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.qty-stepper {
  display: flex; align-items: center;
  background: #fff;
  border-radius: 980px;
  flex-shrink: 0;
  border: 2px solid #1a1a1a;
}
.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;
}
.qty-btn:hover { background: #ede4d3; }
.qty-input {
  width: 26px; text-align: center;
  background: transparent; border: none;
  font-size: 14px; font-weight: 800;
  color: #1a1a1a;
  padding: 0;
  pointer-events: none;
}
.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;
}
.bundle-add-btn:hover { background: #ff6b35; color: #1a1a1a; }
.bundle-add-btn:active { transform: scale(0.97); }
.bundle-add-btn.added { background: #7fb069; color: #1a1a1a; }
.bundle-add-btn iconify-icon { font-size: 14px; }
@media (max-width: 640px) {
  .bundle-action-row { gap: 6px; margin-top: 8px; }
  .qty-btn { width: 24px; height: 26px; font-size: 13px; }
  .qty-input { width: 20px; font-size: 12px; }
  .bundle-add-btn { font-size: 11px; min-height: 28px; }
  .bundle-add-btn iconify-icon { font-size: 12px; }
}

/* ============== EFFECT CHIP — top-right of product cards ============== */
.effect-chip {
  position: absolute; top: 12px; right: 12px;
  padding: 5px 12px;
  border-radius: 980px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 2px solid #1a1a1a;
  color: #1a1a1a;
  backdrop-filter: blur(4px);
  background: rgba(255, 248, 240, 0.92);
}
.effect-chip::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:#1a1a1a; vertical-align:middle; }

.effect-chip.effect-chill::before { background: #4FA8D8; }
.effect-chip.effect-sleep::before { background: #8A6FC0; }
.effect-chip.effect-focus::before { background: #F0682E; }
.effect-chip.effect-social::before { background: #D99A2B; }
.effect-chip.effect-energy::before { background: #D4B800; }
.effect-chip.effect-relief::before { background: #E85D75; }
.effect-chip.effect-happy::before { background: #E0A93C; }
.effect-chip.effect-creative::before { background: #3F8C4F; }
.effect-chip.effect-aroused::before { background: #C9344F; }
.effect-chip.effect-soothing::before { background: #5E9DB5; }
@media (max-width: 640px) {
  .effect-chip { font-size: 9px; padding: 3px 8px; top: 8px; right: 8px; border-width: 1px; }
}


/* ============== UNIFIED CATEGORY GRID — match flower.html on all 4 pages ============== */
/* Pin 4-col on desktop + most tablets; drop to 3-col only on narrow tablet; 2-col on phone */
@media (min-width: 769px) {
  .products-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .product-image { height: 200px !important; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  /* removed the height: 110px override for image consistency with flower */
  .product-image { height: 130px !important; }
}

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


/* ============================================================
   CARD ADD CONTROL — DoorDash-style morphing qty stepper
   Default (data-qty="0"): round orange + button.
   With qty: morphs into [- N +] green pill.
   See home.css for the original; duplicated here for per-page bundling.
   ============================================================ */
.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); }
.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;
}
.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%; }
.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); }

.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; }
}

/* Merged price+stepper row — price left, stepper right (same as home pattern) */
.product-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-footer-row { margin-top: 6px; }


/* 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;
}

/* Category title: brand green→orange gradient (matches section-title style) */
.category-title-big .cat-word{background:linear-gradient(135deg,#1f5d3f 0%,#ff6b35 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ===== Left filter rail (desktop) — replaces the stacked horizontal filter bars ===== */
.shop-layout { display:grid; grid-template-columns: 248px 1fr; gap:30px; max-width:1360px; margin:0 auto; padding:28px 32px 72px; align-items:start; }
.cat-rail { position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; background:#fff; border:2.5px solid #1a1a1a; border-radius:16px; box-shadow:5px 5px 0 #1a1a1a; padding:20px 18px; max-height:calc(100vh - 110px); overflow:auto; }
.rail-title { font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#888; margin:0 0 9px; }
.rail-strains { display:flex; flex-direction:column; gap:5px; }
.rail-strain { display:flex; align-items:center; gap:8px; padding:8px 11px; background:transparent; border:2px solid transparent; border-radius:10px; font-family:inherit; font-size:13.5px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; }
.rail-strain:hover { background:#f6f1e7; }
.rail-strain.active { background:#1a1a1a; color:#fcfaf4; }
.rail-strain.active .count { color:#ff6b35; }
.rail-strain .count { margin-left:auto; font-size:11.5px; font-weight:700; color:#999; }
.rail-feels { display:flex; flex-wrap:wrap; gap:6px; }
.cat-rail .feel-chip { font-size:11.5px; padding:5px 10px; }
.rail-option { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px; font-weight:600; color:#3a3a3a; cursor:pointer; }
.rail-option input { width:16px; height:16px; accent-color:#1f5d3f; }
.rail-option .count { margin-left:auto; font-size:11.5px; color:#999; }
/* Right column: grid + toolbar lose their page-centering inside the layout */
.shop-layout .products-grid { grid-template-columns:repeat(3,1fr) !important; max-width:none; margin:0; padding:0; gap:18px !important; }
.shop-layout .toolbar { max-width:none; margin:0 0 20px; padding:0; }
/* Rail replaces Refine on desktop; drawer remains the mobile path */
.shop-layout .refine-btn { display:none; }
@media (max-width:1024px) {
  .shop-layout { grid-template-columns:1fr; padding:20px 20px 56px; }
  .cat-rail { display:none; }
  .shop-layout .refine-btn { display:inline-flex; }
  .shop-layout .products-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px) { .shop-layout .products-grid { grid-template-columns:1fr !important; } }

/* Weight-variant pills + price ranges on cards (competitor teardown takeaway) */
.card-weights { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 10px; }
.card-weights span { font-size:10.5px; font-weight:700; padding:2px 8px; border:1.5px solid #e2dccd; border-radius:980px; color:#6b6b6b; background:#faf7f0; }

.cat-rail .feel-chip .count { font-size:10px; color:#999; font-weight:700; margin-left:3px; }

/* Feel chips inside the mobile refine drawer (parity with the desktop rail) */
.refine-drawer .rail-feels { display: flex; flex-wrap: wrap; gap: 6px; }
.refine-drawer .feel-chip { font-size: 12px; padding: 6px 11px; }
.refine-drawer .feel-chip .count { font-size: 10px; color: #999; font-weight: 700; margin-left: 3px; }

/* ============== Price range slider (replaces price checkboxes) ============== */
.price-slider { padding: 4px 2px 2px; }
.price-readout { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; }
.price-track { position: relative; height: 26px; }
.price-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: #e0d8c8; border-radius: 980px; }
.price-fill { position: absolute; top: 11px; height: 4px; background: #ff6b35; border-radius: 980px; }
.price-range { position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.price-range:focus { outline: none; }
.price-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fcfaf4; border: 2px solid #1a1a1a; box-shadow: 2px 2px 0 #1a1a1a; cursor: grab; }
.price-range::-webkit-slider-thumb:active { cursor: grabbing; background: #ff6b35; }
.price-range::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fcfaf4; border: 2px solid #1a1a1a; box-shadow: 2px 2px 0 #1a1a1a; cursor: grab; }
.price-range:focus-visible::-webkit-slider-thumb { outline: 2px solid #ff6b35; outline-offset: 2px; }
.refine-drawer .price-slider { max-width: 320px; }

/* The 480px section tightener above uses !important and was zeroing the gap
   between the product grid and the category-edu section. Keep its 12px sides,
   restore the bottom gap. */
@media (max-width: 480px) {
  section.shop-layout { padding-bottom: 56px !important; }
}