:root {
     --navy: #0b1220;
     --navy2: #121a2b;
     --gold: #d4af37;
     --soft: #e9d8a6;
     --cream: #f8f4ea;
 }


 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 72px
 }

 body {
     margin: 0;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
     color: #fff;
     background:
         radial-gradient(1200px 800px at 10% -10%, rgba(212, 175, 55, .08), transparent 40%),
         radial-gradient(1000px 700px at 120% 20%, rgba(255, 255, 255, .06), transparent 45%),
         linear-gradient(180deg, var(--navy) 0%, var(--navy2) 60%, var(--navy) 100%);
 }

 .container {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 20px
 }

 .pill {
     display: inline-block;
     padding: .35rem .7rem;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .15);
     background: rgba(255, 255, 255, .06);
     color: rgba(255, 255, 255, .85);
     font-size: .75rem;
     letter-spacing: .06em
 }

 .btn {
     display: inline-block;
     padding: 12px 20px;
     border: 1px solid var(--gold);
     color: var(--gold);
     border-radius: 16px;
     text-decoration: none;
     transition: .25s;
     cursor: pointer;
     background: transparent
 }

 .btn:hover {
     background: var(--gold);
     color: var(--navy)
 }

 .btn-ghost {
     border-color: rgba(255, 255, 255, .15);
     color: #fff;
     background: rgba(255, 255, 255, .06)
 }

 .btn-ghost:hover {
     background: rgba(255, 255, 255, .12)
 }

 /* Header */
 header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(0, 0, 0, .25);
     backdrop-filter: saturate(120%) blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, .1)
 }

 .nav {
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     color: #fff
 }

 .brand-mark {
     width: 36px;
     height: 36px;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, .15);
     display: grid;
     place-items: center;
     background: rgba(255, 255, 255, .06)
 }

 .brand h1 {
     margin: 0;
     font-size: 18px;
     letter-spacing: .04em
 }

 .brand small {
     display: block;
     opacity: .7;
     font-size: 11px;
     letter-spacing: .26em;
     text-transform: uppercase
 }

 .nav-links {
     display: flex;
     gap: 22px
 }

 .nav-links a {
     color: rgba(255, 255, 255, .82);
     text-decoration: none;
     font-size: 15px
 }

 .nav-links a:hover {
     color: #fff
 }

 .cart {
     font-size: 14px;
     color: var(--gold)
 }

 .burger {
     display: none;
     border: 1px solid rgba(255, 255, 255, .15);
     background: transparent;
     color: #fff;
     border-radius: 10px;
     padding: 8px
 }

 /* Mobile menu */
 .mobile {
     display: none;
     border-top: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .35)
 }

 .mobile a {
     display: block;
     padding: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, .06);
     text-decoration: none;
     color: #fff
 }

 /* Hero */
 .hero {
     position: relative;
     padding: 80px 0
 }

 .hero-grid {
     display: grid;
     gap: 40px;
     align-items: center
 }

 .hero h2 {
     font-size: 44px;
     margin: 14px 0 10px
 }

 .hero h2 .gold {
     color: var(--gold)
 }

 .muted {
     color: rgba(255, 255, 255, .78);
     font-size: 18px;
     line-height: 1.6;
     max-width: 640px
 }

 .hero-card {
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(0, 0, 0, .35);
     padding: 24px
 }

 .tin {
     aspect-ratio: 4/5;
     border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent);
     border-radius: 22px;
     background: color-mix(in oklab, var(--navy) 70%, black);
     display: grid;
     place-items: center;
     max-width: 260px;
     margin: 0 auto
 }

 .tin .label {
     text-align: center
 }

 /* Sections */
 section {
     padding: 80px 0
 }

 .section-title {
     text-align: center;
     margin-bottom: 36px
 }

 .section-title h3 {
     font-size: 36px;
     margin: 0
 }

 .gold {
     color: var(--gold)
 }

 /* Cards & grids */
 .grid {
     display: grid;
     gap: 22px
 }

 .product {
     border-radius: 22px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(0, 0, 0, .35);
     overflow: hidden
 }

 .product .shot {
     aspect-ratio: 4/3;
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 16px;
     background: rgba(255, 255, 255, .06);
     display: grid;
     place-items: center
 }

 .product .body {
     padding: 20px
 }

 .product .row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 0 20px 20px
 }

 .price {
     color: var(--gold);
     font-weight: 700;
     font-size: 20px
 }

 /* Story */
 .story-block {
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(255, 255, 255, .04);
     padding: 20px
 }

 /* Brew */
 .step {
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(255, 255, 255, .06);
     padding: 16px
 }

 /* Wholesale / Contact */
 .panel {
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(0, 0, 0, .35);
     padding: 24px
 }

 label {
     display: grid;
     gap: 8px;
     font-size: 14px
 }

 input,
 textarea {
     width: 100%;
     padding: 12px;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(0, 0, 0, .3);
     color: #fff
 }

 textarea {
     min-height: 110px;
     resize: vertical
 }

 /* Footer */
 footer {
     border-top: 1px solid rgba(255, 255, 255, .12);
     background: rgba(0, 0, 0, .28);
     padding: 22px 0;
     font-size: 13px
 }

 /* Reveal animation */
 [data-animate] {
     opacity: 0;
     transform: translateY(16px);
     transition: opacity .5s, transform .5s
 }

 [data-animate].show {
     opacity: 1;
     transform: none
 }

 /* Responsive */
 @media (min-width: 900px) {
     .hero-grid {
         grid-template-columns: 1.1fr .9fr
     }

     .grid.products {
         grid-template-columns: repeat(4, 1fr)
     }

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

     .grid.four {
         grid-template-columns: repeat(4, 1fr)
     }
 }

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

     .burger {
         display: inline-grid;
         place-items: center
     }

     .hero {
         padding: 56px 0
     }

     html {
         scroll-padding-top: 64px
     }
 }

 .nav-links {
     display: flex;
     gap: 28px
 }

 /* widen spacing */
 .right {
     display: none;
     align-items: center;
     gap: 12px
 }

 .right .btn {
     padding: 10px 18px;
     border-radius: 18px
 }

 .right .pill {
     padding: .45rem .9rem
 }

 @media (min-width:900px) {
     .right {
         display: flex
     }
 }



 /* ============================================= */
 /* THIS IS THE NEW CSS FOR THE RESPONSIVE HEADER */
 /* ============================================= */
 :root {
     --dark-blue: #0A192F;
     --light-text: #ccd6f6;
     --highlight-text: #fff;
 }

 body {
     background-color: var(--dark-blue);
     color: var(--light-text);
     font-family: Arial, sans-serif;
     margin: 0;
 }

 a {
     color: var(--light-text);
     text-decoration: none;
     transition: color 0.3s;
 }

 a:hover {
     color: var(--highlight-text);
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header Styles */
 .main-header {
     background-color: rgba(10, 25, 47, 0.85);
     backdrop-filter: blur(10px);
     padding: 15px 0;
     position: sticky;
     top: 0;
     z-index: 1000;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .brand-logo {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .brand-logo .logo-mark {
     font-size: 24px;
     color: var(--highlight-text);
 }

 .brand-logo .logo-text h1 {
     margin: 0;
     font-size: 22px;
     font-weight: bold;
     letter-spacing: 2px;
     color: var(--highlight-text);
 }

 .brand-logo .logo-text p {
     margin: 0;
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: 3px;
     opacity: 0.8;
 }

 .main-nav {
     display: flex;
     gap: 30px;
 }

 .main-nav a {
     font-size: 16px;
     font-weight: 500;
 }

 /* Mobile Menu Button */
 .mobile-toggle {
     display: none;
     /* Hidden on desktop */
     background: none;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: #fff;
     padding: 8px 12px;
     border-radius: 8px;
     font-size: 20px;
     cursor: pointer;
 }

 /* Mobile Menu Dropdown */
 .mobile-nav {
     display: none;
     /* Hidden by default */
     background-color: #0A192F;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .mobile-nav a {
     display: block;
     text-align: center;
     padding: 15px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 /* Responsive Breakpoint */
 @media (max-width: 768px) {
     .main-nav {
         display: none;
     }

     .mobile-toggle {
         display: block;
     }
 }

 .brand-logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     gap: 10px;
 }

 .logo-img {
     height: 48px;
     /* adjust as per design */
     width: auto;
 }

 .logo-text h1 {
     font-size: 1.5rem;
     margin: 0;
     color: #0b1220;
     /* brand navy color */
 }

 .logo-text p {
     font-size: 0.75rem;
     margin: 0;
     letter-spacing: 2px;
     color: #888;
 }

 /* ... (Your other existing styles for body, hero, etc.) ... */

 /* ============================================= */
 /* THIS IS THE NEW CSS FOR THE PRODUCT CARD */
 /* ============================================= */
 .hero-card {
     position: relative;
     border: 1px solid rgba(212, 175, 55, .25);
     border-radius: 20px;
     padding: 18px;
 }

 .tin img {
     display: block;
     width: min(560px, 48vw);
     max-width: 100%;
     border-radius: 16px;
     height: auto;
     margin: 0 auto;
 }

 .best-float {
     position: absolute;
     right: -24px;
     top: 28%;
     transform: translateY(-50%);
     background: rgba(12, 18, 30, .9);
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 14px;
     padding: 14px 18px;
     width: 340px;
     box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
     backdrop-filter: blur(6px);
 }

 .best-pill {
     display: inline-block;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: .16em;
     color: rgba(255, 255, 255, .85);
     text-transform: uppercase;
     margin-bottom: 6px;
 }

 .best-name {
     font-size: 16px;
     font-weight: 700;
     color: #e8edf7;
     line-height: 1.35;
 }

 .best-price {
     margin-top: 6px;
     font-weight: 800;
     color: var(--gold, #d4af37);
 }

 /* Mobile: place card below image */
 @media (max-width: 992px) {
     .best-float {
         position: static;
         transform: none;
         width: 100%;
         margin: 12px 0 0;
         right: auto;
         top: auto;
     }
 }

 .product-card {
     background: var(--navy2);
     /* A slightly lighter navy for the card */
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .product-image-container {
     width: 100%;
     aspect-ratio: 4 / 3;
     /* Maintain a consistent aspect ratio for the image */
     background-color: #000;
     /* Black background for the image */
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .product-image-container img {
     width: 100%;
     height: 130%;
     object-fit: cover;
     /* This will cover the area without stretching */
 }

 .product-details {
     padding: 20px;
 }

 .product-details h4 {
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 8px 0;
     color: #fff;
 }

 .product-details p {
     font-size: 14px;
     color: var(--soft);
     line-height: 1.6;
     margin: 0;
     min-height: 4.8em;
     /* Reserve space for 3 lines of text */
 }

 .product-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     padding-top: 0;
 }

 .product-price {
     font-size: 22px;
     font-weight: bold;
     color: var(--gold);
 }

 .btn-add-to-cart {
     background-color: rgba(255, 255, 255, 0.1);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     padding: 10px 20px;
     font-weight: 500;
     transition: background-color 0.3s;
 }

 .btn-add-to-cart:hover {
     background-color: rgba(255, 255, 255, 0.2);
 }