:root {
      --green-900: #142a1b;
      --green-800: #1d3a26;
      --green-700: #2a5236;
      --leaf: #7aa23f;
      --leaf-dark: #5e8c3a;
      --gold: #c9a24b;
      --paper: #f6f3ec;
      --paper-2: #efeae0;
      --card: #ffffff;
      --ink: #20271f;
      --muted: #6f766b;
      --line: rgba(29, 58, 38, .14);
      --accent: #7aa23f;
      /* tweakable */
      --font-display: 'Cormorant Garamond', serif;
      /* tweakable */
      --font-sans: 'Mulish', system-ui, sans-serif;
      --pad-section: 120px;
      /* tweakable via density */
      --maxw: 1200px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-sans);
      font-weight: 400;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    [data-density="compact"] {
      --pad-section: 84px;
    }

    [data-density="comfy"] {
      --pad-section: 160px;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--font-display);
      font-weight: 500;
      line-height: 1.04;
      letter-spacing: -.01em;
    }

    em {
      font-style: italic;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 28px;
    }

    .eyebrow {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--leaf-dark);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--accent);
      display: inline-block;
    }

    .eyebrow.center::after {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--accent);
      display: inline-block;
    }

    .eyebrow.center {
      justify-content: center;
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 14.5px;
      letter-spacing: .02em;
      padding: 15px 30px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

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

    .btn-primary {
      background: var(--green-800);
      color: #f4f1e8;
    }

    .btn-primary:hover {
      background: var(--green-900);
    }

    .btn-leaf {
      background: var(--accent);
      color: #10240c;
    }

    .btn-ghost {
      background: transparent;
      color: var(--green-800);
      border-color: var(--line);
    }

    .btn-ghost:hover {
      border-color: var(--green-800);
    }

    .btn svg {
      width: 17px;
      height: 17px;
    }

    /* ---------- NAV ---------- */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
      transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
    }

    .nav-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 22px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav.scrolled {
      background: rgba(246, 243, 236, .86);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 var(--line);
    }

    .nav.scrolled .nav-inner {
      padding: 13px 28px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .brand img {
      height: 80px;
      width: auto;
      display: block;
      transition: height 0.3s ease;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;
    }

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--muted);
      transition: color .2s ease;
      position: relative;
    }

    .nav-links a:hover {
      color: var(--green-800);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .nav-cart {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--green-800);
      padding: 6px 12px;
      border-radius: 99px;
      transition: background 0.2s, color 0.2s;
    }
    
    .nav-cart:hover {
      background: rgba(29, 58, 38, 0.05);
    }

    .cart-badge-count {
      background: var(--leaf-dark);
      color: #10240c;
      font-size: 11px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }

    @media(max-width:880px) {
      .nav-links {
        display: none;
      }
      .brand img {
        height: 48px;
      }
      .nav-inner {
        padding: 12px 20px;
      }
      .nav.scrolled .nav-inner {
        padding: 10px 20px;
      }
      .nav-right .btn {
        display: none !important; /* Hide shop now button in mobile */
      }
      .nav-cart .cart-text {
        display: none; /* Hide cart text */
      }
      .nav-cart {
        padding: 8px;
      }
    }

    /* ---------- HERO ---------- */
    .hero {
      position: relative;
      padding-top: 160px;
      padding-bottom: 90px;
      overflow: hidden;
    }

    .hero-bg-leaf {
      position: absolute;
      font-family: var(--font-display);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 56px;
      align-items: center;
    }

    .hero h1 {
      font-size: clamp(46px, 6.4vw, 88px);
    }

    .hero-sub {
      font-size: 18.5px;
      color: var(--muted);
      max-width: 30em;
      margin: 26px 0 34px;
    }

    .hero-cta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 38px;
    }

    .stars {
      display: flex;
      gap: 2px;
      color: var(--gold);
    }

    .stars svg {
      width: 16px;
      height: 16px;
    }

    .hero-trust .t-text {
      font-size: 13.5px;
      color: var(--muted);
    }

    .hero-trust .t-text b {
      color: var(--ink);
      font-weight: 700;
    }

    .avatars {
      display: flex;
    }

    .avatars .av {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid var(--paper);
      margin-left: -9px;
      overflow: hidden;
      background: var(--paper-2);
    }

    .avatars .av:first-child {
      margin-left: 0;
    }

    .avatars image-slot {
      width: 100%;
      height: 100%;
    }

    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .hero-disc {
      position: absolute;
      width: 118%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 38%, #ffffff 0%, var(--paper-2) 60%, transparent 72%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
    }

    .hero-ring {
      position: absolute;
      width: 78%;
      aspect-ratio: 1;
      border: 1px solid var(--line);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
    }

    .hero-product {
      position: relative;
      z-index: 2;
      width: min(425px, 90%);
      animation: floaty 6s ease-in-out infinite;
    }

    .hero-product image-slot {
      width: 100%;
      height: auto;
      aspect-ratio: 1/1;
      display: block;
      filter: drop-shadow(0 40px 60px rgba(20, 42, 27, .22));
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-16px);
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .hero-product {
        animation: none;
      }
    }

    .float-leaf {
      position: absolute;
      z-index: 3;
      width: 64px;
      height: 64px;
      color: var(--leaf);
      opacity: .9;
    }

    .float-leaf.l1 {
      top: 6%;
      right: 8%;
    }

    .float-leaf.l2 {
      bottom: 10%;
      left: 2%;
      width: 46px;
      height: 46px;
      color: var(--leaf-dark);
    }

    .hero-badge {
      position: absolute;
      z-index: 4;
      bottom: 8%;
      right: 0;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 18px;
      box-shadow: 0 18px 40px rgba(20, 42, 27, .12);
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .hero-badge .hb-ic {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--paper-2);
      display: grid;
      place-items: center;
      color: var(--green-700);
    }

    .hero-badge .hb-ic svg {
      width: 20px;
      height: 20px;
    }

    .hero-badge .hb-t {
      font-size: 13px;
      line-height: 1.3;
    }

    .hero-badge .hb-t b {
      display: block;
      font-weight: 700;
    }

    .hero-badge .hb-t span {
      color: var(--muted);
      font-size: 12px;
    }

    @media(max-width:880px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .hero {
        padding-top: 128px;
      }

      .hero-visual {
        order: -1;
      }
    }

    /* ---------- MARQUEE / TRUST STRIP ---------- */
    .strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--paper-2);
      overflow: hidden;
    }

    .strip-track {
      display: flex;
      gap: 60px;
      white-space: nowrap;
      padding: 20px 0;
      animation: scrollx 28s linear infinite;
      width: max-content;
    }

    .strip-track span {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 22px;
      color: var(--green-700);
    }

    .strip-track span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    @keyframes scrollx {
      to {
        transform: translateX(-50%);
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .strip-track {
        animation: none;
      }
    }

    /* ---------- SECTION GENERIC ---------- */
    section.block {
      padding: var(--pad-section) 0;
    }

    .sec-head {
      max-width: 640px;
    }

    .sec-head.center {
      margin: 0 auto;
      text-align: center;
    }

    .sec-head h2 {
      font-size: clamp(34px, 4.4vw, 58px);
      margin-top: 18px;
    }

    .sec-head p {
      color: var(--muted);
      font-size: 17px;
      margin-top: 18px;
    }

    /* ---------- BENEFITS ---------- */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 60px;
    }

    .benefit {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 32px 30px;
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .benefit:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(20, 42, 27, .08);
    }

    .benefit .bi {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      background: var(--paper-2);
      display: grid;
      place-items: center;
      color: var(--green-700);
      margin-bottom: 22px;
    }

    .benefit .bi svg {
      width: 25px;
      height: 25px;
    }

    .benefit h3 {
      font-size: 25px;
      margin-bottom: 9px;
    }

    .benefit p {
      color: var(--muted);
      font-size: 15px;
    }

    @media(max-width:880px) {
      .benefit-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- INGREDIENTS ---------- */
    .ing-sec {
      background: var(--green-800);
      color: #eef0e6;
    }

    .ing-sec .eyebrow {
      color: var(--leaf);
    }

    .ing-sec .sec-head p {
      color: rgba(238, 240, 230, .7);
    }

    .ing-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      margin-top: 60px;
    }

    .herb {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .3s ease, border-color .3s ease;
    }

    .herb:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, .28);
    }

    .herb image-slot {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
      display: block;
    }

    .herb img {
      display: block;
      margin: 0 auto;
    }

    .herb .h-body {
      padding: 20px 18px 22px;
    }

    .herb .h-bot {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 14px;
      color: var(--leaf);
    }

    .herb h3 {
      font-size: 22px;
      margin: 4px 0 10px;
      color: #fff;
    }

    .herb p {
      font-size: 14px;
      color: rgba(238, 240, 230, .72);
      line-height: 1.5;
    }

    @media(max-width:1100px) {
      .ing-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:768px) {
      .ing-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    @media(min-width:1101px) {
      .ing-grid .herb:nth-child(11) {
        grid-column-start: 2;
      }
    }

    /* ---------- RITUAL / HOW ---------- */
    .ritual-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px;
      margin-top: 64px;
    }

    .step {
      position: relative;
      padding-top: 30px;
    }

    .step .num {
      font-family: var(--font-display);
      font-size: 64px;
      color: var(--accent);
      line-height: 1;
      opacity: .9;
    }

    .step h3 {
      font-size: 27px;
      margin: 14px 0 10px;
    }

    .step p {
      color: var(--muted);
      font-size: 15.5px;
    }

    .step::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 46px;
      height: 2px;
      background: var(--accent);
    }

    @media(max-width:880px) {
      .ritual-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- SHOP ---------- */
    .shop {
      background: var(--paper-2);
    }

    .shop-card {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 0;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 30px 70px rgba(20, 42, 27, .1);
    }

    .shop-visual {
      background: linear-gradient(160deg, #fbfaf6, var(--paper-2));
      position: relative;
      display: grid;
      place-items: center;
      padding: 46px;
    }

    .shop-visual .product-carousel {
      width: min(400px, 90%);
      aspect-ratio: 1/1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .carousel-track-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      border-radius: 18px;
    }

    .carousel-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .carousel-slide {
      min-width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .carousel-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 20px 30px rgba(20, 42, 27, 0.15));
      transition: transform 0.3s ease;
    }

    .product-carousel:hover .carousel-slide img {
      transform: scale(1.02);
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--green-800);
      cursor: pointer;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .product-carousel:hover .carousel-btn {
      opacity: 1;
    }

    .carousel-btn:hover {
      background: #ffffff;
      color: var(--green-900);
      transform: translateY(-50%) scale(1.05);
    }

    .prev-btn {
      left: -12px;
    }

    .next-btn {
      right: -12px;
    }

    .carousel-dots {
      position: absolute;
      bottom: -24px;
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--line);
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    .carousel-dot.active {
      background: var(--green-800);
      transform: scale(1.2);
    }

    @media (max-width: 480px) {
      .carousel-btn {
        opacity: 1;
        width: 34px;
        height: 34px;
      }

      .prev-btn {
        left: 4px;
      }

      .next-btn {
        right: 4px;
      }
    }

    .shop-tag {
      position: absolute;
      top: 26px;
      left: 26px;
      background: var(--green-800);
      color: #f4f1e8;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 8px 14px;
      border-radius: 999px;
    }

    .shop-body {
      padding: 46px 46px 44px;
    }

    .shop-body h2 {
      font-size: 42px;
      margin: 14px 0 10px;
    }

    .shop-rate {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      color: var(--muted);
      margin-bottom: 18px;
    }

    .shop-rate .stars svg {
      width: 15px;
      height: 15px;
    }

    .shop-desc {
      color: var(--muted);
      font-size: 15.5px;
      margin-bottom: 26px;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 24px;
    }

    .price .now {
      font-family: var(--font-display);
      font-size: 46px;
      color: var(--green-800);
    }

    .price .was {
      font-size: 18px;
      color: var(--muted);
      text-decoration: line-through;
    }

    .price .save {
      font-size: 12px;
      font-weight: 700;
      color: var(--leaf-dark);
      background: rgba(122, 162, 63, .14);
      padding: 5px 11px;
      border-radius: 999px;
      letter-spacing: .04em;
    }

    .packs {
      display: flex;
      gap: 12px;
      margin-bottom: 26px;
    }

    .pack {
      flex: 1;
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 16px 14px;
      cursor: pointer;
      text-align: center;
      transition: border-color .2s ease, background .2s ease;
      position: relative;
    }

    .pack:hover {
      border-color: var(--accent);
    }

    .pack.active {
      border-color: var(--green-800);
      background: #fbfaf6;
    }

    .pack .p-name {
      font-size: 13px;
      font-weight: 700;
    }

    .pack .p-price {
      font-family: var(--font-display);
      font-size: 24px;
      color: var(--green-800);
      margin-top: 4px;
    }

    .pack .p-tag {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: var(--accent);
      color: #10240c;
      padding: 3px 9px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .shop-actions {
      display: flex;
      gap: 12px;
    }

    .shop-actions .btn {
      flex: 1;
    }

    .shop-note {
      margin-top: 18px;
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }

    .shop-note span {
      display: inline-flex;
      gap: 7px;
      align-items: center;
    }

    .shop-note svg {
      width: 15px;
      height: 15px;
      color: var(--leaf-dark);
    }

    @media(max-width:880px) {
      .shop-card {
        grid-template-columns: 1fr;
      }

      .shop-body {
        padding: 34px;
      }
    }

    /* ---------- CERTIFICATIONS ---------- */
    .cert-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      margin-top: 54px;
    }

    .cert {
      text-align: center;
      padding: 26px 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--card);
      transition: transform .3s ease;
    }

    .cert:hover {
      transform: translateY(-3px);
    }

    .cert .c-ic {
      width: 48px;
      height: 48px;
      margin: 0 auto 14px;
      border-radius: 50%;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--green-700);
    }

    .cert .c-ic svg {
      width: 24px;
      height: 24px;
    }

    .cert .c-name {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
    }

    @media(max-width:980px) {
      .cert-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:520px) {
      .cert-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ---------- FOOTER ---------- */
    .footer {
      background: var(--green-900);
      color: rgba(238, 240, 230, .78);
      padding: 80px 0 36px;
    }

    .foot-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
      gap: 40px;
      padding-bottom: 54px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .foot-brand .fb-word {
      font-family: var(--font-display);
      font-size: 34px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .foot-brand .fb-word .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--leaf);
      display: inline-block;
    }

    .foot-brand p {
      margin-top: 16px;
      font-size: 14.5px;
      max-width: 26em;
    }

    .foot-col h4 {
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 18px;
    }

    .foot-col a {
      display: block;
      font-size: 14.5px;
      margin-bottom: 11px;
      color: rgba(238, 240, 230, .78);
      transition: color .2s ease;
    }

    .foot-col a:hover {
      color: #fff;
    }

    .foot-news {
      display: flex;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      padding: 5px;
      margin-top: 6px;
    }

    .foot-news input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: #fff;
      font-family: var(--font-sans);
      font-size: 14px;
      padding: 0 16px;
    }

    .foot-news input::placeholder {
      color: rgba(255, 255, 255, .45);
    }

    .foot-news button {
      background: var(--accent);
      color: #10240c;
      border: none;
      border-radius: 999px;
      padding: 11px 20px;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 13.5px;
      cursor: pointer;
    }

    .foot-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding-top: 28px;
      font-size: 13px;
      flex-wrap: wrap;
    }

    .foot-bottom .socials {
      display: flex;
      gap: 10px;
    }

    .foot-bottom .socials a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .16);
      display: grid;
      place-items: center;
      transition: background .2s ease;
    }

    .foot-bottom .socials a:hover {
      background: rgba(255, 255, 255, .1);
    }

    .foot-bottom .socials svg {
      width: 17px;
      height: 17px;
    }

    .foot-disclaimer {
      font-size: 11.5px;
      color: rgba(238, 240, 230, .4);
      margin-top: 22px;
      max-width: 60em;
      line-height: 1.6;
    }

    @media(max-width:880px) {
      .foot-top {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
      }
    }

    @media(max-width:520px) {
      .foot-top {
        grid-template-columns: 1fr;
      }
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    @media(prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    #tweaks-root {
      position: fixed;
      z-index: 90;
    }

    /* ---------- VIDEO SECTION ---------- */
    .video-section {
      width: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--green-900);
    }

    .video-section video {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
    /* ==========================================================
       ECOMMERCE ADDITIONS — catalog grid, product page, cart,
       checkout and payment. Appended to the original theme.
       ========================================================== */

    /* ---------- Category filter bar ---------- */
    .cat-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 46px;
    }
    .cat-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .cat-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(122, 162, 63, .45);
      box-shadow: 0 8px 18px rgba(20, 42, 27, .06);
    }
    .cat-chip.active {
      background: var(--green-900);
      color: #fff;
      border-color: var(--green-900);
      box-shadow: 0 10px 22px rgba(20, 42, 27, .18);
    }
    .cat-chip .c-count {
      font-size: 11.5px;
      font-weight: 700;
      background: rgba(29, 58, 38, .08);
      border-radius: 999px;
      padding: 2px 8px;
    }
    .cat-chip.active .c-count { background: rgba(255, 255, 255, .18); }

    /* ---------- Product grid ---------- */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 30px;
    }
    .p-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 26px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .28s;
      position: relative;
    }
    .p-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 50px rgba(20, 42, 27, .12);
      border-color: rgba(122, 162, 63, .35);
    }
    .p-media {
      position: relative;
      display: block;
      aspect-ratio: 1 / 1;
      background: linear-gradient(160deg, var(--paper-2), #fff);
      overflow: hidden;
    }
    .p-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s cubic-bezier(.2, .7, .3, 1);
    }
    .p-card:hover .p-media img { transform: scale(1.06); }

    .p-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--green-900);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 7px 13px;
      border-radius: 999px;
      z-index: 2;
    }
    .p-badge.leaf { background: var(--leaf); color: #10240c; }
    .p-save {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--gold);
      color: #2a1f05;
      font-size: 11.5px;
      font-weight: 800;
      padding: 7px 12px;
      border-radius: 999px;
      z-index: 2;
    }
    .p-oos {
      position: absolute;
      inset: 0;
      background: rgba(20, 42, 27, .55);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 13px;
      z-index: 3;
      backdrop-filter: blur(2px);
    }

    .p-body {
      padding: 22px 22px 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .p-cat {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--leaf-dark);
      margin-bottom: 8px;
    }
    .p-title {
      font-family: var(--font-display);
      font-size: 25px;
      font-weight: 600;
      color: var(--green-900);
      line-height: 1.2;
      margin-bottom: 8px;
      text-decoration: none;
      display: block;
    }
    .p-title:hover { color: var(--leaf-dark); }
    .p-desc {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .p-rate {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--muted);
    }
    .p-rate .stars svg { width: 14px; height: 14px; color: var(--gold); }
    .p-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: auto;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .p-now { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--green-900); }
    .p-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
    .p-off { font-size: 12px; font-weight: 800; color: var(--leaf-dark); }
    .p-actions { display: flex; gap: 10px; }
    .p-actions .btn { flex: 1; padding: 12px 16px; font-size: 13.5px; justify-content: center; }
    .p-stock-note { font-size: 12px; color: #b3261e; font-weight: 700; margin-top: 10px; }
    .p-stock-note.low { color: #8a6a1f; }

    /* ---------- Section utilities ---------- */
    .shop-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 26px;
    }
    .shop-count { font-size: 14px; color: var(--muted); }
    .sort-select {
      padding: 11px 18px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--card);
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      outline: none;
    }
    .sort-select:focus { border-color: var(--leaf); }

    .empty-shop {
      text-align: center;
      padding: 80px 24px;
      background: var(--card);
      border: 1px dashed var(--line);
      border-radius: 26px;
    }
    .empty-shop h3 {
      font-family: var(--font-display);
      font-size: 30px;
      color: var(--green-900);
      margin-bottom: 10px;
    }
    .empty-shop p { color: var(--muted); font-size: 15px; }

    /* ---------- Product detail page ---------- */
    .pd-wrap { padding-top: 140px; }
    .crumbs {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 26px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .crumbs a { color: var(--muted); text-decoration: none; }
    .crumbs a:hover { color: var(--leaf-dark); }

    .pd-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
      margin-bottom: 90px;
    }
    .pd-gallery {
      position: sticky;
      top: 110px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 28px;
      overflow: hidden;
      padding: 18px;
    }
    .pd-main-img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 20px;
      background: var(--paper-2);
      display: block;
    }
    .pd-thumbs {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .pd-thumb {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      background: var(--paper-2);
      transition: border-color .2s, transform .2s;
      padding: 0;
    }
    .pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pd-thumb:hover { transform: translateY(-2px); }
    .pd-thumb.active { border-color: var(--leaf); }

    .pd-title {
      font-family: var(--font-display);
      font-size: clamp(38px, 4.4vw, 54px);
      font-weight: 600;
      color: var(--green-900);
      line-height: 1.08;
      margin: 8px 0 12px;
    }
    .pd-desc { font-size: 15.5px; line-height: 1.85; color: var(--ink); margin-bottom: 24px; }
    .pd-price {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }
    .pd-now { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--green-900); line-height: 1; }
    .pd-was { font-size: 19px; color: var(--muted); text-decoration: line-through; }
    .pd-save {
      background: rgba(122, 162, 63, .14);
      color: var(--leaf-dark);
      font-size: 13px;
      font-weight: 800;
      padding: 6px 13px;
      border-radius: 999px;
    }

    .pd-qty {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      overflow: hidden;
      background: var(--card);
    }
    .pd-qty button {
      width: 44px;
      height: 46px;
      border: none;
      background: transparent;
      font-size: 20px;
      color: var(--green-900);
      cursor: pointer;
      transition: background .18s;
    }
    .pd-qty button:hover { background: var(--paper-2); }
    .pd-qty span { min-width: 46px; text-align: center; font-weight: 800; font-size: 16px; }

    .pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
    .pd-actions .btn { flex: 1; min-width: 170px; justify-content: center; }

    .pd-accordion { border-top: 1px solid var(--line); margin-top: 30px; }
    .pd-acc-item { border-bottom: 1px solid var(--line); }
    .pd-acc-head {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 20px 0;
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 700;
      color: var(--green-900);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .pd-acc-head span.ic { font-size: 20px; color: var(--leaf-dark); transition: transform .25s; }
    .pd-acc-item.open .pd-acc-head span.ic { transform: rotate(45deg); }
    .pd-acc-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
      font-size: 14.5px;
      line-height: 1.9;
      color: var(--muted);
    }
    .pd-acc-item.open .pd-acc-body { max-height: 900px; padding-bottom: 22px; }
    .pd-acc-body ul { list-style: none; }
    .pd-acc-body li { padding-left: 22px; position: relative; margin-bottom: 6px; }
    .pd-acc-body li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--leaf);
    }

    /* ---------- Coupon box (cart) ---------- */
    .coupon-box { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
    .coupon-box input {
      flex: 1;
      min-width: 160px;
      padding: 13px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--paper);
      font-family: var(--font-sans);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 700;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .coupon-box input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(122, 162, 63, .12); }
    .coupon-msg { font-size: 13px; font-weight: 600; margin-top: -6px; margin-bottom: 12px; }
    .coupon-msg.ok { color: var(--leaf-dark); }
    .coupon-msg.err { color: #b3261e; }
    .coupon-applied {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background: rgba(122, 162, 63, .1);
      border: 1px dashed rgba(122, 162, 63, .45);
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 14px;
    }
    .coupon-applied .code { font-weight: 800; letter-spacing: .08em; color: var(--leaf-dark); }
    .coupon-applied button {
      background: none;
      border: none;
      color: #b3261e;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
    }

    /* ---------- Payment page ---------- */
    .pay-shell {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      background: linear-gradient(160deg, var(--green-900), #0d1c12);
    }
    .pay-card {
      width: 100%;
      max-width: 460px;
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
    }
    .pay-head {
      background: #0b2540;
      color: #fff;
      padding: 22px 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pay-logo { font-weight: 800; font-size: 19px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
    .pay-logo .rz {
      width: 26px; height: 26px; border-radius: 6px; background: #3395ff;
      display: flex; align-items: center; justify-content: center; font-size: 15px;
    }
    .pay-amount { text-align: right; }
    .pay-amount .amt { font-size: 21px; font-weight: 800; }
    .pay-amount .lbl { font-size: 11px; opacity: .7; letter-spacing: .08em; text-transform: uppercase; }
    .pay-body { padding: 26px; }
    .pay-note {
      background: rgba(201, 162, 75, .12);
      border: 1px solid rgba(201, 162, 75, .35);
      color: #8a6a1f;
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 22px;
    }
    .pay-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .pay-method {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 17px;
      border: 1.5px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .pay-method:hover { border-color: rgba(51, 149, 255, .5); background: rgba(51, 149, 255, .03); }
    .pay-method.selected { border-color: #3395ff; background: rgba(51, 149, 255, .06); }
    .pay-method .pm-ic {
      width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2);
      display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
    }
    .pay-method .pm-t { flex: 1; }
    .pay-method .pm-t b { display: block; font-size: 14.5px; color: var(--ink); }
    .pay-method .pm-t small { font-size: 12px; color: var(--muted); }
    .pay-method input[type=radio] { width: 18px; height: 18px; accent-color: #3395ff; }
    .pay-summary {
      background: var(--paper);
      border-radius: 14px;
      padding: 16px 18px;
      margin-bottom: 20px;
      font-size: 13.5px;
    }
    .pay-summary .row { display: flex; justify-content: space-between; padding: 5px 0; color: var(--muted); }
    .pay-summary .row.total {
      border-top: 1px solid var(--line);
      margin-top: 8px;
      padding-top: 12px;
      font-weight: 800;
      font-size: 16px;
      color: var(--green-900);
    }
    .btn-pay {
      width: 100%;
      padding: 16px;
      background: #3395ff;
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }
    .btn-pay:hover { background: #1f7ee0; transform: translateY(-1px); }
    .btn-pay:disabled { background: #9dc7f5; cursor: not-allowed; transform: none; }
    .pay-fail {
      width: 100%;
      margin-top: 10px;
      padding: 13px;
      background: transparent;
      color: #b3261e;
      border: 1px solid rgba(179, 38, 30, .3);
      border-radius: 12px;
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
    }
    .pay-fail:hover { background: rgba(179, 38, 30, .06); }
    .pay-secure {
      text-align: center;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 16px;
      letter-spacing: .04em;
    }

    /* ---------- Order success ---------- */
    .success-wrap { max-width: 640px; margin: 0 auto; padding: 150px 20px 90px; text-align: center; }
    .success-ic {
      width: 84px; height: 84px; border-radius: 50%; background: rgba(122, 162, 63, .15);
      display: flex; align-items: center; justify-content: center; margin: 0 auto 26px;
    }
    .success-ic svg { width: 40px; height: 40px; color: var(--leaf-dark); }
    .success-wrap h1 {
      font-family: var(--font-display); font-size: clamp(38px, 5vw, 52px);
      color: var(--green-900); margin-bottom: 12px; font-weight: 600;
    }
    .success-wrap > p { color: var(--muted); font-size: 16px; margin-bottom: 34px; }
    .order-box {
      background: var(--card); border: 1px solid var(--line); border-radius: 24px;
      padding: 30px; text-align: left; margin-bottom: 30px;
    }
    .order-box h3 {
      font-family: var(--font-display); font-size: 24px; color: var(--green-900);
      margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
    }
    .order-box .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14.5px; gap: 16px; }
    .order-box .row span:first-child { color: var(--muted); }
    .order-box .row span:last-child { font-weight: 700; color: var(--ink); text-align: right; }
    .order-box .row.total {
      border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
      font-size: 18px; color: var(--green-900);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 900px) {
      .pd-grid { grid-template-columns: 1fr; gap: 34px; }
      .pd-gallery { position: static; }
      .pd-wrap { padding-top: 110px; }
      .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    }
    @media (max-width: 560px) {
      .product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
      .p-body { padding: 16px 14px 18px; }
      .p-title { font-size: 20px; }
      .p-now { font-size: 22px; }
      .p-desc { display: none; }
      .p-actions { flex-direction: column; }
      .cat-bar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
      .cat-chip { white-space: nowrap; }
    }

    /* ==========================================================
       BRAND HERO — generic, product-agnostic. The visual is a
       collage assembled from whatever is in the catalog.
       ========================================================== */

    .brand-hero .hero-grid { align-items: center; }

    .brand-hero.is-compact { padding-bottom: 40px; }
    .brand-hero.is-compact .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .brand-hero.is-compact .hero-visual { display: none; }
    .brand-hero.is-compact .hero-copy { max-width: 760px; margin: 0 auto; }
    .brand-hero.is-compact .hero-cta { justify-content: center; }
    .brand-hero.is-compact .hero-facts { margin-left: auto; margin-right: auto; }
    .brand-hero.is-compact h1 { font-size: clamp(38px, 5vw, 60px); }

    /* ---------- brand facts strip ---------- */
    .hero-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
      max-width: 460px;
    }
    .hero-facts .hf {
      background: rgba(255, 255, 255, .6);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 16px;
      backdrop-filter: blur(6px);
    }
    .hero-facts .hf b {
      display: block;
      font-family: var(--font-display);
      font-size: 27px;
      font-weight: 600;
      color: var(--green-900);
      line-height: 1.05;
    }
    .hero-facts .hf span {
      display: block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 3px;
    }

    /* ---------- collage ---------- */
    .hero-collage {
      position: relative;
      width: min(500px, 96%);
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      z-index: 2;
    }
    .hero-collage .hc-shot {
      position: absolute;
      border-radius: 26px;
      overflow: hidden;
      background: linear-gradient(160deg, var(--paper-2), #fff);
      border: 1px solid rgba(255, 255, 255, .8);
      box-shadow: 0 26px 54px rgba(20, 42, 27, .18);
      display: block;
      transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s;
    }
    .hero-collage .hc-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-collage .hc-shot:hover {
      transform: translateY(-8px) rotate(0deg) scale(1.02);
      box-shadow: 0 34px 66px rgba(20, 42, 27, .26);
      z-index: 6 !important;
    }

    /* Primary shot */
    .hero-collage .hc-1 {
      width: 62%; height: 74%;
      top: 8%; left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      border-radius: 30px;
    }
    /* Supporting shots fan out behind it */
    .hero-collage .hc-2 {
      width: 40%; height: 46%;
      top: 4%; left: 0;
      transform: rotate(-7deg);
      z-index: 3;
    }
    .hero-collage .hc-3 {
      width: 40%; height: 46%;
      bottom: 4%; right: 0;
      transform: rotate(6deg);
      z-index: 4;
    }
    .hero-collage .hc-4 {
      width: 34%; height: 38%;
      bottom: 8%; left: 2%;
      transform: rotate(4deg);
      z-index: 2;
    }

    /* Single product / empty catalog — just show it centred */
    .hero-collage.shots-1 .hc-1 {
      width: 88%; height: 88%;
      top: 6%;
      box-shadow: 0 30px 60px rgba(20, 42, 27, .2);
    }
    /* Two products — side by side, gently tilted */
    .hero-collage.shots-2 .hc-1 { width: 58%; height: 70%; top: 6%; left: 42%; transform: translateX(-50%) rotate(3deg); }
    .hero-collage.shots-2 .hc-2 { width: 46%; height: 54%; bottom: 6%; right: 2%; top: auto; left: auto; transform: rotate(-5deg); }
    /* Three products */
    .hero-collage.shots-3 .hc-1 { width: 58%; height: 70%; top: 5%; }
    .hero-collage.shots-3 .hc-2 { width: 42%; height: 48%; top: 6%; left: 0; }
    .hero-collage.shots-3 .hc-3 { width: 42%; height: 48%; bottom: 2%; right: 0; }

    /* ==========================================================
       SHOP PAGE
       ========================================================== */
    section.shop-page { padding-top: 44px; padding-bottom: 100px; }

    .shop-hero {
      padding: 132px 0 48px;
      text-align: center;
    }
    .shop-hero .eyebrow { justify-content: center; }
    .shop-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(44px, 5.6vw, 70px);
      font-weight: 600;
      color: var(--green-900);
      line-height: 1.05;
      margin: 10px 0 14px;
    }
    .shop-hero h1 em { font-style: italic; color: var(--leaf-dark); }
    .shop-hero p {
      color: var(--muted);
      font-size: 16.5px;
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.75;
    }

    .shop-search {
      position: relative;
      max-width: 380px;
      width: 100%;
    }
    .shop-search input {
      width: 100%;
      padding: 12px 44px 12px 44px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--card);
      font-family: var(--font-sans);
      font-size: 14px;
      color: var(--ink);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .shop-search input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(122, 162, 63, .12); }
    .shop-search .si {
      position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
      color: var(--muted); pointer-events: none; display: flex;
    }
    .shop-search .sx {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 18px; padding: 6px 10px; line-height: 1;
    }
    .shop-search .sx:hover { color: var(--danger, #b3261e); }

    .active-filters {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
      margin-bottom: 22px; font-size: 13.5px; color: var(--muted);
    }
    .filter-pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--green-900); color: #fff;
      border-radius: 999px; padding: 7px 14px;
      font-size: 12.5px; font-weight: 700; text-decoration: none;
    }
    .filter-pill:hover { background: var(--green-800); }
    .filter-pill .x { opacity: .7; font-size: 14px; }

    /* ==========================================================
       FEATURED ROW (homepage)
       ========================================================== */
    .featured-foot {
      display: flex;
      justify-content: center;
      margin-top: 50px;
    }

    @media (max-width: 900px) {
      .hero-collage { width: min(420px, 88%); margin-top: 20px; }
      .hero-facts .hf { padding: 10px 14px; min-width: 100px; }
      .hero-facts .hf b { font-size: 23px; }
      .shop-hero { padding-top: 108px; }
    }
    @media (max-width: 560px) {
      .hero-facts { gap: 10px; max-width: none; }
      .hero-collage .hc-4 { display: none; }
    }

    /* Active state for the Shop link in the main nav */
    .nav-links a.is-active {
      color: var(--green-900);
      font-weight: 700;
    }
    .nav-links a.is-active::after {
      transform: scaleX(1);
    }