@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rye&display=swap");
      :root {
        --ink: #070707;
        --cream: #eee6d6;
        --muted: #a79f92;
        --red: #a71919;
        --heat: #d94a16;
        --gold: #d4a62a;
        --blue: #168fd1;
        --green: #477f38;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: #050505;
        color: var(--cream);
        font-family: Oswald, Arial, sans-serif;
        letter-spacing: 0.04em;
      }
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.14;
        background-image: radial-gradient(#fff 0.55px, transparent 0.7px);
        background-size: 5px 5px;
        mix-blend-mode: soft-light;
      }
      nav {
        height: 76px;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6vw;
        background: linear-gradient(#050505f2, #050505a8, transparent);
        backdrop-filter: blur(3px);
      }
      .logo {
        font-family: Rye, serif;
        font-size: 22px;
        color: var(--cream);
        text-decoration: none;
        cursor: pointer;
      }
      .logo span {
        color: #9c241b;
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 22px;
      }
      .navlinks {
        display: flex;
        gap: 30px;
      }
      .lang-toggle {
        border: 1px solid #665f55;
        background: #0b0b0b;
        color: #ddd3c2;
        padding: 7px 9px;
        font:
          600 11px Oswald,
          Arial,
          sans-serif;
        letter-spacing: 0.12em;
        cursor: pointer;
      }
      .lang-toggle:hover {
        border-color: #b83225;
        color: #fff;
      }
      .navlinks a {
        color: #ddd3c2;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 0.15em;
      }
      .navlinks a:hover {
        color: white;
      }
      .hero {
        min-height: 100vh;
        display: grid;
        place-items: center;
        text-align: center;
        position: relative;
        overflow: hidden;
        padding: 120px 7vw 70px;
        background:
          radial-gradient(ellipse at 50% 65%, #62200b42 0, transparent 34%),
          linear-gradient(to bottom, #050505 0, #0b0908 60%, #050505 100%);
      }
      .smoke {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse at 20% 70%, #aaa2 0, transparent 25%),
          radial-gradient(ellipse at 75% 48%, #aaa1 0, transparent 28%);
        filter: blur(25px);
        animation: drift 9s ease-in-out infinite alternate;
      }
      @keyframes drift {
        to {
          transform: translate(3%, -2%) scale(1.08);
        }
      }
      .hero-inner {
        position: relative;
        max-width: 1050px;
      }
      .eyebrow {
        font-size: 13px;
        letter-spacing: 0.38em;
        color: #b9ad9b;
        margin-bottom: 18px;
      }
      .hero h1 {
        font-family: Rye, serif;
        font-size: clamp(56px, 10vw, 132px);
        line-height: 0.9;
        margin: 0;
        text-shadow: 0 4px 40px #000;
      }
      .hero h1 em {
        font-style: normal;
        color: #9c241b;
      }
      .hero h2 {
        font-size: clamp(20px, 3vw, 34px);
        letter-spacing: 0.22em;
        margin: 30px 0 8px;
      }
      .hero p {
        color: #b7ad9e;
        font:
          400 18px/1.7 Arial,
          sans-serif;
        max-width: 660px;
        margin: 0 auto 34px;
      }
      .btn {
        display: inline-block;
        border: 1px solid #b83225;
        padding: 15px 29px;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 0.18em;
        background: #861a13;
        box-shadow: 0 0 30px #a22b1a33;
        transition: 0.25s;
      }
      .btn:hover {
        transform: translateY(-2px);
        background: #ad241a;
      }
      section {
        padding: 100px 6vw;
      }
      .section-head {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 55px;
      }
      .section-head small {
        color: #a52a20;
        letter-spacing: 0.3em;
      }
      .section-head h2 {
        font-family: Rye, serif;
        font-size: clamp(34px, 5vw, 62px);
        margin: 12px 0;
      }
      .section-head p {
        font:
          16px/1.7 Arial,
          sans-serif;
        color: #a9a093;
      }
      .products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        max-width: 1250px;
        margin: auto;
      }
      .card {
        --accent: #999;
        min-height: 410px;
        border: 1px solid #292929;
        background: linear-gradient(145deg, #141414, #080808);
        position: relative;
        padding: 30px;
        overflow: hidden;
        transition: 0.35s;
      }
      .card:after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: var(--accent);
        filter: blur(90px);
        opacity: 0.12;
        right: -80px;
        bottom: -70px;
      }
      @media (hover: hover) and (pointer: fine) {
        .card:hover {
          transform: translateY(-7px);
          border-color: var(--accent);
          box-shadow: 0 15px 55px #000;
        }
      }
      .card .num {
        color: #666;
        font-size: 12px;
      }
      .card h3 {
        font-family: Rye, serif;
        font-size: 47px;
        margin: 70px 0 5px;
        color: var(--accent);
        text-shadow: 0 0 25px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      .card h4 {
        font-size: 17px;
        letter-spacing: 0.15em;
        margin: 0 0 12px;
      }
      .card p {
        font:
          14px/1.65 Arial,
          sans-serif;
        color: #aaa196;
        max-width: 310px;
      }
      .tags {
        position: absolute;
        bottom: 27px;
        left: 30px;
        font-size: 11px;
        letter-spacing: 0.18em;
        color: #d7cfc0;
      }
      .red {
        --accent: var(--red);
      }
      .heat {
        --accent: var(--heat);
      }
      .gold {
        --accent: var(--gold);
      }
      .black {
        --accent: #8f8b84;
      }
      .blue {
        --accent: var(--blue);
      }
      .cajun {
        --accent: var(--green);
      }
      .story {
        min-height: 650px;
        display: flex;
        align-items: center;
        background: linear-gradient(
          90deg,
          #070707 20%,
          #100d0a 60%,
          #281309 130%
        );
        position: relative;
        overflow: hidden;
      }
      .story:after {
        content: "";
        position: absolute;
        right: 4%;
        width: 42vw;
        height: 42vw;
        border-radius: 50%;
        background: radial-gradient(circle, #d14a191d, transparent 65%);
        filter: blur(5px);
      }
      .story-copy {
        max-width: 650px;
        position: relative;
        z-index: 1;
      }
      .story h2 {
        font-family: Rye, serif;
        font-size: clamp(42px, 6vw, 78px);
        line-height: 1.08;
        margin: 0 0 25px;
      }
      .story h2 span {
        color: #a52a20;
      }
      .story p {
        font:
          17px/1.8 Arial,
          sans-serif;
        color: #b3aa9d;
      }
      .pairings {
        max-width: 1100px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid #262626;
        border-bottom: 1px solid #262626;
      }
      .pair {
        text-align: center;
        padding: 35px 12px;
        border-right: 1px solid #262626;
      }
      .pair:last-child {
        border: 0;
      }
      .pair b {
        display: block;
        font-size: 17px;
        margin-bottom: 8px;
      }
      .pair span {
        font:
          12px Arial,
          sans-serif;
        color: #91897e;
      }
      .manifesto {
        text-align: center;
        padding: 125px 6vw;
        background: radial-gradient(
          circle at 50% 100%,
          #5a1d0b3d,
          transparent 38%
        );
      }
      .manifesto h2 {
        font-family: Rye, serif;
        font-size: clamp(37px, 7vw, 88px);
        margin: 0;
      }
      .manifesto h2 span {
        color: #a52a20;
      }
      .manifesto p {
        color: #948b7f;
        letter-spacing: 0.24em;
      }
      .contact {
        padding: 85px 6vw;
        text-align: center;
        border-top: 1px solid #222;
        background: radial-gradient(
          circle at 50% 100%,
          #4015092b,
          transparent 42%
        );
      }
      .contact-inner {
        max-width: 720px;
        margin: auto;
      }
      .contact h2 {
        font-family: Rye, serif;
        font-size: clamp(34px, 5vw, 58px);
        margin: 10px 0 16px;
      }
      .contact p {
        font:
          16px/1.7 Arial,
          sans-serif;
        color: #a9a093;
      }
      .contact a {
        color: #eee6d6;
        text-decoration: none;
        border-bottom: 1px solid #a52a20;
        padding-bottom: 3px;
      }
      .contact a:hover {
        color: #fff;
      }
      footer {
        padding: 35px 6vw;
        border-top: 1px solid #222;
        display: flex;
        justify-content: space-between;
        color: #746e65;
        font-size: 12px;
        letter-spacing: 0.12em;
      }
      @media (max-width: 850px) {
        .navlinks {
          display: none;
        }
        .products {
          grid-template-columns: 1fr 1fr;
        }
        .pairings {
          grid-template-columns: 1fr;
        }
        .pair {
          border-right: 0;
          border-bottom: 1px solid #262626;
        }
        .hero h1 {
          font-size: 16vw;
        }
      }
      @media (max-width: 560px) {
        .products {
          grid-template-columns: 1fr;
        }
        .card {
          min-height: 330px;
        }
        .card h3 {
          margin-top: 45px;
        }
      }

      .card {
        cursor: pointer;
      }
      .card-link {
        color: inherit;
        text-decoration: none;
        display: block;
      }
      .card-link:focus-visible .card {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
      }
      .product-page {
        display: none;
        min-height: 100vh;
        padding: 115px 6vw 70px;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 75% 30%,
            color-mix(in srgb, var(--accent) 14%, transparent),
            transparent 34%
          ),
          #050505;
      }
      .product-page:target {
        display: block;
      }
      body:has(.product-page:target) > header.hero,
      body:has(.product-page:target) > header.showcase-hero,
      body:has(.product-page:target) > section:not(.product-page),
      body:has(.product-page:target) > footer {
        display: none;
      }
      .product-wrap {
        max-width: 1180px;
        margin: auto;
      }
      .back {
        display: inline-block;
        margin-bottom: 35px;
        color: #bdb3a5;
        text-decoration: none;
        letter-spacing: 0.16em;
        font-size: 12px;
      }
      .product-hero {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 70px;
        align-items: center;
        min-height: 520px;
      }
      .product-kicker {
        color: var(--accent);
        letter-spacing: 0.28em;
        font-size: 13px;
      }
      .product-title {
        font-family: Rye, serif;
        font-size: clamp(72px, 10vw, 145px);
        line-height: 0.88;
        margin: 14px 0;
        color: var(--accent);
      }
      .product-sub {
        font-size: 25px;
        letter-spacing: 0.15em;
        margin: 0 0 14px;
      }
      .product-desc {
        font:
          18px/1.75 Arial,
          sans-serif;
        color: #b7ad9e;
        max-width: 640px;
      }
      .flavor {
        font-size: 13px;
        letter-spacing: 0.24em;
        color: var(--accent);
        margin-top: 26px;
      }
      .jar {
        height: 470px;
        border: 1px solid #333;
        border-radius: 28px;
        background: linear-gradient(
          90deg,
          #090909,
          #181818 20%,
          #080808 50%,
          #1b1b1b 78%,
          #070707
        );
        box-shadow: 0 35px 90px #000;
        position: relative;
        max-width: 310px;
        margin: auto;
      }
      .jar:before {
        content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: -22px;
        height: 55px;
        border-radius: 18px;
        background: linear-gradient(#242424, #070707);
        border: 1px solid #333;
      }
      .jar-label {
        position: absolute;
        inset: 58px 20px 35px;
        border: 1px solid var(--accent);
        display: grid;
        place-items: center;
        text-align: center;
        padding: 18px;
        background: #080808;
        box-shadow: inset 0 0 35px
          color-mix(in srgb, var(--accent) 9%, transparent);
      }
      .jar-label strong {
        font-family: Rye, serif;
        font-size: 58px;
        color: var(--accent);
      }
      .jar-label span {
        display: block;
        color: #d8cebd;
        font-size: 12px;
        letter-spacing: 0.16em;
        margin-top: 12px;
      }
      .details {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: #292929;
        border: 1px solid #292929;
        margin-top: 55px;
      }
      .detail {
        background: #090909;
        padding: 30px;
      }
      .detail h4 {
        color: var(--accent);
        letter-spacing: 0.18em;
        margin: 0 0 12px;
      }
      .detail p {
        font:
          14px/1.7 Arial,
          sans-serif;
        color: #aaa196;
        margin: 0;
      }
      @media (max-width: 800px) {
        .showcase-hero img {
          width: 100%;
          max-width: none;
        }

        .product-page {
          padding: 105px 24px 48px;
          overflow-x: hidden;
          overflow-y: visible;
        }
        .product-wrap {
          width: 100%;
          max-width: 100%;
          overflow: visible;
        }
        .back {
          margin-bottom: 28px;
        }
        .product-hero {
          display: flex;
          flex-direction: column;
          gap: 42px;
          align-items: stretch;
          min-height: 0;
          width: 100%;
        }
        .product-copy {
          min-width: 0;
          width: 100%;
        }
        .product-title {
          font-size: clamp(64px, 22vw, 105px);
          max-width: 100%;
          overflow-wrap: normal;
        }
        .product-sub {
          font-size: clamp(20px, 6vw, 25px);
        }
        .product-desc {
          font-size: 17px;
          line-height: 1.7;
          max-width: 100%;
        }
        .jar {
          box-sizing: border-box;
          width: min(270px, 78vw);
          max-width: 78vw;
          height: 410px;
          flex: 0 0 auto;
          margin: 12px auto 0;
          overflow: visible;
        }
        .jar-label {
          inset: 54px 16px 30px;
          padding: 14px;
          overflow: hidden;
        }
        .jar-label strong {
          font-size: clamp(38px, 12vw, 54px);
          max-width: 100%;
        }
        .jar-label span {
          font-size: 11px;
          line-height: 1.55;
        }
        .details {
          grid-template-columns: 1fr;
          margin-top: 44px;
          width: 100%;
        }
        .detail {
          padding: 26px 24px;
        }
      }
      @media (max-width: 420px) {
        .product-page {
          padding-left: 20px;
          padding-right: 20px;
        }
        .jar {
          width: min(250px, 76vw);
          max-width: 76vw;
          height: 385px;
        }
        .jar-label strong {
          font-size: 44px;
        }
      }

      .card-link {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      @media (hover: none), (pointer: coarse) {
        .card {
          transition: none;
        }
        .card-link:active .card {
          transform: none;
          border-color: #292929;
          box-shadow: none;
        }
      }

      /* V18 photographic showcase hero */
      .showcase-hero {
        position: relative;
        width: 100%;
        background: #050505;
        padding-top: 76px;
        overflow: hidden;
      }
      .showcase-hero img {
        display: block;
        width: 82%;
        max-width: 1440px;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
        object-position: center top;
      }
      .showcase-hit {
        display: none;
        position: absolute;
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      .hit-marinade {
        left: 4%;
        top: 29%;
        width: 23%;
        height: 49%;
      }
      .hit-rubs {
        left: 27%;
        top: 27%;
        width: 47%;
        height: 52%;
      }
      .hit-sauce {
        right: 4%;
        top: 29%;
        width: 22%;
        height: 49%;
      }

      @media (max-width: 800px) {
        .showcase-hero {
          min-height: auto;
          padding-top: 76px;
          overflow: hidden;
        }
        .showcase-hero img {
          width: 100%;
          height: auto;
          min-height: 0;
          object-fit: contain;
        }
        .hit-marinade {
          left: 1%;
          top: 35%;
          width: 26%;
          height: 43%;
        }
        .hit-rubs {
          left: 27%;
          top: 34%;
          width: 47%;
          height: 44%;
        }
        .hit-sauce {
          right: 1%;
          top: 35%;
          width: 25%;
          height: 43%;
        }
      }

      /* V21: atmospheric smoke outside the showcase image edges */
      .showcase-hero {
        isolation: isolate;
      }
      .showcase-hero::before,
      .showcase-hero::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 76px;
        bottom: 0;
        width: 18%;
        pointer-events: none;
        opacity: 0.62;
        filter: blur(18px);
        background:
          radial-gradient(
            ellipse at 50% 18%,
            rgba(190, 190, 190, 0.2) 0%,
            rgba(110, 110, 110, 0.1) 25%,
            transparent 58%
          ),
          radial-gradient(
            ellipse at 35% 48%,
            rgba(175, 175, 175, 0.18) 0%,
            rgba(100, 100, 100, 0.08) 28%,
            transparent 62%
          ),
          radial-gradient(
            ellipse at 60% 76%,
            rgba(155, 155, 155, 0.14) 0%,
            rgba(90, 90, 90, 0.06) 30%,
            transparent 65%
          );
      }
      .showcase-hero::before {
        left: 0;
      }
      .showcase-hero::after {
        right: 0;
        transform: scaleX(-1);
      }
      .showcase-hero img {
        position: relative;
        z-index: 1;
        /* soften the picture edges into the surrounding black/smoke */
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          #000 3.5%,
          #000 96.5%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          #000 3.5%,
          #000 96.5%,
          transparent 100%
        );
      }
      .showcase-hit {
        z-index: 3;
      }

      @media (max-width: 800px) {
        .showcase-hero::before,
        .showcase-hero::after {
          display: none;
        }
        .showcase-hero img {
          -webkit-mask-image: none;
          mask-image: none;
        }
      }

      /* V24: label artwork + interactive discovery */
      .product-label-art {
        display: block;
        width: min(100%, 430px);
        max-height: 620px;
        object-fit: contain;
        margin: auto;
        filter: drop-shadow(0 28px 50px #000);
      }
      .heat-scale {
        display: flex;
        gap: 6px;
        margin-top: 18px;
        align-items: center;
      }
      .heat-scale i {
        display: block;
        width: 24px;
        height: 5px;
        background: #2b2926;
      }
      .heat-scale i.on {
        background: var(--accent);
        box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
      }
      .heat-scale span {
        font:
          11px Arial,
          sans-serif;
        color: #938b80;
        margin-left: 7px;
        letter-spacing: 0.12em;
      }
      .finder {
        max-width: 1100px;
        margin: auto;
      }
      .finder-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 28px;
      }
      .finder-btn {
        border: 1px solid #37332f;
        background: #0b0b0b;
        color: #d8cebd;
        padding: 11px 16px;
        font:
          600 12px Oswald,
          Arial,
          sans-serif;
        letter-spacing: 0.12em;
        cursor: pointer;
      }
      .finder-btn.active,
      .finder-btn:hover {
        border-color: #a52a20;
        background: #1a0b08;
        color: #fff;
      }
      .finder-result {
        border: 1px solid #292929;
        background: linear-gradient(145deg, #111, #080808);
        padding: 28px;
        max-width: 760px;
        margin: auto;
        text-align: center;
        min-height: 145px;
      }
      .finder-result small {
        color: #a52a20;
        letter-spacing: 0.2em;
      }
      .finder-result h3 {
        font-family: Rye, serif;
        font-size: 36px;
        margin: 8px 0 8px;
      }
      .finder-result p {
        font:
          15px/1.7 Arial,
          sans-serif;
        color: #aaa196;
        margin: 0;
      }
      .cook-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        max-width: 1100px;
        margin: auto;
      }
      .cook-card {
        min-height: 250px;
        border: 1px solid #292929;
        padding: 28px;
        background: linear-gradient(145deg, #121212, #080808);
        position: relative;
      }
      .cook-card small {
        color: #a52a20;
        letter-spacing: 0.18em;
      }
      .cook-card h3 {
        font-family: Rye, serif;
        font-size: 28px;
        margin: 45px 0 8px;
      }
      .cook-card p {
        font:
          14px/1.65 Arial,
          sans-serif;
        color: #aaa196;
      }
      .coming {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: #6f685f;
        position: absolute;
        bottom: 25px;
      }
      .join-fire {
        text-align: center;
        border-top: 1px solid #222;
        background: radial-gradient(
          circle at 50% 100%,
          #49170a2d,
          transparent 45%
        );
      }
      .join-fire .email-mock {
        display: flex;
        max-width: 540px;
        margin: 25px auto 0;
      }
      .join-fire input {
        flex: 1;
        background: #080808;
        border: 1px solid #39332e;
        color: #eee6d6;
        padding: 14px;
        font:
          14px Arial,
          sans-serif;
        min-width: 0;
      }
      .join-fire button {
        border: 1px solid #a52a20;
        background: #861a13;
        color: #fff;
        padding: 0 22px;
        font:
          700 12px Oswald,
          Arial,
          sans-serif;
        letter-spacing: 0.15em;
      }
      .join-fire p {
        font:
          15px/1.7 Arial,
          sans-serif;
        color: #a9a093;
      }
      @media (max-width: 800px) {
        .cook-grid {
          grid-template-columns: 1fr;
        }
        .product-label-art {
          max-height: 520px;
        }
        .finder-buttons {
          gap: 7px;
        }
        .finder-btn {
          padding: 10px 12px;
        }
        .join-fire .email-mock {
          flex-direction: column;
          gap: 8px;
        }
        .join-fire button {
          padding: 14px;
        }
      }

      .product-heat {
        margin-top: 16px;
      }
      .product-heat i {
        width: 34px;
        height: 6px;
      }
      .product-heat span {
        font-weight: 700;
        color: #b9b0a3;
      }

      /* V31 TEST — visual product gateway */
      #rubs {
        padding-top: 72px;
      }
      .v31-rub-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
        max-width: 1450px;
        margin: 0 auto;
      }
      .v31-rub {
        --accent: #aaa;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 18px 14px 16px;
        border: 1px solid #2d2a25;
        background: linear-gradient(180deg, #11100e, #080808);
        color: inherit;
        text-decoration: none;
        transition: 0.25s;
        position: relative;
        overflow: hidden;
      }
      .v31-rub:after {
        content: "";
        position: absolute;
        inset: auto 10% -50px;
        height: 90px;
        background: var(--accent);
        filter: blur(55px);
        opacity: 0.1;
        pointer-events: none;
      }
      .v31-rub:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
      }
      .v31-rub img {
        width: 100%;
        height: 245px;
        object-fit: contain;
        display: block;
        margin: 0 auto 8px;
        filter: drop-shadow(0 16px 18px #000);
      }
      .v31-rub h3 {
        font-family: Rye, serif;
        color: var(--accent);
        font-size: 27px;
        text-align: center;
        margin: 2px 0 5px;
      }
      .v31-rub h4 {
        text-align: center;
        font-size: 13px;
        letter-spacing: 0.14em;
        margin: 0 0 9px;
      }
      .v31-rub p {
        font:
          12px/1.45 Arial,
          sans-serif;
        color: #b7ad9e;
        text-align: center;
        min-height: 35px;
        margin: 0 0 13px;
      }
      .v31-rub .heat-scale {
        margin-top: auto;
        justify-content: center;
        flex-wrap: wrap;
      }
      .v31-rub .heat-scale span {
        width: 100%;
        text-align: center;
        margin: 8px 0 0;
        font-size: 10px;
      }
      .v31-rub.red {
        --accent: var(--red);
      }
      .v31-rub.heat {
        --accent: var(--heat);
      }
      .v31-rub.gold {
        --accent: var(--gold);
      }
      .v31-rub.black {
        --accent: #8f8b84;
      }
      .v31-rub.blue {
        --accent: var(--blue);
      }
      .v31-rub.cajun {
        --accent: var(--green);
      }
      .v31-fire-system {
        padding: 70px 6vw 95px;
      }
      .v31-fire-wrap {
        max-width: 1180px;
        margin: auto;
        border: 1px solid #29241f;
        background:
          radial-gradient(circle at 50% 50%, #43150b25, transparent 36%),
          linear-gradient(135deg, #0d0b0a, #070707);
        display: grid;
        grid-template-columns: 1fr 90px 1fr;
        align-items: stretch;
        overflow: hidden;
      }
      .v31-fire-panel {
        padding: 42px 45px;
        position: relative;
      }
      .v31-fire-panel:first-child {
        text-align: right;
      }
      .v31-fire-panel small {
        color: #a52a20;
        letter-spacing: 0.24em;
      }
      .v31-fire-panel h2 {
        font-family: Rye, serif;
        color: #b83225;
        font-size: 31px;
        margin: 8px 0;
      }
      .v31-fire-panel h3 {
        font-size: 17px;
        letter-spacing: 0.15em;
        margin: 0 0 10px;
      }
      .v31-fire-panel p {
        font:
          14px/1.65 Arial,
          sans-serif;
        color: #aaa196;
        max-width: 380px;
        margin: 0 0 20px;
      }
      .v31-fire-panel:first-child p {
        margin-left: auto;
      }
      .v31-mini-btn {
        display: inline-block;
        border: 1px solid #8e281e;
        color: #eee6d6;
        text-decoration: none;
        padding: 10px 16px;
        font-size: 11px;
        letter-spacing: 0.16em;
      }
      .v31-fire-mark {
        display: grid;
        place-items: center;
        font-size: 36px;
        color: #4a4038;
        border-left: 1px solid #29241f;
        border-right: 1px solid #29241f;
      }
      @media (max-width: 1100px) {
        .v31-rub-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .v31-rub img {
          height: 280px;
        }
      }
      @media (max-width: 650px) {
        #rubs {
          padding-left: 20px;
          padding-right: 20px;
        }
        .v31-rub-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
        }
        .v31-rub {
          padding: 13px 9px;
        }
        .v31-rub img {
          height: 190px;
        }
        .v31-rub h3 {
          font-size: 22px;
        }
        .v31-rub p {
          font-size: 11px;
        }
        .v31-fire-system {
          padding: 45px 20px 70px;
        }
        .v31-fire-wrap {
          grid-template-columns: 1fr;
        }
        .v31-fire-panel,
        .v31-fire-panel:first-child {
          text-align: center;
          padding: 32px 24px;
        }
        .v31-fire-panel p,
        .v31-fire-panel:first-child p {
          margin: 0 auto 18px;
        }
        .v31-fire-mark {
          height: 58px;
          border: 0;
          border-top: 1px solid #29241f;
          border-bottom: 1px solid #29241f;
        }
      }

      /* V33 hero: full image visible with clean black edges */
      .showcase-hero {
        background: #000;
        padding-top: 76px;
      }
      .showcase-hero img {
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        object-fit: contain;
        object-position: center center;
      }
      @media (max-width: 800px) {
        .showcase-hero {
          padding-top: 62px;
          background: #000;
        }
        .showcase-hero img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }
      }

      /* V34 — clickable hero lineup + single-column mobile rubs */
      .showcase-hit {
        display: block;
        cursor: pointer;
        border-radius: 12px;
        background: transparent;
      }
      .showcase-hit:focus-visible {
        outline: 2px solid #b83225;
        outline-offset: 2px;
      }
      @media (hover: hover) {
        .showcase-hit:hover {
          background: rgba(184, 50, 37, 0.035);
          box-shadow: inset 0 0 0 1px rgba(184, 50, 37, 0.14);
        }
      }
      .hit-marinade {
        left: 7.3%;
        top: 34%;
        width: 11.5%;
        height: 47%;
      }
      .hit-red {
        left: 18.8%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-heat {
        left: 29.2%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-gold {
        left: 39.6%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-black {
        left: 50%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-blue {
        left: 60.4%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-green {
        left: 70.8%;
        top: 42%;
        width: 10.3%;
        height: 39%;
      }
      .hit-sauce {
        right: 7.3%;
        top: 34%;
        width: 11.5%;
        height: 47%;
      }
      @media (max-width: 650px) {
        .v31-rub-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .v31-rub {
          padding: 20px 16px;
        }
        .v31-rub img {
          height: auto;
          max-height: 520px;
        }
        .v31-rub h3 {
          font-size: 30px;
        }
        .v31-rub p {
          font-size: 13px;
        }
      }

      /* V35: keep label artwork unchanged; ensure product names render above card glow at full color */
      .v31-rub > * {
        position: relative;
        z-index: 2;
      }
      .v31-rub:after {
        z-index: 0;
      }
      .v31-rub h3 {
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
        mix-blend-mode: normal !important;
        -webkit-text-fill-color: var(--accent) !important;
        color: var(--accent) !important;
      }
      .v31-rub.red h3 {
        color: #d83a2e !important;
        -webkit-text-fill-color: #d83a2e !important;
      }
      .v31-rub.heat h3 {
        color: #f05a2a !important;
        -webkit-text-fill-color: #f05a2a !important;
      }
      .v31-rub.gold h3 {
        color: #e2a72e !important;
        -webkit-text-fill-color: #e2a72e !important;
      }
      .v31-rub.black h3 {
        color: #8f8b84 !important;
        -webkit-text-fill-color: #8f8b84 !important;
      }
      .v31-rub.blue h3 {
        color: #39a9e8 !important;
        -webkit-text-fill-color: #39a9e8 !important;
      }
      .v31-rub.cajun h3 {
        color: #55b86a !important;
        -webkit-text-fill-color: #55b86a !important;
      }
      @media (hover: none), (pointer: coarse) {
        .v31-rub:hover {
          transform: none;
        }
        .v31-rub {
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
      }

      /* V35.1 — two rubs per row on mobile */
      @media (max-width: 650px) {
        #rubs {
          padding-left: 12px;
          padding-right: 12px;
        }
        .v31-rub-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
        }
        .v31-rub {
          padding: 13px 8px !important;
          min-width: 0;
        }
        .v31-rub img {
          width: 100%;
          height: 190px !important;
          max-height: 190px !important;
          object-fit: contain;
        }
        .v31-rub h3 {
          font-size: 22px !important;
          margin-top: 10px;
        }
        .v31-rub p {
          font-size: 11px !important;
          line-height: 1.45;
        }
      }

      /* V36 — WHITE gets its own AT THE TABLE role */
      .v31-fire-wrap.v36-system {
        grid-template-columns: 1fr 70px 1fr 70px 1fr;
        max-width: 1450px;
      }
      .v36-system .v31-fire-panel {
        padding: 38px 34px;
      }
      .v36-system .v31-fire-panel:first-child {
        text-align: right;
      }
      .v36-system .v31-fire-panel:last-child {
        text-align: left;
      }
      .v36-white h2 {
        color: #eee6d6;
      }
      .v36-white .heat-scale {
        margin-top: 18px;
        justify-content: flex-start;
      }
      .v36-white .heat-scale i.on {
        background: #eee6d6;
        box-shadow: 0 0 10px rgba(238, 230, 214, 0.28);
      }
      .v36-white .heat-scale span {
        color: #bdb3a5;
      }
      @media (max-width: 900px) {
        .v31-fire-wrap.v36-system {
          grid-template-columns: 1fr;
        }
        .v36-system .v31-fire-panel,
        .v36-system .v31-fire-panel:first-child,
        .v36-system .v31-fire-panel:last-child {
          text-align: center;
        }
        .v36-white .heat-scale {
          justify-content: center;
        }
        .v36-system .v31-fire-mark {
          height: 58px;
          border: 0;
          border-top: 1px solid #29241f;
          border-bottom: 1px solid #29241f;
        }
      }
      #red-sauce .jar {
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#red-sauce .jar::before {
  display: none;
}