:root {
      --cream: #f7f1e9;
      --cream-2: #fffaf4;
      --white: #ffffff;
      --ink: #28251f;
      --muted: #777066;
      --line: #e7ded3;

      --sage: #7c8b72;
      --sage-dark: #56634f;

      --pink: #d9959e;
      --pink-light: #f4dfe1;

      --blue: #8faec5;
      --blue-light: #dcebf4;

      --gold: #b79662;

      --shadow:
        0 20px 60px rgba(56, 43, 30, 0.10);

      --radius-lg: 28px;
      --radius-md: 18px;
      --radius-sm: 12px;

      --max: 1180px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      color: var(--ink);
      background: var(--cream-2);
      line-height: 1.6;
      overflow-x: hidden;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    img {
      display: block;
      width: 100%;
    }

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin-inline: auto;
    }

    /* =========================
       NAVBAR
    ========================== */

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(255, 250, 244, 0.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(231, 222, 211, 0.7);
    }

    .nav-inner {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 27px;
      letter-spacing: 0.08em;
      font-weight: 500;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 14px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;
      font-size: 14px;
      color: #5d574f;
    }

    .nav-links a {
      transition: color 0.2s ease;
    }

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

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .icon-button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--white);
      display: grid;
      place-items: center;
      position: relative;
      transition:
        transform 0.2s ease,
        border-color 0.2s ease;
    }

    .icon-button:hover {
      transform: translateY(-2px);
      border-color: var(--ink);
    }

    .cart-count {
      position: absolute;
      top: -4px;
      right: -2px;
      min-width: 20px;
      height: 20px;
      border-radius: 99px;
      display: grid;
      place-items: center;
      padding-inline: 5px;
      font-size: 11px;
      background: var(--pink);
      color: white;
      font-weight: 700;
    }

    .mobile-menu {
      display: none;
    }

    /* =========================
       HERO
    ========================== */

    .hero {
      padding-top: 145px;
      padding-bottom: 85px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: rgba(244, 223, 225, 0.55);
      top: -220px;
      right: -180px;
      filter: blur(2px);
      pointer-events: none;
    }

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--sage-dark);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .eyebrow::before {
      content: "";
      width: 30px;
      height: 1px;
      background: currentColor;
    }

    .hero h1 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      font-size: clamp(48px, 6vw, 78px);
      line-height: 0.98;
      letter-spacing: -0.045em;
      max-width: 650px;
    }

    .hero h1 em {
      color: var(--pink);
      font-style: italic;
    }

    .hero-copy {
      margin-top: 25px;
      max-width: 540px;
      color: var(--muted);
      font-size: 17px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .btn {
      min-height: 50px;
      padding: 0 23px;
      border-radius: 999px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 700;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    }

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

    .btn-primary {
      background: var(--ink);
      color: white;
      box-shadow: 0 12px 28px rgba(40, 37, 31, 0.15);
    }

    .btn-primary:hover {
      background: #3b3730;
      box-shadow: 0 16px 35px rgba(40, 37, 31, 0.2);
    }

    .btn-secondary {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }

    .btn-secondary:hover {
      background: white;
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 35px;
      color: var(--muted);
      font-size: 13px;
    }

    .hero-note strong {
      color: var(--ink);
    }

    .hero-visual {
      position: relative;
    }

    .hero-image {
      aspect-ratio: 0.88;
      object-fit: cover;
      border-radius: 48% 48% 18px 18px;
      box-shadow: var(--shadow);
      background: var(--pink-light);
    }


    /* =========================
       TRUST STRIP
    ========================== */

    .trust-strip {
      border-block: 1px solid var(--line);
      background: #fcf7f1;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .trust-item {
      min-height: 115px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      border-right: 1px solid var(--line);
    }

    .trust-item:last-child {
      border-right: 0;
    }

    .trust-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }

    .trust-item strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      font-weight: 400;
    }

    /* =========================
       SECTION
    ========================== */

    .section {
      padding: 105px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 38px;
    }

    .section-kicker {
      color: var(--sage-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .section-title {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 400;
      font-size: clamp(36px, 5vw, 54px);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .section-description {
      max-width: 440px;
      color: var(--muted);
      font-size: 14px;
    }

    /* =========================
       CATEGORIES
    ========================== */

    .category-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .category-card {
      position: relative;
      min-height: 280px;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: #ddd;
      cursor: pointer;
    }

    .category-card img {
      position: absolute;
      inset: 0;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .category-card:hover img {
      transform: scale(1.05);
    }

    .category-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 22px;
      color: white;
      background:
        linear-gradient(
          to top,
          rgba(20, 17, 14, 0.72),
          rgba(20, 17, 14, 0.02) 65%
        );
    }

    .category-overlay h3 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 25px;
      font-weight: 400;
    }

    .category-overlay span {
      opacity: 0.82;
      font-size: 12px;
      margin-top: 2px;
    }

    /* =========================
       CATALOG
    ========================== */

    .catalog-section {
      background: #f6f0e8;
    }

    .catalog-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .filter-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-btn {
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      padding: 9px 16px;
      border-radius: 999px;
      font-size: 12px;
      transition: all 0.2s ease;
    }

    .filter-btn:hover,
    .filter-btn.active {
      color: white;
      background: var(--ink);
      border-color: var(--ink);
    }

    .search-box {
      width: 240px;
      height: 42px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    .search-box svg {
      width: 16px;
      color: var(--muted);
      flex: 0 0 auto;
    }

    .search-box input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .product-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }

    .product-image-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 0.88;
      background: #eee;
    }

    .product-image {
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .product-card:hover .product-image {
      transform: scale(1.04);
    }

    .product-badge {
      position: absolute;
      top: 13px;
      left: 13px;
      background: rgba(255,255,255,0.92);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .product-info {
      padding: 18px;
    }

    .product-category {
      color: var(--sage-dark);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .product-name {
      margin-top: 5px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 22px;
      font-weight: 400;
    }

    .product-description {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      min-height: 38px;
    }

    .product-bottom {
      margin-top: 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .product-price {
      font-size: 15px;
      font-weight: 800;
    }

    .add-button {
      border: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--ink);
      color: white;
      display: grid;
      place-items: center;
      transition: transform 0.2s ease;
    }

    .add-button:hover {
      transform: scale(1.08);
    }

    .empty-state {
      display: none;
      padding: 50px 20px;
      text-align: center;
      color: var(--muted);
      grid-column: 1 / -1;
    }

    /* =========================
       STORY
    ========================== */

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .story-images {
      display: grid;
      grid-template-columns: 1fr 0.7fr;
      gap: 14px;
      align-items: end;
    }

    .story-images img {
      object-fit: cover;
      border-radius: var(--radius-md);
    }

    .story-images img:first-child {
      aspect-ratio: 0.8;
    }

    .story-images img:last-child {
      aspect-ratio: 0.72;
      margin-bottom: 55px;
    }

    .story-copy p {
      color: var(--muted);
      margin-top: 20px;
      max-width: 500px;
    }

    .story-list {
      margin-top: 28px;
      display: grid;
      gap: 15px;
    }

    .story-list li {
      list-style: none;
      display: flex;
      gap: 12px;
      align-items: start;
      font-size: 14px;
    }

    .story-check {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--pink-light);
      color: var(--pink);
      display: grid;
      place-items: center;
      font-size: 12px;
    }

    /* =========================
       HOW IT WORKS
    ========================== */

    .steps-section {
      background: #eef2ea;
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .step {
      padding: 28px;
      background: rgba(255,255,255,0.56);
      border: 1px solid rgba(86,99,79,0.12);
      border-radius: var(--radius-md);
    }

    .step-number {
      color: var(--sage-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .step h3 {
      margin-top: 28px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 25px;
      font-weight: 400;
    }

    .step p {
      color: var(--muted);
      margin-top: 9px;
      font-size: 13px;
    }

    /* =========================
       TESTIMONIAL
    ========================== */

    .testimonial-wrap {
      position: relative;
      padding: 60px;
      background: var(--ink);
      color: white;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .testimonial-wrap::after {
      content: "❀";
      position: absolute;
      right: 35px;
      top: 20px;
      font-size: 180px;
      line-height: 1;
      color: rgba(255,255,255,0.05);
    }

    .quote-mark {
      color: var(--pink);
      font-family: Georgia, serif;
      font-size: 70px;
      line-height: 0.6;
    }

    .testimonial-text {
      position: relative;
      z-index: 1;
      margin-top: 20px;
      max-width: 800px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(25px, 4vw, 42px);
      line-height: 1.18;
    }

    .testimonial-author {
      position: relative;
      z-index: 1;
      margin-top: 25px;
      color: #c8c2b9;
      font-size: 13px;
    }

    /* =========================
       FAQ
    ========================== */

    .faq-grid {
      max-width: 800px;
      margin: auto;
      display: grid;
      gap: 10px;
    }

    .faq-item {
      border: 1px solid var(--line);
      background: white;
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 20px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-weight: 700;
      color: var(--ink);
    }

    .faq-icon {
      font-size: 20px;
      color: var(--muted);
      transition: transform 0.2s ease;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-answer p {
      padding: 0 20px 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .faq-item.open .faq-answer {
      max-height: 200px;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    /* =========================
       CTA
    ========================== */

    .cta-section {
      padding-top: 30px;
      padding-bottom: 100px;
    }

    .cta {
      position: relative;
      overflow: hidden;
      padding: 70px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(
          120deg,
          #f4dfe1 0%,
          #f8eee7 48%,
          #dcebf4 100%
        );
    }

    .cta h2 {
      max-width: 700px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1;
      font-weight: 400;
      letter-spacing: -0.04em;
    }

    .cta p {
      max-width: 530px;
      margin-top: 18px;
      color: #645e56;
    }

    .cta .hero-actions {
      margin-top: 28px;
    }

    /* =========================
       FOOTER
    ========================== */

    footer {
      padding: 55px 0 30px;
      background: #24221e;
      color: #eee8df;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 0.7fr 0.7fr 1fr;
      gap: 45px;
      padding-bottom: 45px;
    }

    .footer-brand {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 28px;
      letter-spacing: 0.08em;
    }

    .footer-description {
      max-width: 320px;
      color: #aaa39a;
      font-size: 13px;
      margin-top: 13px;
    }

    .footer-heading {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #bcb4aa;
      margin-bottom: 15px;
    }

    .footer-links {
      display: grid;
      gap: 9px;
      color: #ddd6cc;
      font-size: 13px;
    }

    .footer-links a:hover {
      color: white;
    }

    .footer-bottom {
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: #8e887f;
      font-size: 11px;
    }

    /* =========================
       CART DRAWER
    ========================== */

    .overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(30, 26, 21, 0.42);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .cart-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(430px, 100%);
      height: 100%;
      z-index: 2100;
      background: #fffaf4;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      box-shadow: -20px 0 70px rgba(0,0,0,0.12);
    }

    .cart-drawer.open {
      transform: translateX(0);
    }

    .cart-header {
      min-height: 75px;
      padding: 0 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cart-header h3 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 25px;
      font-weight: 400;
    }

    .cart-close {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 50%;
    }

    .cart-items {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .cart-empty {
      height: 100%;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      padding: 40px;
    }

    .cart-item {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }

    .cart-item img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 12px;
    }

    .cart-item h4 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 17px;
      font-weight: 400;
    }

    .cart-item p {
      color: var(--muted);
      font-size: 12px;
    }

    .remove-item {
      border: 0;
      background: transparent;
      color: #a65d66;
      font-size: 11px;
      margin-top: 5px;
    }

    .qty-control {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .qty-btn {
      width: 26px;
      height: 26px;
      border: 1px solid var(--line);
      background: white;
      border-radius: 50%;
      font-size: 14px;
      line-height: 1;
      display: grid;
      place-items: center;
      color: var(--ink);
      transition: transform 0.15s ease, border-color 0.15s ease;
    }

    .qty-btn:hover {
      transform: translateY(-1px);
      border-color: var(--ink);
    }

    .qty-value {
      min-width: 16px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
    }

    .cart-total {
      padding: 20px;
      border-top: 1px solid var(--line);
      background: white;
    }

    .cart-total-row {
      display: flex;
      justify-content: space-between;
      font-weight: 800;
      margin-bottom: 15px;
    }

    .checkout-btn {
      width: 100%;
    }

    /* =========================
       PRODUCT MODAL
    ========================== */

    .modal {
      position: fixed;
      inset: 0;
      z-index: 2200;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(30, 26, 21, 0.48);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .modal.show {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      width: min(850px, 100%);
      max-height: calc(100vh - 40px);
      overflow: auto;
      background: #fffaf4;
      border-radius: var(--radius-lg);
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      position: relative;
      transform: translateY(12px);
      transition: transform 0.25s ease;
    }

    .modal.show .modal-box {
      transform: translateY(0);
    }

    .modal-image {
      height: 100%;
      min-height: 470px;
      object-fit: cover;
    }

    .modal-content {
      padding: 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .modal-content .product-category {
      margin-bottom: 8px;
    }

    .modal-content h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 42px;
      font-weight: 400;
      line-height: 1;
    }

    .modal-price {
      margin-top: 15px;
      font-size: 20px;
      font-weight: 800;
    }

    .modal-description {
      margin-top: 15px;
      color: var(--muted);
      font-size: 14px;
    }

    .modal-actions {
      margin-top: 28px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .modal-close {
      position: absolute;
      right: 18px;
      top: 18px;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.88);
      z-index: 2;
    }

    /* =========================
       WHATSAPP
    ========================== */

    .whatsapp {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1500;
      width: 57px;
      height: 57px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: white;
      background: #25d366;
      box-shadow: 0 15px 30px rgba(37,211,102,0.25);
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    .whatsapp:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(37,211,102,0.35);
    }

    .whatsapp svg {
      width: 27px;
      height: 27px;
    }

    /* =========================
       ANIMATION
    ========================== */

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =========================
       RESPONSIVE
    ========================== */

    @media (max-width: 1050px) {
      .hero-grid {
        gap: 45px;
      }

      .category-grid,
      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 800px) {
      .nav-links {
        display: none;
      }

      .mobile-menu {
        display: grid;
      }

      .hero {
        padding-top: 120px;
      }

      .hero-grid,
      .story-grid {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        max-width: 580px;
        margin: auto;
      }


      .trust-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .trust-item:nth-child(2) {
        border-right: 0;
      }

      .trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
      }

      .story-grid {
        gap: 45px;
      }

      .modal-box {
        grid-template-columns: 1fr;
      }

      .modal-image {
        min-height: 300px;
        max-height: 45vh;
      }

      .modal-content {
        padding: 30px;
      }

      .modal-content h2 {
        font-size: 35px;
      }
    }

    @media (max-width: 600px) {
      .container {
        width: min(var(--max), calc(100% - 28px));
      }

      .nav-inner {
        min-height: 68px;
      }

      .brand {
        font-size: 22px;
      }

      .brand-mark {
        width: 29px;
        height: 29px;
        font-size: 11px;
      }

      .nav-actions .instagram-button {
        display: none;
      }

      .hero {
        padding-bottom: 65px;
      }

      .hero h1 {
        font-size: 48px;
      }

      .hero-copy {
        font-size: 15px;
      }

      .hero-image {
        border-radius: 42% 42% 16px 16px;
      }


      .section {
        padding: 75px 0;
      }

      .section-head {
        align-items: start;
        flex-direction: column;
        margin-bottom: 28px;
      }

      .category-grid {
        grid-template-columns: 1fr 1fr;
      }

      .category-card {
        min-height: 210px;
      }

      .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .product-info {
        padding: 13px;
      }

      .product-name {
        font-size: 18px;
      }

      .product-description {
        font-size: 11px;
      }

      .product-price {
        font-size: 12px;
      }

      .add-button {
        width: 34px;
        height: 34px;
      }

      .catalog-toolbar {
        align-items: stretch;
      }

      .search-box {
        width: 100%;
      }

      .filter-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }

      .filter-btn {
        white-space: nowrap;
      }

      .story-images {
        grid-template-columns: 1fr 0.75fr;
      }

      .steps-grid {
        grid-template-columns: 1fr;
      }

      .testimonial-wrap {
        padding: 35px 25px;
      }

      .cta {
        padding: 40px 25px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
      }

      .whatsapp {
        width: 52px;
        height: 52px;
        right: 15px;
        bottom: 15px;
      }
    }

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

      .category-grid {
        grid-template-columns: 1fr;
      }
    }