:root {
      --green: #007a46;
      --green-dark: #004d31;
      --green-light: #dff4d8;
      --yellow: #ffd21a;
      --cream: #fff8e7;
      --red: #e3212d;
      --blue: #1496d4;
      --orange: #f28b1d;
      --ink: #173126;
      --white: #fff;
      --shadow: 0 20px 45px rgba(22, 62, 39, .15);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--cream);
      font-family: "Trebuchet MS", Arial, sans-serif;
      line-height: 1.5;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--red);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    h1,h2,h3,p { margin-top: 0; }
    h1,h2,h3 { line-height: .98; }
    h1 {
      max-width: 760px;
      margin-bottom: 22px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(3.5rem, 8vw, 7.6rem);
      font-weight: 900;
      letter-spacing: -.03em;
      text-transform: uppercase;
    }
    h2 {
      margin-bottom: 20px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(2.55rem, 5vw, 5.1rem);
      letter-spacing: -.025em;
      text-transform: uppercase;
    }
    h3 {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 1.55rem;
      letter-spacing: .01em;
      text-transform: uppercase;
    }
    .lead { max-width: 660px; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }

    .topbar {
      background: var(--green-dark);
      color: #fff;
      text-align: center;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 8px 18px;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(0,77,49,.12);
      background: rgba(255,248,231,.92);
      backdrop-filter: blur(16px);
    }
    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }
    .brand { width: 176px; flex: 0 0 auto; }
    .brand img { width: 100%; }
    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-links a {
      position: relative;
      text-decoration: none;
      font-size: .83rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .nav-links a:not(.button)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -6px;
      height: 3px;
      border-radius: 3px;
      background: var(--red);
      transition: right .2s ease;
    }
    .nav-links a:hover::after { right: 0; }
    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-dark);
      font-size: 1.35rem;
      cursor: pointer;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 24px;
      border: 3px solid var(--green-dark);
      border-radius: 999px;
      background: var(--green-dark);
      color: #fff;
      box-shadow: 5px 5px 0 var(--yellow);
      text-decoration: none;
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .button:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--yellow); }
    .button.secondary { background: transparent; color: var(--green-dark); box-shadow: none; }
    .button.secondary:hover { background: #fff; box-shadow: 5px 5px 0 rgba(0,77,49,.18); }
    .button.red { border-color: var(--red); background: var(--red); box-shadow: 5px 5px 0 var(--green-dark); }

    .hero {
      position: relative;
      min-height: 750px;
      display: grid;
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 70% 42%, rgba(255,255,255,.72) 0 4%, transparent 4.2% 11%, rgba(255,255,255,.28) 11.2% 11.8%, transparent 12%),
        linear-gradient(120deg, var(--yellow) 0 66%, #f4b900 66% 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: auto -10% -115px -10%;
      height: 230px;
      background: var(--cream);
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }
    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 30px;
      padding: 70px 0 130px;
    }
    .hero-copy { position: relative; z-index: 4; }
    .hero-copy h1 span { color: var(--green); text-shadow: 4px 4px 0 rgba(255,255,255,.65); }
    .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 32px; }
    .heritage-stamp {
      display: inline-grid;
      place-items: center;
      width: 104px;
      height: 104px;
      margin-bottom: 24px;
      border: 3px solid var(--red);
      border-radius: 50%;
      color: var(--red);
      font-size: .72rem;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: .06em;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-7deg);
      background: rgba(255,255,255,.38);
    }
    .hero-products { position: relative; min-height: 590px; }
    .bag {
      position: absolute;
      width: min(390px, 73%);
      filter: drop-shadow(0 28px 20px rgba(58,61,15,.28));
      transform-origin: bottom center;
      animation: float 5.5s ease-in-out infinite;
    }
    .bag-main { right: 5%; top: 0; z-index: 3; }
    .bag-left { left: -6%; top: 135px; z-index: 1; transform: rotate(-12deg) scale(.83); animation-delay: -.8s; }
    .bag-right { right: -18%; top: 175px; z-index: 2; transform: rotate(12deg) scale(.78); animation-delay: -1.8s; }
    @keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } }
    .marquee {
      overflow: hidden;
      background: var(--red);
      color: #fff;
      border-block: 5px solid var(--green-dark);
      rotate: -1.2deg;
      margin-inline: -10px;
    }
    .marquee-track {
      width: max-content;
      display: flex;
      gap: 28px;
      padding: 15px 0;
      animation: marquee 23s linear infinite;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 1.05rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .marquee-track span::after { content: "✹"; margin-left: 28px; color: var(--yellow); }
    @keyframes marquee { to { transform: translateX(-50%); } }

    .story { padding: 140px 0 110px; }
    .story-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      align-items: center;
      gap: 80px;
    }
    .story-visual { position: relative; min-height: 570px; }
    .story-photo {
      position: absolute;
      inset: 0 8% 2% 0;
      overflow: hidden;
      border: 8px solid #fff;
      border-radius: 58% 42% 43% 57% / 42% 48% 52% 58%;
      box-shadow: var(--shadow);
      rotate: -3deg;
    }
    .story-photo img { width: 100%; height: 100%; object-fit: cover; }
    .story-card {
      position: absolute;
      right: 0;
      bottom: 25px;
      width: min(265px, 55%);
      padding: 24px;
      border: 4px solid var(--green-dark);
      border-radius: 22px;
      background: var(--yellow);
      box-shadow: 9px 9px 0 var(--red);
      rotate: 4deg;
    }
    .story-card strong {
      display: block;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 4.6rem;
      line-height: .8;
      color: var(--green-dark);
    }
    .story-card span { display: block; margin-top: 10px; font-weight: 900; text-transform: uppercase; }
    .story-copy p { font-size: 1.08rem; }
    .facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 32px 0; }
    .fact {
      padding: 18px 15px;
      border: 2px solid rgba(0,77,49,.16);
      border-radius: 18px;
      background: #fff;
      text-align: center;
    }
    .fact strong { display: block; color: var(--red); font-size: 1.3rem; }
    .fact span { font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

    .products {
      position: relative;
      padding: 110px 0 130px;
      background: var(--green);
      color: #fff;
      overflow: hidden;
    }
    .products::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .11;
      background-image: radial-gradient(circle, #fff 2px, transparent 2.3px);
      background-size: 30px 30px;
    }
    .products .container { position: relative; z-index: 2; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
    .section-head p { max-width: 480px; margin-bottom: 8px; color: rgba(255,255,255,.82); }
    .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
    .filter {
      border: 2px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: transparent;
      color: #fff;
      padding: 10px 18px;
      font: inherit;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .filter.active, .filter:hover { border-color: var(--yellow); background: var(--yellow); color: var(--green-dark); }
    .product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
    .product-card {
      position: relative;
      min-height: 495px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--cream);
      color: var(--ink);
      box-shadow: 0 18px 0 rgba(0,54,32,.34);
      transition: transform .23s ease, opacity .2s ease;
    }
    .product-card:hover { transform: translateY(-9px) rotate(-.4deg); }
    .product-image {
      position: absolute;
      inset: 8px 8px 125px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .product-image::before {
      content: "";
      position: absolute;
      width: 210px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent, var(--yellow));
      opacity: .23;
    }
    .product-image img {
      position: relative;
      z-index: 1;
      max-height: 330px;
      width: auto;
      filter: drop-shadow(0 15px 8px rgba(0,0,0,.18));
      transition: transform .25s ease;
    }
    .product-card:hover .product-image img { transform: scale(1.05) rotate(1deg); }
    .product-info { position: relative; z-index: 2; padding: 22px; background: #fff; }
    .product-info h3 { margin-bottom: 7px; }
    .product-info p { margin-bottom: 0; color: #5b675f; font-size: .9rem; }
    .product-tag {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 3;
      padding: 8px 11px;
      border-radius: 999px;
      background: var(--red);
      color: #fff;
      font-size: .67rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .product-card.hidden { display: none; }

    .benefits { padding: 120px 0; }
    .benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 45px; }
    .benefit {
      min-height: 250px;
      padding: 28px;
      border: 3px solid var(--green-dark);
      border-radius: 26px;
      background: #fff;
      box-shadow: 7px 7px 0 var(--yellow);
    }
    .benefit:nth-child(2) { box-shadow-color: var(--red); }
    .benefit:nth-child(3) { box-shadow-color: var(--blue); }
    .benefit:nth-child(4) { box-shadow-color: var(--orange); }
    .benefit-icon { font-size: 2.8rem; margin-bottom: 21px; }
    .benefit h3 { margin-bottom: 10px; }
    .benefit p { margin-bottom: 0; color: #5b675f; }

    .serving {
      padding: 0 0 130px;
    }
    .serving-card {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      min-height: 560px;
      overflow: hidden;
      border-radius: 44px;
      background: var(--red);
      color: #fff;
      box-shadow: var(--shadow);
    }
    .serving-copy { display: grid; align-content: center; padding: clamp(38px,6vw,80px); }
    .serving-copy p { max-width: 500px; font-size: 1.08rem; }
    .serving-photo { position: relative; overflow: hidden; }
    .serving-photo img { width: 100%; height: 100%; object-fit: cover; }
    .serving-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--red), transparent 28%);
    }

    .where { padding: 105px 0; background: var(--yellow); text-align: center; }
    .where h2 { max-width: 820px; margin-inline: auto; }
    .where .lead { margin-inline: auto; }
    .retailers { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 34px 0 38px; }
    .retailer {
      padding: 14px 20px;
      border: 3px solid var(--green-dark);
      border-radius: 14px;
      background: #fff;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 1.1rem;
      letter-spacing: .02em;
      text-transform: uppercase;
      rotate: var(--tilt,0deg);
    }

    .social { padding: 110px 0; }
    .social-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
    .social-collage { position: relative; min-height: 500px; }
    .social-collage img {
      position: absolute;
      width: 67%;
      height: 72%;
      object-fit: cover;
      border: 7px solid #fff;
      border-radius: 30px;
      box-shadow: var(--shadow);
    }
    .social-collage img:first-child { left: 0; top: 0; rotate: -6deg; }
    .social-collage img:last-child { right: 0; bottom: 0; rotate: 7deg; }
    .social-badge {
      position: absolute;
      z-index: 3;
      left: 38%;
      top: 37%;
      display: grid;
      place-items: center;
      width: 125px;
      aspect-ratio: 1;
      border: 4px solid var(--green-dark);
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-dark);
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
      rotate: -8deg;
    }

    footer { background: var(--green-dark); color: #fff; padding: 70px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 50px; padding-bottom: 48px; }
    .footer-brand { max-width: 230px; filter: brightness(0) invert(1); }
    footer h3 { font-size: 1.1rem; }
    footer ul { list-style: none; margin: 0; padding: 0; }
    footer li { margin: 8px 0; }
    footer a { color: rgba(255,255,255,.8); text-decoration: none; }
    footer a:hover { color: var(--yellow); }
    .copyright { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.65); font-size: .8rem; }

    @media (prefers-reduced-motion: reduce) {
      *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    }
    @media (max-width: 980px) {
      .nav-links {
        position: fixed;
        inset: 111px 20px auto;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        padding: 20px;
        border: 3px solid var(--green-dark);
        border-radius: 24px;
        background: var(--cream);
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 13px; }
      .menu-button { display: inline-grid; place-items: center; }
      .hero { min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; padding-top: 55px; }
      .hero-copy { text-align: center; }
      .hero-copy .lead { margin-inline: auto; }
      .heritage-stamp { margin-inline: auto; }
      .hero-actions { justify-content: center; }
      .hero-products { min-height: 560px; width: min(650px,100%); margin: -15px auto 0; }
      .story-grid, .social-grid { grid-template-columns: 1fr; gap: 55px; }
      .story-visual { max-width: 650px; width: 100%; margin: auto; }
      .product-grid { grid-template-columns: repeat(2,1fr); }
      .benefit-grid { grid-template-columns: repeat(2,1fr); }
      .serving-card { grid-template-columns: 1fr; }
      .serving-photo { min-height: 420px; }
      .serving-photo::after { background: linear-gradient(180deg, var(--red), transparent 25%); }
    }
    @media (max-width: 650px) {
      .container { width: min(100% - 26px, 1180px); }
      .topbar { font-size: .65rem; }
      .brand { width: 145px; }
      .nav { min-height: 68px; }
      .nav-links { inset: 99px 13px auto; }
      h1 { font-size: clamp(3.1rem,17vw,5.2rem); }
      h2 { font-size: clamp(2.5rem,13vw,4rem); }
      .hero-grid { padding-bottom: 90px; }
      .hero-products { min-height: 430px; }
      .bag { width: 69%; }
      .bag-left { left: -10%; top: 95px; }
      .bag-right { right: -17%; top: 118px; }
      .story { padding-top: 100px; }
      .story-visual { min-height: 440px; }
      .story-photo { right: 2%; }
      .story-card { width: 48%; padding: 17px; }
      .story-card strong { font-size: 3.6rem; }
      .facts { grid-template-columns: 1fr; }
      .section-head { display: block; }
      .product-grid { grid-template-columns: 1fr; }
      .product-card { min-height: 520px; }
      .benefit-grid { grid-template-columns: 1fr; }
      .social-collage { min-height: 390px; }
      .social-badge { width: 96px; left: 36%; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    }

/* WordPress integration safeguards */
body.mariquitas-custom-home { margin: 0 !important; max-width: none !important; }
body.mariquitas-custom-home .wp-site-blocks { padding: 0 !important; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 99999;
  width: auto;
  height: auto;
  padding: 12px 16px;
  margin: 0;
  clip: auto;
  background: #fff;
  color: #173126;
  font-weight: 700;
}

/* Keep key headings readable against the light sections. */
.story-copy h2,
.benefits h2 {
  color: var(--green-dark) !important;
}

/* Subtle rustic vintage texture across the page backgrounds. */
body.mariquitas-custom-home {
  background-color: var(--cream);
  background-image: url('../images/vintage-paper-texture.png');
  background-repeat: repeat;
  background-size: 512px 512px;
}

body.mariquitas-custom-home .site-header {
  background-image:
    linear-gradient(rgba(255,248,231,.91), rgba(255,248,231,.91)),
    url('../images/vintage-paper-texture.png');
  background-repeat: repeat;
  background-size: auto, 512px 512px;
}

body.mariquitas-custom-home .hero {
  background-image:
    url('../images/vintage-paper-texture.png'),
    radial-gradient(circle at 70% 42%, rgba(255,255,255,.72) 0 4%, transparent 4.2% 11%, rgba(255,255,255,.28) 11.2% 11.8%, transparent 12%),
    linear-gradient(120deg, var(--yellow) 0 66%, #f4b900 66% 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 512px 512px, auto, cover;
  background-blend-mode: multiply, normal, normal;
}

body.mariquitas-custom-home .products,
body.mariquitas-custom-home .where,
body.mariquitas-custom-home .serving-card,
body.mariquitas-custom-home footer {
  background-image: url('../images/vintage-paper-texture.png');
  background-repeat: repeat;
  background-size: 512px 512px;
  background-blend-mode: soft-light;
}