:root {
      --cream: #f6f3e9;
      --paper: #fffdf7;
      --ink: #1e3026;
      --muted: #667267;
      --green: #294b39;
      --deep: #173528;
      --lime: #d5e1a8;
      --orange: #e58b5b;
      --line: rgba(30, 48, 38, .15);
      --serif: Georgia, "Times New Roman", serif;
      --sans: "Segoe UI", Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); }
    a { color: inherit; }
    .announcement { padding: 10px 20px; text-align: center; background: var(--deep); color: #f8f5e9; font-size: 12px; letter-spacing: .08em; }
    .announcement span { color: var(--lime); }
    header { position: relative; z-index: 3; max-width: 1260px; margin: auto; padding: 23px 5.5%; display: flex; justify-content: space-between; align-items: center; }
    .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
    .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); }
    .brand-mark svg { width: 23px; height: 23px; }
    .brand-name { font-size: 17px; font-weight: 750; letter-spacing: .055em; }
    .brand-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
    nav a { text-decoration: none; font-size: 13px; font-weight: 600; }
    nav a:hover { color: var(--green); }
    .nav-cta { padding: 12px 17px; border: 1px solid var(--green); border-radius: 2px; }
    .menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 25px; cursor: pointer; }
    main { overflow: hidden; }
    .hero { position: relative; min-height: 610px; max-width: 1390px; margin: 0 auto; padding: 72px 8% 88px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 5%; }
    .hero::before { content: ""; position: absolute; z-index: -1; right: -13%; top: -5%; width: 60%; height: 112%; border-radius: 50% 0 0 50%; background: #ecebdc; }
    .hero-copy { max-width: 570px; }
    .eyebrow { display: flex; align-items: center; gap: 11px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 27px; height: 1px; background: var(--orange); }
    h1 { margin: 22px 0 20px; font-family: var(--serif); font-size: clamp(48px, 6vw, 82px); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
    h1 em { color: var(--green); font-weight: 400; }
    .hero-copy > p { max-width: 460px; color: #5b665d; font-size: 16px; line-height: 1.75; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--green); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; transition: transform .2s, background .2s; }
    .button:hover { transform: translateY(-2px); }
    .button.primary { background: var(--green); color: #fffdf7; }
    .button.secondary { background: transparent; }
    .hero-note { margin-top: 19px; color: var(--muted); font-size: 11px; }
    .hero-art { position: relative; display: grid; place-items: center; min-height: 405px; }
    .sun { position: absolute; width: min(35vw, 330px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); }
    .art-frame { position: relative; width: min(83%, 400px); aspect-ratio: .82; overflow: hidden; border: 1px solid rgba(30,48,38,.14); border-radius: 49% 49% 4px 4px; background: #dfe5cb; box-shadow: 0 25px 65px rgba(33,56,40,.13); }
    .art-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 42%, rgba(22,53,40,.23)); }
    .art-label { position: absolute; left: 18px; bottom: 18px; padding: 12px 14px; background: var(--paper); color: var(--green); font-family: var(--serif); font-size: 15px; }
    .art-side-note { position: absolute; right: -9px; top: 45%; writing-mode: vertical-rl; color: #71806e; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
    .leaf-art { width: 100%; height: 100%; }
    .scroll-mark { position: absolute; bottom: 25px; left: 8%; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
    .scroll-mark::before { content: ""; width: 36px; height: 1px; background: var(--orange); }
    .strip { padding: 21px 7%; display: flex; justify-content: center; gap: clamp(20px, 6vw, 90px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--green); font-family: var(--serif); font-size: 17px; }
    .strip span { display: flex; align-items: center; gap: 13px; }
    .strip span::before { content: "✳"; color: var(--orange); font-family: var(--sans); font-size: 12px; }
    .section { max-width: 1160px; margin: 0 auto; padding: 110px 6%; }
    .section-heading { max-width: 620px; margin: 0 auto 48px; text-align: center; }
    .section-heading h2 { margin: 15px 0; font-family: var(--serif); font-size: clamp(36px, 4.5vw, 57px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
    .section-heading p { color: var(--muted); line-height: 1.7; }
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
    .card { min-height: 270px; padding: 27px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
    .flower-photo { display: block; width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; margin: 0 0 20px; background: #f0eee6; }
    .card-art { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #edf0df; color: var(--green); }
    .card-art svg { width: 29px; height: 29px; }
    .card small { color: var(--orange); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
    .card h3 { margin: 12px 0 8px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
    .card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
    .story { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 9%; background: var(--deep); color: #f8f5e9; }
    .story-wrap { background: var(--deep); }
    .story .eyebrow { color: var(--lime); }
    .story h2 { margin: 17px 0; font-family: var(--serif); font-size: clamp(37px, 4vw, 55px); font-weight: 400; line-height: 1.04; }
    .story p { max-width: 520px; color: rgba(248,245,233,.76); line-height: 1.8; font-size: 14px; }
    .steps { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(248,245,233,.25); border-bottom: 1px solid rgba(248,245,233,.25); }
    .step { padding: 24px 18px 24px 0; }
    .step:nth-child(odd) { border-right: 1px solid rgba(248,245,233,.25); }
    .step:nth-child(even) { padding-left: 22px; }
    .step:nth-child(-n+2) { border-bottom: 1px solid rgba(248,245,233,.25); }
    .step b { color: var(--lime); font-family: var(--serif); font-size: 21px; font-weight: 400; }
    .step span { display: block; margin-top: 9px; color: rgba(248,245,233,.76); font-size: 12px; line-height: 1.6; }
    .faq { max-width: 850px; }
    .faq .section-heading { margin-bottom: 35px; }
    details { border-top: 1px solid var(--line); }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary { position: relative; padding: 21px 40px 21px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 21px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; position: absolute; right: 5px; top: 16px; color: var(--green); font-family: var(--sans); font-size: 23px; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 680px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.75; }
    .closing { padding: 62px 6%; background: #e8e8d8; text-align: center; }
    .closing h2 { max-width: 620px; margin: 0 auto 13px; font-family: var(--serif); font-size: clamp(34px, 4vw, 51px); font-weight: 400; line-height: 1.07; }
    .closing p { margin: 0 auto 24px; color: var(--muted); font-size: 14px; }
    footer { padding: 28px 6%; background: #122b21; color: rgba(248,245,233,.78); }
    .footer-inner { max-width: 1150px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    footer .brand-name { color: #f8f5e9; font-size: 14px; }
    footer .brand-name small { color: rgba(248,245,233,.6); }
    footer p { margin: 0; font-size: 11px; }
    .private-note { margin-top: 10px !important; color: rgba(248,245,233,.5); }
    @media (max-width: 760px) {
      header { padding: 16px 5%; }
      .menu-toggle { display: block; }
      nav { display: none; position: absolute; top: 72px; left: 4%; right: 4%; padding: 18px; border: 1px solid var(--line); background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; box-shadow: 0 15px 30px rgba(20,40,28,.1); }
      nav.open { display: flex; }
      nav a { padding: 13px 8px; }
      .nav-cta { margin-top: 7px; text-align: center; }
      .hero { min-height: 0; padding: 58px 7% 72px; grid-template-columns: 1fr; gap: 15px; }
      .hero::before { right: -40%; top: 39%; width: 130%; height: 61%; }
      .hero-copy { max-width: 600px; }
      h1 { max-width: 510px; font-size: clamp(50px, 13vw, 74px); }
      .hero-copy > p { font-size: 15px; }
      .hero-art { min-height: 350px; }
      .sun { width: min(64vw, 280px); }
      .art-frame { width: min(74%, 310px); }
      .scroll-mark { bottom: 18px; left: 7%; }
      .strip { padding: 16px 4%; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
      .section { padding: 78px 6%; }
      .section-heading { margin-bottom: 32px; }
      .cards { grid-template-columns: 1fr; }
      .card { min-height: 220px; }
      .story { grid-template-columns: 1fr; gap: 24px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
  
    .breadcrumb { max-width: 1160px; margin: 0 auto; padding: 26px 6% 0; color: var(--muted); font-size: 13px; }
    .breadcrumb a { color: var(--green); }
    .catalog-main .section { padding-top: 52px; }
    .category-card { min-height: 0; padding: 0; overflow: hidden; }
    .category-card a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
    .category-card .flower-photo { margin: 0; aspect-ratio: 1.5 / 1; }
    .category-copy { padding: 20px; }
    .category-copy h3 { margin: 10px 0 7px; font-family: var(--serif); font-size: 24px; font-weight: 400; }
    .category-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
    .category-cta { display: inline-block; margin-top: 16px; color: var(--green); font-size: 12px; font-weight: 700; }
    .cards:has(> .card:only-child) { grid-template-columns: minmax(0, 650px); justify-content: center; }
    @media (max-width: 760px) { .breadcrumb { padding-top: 19px; } .catalog-main .section { padding-top: 38px; } }

    /* Bold, contemporary Natflowers identity */
    :root {
      --cream: #f1f3e8;
      --paper: #fffef9;
      --ink: #10291f;
      --muted: #5d7064;
      --green: #08734f;
      --deep: #08251c;
      --lime: #d7ff31;
      --orange: #f1a64b;
      --line: rgba(16, 41, 31, .13);
      --sans: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    }
    body {
      background:
        radial-gradient(ellipse at 94% 3%, rgba(215,255,49,.16), transparent 28rem),
        var(--cream);
    }
    .announcement {
      background: linear-gradient(90deg, #071d16, #0d4934 58%, #071d16);
      color: #fff;
      font-weight: 700;
      letter-spacing: .14em;
    }
    .announcement span { color: var(--lime); }
    header {
      position: sticky;
      top: 0;
      max-width: none;
      padding: 15px max(5.5%, calc((100% - 1280px) / 2));
      background: rgba(255,254,249,.94);
      border-bottom: 1px solid rgba(16,41,31,.09);
      box-shadow: 0 8px 28px rgba(8,37,28,.06);
      backdrop-filter: blur(14px);
    }
    .brand-mark {
      width: 48px;
      height: 48px;
      border: 0;
      background: var(--green);
      color: var(--lime);
      box-shadow: 0 7px 18px rgba(8,115,79,.23);
    }
    .brand-name { color: var(--deep); font-size: 16px; font-weight: 900; letter-spacing: .075em; }
    nav { gap: clamp(12px, 2vw, 27px); }
    nav a { font-size: 12px; font-weight: 800; transition: color .2s, transform .2s; }
    nav a:hover { color: var(--green); transform: translateY(-1px); }
    .nav-cta {
      padding: 12px 19px;
      border: 0;
      border-radius: 999px;
      background: var(--lime);
      color: var(--deep);
      box-shadow: 0 6px 16px rgba(130,164,0,.18);
    }
    .nav-cta:hover { background: #c5f000; color: var(--deep); }
    .hero {
      max-width: 1440px;
      min-height: 660px;
      padding-top: 86px;
      padding-bottom: 92px;
    }
    .hero::before {
      right: -12%;
      top: -13%;
      width: 65%;
      height: 126%;
      border-radius: 48% 0 0 48%;
      background: linear-gradient(145deg, #dfff69, #bfd937 53%, #91bf34);
      transform: rotate(-5deg);
    }
    .eyebrow {
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .2em;
    }
    h1 {
      max-width: 680px;
      margin: 25px 0 22px;
      font-family: var(--sans);
      font-size: clamp(52px, 6.5vw, 88px);
      font-weight: 900;
      line-height: .94;
      letter-spacing: -.07em;
    }
    h1 em { color: var(--green); font-style: normal; }
    .hero-copy > p { color: #435a4c; font-size: 16px; line-height: 1.8; }
    .button {
      min-height: 52px;
      padding: 0 23px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .03em;
    }
    .button.primary {
      border-color: var(--green);
      background: var(--green);
      color: white;
      box-shadow: 0 10px 24px rgba(8,115,79,.2);
    }
    .button.primary:hover { background: var(--deep); }
    .button.secondary { border-color: rgba(8,115,79,.28); background: rgba(255,254,249,.64); }
    .hero-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(255,254,249,.7);
      color: #405b4a;
    }
    .hero-art { min-height: 455px; }
    .sun {
      width: min(37vw, 360px);
      background: var(--deep);
      box-shadow: 0 22px 50px rgba(8,37,28,.2);
    }
    .art-frame {
      width: min(85%, 425px);
      aspect-ratio: .86;
      border: 8px solid rgba(255,254,249,.72);
      border-radius: 46% 46% 28px 28px;
      background: linear-gradient(150deg, #b9d77a, #477a4b 57%, #183f2d);
      box-shadow: 0 28px 75px rgba(8,37,28,.24);
      transform: rotate(2deg);
    }
    .leaf-art { filter: saturate(1.2) contrast(1.04); }
    .art-label { border-radius: 14px; box-shadow: 0 8px 24px rgba(8,37,28,.12); font-weight: 700; }
    .art-side-note { color: var(--deep); font-weight: 900; }
    .strip {
      background: var(--deep);
      color: #fffef2;
      border: 0;
      font-weight: 700;
    }
    .strip span::before { color: var(--lime); }
    .section { padding-top: 100px; padding-bottom: 100px; }
    .section-heading h2,
    .story h2,
    .closing h2 { font-family: var(--sans); font-weight: 900; letter-spacing: -.055em; }
    .section-heading h2 { color: var(--deep); }
    .section-heading .eyebrow { letter-spacing: .2em; }
    .cards { gap: 22px; }
    .card {
      border: 1px solid rgba(16,41,31,.09);
      border-radius: 22px;
      background: var(--paper);
      box-shadow: 0 12px 35px rgba(8,37,28,.055);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .card:hover {
      transform: translateY(-6px);
      border-color: rgba(8,115,79,.27);
      box-shadow: 0 22px 45px rgba(8,37,28,.12);
    }
    .flower-photo { border-radius: 14px; }
    .category-card { border-radius: 24px; }
    .category-card .flower-photo { border-radius: 0; aspect-ratio: 1.5 / 1; transition: transform .4s ease; }
    .category-card:hover .flower-photo { transform: scale(1.035); }
    .category-copy { padding: 22px 23px 25px; }
    .category-copy small, .card small { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    .category-copy h3, .card h3 { font-family: var(--sans); font-weight: 900; letter-spacing: -.035em; }
    .category-cta {
      padding: 10px 14px;
      border-radius: 999px;
      background: #eff8ce;
      color: var(--deep);
      font-weight: 900;
    }
    .catalog-main .section-heading {
      max-width: 100%;
      margin-bottom: 42px;
      padding: 46px 28px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 15%, rgba(215,255,49,.2), transparent 18rem),
        linear-gradient(130deg, #08251c, #0e4934);
      color: #fffef2;
      box-shadow: 0 24px 55px rgba(8,37,28,.14);
    }
    .catalog-main .section-heading h2 { color: white; font-size: clamp(38px, 5vw, 62px); }
    .catalog-main .section-heading p { max-width: 720px; margin-inline: auto; color: rgba(255,254,242,.78); }
    .catalog-main .section-heading .eyebrow { color: var(--lime); }
    .catalog-main .section-heading .eyebrow::before { background: var(--orange); }
    .catalog-main .cards > .card:not(.category-card) { overflow: hidden; padding: 14px; }
    .catalog-main .cards > .card:not(.category-card) .flower-photo {
      margin-bottom: 18px;
      aspect-ratio: 1.22 / 1;
      border-radius: 15px;
      background: #e6ebda;
    }
    .catalog-main .cards > .card:not(.category-card) > div { padding: 0 10px 12px; }
    .catalog-main .cards > .card:not(.category-card) h3 { font-size: 24px; }
    .catalog-main .cards > .card:not(.category-card) p { font-size: 13px; }
    .story-wrap { padding: 30px 0; background: transparent; }
    .story {
      max-width: 1200px;
      margin: 0 auto;
      padding: 58px;
      border-radius: 30px;
      background: linear-gradient(135deg, #08251c, #0b4933);
      box-shadow: 0 25px 55px rgba(8,37,28,.17);
    }
    .step b { color: var(--lime); font-family: var(--sans); font-weight: 900; }
    .closing {
      background: radial-gradient(circle at 50% -30%, #f6ffcc, transparent 35rem), #e4eccd;
    }
    .closing .button { margin-top: 6px; }
    footer { background: #061c15; }
    footer .brand-mark { background: rgba(215,255,49,.12); color: var(--lime); }
    @media (max-width: 760px) {
      header { padding: 12px 5%; }
      nav { top: 70px; border-radius: 18px; }
      .hero { padding-top: 55px; }
      .hero::before { right: -48%; top: 43%; width: 145%; height: 58%; border-radius: 48%; }
      .hero-art { min-height: 340px; }
      .sun { width: min(68vw, 280px); }
      .art-frame { width: min(76%, 315px); }
      .section { padding-top: 72px; padding-bottom: 72px; }
      .catalog-main .section-heading { padding: 34px 22px; border-radius: 22px; }
      .catalog-main .cards > .card:not(.category-card) .flower-photo { aspect-ratio: 1.5 / 1; }
      .story { padding: 34px 24px; border-radius: 24px; }
      .strip { font-size: 13px; }
    }

    /* Young-adult visual direction: bold CBD green with clear adult-only access. */
    :root {
      --cream: #f4f6e9;
      --paper: #fffef8;
      --ink: #10291f;
      --muted: #65766b;
      --green: #08734f;
      --deep: #08251c;
      --lime: #d7ff31;
      --orange: #ffb347;
      --line: rgba(16, 41, 31, .15);
      --serif: "Segoe UI", Arial, sans-serif;
      --sans: "Segoe UI", Arial, sans-serif;
    }
    body { background: #f4f6e9; }
    .announcement { background: #08251c; color: #fff; font-weight: 800; }
    header { position: sticky; top: 0; background: rgba(244,246,233,.96); backdrop-filter: blur(14px); box-shadow: 0 8px 26px rgba(8,37,28,.08); }
    .brand-mark { background: var(--deep); color: var(--lime); border: 0; }
    .brand-name { font-weight: 900; letter-spacing: .02em; }
    nav a { font-weight: 750; }
    nav a:hover { color: var(--green); }
    .nav-cta, .button.primary { background: var(--green); color: white; border-radius: 999px; border: 0; }
    .hero { min-height: 650px; }
    .hero::before { background: radial-gradient(circle at 70% 35%, rgba(215,255,49,.34), transparent 24rem), linear-gradient(135deg, #e9f1d6, #dce9c5); }
    h1 { font-family: var(--sans); font-weight: 900; letter-spacing: -.065em; }
    h1 em { color: var(--green); font-weight: 900; }
    .eyebrow { font-weight: 900; }
    .eyebrow::before { height: 4px; border-radius: 9px; background: var(--lime); }
    .button { border-radius: 999px; letter-spacing: 0; font-size: 14px; }
    .button.primary { box-shadow: 0 9px 25px rgba(8,115,79,.22); }
    .button.primary:hover { background: #075c41; }
    .button.secondary { border: 2px solid var(--green); font-weight: 800; }
    .art-frame { border-radius: 30px; border: 4px solid #fff; box-shadow: 0 30px 75px rgba(8,37,28,.25); }
    .hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% center; }
    .art-label { font-family: var(--sans); font-weight: 900; border-radius: 14px; }
    .art-side-note { color: var(--green); font-weight: 900; }
    .strip { background: var(--deep); color: white; border: 0; font-family: var(--sans); font-weight: 850; }
    .strip span::before { color: var(--lime); }
    .section-heading h2, .story h2, .closing h2 { font-family: var(--sans); font-weight: 900; letter-spacing: -.055em; }
    .section-heading .eyebrow { letter-spacing: .2em; }
    .section-heading h2 { color: var(--deep); }
    .cards { gap: 22px; }
    .card { border: 1px solid rgba(16,41,31,.09); border-radius: 22px; background: var(--paper); box-shadow: 0 12px 35px rgba(8,37,28,.055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .card:hover { transform: translateY(-6px); border-color: rgba(8,115,79,.27); box-shadow: 0 22px 45px rgba(8,37,28,.12); }
    .flower-photo { border-radius: 14px; }
    .category-card { border-radius: 24px; }
    .category-card .flower-photo { border-radius: 0; aspect-ratio: 1.5 / 1; transition: transform .4s ease; }
    .category-card:hover .flower-photo { transform: scale(1.035); }
    .category-copy { padding: 22px 23px 25px; }
    .category-copy small, .card small { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    .category-copy h3, .card h3 { font-family: var(--sans); font-weight: 900; letter-spacing: -.035em; }
    .category-cta { padding: 10px 14px; border-radius: 999px; background: #eff8ce; color: var(--deep); font-weight: 900; }
    .catalog-main .section-heading { max-width: 100%; margin-bottom: 42px; padding: 46px 28px; border-radius: 28px; background: radial-gradient(circle at 90% 15%, rgba(215,255,49,.2), transparent 18rem), linear-gradient(130deg, #08251c, #0e4934); color: #fffef2; box-shadow: 0 24px 55px rgba(8,37,28,.14); }
    .catalog-main .section-heading h2 { color: white; font-size: clamp(38px, 5vw, 62px); }
    .catalog-main .section-heading p { max-width: 720px; margin-inline: auto; color: rgba(255,254,242,.78); }
    .catalog-main .section-heading .eyebrow { color: var(--lime); }
    .catalog-main .section-heading .eyebrow::before { background: var(--orange); }
    .catalog-main .cards > .card:not(.category-card) { overflow: hidden; padding: 14px; }
    .catalog-main .cards > .card:not(.category-card) .flower-photo { margin-bottom: 18px; aspect-ratio: 1.22 / 1; border-radius: 15px; background: #e6ebda; }
    .catalog-main .cards > .card:not(.category-card) > div { padding: 0 10px 12px; }
    .catalog-main .cards > .card:not(.category-card) h3 { font-size: 24px; }
    .catalog-main .cards > .card:not(.category-card) p { font-size: 13px; }
    .story-wrap { padding: 30px 0; background: transparent; }
    .story { max-width: 1200px; margin: 0 auto; padding: 58px; border-radius: 30px; background: linear-gradient(135deg, #08251c, #0b4933); box-shadow: 0 25px 55px rgba(8,37,28,.17); }
    .step b { color: var(--lime); font-family: var(--sans); font-weight: 900; }
    .closing { background: radial-gradient(circle at 50% -30%, #f6ffcc, transparent 35rem), #e4eccd; }
    .closing .button { margin-top: 6px; }
    footer { background: #061c15; }
    footer .brand-mark { background: rgba(215,255,49,.12); color: var(--lime); }
    @media (max-width: 760px) {
      header { padding: 12px 5%; }
      nav { top: 70px; border-radius: 18px; }
      .hero { padding-top: 55px; }
      .hero::before { right: -48%; top: 43%; width: 145%; height: 58%; border-radius: 48%; }
      .hero-art { min-height: 340px; }
      .sun { width: min(68vw, 280px); }
      .art-frame { width: min(76%, 315px); }
      .section { padding-top: 72px; padding-bottom: 72px; }
      .catalog-main .section-heading { padding: 34px 22px; border-radius: 22px; }
      .catalog-main .cards > .card:not(.category-card) .flower-photo { aspect-ratio: 1.5 / 1; }
      .story { padding: 34px 24px; border-radius: 24px; }
      .strip { font-size: 13px; }
    }

    .age-gate { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(4,20,15,.88); backdrop-filter: blur(12px); }
    .age-gate[hidden] { display: none; }
    .age-card { width: min(100%, 480px); padding: 36px; border: 1px solid rgba(215,255,49,.45); border-radius: 28px; background: linear-gradient(145deg,#102f23,#071d16); color: white; text-align: center; box-shadow: 0 35px 100px rgba(0,0,0,.4); }
    .age-badge { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border: 2px solid var(--lime); border-radius: 50%; color: var(--lime); font-size: 27px; font-weight: 950; }
    .age-card h2 { margin: 0 0 10px; font-size: clamp(25px,6vw,34px); letter-spacing: -.04em; }
    .age-card p { margin: 0 0 24px; color: rgba(255,255,255,.78); line-height: 1.6; }
    .age-actions { display: grid; gap: 10px; }
    .age-actions button { min-height: 48px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px var(--sans); }
    .age-enter { background: var(--lime); color: var(--deep); }
    .age-exit { background: transparent; border: 1px solid rgba(255,255,255,.4) !important; color: white; }
    .age-footnote { display: block; margin-top: 18px; color: rgba(255,255,255,.55); font-size: 11px; }
    .age-denied { position: fixed; z-index: 10001; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--deep); color: white; text-align: center; }
    .age-denied[hidden] { display: none; }
    .age-denied h1 { font-size: 34px; }
    body.age-locked { overflow: hidden; }
    @media (max-width: 600px) { .age-card { padding: 30px 22px; } }

    /* A more current, direct voice for adults discovering the CBD shop. */
    .hero h1 { max-width: 650px; font-size: clamp(54px, 7.4vw, 98px); line-height: .91; }
    .hero-copy > p { font-size: 17px; line-height: 1.7; }
    .hero-note { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: #e7edcf; color: var(--deep); font-weight: 750; }
    .hero-note::before { content: "18+"; color: var(--green); font-weight: 950; }
    .section-heading h2 { font-size: clamp(39px, 5.3vw, 66px); }
    .category-card a { color: inherit; }
    .category-card .category-cta { display: inline-flex; margin-top: 14px; transition: background .2s, color .2s; }
    .category-card:hover .category-cta { background: var(--lime); }
    .category-card .flower-photo { filter: saturate(1.12) contrast(1.03); }
    .catalog-main .section-heading h2 { letter-spacing: -.065em; }
    .age-card { border-color: rgba(215,255,49,.7); }
    .age-enter { transition: transform .2s, background .2s; }
    .age-enter:hover { transform: translateY(-2px); background: #e4ff7c; }
    :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
    @media (max-width: 760px) {
      .hero h1 { font-size: clamp(48px, 13vw, 74px); }
      .hero-copy > p { font-size: 15px; }
    }

    /* Fixed side artwork stays visible behind the page content. */
    @media (min-width: 1180px) {
      body::before,
      body::after {
        content: "";
        position: fixed;
        z-index: 0;
        top: 112px;
        bottom: 0;
        width: min(13vw, 230px);
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: 100% 100vh;
      }
      body::before {
        left: 0;
        background-image: url("cbd-side-left.jpg");
        background-position: left top;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 68%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 68%, transparent 100%);
      }
      body::after {
        right: 0;
        background-image: url("cbd-side-right.jpg");
        background-position: right top;
        -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.92) 68%, transparent 100%);
        mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.92) 68%, transparent 100%);
      }
      header, main, footer { position: relative; z-index: 1; }
      header { z-index: 3; }
    }