/* ================================
   MOC Front UI — Foundation (2025)
   ================================ */

:root{
    /* Brand */
    --moc-green:#157575;
    --moc-orange:#F26C36;

    /* Typography */
    --font-head:"Playfair Display", serif;
    --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Layout tokens */
    --maxw:1280px;
    --radius:16px;
    --gap:clamp(10px, 1.4vw, 22px);
    --sectionY: clamp(16px, 6vw, 40px);

    /* Neutrals */
    --paper:#ffffff;
    --ink:#121212;
    --ink-2:#4b5563;
    --line:#e6e6e6;
    --link:#007AFF;
    /* Elevation */
    --shadow-1: 0 6px 16px rgba(0,0,0,.08);
    --shadow-2: 0 12px 32px rgba(0,0,0,.12);

    /* Header heights */
    --promoH: 40px;
    --headerH: 104px;
}

/* Base reset-ish */
*{ box-sizing:border-box; }
img{ width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
/*a{ color:var(--link); text-decoration:none; }*/
button{ font:inherit; cursor:pointer; }
html,body{ margin:0; padding:0; }
body{
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 17px;        /* or 18px for extra luxury feel */
    line-height: 1.65;      /* modern comfortable line height */
    background:#fff;
}
[x-cloak] { display: none !important; }

/* Container */
.container{
    width:100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(16px, 2vw, 28px);
}

/* Headings */
h1,h2,h3,h4{
    font-family: var(--font-head);
    line-height: 1.15;
    letter-spacing: .1px;
    margin: 0 0 .5em 0;
}
h1{ font-size: clamp(36px, 5vw, 64px); }
h2{ font-size: clamp(28px, 3.5vw, 42px); margin-bottom: .65em; line-height: 1.2;}
h3{ font-size: clamp(20px, 2.2vw, 28px); }

/* Paragraph / small */
p{ color: var(--ink-2); margin: 0 0 1em 0;  margin-bottom: .5em; }
ul{
    margin-block-start: .5em;
    margin-block-end: .5em;
}
.fa-oyster {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;

    /* Sets the icon color to the text color */
    background-color: currentColor;

    /* Mask Settings */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.25em;

    /* REPLACED SVG: A Scallop Shell shape which reads much better in silhouette */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32C150 32 64 118 64 224c0 86 52 161 128 192v64h128v-64c76-31 128-106 128-192C448 118 362 32 256 32zM224 448v-43c-35-12-65-35-85-65 14-8 29-14 45-18 10 27 26 51 40 76v50zm64 0v-50c14-25 30-49 40-76 16 4 31 10 45 18-20 30-50 53-85 65v43z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32C150 32 64 118 64 224c0 86 52 161 128 192v64h128v-64c76-31 128-106 128-192C448 118 362 32 256 32zM224 448v-43c-35-12-65-35-85-65 14-8 29-14 45-18 10 27 26 51 40 76v50zm64 0v-50c14-25 30-49 40-76 16 4 31 10 45 18-20 30-50 53-85 65v43z'/%3E%3C/svg%3E");
}


.fa-shucking-knife {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;

    /* Sets the icon color to the text color */
    background-color: currentColor;

    /* Mask Settings */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: -0.25em;

    /* A standard Knife shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M396.8 35.2c-22.1-7.4-44.2 0-66.3 7.4-32.6 10.9-88.7 29.5-131.6 61.6-47.5 35.6-77.9 83.3-88.4 97.4l2.2 4.4L37.1 471.6c-6.6 17.7 2.2 37.7 19.9 44.3 17.7 6.6 37.7-2.2 44.3-19.9l75.4-201.1c11.1 16.6 52.8 69.8 110.3 75.8 45.4 4.7 96.6-13.6 128-44.2 38.6-37.5 70.8-124.6 96-224-28.5 7.4-55.7 16.7-83.3 22.1-9.6 1.9-19.3 2.9-29.1 2.9-1.2 0-2.4 0-3.6-.1-27.1-1.3-69.5-23.8-98.2-92.2z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M396.8 35.2c-22.1-7.4-44.2 0-66.3 7.4-32.6 10.9-88.7 29.5-131.6 61.6-47.5 35.6-77.9 83.3-88.4 97.4l2.2 4.4L37.1 471.6c-6.6 17.7 2.2 37.7 19.9 44.3 17.7 6.6 37.7-2.2 44.3-19.9l75.4-201.1c11.1 16.6 52.8 69.8 110.3 75.8 45.4 4.7 96.6-13.6 128-44.2 38.6-37.5 70.8-124.6 96-224-28.5 7.4-55.7 16.7-83.3 22.1-9.6 1.9-19.3 2.9-29.1 2.9-1.2 0-2.4 0-3.6-.1-27.1-1.3-69.5-23.8-98.2-92.2z'/%3E%3C/svg%3E");
}

.subheading {
    font-size: 1.6rem;
    color: var(--moc-green);
    font-weight: 600;
    text-transform: uppercase;
    margin: 4px 0 0 0!important;
}
.subsubheading {
    font-size: 1.2rem;
    color: var(--moc-green);
    font-weight: 600;
    text-transform: uppercase;
    margin: 4px 0 0 0!important;
}

.subtext{
    font-size: .9rem;
    font-weight:400;
}
.italic {
    font-style: italic;
}
.video-text-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.video-text-row-product {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.video-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    group: hover;
}

/* The little circle around the icon */
.icon-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e1d5; /* Sand color */
    color: #E85D36; /* Your Orange brand color */
    border-radius: 50%;
    font-size: 12px;
    transition: transform 0.2s;
}

.video-link:hover .icon-box {
    transform: scale(1.1);
    background: #E85D36;
    color: white;
}

.link-text {
    border-bottom: 1px dotted #999;
}
@media (max-width: 600px) {
    body {
        font-size: 18px; /* mobile default bump */
    }
    h2 {
        font-size: clamp(26px, 6vw, 36px);
    }
}
/* Grid primitives (improved clarity & responsiveness) */
.grid {
    display: grid;
    gap: var(--gap);
}

/* Modifiers (auto-fit ensures better wrapping on wide screens) */
.grid.full    { grid-template-columns: 1fr; }
.grid.half    { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
.grid.third   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.quarter { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Two-column feature layouts */
.grid.three-fifth-left,
.grid.three-fifth-right {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--gap);
}

/* Collapse gracefully on tablets/phones */
@media (max-width: 900px) {
    .grid.third,
    .grid.quarter { grid-template-columns: repeat(2, 1fr); }
    .grid.half,
    .grid.third,
    .grid.quarter,
    .grid.three-fifth-left,
    .grid.three-fifth-right {
        grid-template-columns: 1fr;
    }
    p{  margin-bottom: .2em; }
    ul{
        margin-block-start: .2em;
        margin-block-end: .2em;
    }
}

.bold{
    font-weight: 600;
}

/* Section rhythm */
.section {
    padding: 20px;
}
.section + .section {
    margin-top: calc(var(--sectionY) * -0.5);
}
.section-tight  { padding: clamp(24px, 4vw, 48px) 0; }
.section-loose  { padding: clamp(60px, 10vw, 120px) 0;}
/* ======================
   Heading Block Pattern
   ====================== */

.heading-block {
    text-align: center;
    max-width: 720px;
    margin: 0 auto; /* rely on section padding for vertical spacing */
    margin-bottom: clamp(16px, 2vw, 28px);
    padding: 0 clamp(16px, 2vw, 24px);
    /*border-bottom: 1px solid var(--line);*/
    /*padding-bottom: clamp(16px, 2vw, 28px);*/
}

.heading-block h2 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--moc-green);
    margin-bottom: 0.4em;
    line-height: 1.2;
}

.heading-block p {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.3vw, 18px);
    color: var(--ink-2);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.5;
}

/* Optional variants */
.heading-block.align-left { text-align: left; }
.heading-block.align-right { text-align: right; }
.heading-block.light h2 { color: #fff; }
.heading-block.light p { color: rgba(255,255,255,0.85); }
/* ===== Full-bleed Sections ===== */
.section,
.hero,
.cta {
    width:100%;
    padding-left:0;
    padding-right:0;
}
.section > .container,
.hero > .container,
.cta > .container {
    max-width: var(--maxw);
    margin:0 auto;
    padding: 0 clamp(16px,2vw,32px);
}
.section.bg-white  { background:#fff; }
.section.bg-light  { background:#f9faf9; }
.section.bg-accent { background:var(--moc-green); color:#fff; }
.section.bg-accent a { color:#fff; }

.left-list{

}
/* Wrapper for the buttons */
.action-row {
    display: flex;
    gap: 12px; /* Space between buttons */
    margin-top: 20px;
}

/* This makes both buttons take up equal width */
.action-row > button,
.action-row > a {
    flex: 1;
    display: flex;
    justify-content: center; /* Centers text/icon inside button */
    align-items: center;
    text-align: center;
    width: 100%; /* Ensures they fill the flex container */
}

/* Optional: On very tiny screens, stack them again so text isn't squished */
@media (max-width: 400px) {
    .action-row {
        flex-direction: column;
    }
}

/* Buttons */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px; padding: 12px 22px; border-radius: 999px;
    font-weight: 700; border:1px solid transparent; cursor:pointer;
    transition: transform .04s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--moc-green); color:#fff; }
.btn-primary:hover{ background:#0f5f5f; }

.btn-outline{ background:#fff; border-color: var(--moc-green); color: var(--moc-green); }
.btn-outline:hover{ background: #f6fffd; }

.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background:#f8f8f8; }

.btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.04s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background: var(--moc-green, #157575);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    width: 50%;          /* half width */
    margin: 0 auto 10px; /* center horizontally with space above */
}


.btn-green:hover,
.btn-green:focus {
    background: #189189; /* slightly brighter teal */
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

.btn-green:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.04s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background: var(--moc-orange);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    width: 50%;          /* half width */
    margin: 0 auto 10px; /* center horizontally with space above */
}


.btn-orange:hover,
.btn-orange:focus {
    background: #189189; /* slightly brighter teal */
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

.btn-orange:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.image-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-link .image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.image-link:hover .image {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.product-name {
    color: var(--moc-green, #157575);
    text-decoration: none;
    transition: color 0.25s ease;
}

.product-name:hover {
    color: var(--moc-orange, #F26C36);
}

/* Cards */
.card{
    background:#fff; border:1px solid var(--line); border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow-1);
    display:flex;
    flex-direction:column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.card-body{ padding: clamp(14px, 2vw, 22px); }

/* ===== Product Grid / Cards ===== */
.product-grid {
    gap: clamp(20px,2vw,36px);
    margin-top: clamp(24px,4vw,40px);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}
.card .image {
    background-size:cover;
    background-position:center;
    aspect-ratio: 4/3;
}
.card .details {
    padding: clamp(16px,2vw,24px);
    text-align:center;
}
.card h3 {
    font-size: 1.25rem;
    margin-bottom: .4em;
    font-weight:700;
}
.card p {
    font-size:.95rem;
    color: var(--ink-2);
    margin-bottom:1em;
}
/* Image crops */
.img-cover{
    width:100%; height: 100%; object-fit: cover; object-position: center;
    display:block;
}

/* Utilities */
.center{ text-align:center; }
.stack-sm > * + *{ margin-top: .5rem; }
.stack > * + *{ margin-top: 1rem; }
.stack-lg > * + *{ margin-top: 1.5rem; }

.mt-0{ margin-top:0!important; }
.mt-1{ margin-top:.5rem!important; }
.mt-2{ margin-top:1rem!important; }
.mt-3{ margin-top:1.5rem!important; }
.mb-0{ margin-bottom:0!important; }
.mb-2{ margin-bottom:1rem!important; }

.pad{ padding: clamp(12px, 2vw, 24px); }
.pad-lg{ padding: clamp(18px, 3vw, 36px); }

/* CTA band */
.cta{
    background: linear-gradient(180deg, #f7faf9, #ffffff);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

/* Promo pill */
.pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px; border:1px dashed var(--moc-green);
    color: var(--moc-green); background:#fff;
}

/* Simple focus ring */
:where(a,button,input,select,textarea):focus-visible{
    outline: 2px solid #0ea5a5; outline-offset: 2px;
}


/* =========================================================
   PROMO BAR — hides on scroll
   ========================================================= */
.promo-bar{
    background:var(--moc-green);
    color:#fff;
    text-align:center;
    position:fixed; top:0; left:0; right:0;
    z-index:1200;
    font-weight:600; font-size:.95rem;
    transition:transform .3s ease,opacity .3s ease;
}
.promo-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:10px 16px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}
.promo-bar a.redeem{
    background:var(--moc-orange);
    color:#fff;
    padding:6px 14px;
    border-radius:999px;
    font-weight:700;
}
.promo-bar a.redeem:hover{ background:#f3581e; }

.promo-bar.hide{ transform:translateY(-100%); opacity:0; pointer-events:none; }

/* =========================================================
   TOP NAVIGATION + DRAWER
   ========================================================= */
.moc-topnav, .moc-topnav *{ box-sizing:border-box; }

.moc-topnav{
    position:fixed;
    top:var(--promoH);
    left:0; right:0;
    z-index:1000;
    background:#f4f9f8;
    transition:top .3s ease, box-shadow .3s ease, height .3s ease;
}
body.scrolled .moc-topnav{ top:0; box-shadow:0 4px 12px rgba(0,0,0,0.1); }

.moc-topnav .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
    padding:0 clamp(20px,3vw,60px);
    max-width:var(--maxw);
    margin:0 auto;
}

.moc-topnav .brand img {
    width: auto;
    height: auto;
    max-height: 50px;
    object-fit: contain;
    flex-shrink: 0;
    transition: max-height .3s ease;
}

body.scrolled .moc-topnav .brand img {
    max-height: 42px;
}

/*!* MAIN LINKS *!*/
/*.moc-topnav .main ul{*/
/*    display:flex; gap:clamp(14px,3vw,36px);*/
/*    list-style:none; margin:0; padding:0;*/
/*}*/


/* CTA + CART + HAMBURGER */
.moc-topnav .utils{ display:flex; align-items:center; gap:14px; }
.moc-topnav .btn-nav-cta{
    background:var(--moc-orange);
    color:#fff;
    border-radius:999px;
    font-weight:700;
    padding:.6em 1.4em;
    font-size:.95rem;
}
.moc-topnav .btn-nav-cta:hover{ background:var(--moc-green); }

/* CART BADGE */
.moc-topnav .cart{ position:relative; z-index:1200; }
.moc-topnav .badge{
    position:absolute; top:-6px; right:-6px;
    min-width:18px; height:18px;
    background:var(--moc-orange);
    color:#fff; border-radius:999px;
    font-size:11px; line-height:18px; text-align:center;
}

/* =========================================
   2. TOP NAVIGATION (Standardized)
   ========================================= */
.moc-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #f4f9f8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.moc-topnav .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 clamp(20px, 3vw, 60px);
    max-width: 1400px;
    margin: 0 auto;
}

/* Branding */
.moc-topnav .brand img { height: 50px; width: auto; object-fit: contain; }

/* Main Links */
.moc-topnav .main ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }

/* shared burger styling */
.moc-topnav .more-btn {

    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.moc-topnav .more-btn .icon {
    width: 22px;
    height: 22px;
}
.moc-topnav .more-btn .icon path {
    stroke: var(--moc-green);
    stroke-width: 2;
}
/* Cart Icon Area */
.moc-topnav .utils { display: flex; align-items: center; gap: 15px; }
.nav-cart { position: relative; cursor: pointer; font-size: 1.2rem; }
.cart-badge {
    position: absolute; top: -8px; right: -8px;
    background: var(--moc-orange); color: #fff;
    font-size: 10px; font-weight: 700;
    height: 18px; min-width: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* Mobile Toggle */
.more-btn { background: none; border: none; cursor: pointer; display: none; }
.mobile-only { display: none; }

/* =========================================
   3. DROPDOWN PANELS (Your Original Styles)
   ========================================= */
.nav-panel.fullwidth {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #f4f9f8; color: var(--ink);
    border-top: 1px solid #eee;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    z-index: 999;
    padding: 40px 0;
}
.nav-panel.fullwidth .panel-container {
    display: grid; grid-template-columns: 1.2fr 1fr;
    max-width: 1400px; margin: 0 auto; gap: 60px;
    padding: 0 clamp(20px, 3vw, 60px); align-items: start;
}
.panel-left, .panel-right { display: flex; flex-direction: column; gap: 5px; }

.big-link {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.6rem, 2vw, 2.4rem)!important;
    font-weight: 500; color: var(--ink); text-decoration: none;
    transition: color 0.2s ease;
}
.big-link:hover { color: var(--moc-green); }
.medium-link {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.2rem, 2vw, 1.6rem)!important;
    font-weight: 500; color: var(--ink); text-decoration: none;
    transition: color 0.2s ease;
}
.medium-link:hover { color: var(--moc-green); }

/* Panel Toggles & Carets */
.panel-toggle { background: transparent; border: none; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.panel-toggle:hover { color: var(--moc-green); }
.panel-toggle .caret { transition: transform .25s ease; }
.panel-toggle .caret.rotate { transform: rotate(180deg); }

/* Image Cards */
.image-card {
    position: relative; overflow: hidden; background: #f5f2ec;
    height: 200px; border-radius: 5px;
}
.image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.image-card:hover img { transform: scale(1.02); }
.image-card .caption {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: space-between; padding: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}
.image-card .caption p { color: #fff; font-weight: 600; font-size: 1.25rem; margin: 0; }
.image-card .pill {
    background: rgba(255,255,255,0.95); padding: 4px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; align-self: flex-start;
}

/* =========================================
   4. MOBILE DRAWER (Your Original Styles)
   ========================================= */
.more-drawer {
    position: fixed; inset: 0; top: 80px;
    background: rgba(0,0,0,0.35); z-index: 1100;
    display: none;
}
.more-drawer[x-cloak] { display: none !important; }
.drawer-inner {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(360px, 90vw); background: #fff;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
    padding: 20px; overflow-y: auto;
}
.drawer-menu .menu { list-style: none; padding: 0; margin: 0; }
.drawer-menu li { border-bottom: 1px solid #eee; padding: 10px 0; }
.drawer-menu a { display: block; font-weight: 700; text-decoration: none; color: #333; }
.drawer-close-left { font-size: 2rem; cursor: pointer; }

/* =========================================
   5. CART SIDEBAR (New Polished Version)
   ========================================= */

/* Overlay */
.cart-sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000; /* Highest priority */
    display: flex; justify-content: flex-end;
}

/* The Panel */
.cart-sidebar {
    width: 100%; max-width: 420px; height: 100%;
    background: #fff; display: flex; flex-direction: column;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Header */
.cart-header {
    padding: 20px 24px; background: #fff; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
}
.cart-header h3 {
    margin: 0; font-family: "Playfair Display", serif;
    font-size: 1.5rem; font-weight: 700; color: #111;
}
.btn-close { font-size: 2rem; background: none; border: none; cursor: pointer; line-height: 1; color: #999; }
.btn-close:hover { color: #d00; }

/* Continue Shopping Btn */
.continue-btn {
    margin: 10px 20px 0; width: calc(100% - 40px);
    text-align: center; font-size: 0.9rem; font-weight: 600;
    color: var(--moc-green); border: 1px solid var(--moc-green);
    background: #fff; padding: 10px; border-radius: 4px; cursor: pointer;
}
.continue-btn:hover { background: var(--moc-green); color: #fff; }

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

.cart-item {
    display: flex; gap: 16px; margin-bottom: 24px; padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}
.cart-item.removing { opacity: 0.5; pointer-events: none; }

.item-thumb {
    width: 80px; height: 80px; flex-shrink: 0;
    background-color: #f4f4f4; background-size: cover; background-position: center;
    border-radius: 6px; border: 1px solid #eee;
}

.item-info { flex: 1; display: flex; flex-direction: column; }
.item-info strong { font-size: 1rem; margin-bottom: 4px; display: block; }
.item-info .grey { color: #666; font-size: 0.85rem; }
.item-price {font-weight: 700; font-size: 1rem; color: #111; padding-top: 8px; }

/* Quantity Controls (Square Buttons) */
.item-actions { display: flex; flex-direction: column; align-items: flex-end; }

.qty-controls {
    display: flex; align-items: center;
    border: 1px solid #ddd; border-radius: 4px; overflow: hidden;
}
.qty-controls button {
    width: 32px; height: 32px; background: #fff; border: none;
    font-size: 1.1rem; cursor: pointer; color: #555;
    display: flex; align-items: center; justify-content: center;
}
.qty-controls button:hover { background: #f9f9f9; }
.qty-controls span {
    width: 32px; text-align: center; font-size: 0.95rem; font-weight: 600;
    border-left: 1px solid #ddd; border-right: 1px solid #ddd;
    line-height: 32px;
}

/* Footer */
.cart-footer { padding: 24px; background: #fcfcfc; border-top: 1px solid #e5e5e5; }
.cart-footer .subtotal {
    display: flex; justify-content: space-between; font-size: 1.1rem;
    margin-bottom: 16px; font-weight: 700;
}
.cart-footer .btn {
    width: 100%; padding: 16px; background: var(--moc-green);
    color: white; text-align: center; border: none; border-radius: 4px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
}
.cart-footer .btn:hover { background: var(--moc-orange); }
.empty-cart { text-align: center; padding: 40px; color: #999; }

/* =========================================
   6. RESPONSIVE
   ========================================= */
@media (max-width: 960px) {
    .moc-topnav .main { display: none; }
    .more-btn { display: block; }
    .mobile-only { display: block; }
    .cart-sidebar { max-width: 100%; }
    .nav-panel.fullwidth { position: static; padding: 20px; box-shadow: none; border: none; }
    .nav-panel.fullwidth .panel-container { grid-template-columns: 1fr; gap: 30px; }
}


/* Home page — promo bar exists */
.has-promo .moc-topnav {
    top: var(--promoH);
}

/* All other pages — NO promo bar, so nav sticks to the top */
.no-promo .moc-topnav {
    top: 0 !important;
}



.green-btn{
    display:inline-block;
    padding:12px 24px;
    background:var(--moc-green);
    color:#fff;
    font-weight:700;
    border-radius:999px;
    transition:background .2s ease;
}
.green-btn:hover{ background:var(--moc-orange); }

.orange-btn{
    display:inline-block;
    padding:12px 24px;
    background:var(--moc-orange);
    color:#fff;
    font-weight:700;
    border-radius:999px;
    transition:background .2s ease;
}
.orange-btn:hover{ background:var(--moc-green); }







.mobile-only { display: none; }
.mobile-text { display: none; }
.desktop-text { display: inline; }

/* Mobile (under 768px): Swap them */
@media (max-width: 768px) {
    .desktop-text { display: none; }
    .mobile-text { display: inline; }
}


/* ===== HERO (Unified) ===== */
.hero {
    position: relative;

    z-index: 1;
    margin-top: 0; /* just in case */
    width: 100%;
    height: clamp(300px, 50vh, 480px) !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
}

/* Video background */
.hero-video video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay gradient background */
.hero-overlay {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 6vw, 100px);
    max-width: 70%;
    display: flex;
    align-items: center;
    min-height: 100%;
    background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.05) 85%,
    rgba(0, 0, 0, 0) 100%);
}

/* Text container */
.hero-text {
    position: relative;
    z-index: 3;
    max-width: 600px;
}

.hero h1 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 68px);
    margin-bottom: 0.5em;
    line-height: 1.1;
}

.hero p {
    font-size: clamp(16px, 1.4vw, 20px);
    margin-bottom: 1.2em;
    line-height: 1.5;
}

/* Call-to-action button */
.btn-cta {
    background: var(--moc-green);
    color: #fff;
    font-weight: 600;
    padding: 0.8em 1.8em;
    border-radius: 999px;
    transition: background 0.3s ease;
}
.btn-cta:hover {
    background: var(--moc-orange);
    color: #fff;
}

/* ===== HERO SLIDER (Image + Video) ===== */
.hero-slider {
    position: relative;
    width: 100%;
    height: clamp(300px, 50vh, 480px) !important;
    overflow: visible;

}

.hero-slider .swiper {
    width: 100%;
    height: 100%;
}

.hero-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: transparent !important;
}

/* Background Image */
.hero-slider .slide-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0 !important;
}

/* Background Video */
.hero-slider video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay + Text */
.hero-slider .slide-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0.05) 85%,
    rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
}

.hero-slider .slide-text {
    max-width: min(850px, 80%);
    padding-left: clamp(40px, 8vw, 140px);
    padding-right: clamp(20px, 5vw, 100px);
}

.hero-slider .slide-text h1 {
    font-family: var(--font-head);
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 700;
    margin-bottom: 0.2em;
}

.hero-slider .slide-text p {
    margin-top: 0.2em;
    margin-bottom: 1.6em;
    font-size: clamp(17px, 1.6vw, 22px);
    font-weight: 400;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.85); /* slightly dimmer white for balance */
    text-shadow: 0 1px 4px rgba(0,0,0,0.4); /* helps legibility on light bg */
}
.hero-slider .slide-overlay {
    display: flex;
    align-items: center;
}

.hero-slider .slide-text {
    padding-top: min(10vh, 60px);
}
.hero-slider .btn-cta {
    background: var(--moc-green);
    color: #fff;
    font-weight: 600;
    padding: 0.8em 1.8em;
    border-radius: 999px;
    transition: background 0.3s ease;
}
.hero-slider .btn-cta:hover {
    background: var(--moc-orange);
}

/* Swiper controls */
.hero-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.7;
}
.hero-slider .swiper-pagination-bullet-active {
    background: var(--moc-orange);
    opacity: 1;
}
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-slider .slide-overlay {
        background: linear-gradient(180deg,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.1) 100%);
        justify-content: center;
    }
    .hero-slider .slide-text {
        padding: 0 20px;
        text-align: center;
        max-width: 90%;
        margin: 0 auto;
    }
    .hero-slider .slide-text h1 {
        font-size: clamp(28px, 8vw, 48px);
        line-height: 1.05;
        letter-spacing: -0.5px;
    }
}


/* ===== Page Header ===== */
.page-header {
    margin-top: 80px; /* matches fixed nav */
    padding: clamp(10px, 4vw, 24px) 0;
    background: var(--paper, #f9faf9);
    text-align: center;
}

.page-header.bg-light {
    background-color: #f9faf9;
}

.page-title {
    font-family: var(--font-head);
    font-size: clamp(32px, 4.5vw, 56px);
    margin-bottom: .4em;
    color: var(--ink);
}

/* Updated subtitle — bigger + softer gray */
.page-subtitle {
    font-size: clamp(18px, 2vw, 24px);     /* bump from 16→18 + higher max */
    color: var(--ink-3, #727272);          /* softer gray than ink-2 */
    max-width: 820px;                      /* slightly wider for balance */
    margin: 0.6em auto 0;                  /* subtle top spacing */
    line-height: 1.5;                      /* improved readability */
}

/* ===== Banner ===== */
.banner {
    background: var(--moc-green);
    color: #fff;
    padding: clamp(40px,6vw,80px) 0;
    text-align: center;
}
.banner-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
.banner .eyebrow {
    font-weight:700;
    letter-spacing:.5px;
    opacity:.9;
    text-transform:uppercase;
}
.banner .banner-title {
    font-family: var(--font-head);
    font-size: clamp(28px,3.5vw,42px);
}
.banner .btn-outline {
    border-color:#fff;
    color:var(--moc-green);
}
.banner .btn-outline:hover {
    background:var(--moc-orange);
    color:#fff;
}
/* ===== Testimonials ===== */
.testimonials {
    background:#fff;
}
.testimonials h2 {
    font-family: var(--font-head);
    font-size: clamp(28px,3vw,40px);
    margin-bottom: 1.5em;
    color: var(--ink);
}
.testimonial-grid {
    gap: clamp(30px,3vw,50px);
}
.testimonial {
    background:#f9faf9;
    padding: clamp(20px,3vw,32px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.testimonial .quote {
    font-style: italic;
    color: var(--ink);
    line-height:1.6;
    margin-bottom: .8em;
}
.testimonial .author {
    font-weight:700;
    color: var(--moc-green);
    font-size:1rem;
}

/* ==========================
   VIDEO WRAPPER (FrontNew)
   ========================== */

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
    box-shadow: var(--shadow-1);
}

.video-wrapper video,
.video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.video-wrapper .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(21,117,117,0.9); /* moc-green */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    z-index: 5;
    transition: background .3s ease, transform .2s ease, box-shadow .3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.video-wrapper:hover .play-button {
    background: var(--moc-orange);
    transform: translate(-50%, -50%) scale(1.05);
}

.play-button i {
    font-size: 1.5rem;
}



/* ===== FOOTER ===== */
.moc-footer {
    background: var(--moc-green);
    color: #f8f8f8;
    font-family: var(--font-body);
    padding: clamp(40px, 6vw, 80px) 20px;
}

.moc-footer a {
    color: #f8f8f8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.moc-footer a:hover {
    color: var(--moc-orange);
}

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.footer-col h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #fff;
}

.footer-col address {
    font-style: normal;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem 0;
}

.footer-col ul li {
    margin: 4px 0;
}

.footer-col ul li a {
    font-size: 0.95rem;
}

.newsletter-form {
    display: flex;
    margin: 1rem 0;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    outline: none;
    font-size: 0.95rem;
}

.newsletter-form button {
    background: var(--moc-orange);
    border: none;
    color: white;
    padding: 10px 18px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-weight: 600;
    cursor: pointer;
}

.newsletter-form button:hover {
    opacity: 0.9;
}

.socials a {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.4rem;
}

.tagline {
    font-style: italic;
    margin-bottom: 1rem;
    color: #e8e8e8;
    font-size: 0.9rem;
}

.contact-mini {
    font-size: 0.9rem;
    margin-top: 1rem;
}

.copyright {
    font-size: 0.8rem;
    color: #ddd;
    margin-top: 1.2rem;
}



/* Refined alignment & spacing for parsed content below videos/images */
.feature-content {
    max-width: clamp(900px, 90%, 1200px);
    margin: 1.25rem auto 2rem auto; /* centers and balances spacing */
    padding: 0 1rem; /* keeps text off edges on mobile */
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-2);
    text-align: center;
}

.feature-content strong {
    color: var(--moc-green);
    font-weight: 600;
}

.feature-content a {
    color: var(--moc-orange);
    text-decoration: none;
    font-weight: 500;
}

.feature-content a:hover {
    text-decoration: underline;
}


/* ===== Modern MOC Modal ===== */
.moc-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
    transition: all .2s ease;
    backdrop-filter: blur(2px);
}
.moc-modal-shell.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}
.moc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    animation: mocFadeIn .25s ease forwards;
}
.moc-modal-inner {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    overflow: hidden;
    max-width: 960px;
    width: 92%;
    animation: mocPopIn .25s ease forwards;
    transform: scale(0.96);
    opacity: 0;
}
.moc-modal-shell.active .moc-modal-inner {
    transform: scale(1);
    opacity: 1;
}
@keyframes mocPopIn {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes mocFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
body.modal-open { overflow: hidden; }


html {
    scroll-behavior: smooth;
}
/* Allow modal to scroll on mobile */
.moc-modal-inner {
    max-height: calc(100vh - 40px); /* prevents overflow off screen */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
}

/* Fix flex-centering squeezing scroll on mobile */
@media (max-width: 768px) {
    .moc-modal-shell {
        align-items: flex-start; /* allow modal to reach top */
        padding: 25px;
    }

    .moc-modal-inner {
        width: 95%;
        border-radius: 14px;
    }
}

 .remarkable-product {
     --cta: var(--moc-orange);
     /*--bg-grad: radial-gradient(ellipse at 75% 40%, #b9a894 0%, #3c2f23 60%, #2b221a 100%);*/
     font-family: var(--font-body);
     color: #fff;
     overflow-x: hidden;
     position: relative;
 }

/* === Hero Section (Full-screen) === */
.remarkable-product .hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    min-height: clamp(360px, 90vh, 560px);
    background: var(--bg-grad);
    color: #fff;
    padding: clamp(60px, 8vw, 120px) 0;
    overflow: hidden;
    isolation: isolate;
}

.remarkable-product .hero::before {
    content: "";
    position: absolute;
    left: clamp(16px, 5vw, 60px);
    top: 14%;
    bottom: 18%;
    width: 1px;
    /*background: rgba(255, 255, 255, 0.35);*/
    z-index: 1;
}

/* Text column */
.remarkable-product .hero-copy {
    position: relative;
    z-index: 3;
    max-width: 520px;
    padding-left: clamp(20px, 4vw, 80px);
}

.remarkable-product .hero-copy .rating {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.remarkable-product .hero-copy .title {
    font-family: var(--font-head);
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1rem;
}

.remarkable-product .hero-copy .subtitle {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.8rem;
}

/* CTA */
.remarkable-product .cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.remarkable-product .btn-primary {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    background: var(--cta);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
.remarkable-product .btn-primary:hover {
    background: #ff814f;
    transform: translateY(-2px);
}
.remarkable-product .from {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* === Image column === */
.remarkable-product .hero-media {
    position: relative;
    z-index: 2;
    transform: rotate(-6deg) translateX(4%);
    transform-origin: 70% 40%;
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55));
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.remarkable-product .hero-media img {
    width: 100%;
    height: auto;
    max-width: 560px;
    border-radius: 12px;
    filter: brightness(0.93) contrast(1.05);
}

/* "Includes" row */
.remarkable-product .includes-row {
    margin-top: 1.6rem;
    padding-left: clamp(10px, 2vw, 40px);
}

.remarkable-product .includes-row .label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.35rem;
}

.remarkable-product .box-highlights {
    display: flex;
    flex-direction: column;
    gap: 4px;

    font-weight: 700;
    line-height: 1.6;
    font-size: 1rem;

}

.remarkable-product .box-highlights div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remarkable-product .box-highlights i {
    font-size: 1rem;
    opacity: 0.9;
}


.remarkable-product .testimonial-list {
    max-width:1000px;
    margin: 0 auto 40px;
    display: grid;
    gap: 28px;
    text-align: left;
    background:white!important;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius);
    box-shadow: none!important;
}




/* --- Testimonial block on right grid --- */
.remarkable-product .hero-testimonial {
    padding-left: 20px;
    color: white;
    font-style: italic;
    line-height: 1.6;
}
.remarkable-product .dark {
    color: #333!important;
    line-height: 1.8;
}
.remarkable-product .hero-testimonial blockquote {
    font-family: var(--font-head);
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    font-weight: 600;
}
.remarkable-product .hero-testimonial .author {
    font-size: 1rem;
    opacity: 0.85;
    color: white!important;

}

/* === Icon strip under hero === */
.remarkable-product .hero-features {

    margin-top: clamp(30px, 4vw, 60px);
    display: flex;
    justify-content: center;
    gap: clamp(28px, 5vw, 80px);
    color: rgba(255, 255, 255, 0.85);

}


.remarkable-product .hero-features .feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    line-height: 2;
    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.92);

}
.remarkable-product .hero-features .ico {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

/* === Tabs bar (Overview / Features / Compare) === */
.remarkable-product .top-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    background: rgba(30, 20, 15, 0.4);
    backdrop-filter: blur(10px);
}
.remarkable-product .top-tabs ul {
    display: flex;
    gap: 10px;
    padding: 6px;
    background: rgba(35, 25, 18, 0.55);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.remarkable-product .top-tabs li {
    list-style: none;
}
.remarkable-product .top-tabs a {
    display: block;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}
.remarkable-product .top-tabs li.active a {
    background: #fff;
    color: #222;
}

/* === Animation (subtle fade on load) === */
.remarkable-product .hero-copy,
.remarkable-product .hero-media {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.9s ease-out forwards;
}
.remarkable-product .hero-media {
    animation-delay: 0.15s;
}
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Responsive === */
@media (max-width: 1000px) {
    .remarkable-product .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 60px);
    }
    .remarkable-product .hero::before {
        display: none;
    }
    .remarkable-product .hero-copy {
        padding-left: 0;
        margin-bottom: 40px;
    }
    .remarkable-product .hero-media {
        transform: none;
        justify-content: center;
    }
    .remarkable-product .hero-features {
        flex-wrap: wrap;
        row-gap: 12px;
    }
}
/* ============================================================
   Section 2 — Video + Subtabs ("The ultimate paper tablet")
   ============================================================ */



.remarkable-product .video-wrap {
    position: relative;
    width: min(920px, 92%);

    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.remarkable-product .video-wrap img,
.remarkable-product .video-wrap video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.remarkable-product .video-wrap .play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease;
}

.remarkable-product .video-wrap:hover .play {
    background: rgba(0, 0, 0, 0.35);
}

/* === Subtabs below video === */
.remarkable-product .subtabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 1px solid #d8d2c6;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.remarkable-product .subtabs button {
    background: none;
    border: none;
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    padding: 6px 8px;
    transition: color 0.25s ease;
}
.remarkable-product .subtabs button:hover {
    color: var(--moc-green);
}
.remarkable-product .subtabs button.active {
    color: var(--ink);
}
.remarkable-product .subtabs button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 3px;
    border-radius: 2px;
    background: var(--moc-orange);
}

/* subtle icon-dot before label (like "Digital paper") */
.remarkable-product .subtabs .dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--moc-green);
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: -2px;
}

/* === Subtab copy === */
.remarkable-product .subcopy {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.65;
    color: #3a352e;
    max-width: 72ch;
    margin: 0 auto clamp(24px, 3vw, 40px);
}

.remarkable-product hr.divider {
    border: none;
    border-top: 1px solid #d8d2c6;
    width: min(940px, 92%);
    margin: 0 auto;
}

/* ============================================================
   Section 3 — Compare / Buy Bar (simple follow-up section)
   ============================================================ */

.remarkable-product .compare {
    background: var(--paper);
    color: var(--ink);
    text-align: center;
    padding: clamp(20px, 5vw, 40px) 0;
}
.remarkable-product .compare .section-title {
    font-family: var(--font-head);
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: 0.5em;
}

.remarkable-product .compare p {
    color: var(--ink-2);
    font-size: 1rem;
}

/* Buy bar */
.remarkable-product .buybar {
    background: #0f0f0f;
    color: #fff;
    padding: 20px 0;
}
.remarkable-product .buycard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(960px, 92%);
    margin: 0 auto;
}
.remarkable-product .buycard .left h3 {
    font-family: var(--font-head);
    font-size: 1.6rem;
    margin: 0;
}
.remarkable-product .buycard .left p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 4px 0 0;
}
.remarkable-product .buycard .btn-primary {
    background: var(--moc-orange);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 20px;
    color: #fff;
}
.remarkable-product .buycard .btn-primary:hover {
    background: #ff814f;
}

/* Responsive */
@media (max-width: 900px) {
    .remarkable-product .subtabs {
        gap: 14px;
    }
    .remarkable-product .buycard {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .remarkable-product .video-wrap {
        width: 94%;
    }
}
/* ============================================================
   🔧 Fixes for Hero Background + Top Gradient Alignment
   ============================================================ */

/* Make hero full bleed (ignore .container padding) */
.remarkable-product .hero {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    min-height: clamp(560px, 90vh, 760px);
    background: var(--bg-grad);
    color: #fff;
    padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 100px);
    overflow: hidden;
    isolation: isolate;
}



/* Elevate text + angled image over background */
.remarkable-product .hero-copy,
.remarkable-product .hero-media,
.remarkable-product .hero::before {
    position: relative;
    z-index: 2;
}

/* Subtle fade vignette at bottom of hero to blend with beige section */
.remarkable-product .hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    /*background: linear-gradient(to bottom, rgba(43,34,26,0) 0%, rgba(43,34,26,0.6) 100%);*/
    z-index: 1;
}

/* Reduce container width limitation */
.remarkable-product .hero-inner {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Remove image element (if present) */
.remarkable-product .hero-media img {
    display: none !important;
}

/* Keep the angled look but invisible container to maintain spacing */
.remarkable-product .hero-media {
    height: 100%;
    pointer-events: none;
}

/* Align hero content to left like reMarkable */
.remarkable-product .hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(40px, 5vw, 80px);
}
.remarkable-product .hero-content {
    flex: 1;
    color: white;
    max-width: 520px;
}

/* Adjust hero-features to match reMarkable row width + spacing */
.remarkable-product .hero-features {
    justify-content: flex-start;
    gap: clamp(36px, 5vw, 80px);
    max-width: 1200px;
    z-index: 4;
    margin: clamp(40px, 5vw, 60px) auto 0;
    padding: 0 clamp(40px, 5vw, 80px);
}

.remarkable-product .hero-features .ico {
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

/* Restore correct stacking order so tabs float over hero but below header if any */
.remarkable-product .top-tabs {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

/* Responsive alignment */
@media (max-width: 900px) {
    .remarkable-product .top-tabs {
        top: 0px;
    }
    .remarkable-product .hero-inner {
        flex-direction: column;
        text-align: center;
    }
    .remarkable-product .hero-features {
        justify-content: center;
        flex-wrap: wrap;
    }
}
/* Remove the blurred halo around top-tabs */
.remarkable-product .top-tabs {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.remarkable-product .top-tabs ul {
    background: #1a1817 !important; /* solid dark pill */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); /* subtle drop for depth */
}
/* ============================================================
   MOC Color Refresh — Coastal Teal Variant
   ============================================================ */

.remarkable-product {
    --moc-green: #157575;
    --moc-orange: #F26C36;
    /*--bg-grad: radial-gradient(ellipse at 75% 40%, #f2f8f7 0%, #b5e1dc 40%, #157575 85%, #0d3432 100%);*/


    color: #f9fdfc;
}


/* Tab container (dark green pill) */
.remarkable-product .top-tabs ul {
    background: #0d3432 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}

/* Active tab (white pill, MOC green text) */
.remarkable-product .top-tabs li.active a {
    background: #ffffff;
    color: var(--moc-green);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* CTA button - MOC orange */
.remarkable-product .btn-primary {
    background: var(--moc-orange);
}
.remarkable-product .btn-primary:hover {
    background: #ff814f;
}

/* Rating, subtitle, and icons - slightly cooler white */
.remarkable-product .hero-copy .rating,
.remarkable-product .hero-copy .subtitle,


    /* Subtabs (under video) highlight color adjustments */
.remarkable-product .subtabs button.active::after {
    /*background: var(--moc-green);*/
}
.remarkable-product .subtabs button:hover {
    color: var(--moc-orange);
}

/* ============================================================
Mobile Fixes — Remarkable Product (Oyster Page)
============================================================ */
@media (max-width: 640px) {

    .remarkable-product .top-tabs ul {
        gap: 2px !important;
        padding: 2px 6px !important;
    }
    .remarkable-product .top-tabs a {
        padding: 5px 14px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }


    .remarkable-product .hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 60px 20px !important;
    }
    .remarkable-product .hero-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .remarkable-product .hero-copy {
        padding-left: 0 !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    .remarkable-product .hero-media {
        transform: none !important;
        justify-content: center !important;
        filter: none !important;
    }
    .remarkable-product .hero-features {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .remarkable-product .hero-testimonial {
        text-align: center !important;
        padding-left: 0 !important;
        margin: 20px auto 0 !important;
        max-width: 90% !important;
        font-size: 0.95rem !important;
    }
    .remarkable-product .hero-testimonial .author {
        display: block;
        margin-top: 8px;
        opacity: 0.85;
    }

    /* 4️⃣ Tighter spacing for CTA + price on mobile */
    .remarkable-product .cta-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }

    .remarkable-product .btn-primary {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }

    .remarkable-product .from {
        font-size: 0.9rem !important;
        opacity: 0.9 !important;
    }

    /* Slight tighten on includes section */
    .remarkable-product .includes-row {
        margin-top: 1rem !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    .remarkable-product .box-highlights {
        align-items: center !important;
    }

}

.photo-carousel .carousel-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* or 16/9, or 1/1 */
    overflow: hidden;
}


.carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.carousel-img.active { opacity: 1; }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    color: var(--moc-green);
    font-size: 2rem;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .3s ease;
}
.carousel-nav:hover { background: rgba(255,255,255,0.9); }
.carousel-nav.left { left: 12px; }
.carousel-nav.right { right: 12px; }
.full-carousel .carousel-frame.wide {
    position: relative;
    width: 100%;
    height: clamp(320px,50vw,480px);
    overflow: hidden;
}
.full-carousel .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.full-carousel .slide.active { opacity: 1; }
.full-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.full-carousel .caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
}
.dual-tabs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.tab-nav button {
    border: 1px solid var(--moc-green);
    background: #fff;
    color: var(--moc-green);
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}
.tab-nav button.active {
    background: var(--moc-green);
    color: #fff;
}
.tab-body p {
    font-size: 1rem;
    color: var(--ink-2,#444);
    line-height: 1.7;
}
.tab-media img, .tab-media video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
@media (max-width:900px){
    .dual-tabs{ grid-template-columns:1fr; }
    .tab-nav{ justify-content:center; }
}



      /* same design system as your experience calendar, adapted for oyster box */

  .obx-grid {
      display:grid;
      gap:32px;
      grid-template-columns: 1fr 1fr 0.8fr;
      align-items:start;
  }
@media(max-width:900px){ .obx-grid{ grid-template-columns:1fr; } }

.mini-cal {
    --day-size:42px; --gap:8px;
    font-family:var(--font-body,Inter,sans-serif);
    color:var(--ink,#0f2a24);
    background:#fff; border:1px solid #e6eeea; border-radius:10px;
    padding:20px;
}
.mc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.mc-title{font-weight:600;font-size:16px;}
.mc-nav{border:0;background:none;color:var(--moc-green,#157575);font-weight:600;cursor:pointer;}
.mc-weekdays,.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);}
.mc-weekdays{font-size:12px;color:#4b635b;text-align:center;margin:6px 0 10px;}
.mc-day{
    display:flex;align-items:center;justify-content:center;
    width:var(--day-size);height:var(--day-size);
    margin:0 auto;border:1px solid #d9e3df;border-radius:50%;
    background:#fff;font-weight:500;font-size:14px;cursor:default;
    transition:all .15s ease;
}
.mc-day.has-slots{cursor:pointer;font-weight:600;}
.mc-day.has-slots:hover{background:#ecf3f1;}
.mc-day.is-selected{font-weight:800;border:2px solid var(--moc-green,#157575);background:#f2fbf9;}
.mc-day.is-disabled{color:#c7d4d0;background:#f7faf9;}
.mc-day.is-muted{color:#b7c3be;background:#f8f9f8;}

.builder-panel {
    border:1px solid #e6eeea; border-radius:10px; background:#fff; padding:24px;
}
.builder-head {
    font-family:var(--font-head,"Playfair Display",serif);
    font-size:22px; text-align:center; margin-bottom:16px;
}
.moc-label{font-size:13px;font-weight:600;margin-top:12px;color:#1c3b33;display:block;}
.moc-input{width:100%;border:1px solid #dbe7e3;border-radius:8px;height:42px;font-size:15px;padding:0 8px;}
.selected-date{margin-top:10px;font-size:15px;text-align:center;color:var(--moc-green,#157575);}
.obx-actions{display:flex;gap:10px;margin-top:18px;}
.button{padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid var(--moc-green,#157575);}
.button-outline{background:#fff;color:var(--moc-green);}
.moc-orange-background{background:var(--moc-orange,#F26C36);color:#fff;border-color:var(--moc-orange);}

.builder-testimonial{
    display:flex;flex-direction:column;justify-content:center;
    font-family:var(--font-head,"Playfair Display",serif);
    background:linear-gradient(180deg,rgba(21,117,117,.05),rgba(21,117,117,0));
    border:1px solid #e6eeea;border-radius:10px;padding:24px;text-align:center;
}
.builder-testimonial blockquote{font-size:18px;font-style:italic;margin:0;}
.builder-testimonial cite{display:block;margin-top:10px;font-family:var(--font-body);font-size:14px;color:var(--ink-2,#4b5563);}



     /* =======================================================
    Hero Map — Refined MOC Style (Teal + Orange)
    ======================================================= */

     /* fade to white bottom */
 .section-hero-map::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60%; /* was 50% — more coverage for smoother fade */
     background: linear-gradient(to bottom,
     rgba(255,255,255,0) 0%,
     rgba(255,255,255,0.6) 45%,
     #fff 100%);
     pointer-events: none;
 }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-left: clamp(6vw, 8vw, 10vw);
    color: #0d3432; /* MOC teal-dark ink */
}

.hero-headline {
    font-family: var(--font-head, "Playfair Display", serif);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.1;
    color: var(--moc-green, #157575);
    margin-bottom: 0.25em;
}
.hero-headline .highlight {
    color: var(--moc-orange, #F26C36);
}

.hero-subhead {
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    color: #2a2a2a;
    font-weight: 500;
    margin-bottom: .5em;
}
.hero-subhead .highlight {
    color: var(--moc-orange);
}

/* boat-truck-house line */
.shipping-icons {
    margin-bottom: 1.5em;
    opacity: 0.85; /* transparency effect */
    mix-blend-mode: multiply; /* blends into background tones */
    width: min(440px, 80%);
}
.shipping-graphic {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.9) contrast(1.05);
    animation: boatBob 6s ease-in-out infinite;
}

/* gentle float animation */
@keyframes boatBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

/* --- NEW INPUT TRIGGER BUTTONS --- */
.input-trigger-btn {
    background: white;
    border: 1px solid #d3dae2; /* Matches your input border color */
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    height: 50px; /* Force same height as standard inputs */
    width: 90px;  /* Wider than before */
    display: flex;
    flex-direction: column; /* Stack Icon on top of Text */
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1.1;
    flex-shrink: 0; /* Prevents it from getting squished */
}

.input-trigger-btn:hover {
    background-color: #f8f9fa;
    border-color: #aaa;
}

.input-trigger-icon {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.input-trigger-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    letter-spacing: 0.5px;
}

/* --- CLEANER PRICE BREAKDOWN --- */
.price-breakdown {
    border-top: none !important; /* Remove grey divider */
    padding-top: 10px;
}

.btn-primary {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 8px;
    background: var(--moc-orange, #F26C36);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.btn-primary:hover {
    background: #ff814f;
    transform: translateY(-2px);
}

/* fade-in helper */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1s ease, transform 1s ease;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
Mobile layout fixes
========================= */
@media (max-width: 900px) {
    .section-hero-map {
        background-attachment: scroll; /* smoother on mobile */
        background-position: center top; /* align map better */
        min-height: 90vh; /* slightly shorter hero for mobile */
        padding-top: 60px; /* reduce vertical padding */
        display: flex;
        align-items: flex-start; /* pull content up */
        justify-content: center;
    }

    /* --- NEW: Target the specific parent container to re-order items --- */
    .gift-left {
        display: flex;
        flex-direction: column; /* Allows us to re-order children vertically */
    }

    .video-text-row {
        justify-content: center !important; /* Forces the items to the middle */
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        flex-wrap: wrap; /* Stacks them gracefully if the screen is super narrow */
        gap: 15px; /* Ensures space between them if they wrap */
    }

    /* --- UPDATED: Moves this row to the top --- */
    .video-text-row-product {
        flex-wrap: wrap;
        gap: 15px;

        /* New properties for re-ordering: */
        order: -1;             /* This moves it to the top of .gift-left */
        margin-bottom: 30px;   /* Add space between links and the image below */
        display: flex;         /* Ensure links inside align nicely */
        justify-content: flex-start; /* Center the links */
    }

    .hero-content {
        margin: 0 auto;
        padding-top: 30px; /* lift text block higher */
        text-align: center;
    }

    .hero-headline {
        font-size: 2.4rem;
        margin-bottom: 0.2em;
    }

    .hero-subhead {
        font-size: 1.4rem;
        margin-bottom:0;
    }

    .shipping-icons {
        width: 70%;
        margin: 0 auto 1em;
        opacity: 0.9;
    }

    .btn-primary {
        padding: 12px 28px;
        font-size: 1rem;
    }
}
/* ==============================================
Transition from Hero Map to Shop Intro Section
============================================== */
.section-shop-intro {
    position: relative;
    background: #fff;
    margin-top: -100px; /* was -120px — reduce overlap to remove gap */
    padding-top: 80px;  /* was 160px — lift content up */
    padding-bottom: 40px; /* slightly smaller */
    text-align: center;
    z-index: 3;
}
/* subtle shadow or gradient tie-in */
.section-shop-intro::before {
    content: "";
    position: absolute;
    top: -60px; /* start earlier in the fade overlap */
    left: 0;
    right: 0;
    height: 120px; /* taller blend */
    background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    #fff 90%);
    z-index: -1;
}

/* Headline + subtext */
.shop-headline {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--moc-green, #157575);
    margin-bottom: 0.4em;
}

.shop-subtext {
    font-size: 1.05rem;
    color: #444;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* product grid area - tighten top spacing */
.section-products {
    background: #fff;
    padding-top: 20px;
}
.section-shop-intro {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.section-shop-intro.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =======================================================
   Product Category Sections (looped)
   ======================================================= */


.category-headline {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--moc-green, #157575);
    text-align: center;
    margin-bottom: 0.4em;
}

.category-subtext {
    font-size: 1rem;
    color: #444;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2.2em;
    line-height: 1.6;
}


/* scroll fade-up reveal */
.section-category {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    position: relative;
    background: #fff;
    padding: 40px 20px 40px;
    border-top: 1px solid #eee;
}
.section-category + .section-category {
    border-top: none;/* default look */
    margin-top: -20px; /* slightly overlaps for smoother flow */
}
.section-category.is-visible {
    opacity: 1;
    transform: translateY(0);
}



.section-quadrants {
    width: 100%;
    color: var(--ink, #111);
    padding: 0;

    /*padding-bottom: clamp(20px, 4vw, 40px);*/
    text-align: center;
}
.section-light-bg{
    /*background: #f7f8f7;*/
    background: #f4f9f8;
}


 .grid.quarter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:  1.5rem;
}




/* subtle alternating backgrounds */
.teal-background {
    background: #f4f9f8; /* whisper of MOC teal */
}


/* headline + text refinements */
.category-headline {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--moc-green, #157575);
    text-align: center;
    margin-bottom: 0.4em;
}

.category-subtext {
    font-size: 1rem;
    color: #444;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2.2em;
    line-height: 1.6;
}



/* ===== 2x2 Grid (no spacing between quadrants) ===== */
.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ← FORCE 2 columns on desktop */
    width: 100%;
    margin: 0;
    padding: 0;

    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;

    grid-auto-rows: auto;
}







.quad {
    background: #fff;
    padding: clamp(32px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    box-shadow: none;

}
.quad .left-list {
    text-align: left;       /* Aligns text and bullets to the left */
    display: inline-block;  /* Makes the UL only as wide as its content */
    margin: 0 auto;         /* Centers the UL block itself within the parent */
    padding-left: 20px;     /* Adds space for bullets so they aren't cut off */
    margin-bottom: 20px;
}
/* Headings */
.quad-title {
    font-family: var(--font-head, "Playfair Display", serif);
    text-transform: uppercase;
    font-weight: 800;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    letter-spacing: 0.5px;
    color: var(--ink, #111);
    margin-bottom: 12px;
    line-height: 1.1;
}

/* ================================================
   Quad Mini Text (small eyebrow above title)
   ================================================ */
.quad-title-mini-text {
    display: block;
    font-family: var(--font-body, "Inter", sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--ink-2, #555);
    margin-bottom: 6px;
}
/* ============================= */
/*  VIDEO QUADRANT               */
/* ============================= */
.quad.video {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /*padding:0;*/
}

.quad.video .video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.quad.video img,
.quad.video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Remove padding + full bleed ONLY when class applied */
.quad.full-image {
    padding: 0 !important;
}

.quad.full-image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Play button */
.quad.video .play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    transition: background 0.3s ease;
}


.quad.video:hover .play {
    background: rgba(0,0,0,0.35);
}

/* ============================= */
/*  TEXT & IMAGE QUADRANTS       */
/* ============================= */
.quad.custom p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-2, #333);
    max-width: 50ch;
}

.quad.custom em {
    color: var(--moc-green, #157575);
    font-style: italic;
}

.quad.placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================= */
/*  RESPONSIVE STACKING          */
/* ============================= */
@media (max-width: 900px) {
    .quadrant-grid {
        grid-template-columns: 1fr!important;
        grid-template-rows: auto;
    }
    .quad {
        border-right: none !important;
        border-bottom: 1px solid #e6e6e6;
    }

}
.no-padding{
    padding: 0!important;
}
.quad-image {
    width: 100%;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
}
.quad-image img {
    width: 260px;          /* fixed width */
    height: 260px;         /* fixed height */
    object-fit: cover;     /* crops evenly */
    border-radius: 22px;   /* nice rounding */
    display: block;
}
.quad-image-full {
    width: 100%;
    margin-bottom: 1.25rem;
    /* Flex is technically not needed here if img is 100% width,
       but keeping it doesn't hurt. */
    display: block;
}

.quad-image-full img {
    width: 100%;           /* 1. Fill the container width */
    height: auto;          /* 2. Reset height to auto so aspect-ratio takes over */
    aspect-ratio: 1 / 1;   /* 3. The magic: Locks the height to equal the width */
    object-fit: cover;     /* 4. Crops the image to fill the square without stretching */
    border-radius: 22px;
    display: block;
}
@media (max-width: 768px) {
    .quad-image img {
        width: 200px;
        height: 200px;
    }
}

/* ============================= */
/*  Quadrant Intro Header Above  */
/* ============================= */

.quadrant-intro {

    text-align: center;
    padding: clamp(20px, 6vw, 40px) 20px 20px;
    color: var(--ink, #111);
    border-bottom: 1px solid #e6e6e6;
}

.quadrant-intro .container {
    max-width: 1200px;
    margin: 0 auto;
}

.quad-intro-title {
    margin: 0 0 12px;
}

.quadrant-intro .quad-title-mini-text {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: var(--moc-green, #157575);
    margin-bottom: 6px;
}

.quadrant-intro .quad-title {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    text-transform: uppercase;
    color: var(--ink, #111);
    margin-bottom: 0.4em;
}

.quadrant-intro .quad-intro-subtext {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink-2, #4b5563);
    max-width: 75ch;
    margin: 0 auto;
}

.quad p a {
    color: #0066cc !important;     /* standard hyperlink blue */
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline !important;
}

.quad p a:hover {
    color: #004999 !important;      /* darker blue hover */
    text-decoration: underline;
}
.short-content  a {
    color: #0066cc !important;     /* standard hyperlink blue */
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline !important;
}

.short-content  a:hover {
    color: #004999 !important;      /* darker blue hover */
    text-decoration: underline;
}
/* ============================= */
/*  FAQ ACCORDION                */
/* ============================= */
.accordion-item {
    border-top: 1px solid #ddd;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 14px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--ink, #111);
}

.accordion-header:hover {
    color: var(--moc-green, #157575);
}

.icon {
    color: var(--moc-orange, #F26C36);
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 10px;
}

.accordion-body {
    padding: 0 0 14px 0;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}
.accordion-body p {
    margin: 0;
}

/* =========================================
   1. CONTAINER & GRID STYLES
   ========================================= */

/* Section Wrapper */
.addon-section {
    padding: 10px 0;
    /*background-color: #f8f9fa;*/
    /*border-top: 1px solid #eee;*/
    margin-top: 10px;
}

/* Section Header */
.addon-section h3,
.addon-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--moc-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid Layout */
.compact-grid-container {
    display: grid;
    /* Responsive grid: columns at least 220px wide */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    width: 100%;

}

.small-compact-grid-container{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
/* =========================================
   2. COMPACT CARD STYLES (3-Row Layout)
   ========================================= */

.moc-compact-card {
    display: flex;
    flex-direction: column; /* Stack: Title -> Body -> Footer */
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    transition: all 0.2s ease;
    position: relative; /* Base for positioning */
}

.moc-compact-card:hover {
    border-color: #0a6847;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Row 1: Title */
.compact-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #333;
    min-height: 2.6em; /* Keeps alignment if some titles are longer */
}

/* Row 2: Image & Price */
.compact-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100%;
}

.compact-img {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
    /*border: 1px solid #f0f0f0;*/
}

.compact-price-wrapper {
    text-align: right;
}

.compact-price {
    font-size: 1.1rem;
    color: #222;
    font-weight: 700;
    display: block;
}

/* Row 3: Button */
.compact-footer {
    margin-top: auto;
}

.compact-btn {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #0a6847;
    color: #0a6847;
    padding: 8px 0;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

.compact-btn:hover {
    background: #0a6847;
    color: #fff;
}
/* =========================================
   MOBILE ADJUSTMENTS
   (Add this to the very bottom of your CSS)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Force Grid to be strictly 2 columns */
    .compact-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 10px; /* Reduce gap slightly to save space */
    }
    .small-compact-grid-container{
        display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px;
    }
    /* 2. Hide the Title */
    .compact-title {
        display: none;
    }

    /* 3. Tweak sizes so they look good in narrow columns */
    .moc-compact-card {
        padding: 10px; /* Reduce padding */
    }

    /* Make image slightly smaller */
    .compact-img {
        width: 45px;
        height: 45px;
        margin-right: 8px; /* Reduce gap between image and price */
    }

    /* Adjust font sizes */
    .compact-price {
        font-size: 1rem;
    }

    .compact-btn {
        font-size: 0.8rem;
        padding: 6px 0;
        white-space: nowrap; /* Prevent "Add to Cart" from wrapping awkwardly */
    }
}
/* =========================================
   3. OPTIONS DRAWER / POPUP STYLES
   ========================================= */

/* The dark background overlay */
.options-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    /* High z-index to sit on top of everything */
    z-index: 9999 !important;
    backdrop-filter: blur(2px); /* Optional: slight blur on background */
}

/* The white box in the center */
.options-drawer {
    background: #fff;
    width: 90%;
    max-width: 350px;
    padding: 25px 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: left;
}

/* Close 'X' button */
.options-drawer .close-btn {
    position: absolute;
    top: 10px; right: 15px;
    border: none;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0;
}

.options-drawer .close-btn:hover {
    color: #333;
}

.options-label {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

/* Grid of Size Buttons */
.options-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.option-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    min-width: 50px;
    text-align: center;
}

.option-btn:hover {
    border-color: #0a6847;
}

/* Selected Size State */
.option-btn.active {
    background-color: #0a6847;
    border-color: #0a6847;
    color: #fff;
}

/* Add to Cart Button inside Drawer */
.drawer-cart-btn button {
    width: 100%;
    padding: 10px;
    background: #333; /* Dark button for drawer, or use #0a6847 */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.drawer-cart-btn button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.drawer-cart-btn button:not(:disabled):hover {
    background: #000;
}
/* --- Option B: Toggle Card Styles --- */
.moc-toggle-card {
    position: relative;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    opacity: 0.9;
}

.moc-toggle-card:hover {
    transform: translateY(-2px);
}

/* Active State (Selected) */
.moc-toggle-card.is-selected {
    border-color: #0a6847; /* MOC Green */
    background: #f4fcf9; /* Very light green bg */
    opacity: 1;
}

.toggle-check-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0a6847;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}

.toggle-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px auto;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.toggle-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.toggle-price {
    font-size: 0.85rem;
    color: #555;
}


/* Grid layout */
.hover-quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 60px);
    max-width: 1200px;
    margin: clamp(20px, 6vw, 40px) auto;
    padding: 0 20px;
}

/* Left / Right columns */
.hover-left, .hover-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.hover-item {
    background: transparent;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}
.hover-item:hover {
    color: var(--moc-green);
    transform: translateX(6px);
}
.hover-item i {
    font-size: 1.8rem;
    color: var(--moc-orange);
    margin-bottom: 8px;
}
.hover-item h3 {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.hover-item p {
    font-size: 0.95rem;
    color: var(--ink-2, #555);
    line-height: 1.6;
}

.hover-center {
    position: relative;
    height: 360px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* ensures clean fade edges */
}

/* Base image style */
.hover-center .center-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Only show the active one */
.hover-center .center-img.is-active {
    opacity: 1;
    z-index: 2;
}

/* optional: hide template placeholders */
.hover-center img[x-cloak] {
    display: none;
}
.hover-center .center-img {
    transition: opacity 0.8s ease-in-out;
}

.hover-cta {
    margin-top: clamp(20px, 3vw, 30px);
    margin-bottom: clamp(20px, 3vw, 30px);
}

.hover-cta .btn-primary {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 10px;
    background: var(--moc-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hover-cta .btn-primary:hover {
    background: #ff814f;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
    .hover-quadrant-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .hover-left,
    .hover-right {
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .hover-item {
        text-align: center;
        transform: none !important;
    }
    .hover-center {
        height: 260px;
    }
}

/*Hover center (Oyster Box images)	1200	800	3:2*/
/*Driven by Science image	1000	700	4:3	*/
/*testimonial image	1600	900	4:3	*/
/* ============================================================
🧭 Aspect-Ratio Helpers — for image consistency
============================================================ */

/* Generic class (3:2 ratio) — ideal for “What’s Inside My Oyster Box” */
.aspect-3x2 {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 16px;
}

.aspect-3x2 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Optional subtle hover zoom effect */
.aspect-3x2:hover img {
    transform: scale(1.02);
}

.aspect-square {
    aspect-ratio: 1 / 1;
}
/* For Driven by Science images (4:3 ratio) */
.aspect-4x3 {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}

.aspect-4x3 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.aspect-4x3:hover img {
    transform: scale(1.02);
}
.fade-in {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.9s ease, transform 1s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: scale(1);
}
.section-driven-vets {
    background: #fffaf5;
    color: var(--ink, #111);
    font-family: var(--font-body, "Inter", sans-serif);
}

/* === Top Split Row === */
.science-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 5vw, 80px);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 60px);
}
.science-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.science-text h2 {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: clamp(2rem, 3vw, 2.6rem);
    color: var(--moc-green, #157575);
    margin-bottom: 0.6em;
}
.science-text h2 span {
    color: var(--ink, #111);
    font-weight: 700;
}
.science-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-2, #333);
    margin-bottom: 1.4em;
}
.science-text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6em;
}
.science-text li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink, #111);
}
.science-text i {
    color: var(--moc-orange, #F26C36);
    font-size: 1rem;
}
.small-link {
    font-size: 0.95rem;
    color: var(--ink-2, #4b5563);
}
.small-link a {
    color: var(--moc-orange);
    font-weight: 600;
    text-decoration: none;
}
.small-link a:hover {
    text-decoration: underline;
}

/* === Trusted Band (Carousel) === */
.trusted-band {
    background: #fef4ea;
    text-align: center;
    padding: clamp(60px, 8vw, 100px) 20px;
    position: relative;
    overflow: hidden;
}
.trusted-band h3 {
    font-family: var(--font-head, "Playfair Display", serif);
    color: var(--moc-green);
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    margin-bottom: 0.3em;
}
.trusted-band .sub {
    color: var(--ink-2, #444);
    font-size: 1rem;
    margin-bottom: 2em;
}
.testimonial-slide {
    max-width: 740px;
    margin: 0 auto;
}
.testimonial-slide blockquote {
    font-family: var(--font-head, "Playfair Display", serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--ink, #111);
    margin-bottom: 1em;
}
.testimonial-slide .author {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--moc-green);
}

/* dots */
.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background 0.3s ease;
}
.dot.active {
    background: var(--moc-orange);
}

/* === Responsive === */
@media (max-width: 900px) {
    .science-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .science-text ul {
        align-items: center;
    }
    .science-text li {
        justify-content: center;
    }
}
/* ============================================================
   Advanced Quadrants Layout
   ============================================================ */



/* Shared Carousel Base */
.carousel-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.carousel-img, .slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: opacity 0.8s ease;
}
.carousel-img.active, .slide.active { opacity: 1; }
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    color: var(--moc-green);
    font-size: 2rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .3s ease;
    z-index: 2;
}
.carousel-nav:hover { background: rgba(255,255,255,0.9); }
.carousel-nav.left { left: 12px; }
.carousel-nav.right { right: 12px; }

/* Full-Width Carousel */
.full-carousel .carousel-frame.wide {
    height: clamp(320px, 50vw, 480px);
}
.full-carousel .caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
}

/* Dual Tabs Grid */
.dual-tabs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: clamp(30px, 4vw, 60px);
}
.dual-tabs{
    grid-column: span 2;
}
.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tab-nav button {
    border: 1px solid var(--moc-green);
    background: #fff;
    color: var(--moc-green);
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}
.tab-nav button.active {
    background: var(--moc-green);
    color: #fff;
}
.tab-body p {
    font-size: 1rem;
    color: var(--ink-2,#444);
    line-height: 1.7;
}
.tab-media img, .tab-media video {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Checklist style */
.checklist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2, #444);
    margin-bottom: 6px;
}
.checklist i {
    color: var(--moc-orange);
}

/* Fade-in effect */
.fade-in {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.9s ease, transform 1s ease;
}
.fade-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Responsive */
@media (max-width: 900px) {

    .dual-tabs-grid { grid-template-columns: 1fr; }
    .tab-nav { justify-content: center; }
}

.summary-line.promo-line span:first-child {
    font-weight: 600;
    color: var(--moc-green);
}
.summary-line.promo-line span:last-child {
    font-weight: 700;
    color: #1b8a1b;
}

.oyster-region {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.oyster-grower,
.oyster-grower-desc {
    text-align: center;

}

.oyster-facts {
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    border-radius: 10px;
    padding: 12px;
    margin: 18px 0;
}

.oyster-facts .fact {
    text-align: center;
    flex: 1;
}

.fact-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #777;
}

.fact-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}

.oyster-social {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.oyster-social a {
    margin: 0 8px;
    font-size: 18px;
    color: #444;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 36px;
    font-weight: 300;
    color: white;
    z-index: 999;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.modal-wrapper {
    padding: 0;
    margin: 0;
    position: relative; /* ✔ needed for close button */
}

.modal-image {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-inner {
    padding: 20px;
    text-align: center; /* ✔ clean alignment */
}

.modal-name {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--moc-black, #111);
    text-align: center;
}

.modal-tagline {
    margin-top: 8px;
    font-size: 15px;
    color: #666;
    font-style: italic;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-btn {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    display: inline-block;
}

.modal-btn-orange {
    background: var(--moc-orange, #d65c00);
}

.modal-btn-green {
    background: var(--moc-green, #0b7d6d);
}

.modal-btn:hover {
    opacity: .9;
}

/* VIDEO BLOCK */
.modal-video {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.modal-video video {
    width: 100%;
    height: auto;
    display: block;
}


 .prime-hero-page {
     width: 100%;
     margin: 0;
     padding: 0;
     background: #0d0d0d;
     font-family: "Inter", sans-serif;
     color: #fff;
 }
/* ------------------------------
   HERO SECTION
------------------------------ */

.pv-title {
    font-family: var(--font-head, "Playfair Display");
    font-size: clamp(46px, 5vw, 78px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

/* Subtitle & Description: Inter */
.pv-subtitle,
.pv-description {
    font-family: var(--font-body, "Inter", sans-serif);
    color: rgba(255,255,255,0.85);
}

/* ------------------------------
   BUTTON ROW
------------------------------ */
.pv-buttons {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.pv-btn {
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease;
}

.pv-btn-primary {
    background: #fff;
    color: #000;
}

.pv-btn-primary:hover {
    background: #e0e0e0;
}

.pv-btn-secondary {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}

.pv-btn-secondary:hover {
    background: rgba(255,255,255,0.25);
}




/* ------------------------------
   ICON ROW
------------------------------ */
.pv-icons {
    display: flex;
    gap: 18px;
    ;
    opacity: 0.9;
}

.pv-icon span {
    margin-right: 6px;
}

/* HERO META ROW */
.pv-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    font-family: var(--font-body, "Inter", sans-serif);
    color: rgba(255,255,255,0.85);
}

.pv-meta .icon {
    margin-right: 4px;
}
.pv-amount {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
    font-family: var(--font-body, "Inter", sans-serif);
    color: rgba(255,255,255,0.85);
}

/* TABS BAR */
.pv-tabs {
    position: sticky;
    top: 60px; /* adjust if your nav height differs */
    z-index: 5;
    background: #050607;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 clamp(24px, 5vw, 80px);
    display: flex;
    gap: 24px;
}

.pv-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 0 12px;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 1.3rem;
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
}

.pv-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background .2s ease;
}

.pv-tab:hover {
    color: rgba(255,255,255,0.9);
}

.pv-tab.pv-tab-active {
    color: #fff;
}

.pv-tab.pv-tab-active::after {
    background: var(--moc-green, #0f7b6c);
}

/* DETAILS SECTION */
.pv-details {
    padding: 40px clamp(24px, 5vw, 80px) 32px;
    background: #050607;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pv-details-inner {
    max-width: 1000px;
}

.pv-details-title {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: 2rem;
    margin-bottom: 8px;
}

.pv-details-intro {
    font-family: var(--font-body, "Inter", sans-serif);
    color: rgba(255,255,255,0.80);
    margin-bottom: 24px;
}

.pv-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 28px;
}


/* ------------------------------
   RESPONSIVE
------------------------------ */
@media (max-width: 800px) {
    .pv-hero-content {
        left: 20px;
        bottom: 8vh;
    }
    .pv-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
    .pv-details-grid {
        grid-template-columns: 1fr;
    }
}
.pv-details-col h3 {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: 2rem;
    margin-bottom: 8px;
}

.pv-details-col ul {
    list-style: disc;
    margin-left: 20px;
    color: rgba(255,255,255,0.85);
}

/* GENERIC SECTION WRAPPERS (Photos / Location / Reviews) */
.pv-section {
    padding: 32px clamp(24px, 5vw, 80px);
    background: #050607;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pv-section-inner {
    max-width: 1100px;
}

.pv-section-title {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: 2rem;
    margin-bottom: 18px;
}

/* SIMPLE PLACEHOLDER PHOTO GRID */
.pv-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .pv-photo-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .pv-photo-grid {
        grid-template-columns: 1fr;
    }
}

.pv-photo-card {
    background: #0b0e0f;
    border-radius: 12px;
    padding: 40px 16px;
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    color: rgba(255,255,255,0.65);
}

/* REVIEWS */
.pv-review-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
}

@media (max-width: 900px) {
    .pv-review-list {
        grid-template-columns: 1fr;
    }
}

.pv-review-card {
    background: #0b0e0f;
    border-radius: 12px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255,255,255,0.10);
    font-family: var(--font-body, "Inter", sans-serif);
    color: rgba(255,255,255,0.9);
}

.pv-review-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pv-review-name {
    font-weight: 600;
}

.pv-review-rating .icon {
    margin-right: 2px;
}
.pv-location-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Map is slightly wider than text */
    gap: 40px;
    align-items: center;
}

/* Info Column Styling */
.pv-loc-info .loc-name {
    font-family: var(--font-head, "Playfair Display", serif);
    font-size: 22px;
    color: #fff;
    margin-bottom: 12px;
}

.pv-loc-info .loc-address p {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.6;
}

.pv-loc-info .loc-contact {
    margin-top: 16px;
    margin-bottom: 24px;
    color: var(--moc-green, #0f7b6c); /* Uses your green accent */
    font-size: 15px;
}

.loc-btn {
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
}

/* Map Column Styling */
.pv-map-frame {
    position: relative;
    width: 100%;
    height: 300px; /* Fixed height for the map */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.pv-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;

    /* OPTIONAL: This filter desaturates the map slightly
       so it isn't too bright against your dark theme */
    filter: grayscale(30%) contrast(0.9);
    transition: filter 0.3s ease;
}

.pv-map-frame:hover iframe {
    /* Bring back full color on hover */
    filter: grayscale(0%);
}

/* Responsive: Stack on mobile */
@media (max-width: 800px) {
    .pv-location-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pv-map-frame {
        height: 250px; /* Slightly shorter on mobile */
    }
}

.gift-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 45%, #fff 100%); pointer-events: none; }
.gift-hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 80%; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.4) 60%, rgba(255,255,255,0) 90%); pointer-events: none; }

.gift-hero-inner { position: relative; z-index: 2;
    max-width: 1400px; width: 100%; margin: 0 auto;
    padding: 0 40px; display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px;


}
.gift-left { max-width: 560px; }
.gift-right-panel { background: #ffffff; border-radius: 20px; box-shadow: 0 16px 32px rgba(0,0,0,.10); padding: 24px 24px 26px; border: 1px solid var(--line, #e7edf0); }




.hero-list {
    list-style: none;
    padding: 0;
    /*margin: 0 0 1.4em;*/
    /*font-size: 1.25rem;*/
    line-height: 1.2;
    color: #0d3432;
}
/* The List Item Container */
.hero-list li {
    display: flex;           /* Flexbox aligns items side-by-side */
    align-items: center;     /* Centers items vertically */
    gap: 5px;               /* Consistent space between icon and text */
    position: relative;      /* Needed for the absolute arrow on the right */
    padding:6px;           /* Comfortable hit area */
    /*margin-bottom: 12px;*/

    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--ink, #111);

    /*cursor: pointer;*/
    /*transition: all 0.2s ease;*/
    /*border-radius: 8px;      !* Slight rounding looks nicer on hover *!*/
}
.hero-list li::before {
    content: "• ";
    color: var(--moc-green);
    font-weight: 700;
}

/* Hover Effect: Light background to show interactivity */
.hero-list li:hover {
    background-color: rgba(0,0,0,0.03);
}

/* The Icon Itself (::before) */
.hero-list li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    /* Flexbox child behavior */
    flex-shrink: 0;          /* Prevents icon from shrinking if text is long */
    width: 24px;             /* Fixed width ensures alignment */
    text-align: center;

    font-size: 1.2rem;
    color: var(--ink, #333);
    /* No absolute positioning needed anymore! */
}

/* Define the specific icons */
.hero-list li.icon-video::before { content: "\f03d"; }
.hero-list li.icon-map::before { content: "\f3c5"; }
.hero-list li.icon-fun::before { content: "\f0eb"; }


/* --- STEPS --- */
.step-section { margin-bottom: 24px; transition: all 0.3s ease; }
.step-header { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 600; margin-bottom: 12px; transition: color 0.3s; }
.step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; border: 2px solid currentColor; }

.step-done .step-header { color: var(--moc-green, #157575); }
.step-done .gear-option-btn, .step-done .oyster-btn { border-color: var(--moc-green, #157575); opacity: 0.9; }
.step-active .step-header { color: var(--moc-orange, #F26C36); }
.step-active .step-circle { background: var(--moc-orange, #F26C36); color: #fff; border: none; }
.step-locked { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

/* --- GRIDS --- */
.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.gear-option-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 14px; border: 2px solid #e1e5ea; padding: 16px 8px; cursor: pointer; background: #fff; transition: all .15s ease; height: 100%; }
.gear-option-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }
.gear-option-btn.active { border-color: var(--moc-green, #157575); box-shadow: 0 0 0 1px rgba(21,117,117,.25); background: rgba(21,117,117,.04); }
.gear-thumb { width: 60px; height: 60px; object-fit: contain; margin-bottom: 10px; }
.gear-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; margin-bottom: 4px; color: var(--ink, #111); }
.gear-price { font-size: 0.9rem; color: var(--moc-green, #157575); font-weight: 600; }

.oyster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 24px; }
.oyster-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); font-weight: 700;  border-radius: 10px; border: 2px solid #e1e5ea; padding: 10px 4px; cursor: pointer; background: #fff; transition: all .15s ease; min-height: 50px; }
.oyster-btn:hover { border-color: #ccc; }
.oyster-btn.active { border-color: var(--moc-green, #157575); background: rgba(21,117,117,.04); color: var(--moc-green); font-weight: 700; }

.state-select, .date-select { width: 100%; padding: 12px; border-radius: 10px; border: 2px solid #e1e5ea; font-size: 1rem; background: #fff; cursor: pointer; }

/* --- INSTANT CHECKOUT FORM --- */
.instant-checkout-container { margin-top: 20px; background: #fcfdfd; border: 2px solid var(--moc-green); border-radius: 16px; padding: 20px; animation: slideIn 0.4s ease-out forwards; }
.ic-header { font-weight: 700; font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.ic-form-group { margin-bottom: 12px; }
.ic-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: #555; }
.ic-input { width: 100%; padding: 10px; border: 1px solid #d3dae2; border-radius: 8px; }
#instant-payment-element {
    min-height: 0;
    transition: all 0.3s ease;
}

.btn-secondary { background: #fff; border: 2px solid #e1e5ea; color: var(--ink); width: 100%; padding: 12px; border-radius: 12px; font-weight: 600; margin-top: 10px; cursor: pointer; }
.btn-secondary:hover { border-color: var(--moc-green); color: var(--moc-green); }

/* --- CALENDAR --- */
.date-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.btn-cal-trigger { width: 48px; border-radius: 10px; border: 2px solid #e1e5ea; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.cal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cal-modal { background: #fff; width: 100%; max-width: 360px; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cal-title { font-weight: 700; font-size: 1.1rem; text-transform: capitalize; }
.cal-nav { background: none; border: none; font-weight: 700; cursor: pointer; color: var(--moc-green); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.8rem; color: #888; margin-bottom: 8px; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day-btn { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #eee; background: #fff; font-size: 0.9rem; cursor: pointer; }
.cal-day-btn:disabled { opacity: 0.3; cursor: default; border-color: transparent; }
.cal-day-btn.available { font-weight: 600; border-color: #d0e0dc; }
.cal-day-btn.available:hover { border-color: var(--moc-green); color: var(--moc-green); }
.cal-day-btn.selected { background: var(--moc-green); color: #fff; border-color: var(--moc-green); }

.price-breakdown { background: #f8f9fa; border-radius: 12px; padding: 15px; margin-bottom: 20px; border: 1px solid #e1e5ea; }
.pb-row { display: flex; justify-content: space-between;  margin-bottom: 6px; color: var(--ink-2); }
.pb-total { border-top: 1px solid #ddd; padding-top: 8px; margin-top: 8px; font-weight: 700; font-size: 1.3rem; color: var(--moc-green); display: flex; justify-content: space-between; }

.slide-enter { animation: slideIn 0.3s ease-out forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }




/* bottom fade */
.gift-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.6) 45%,
            #fff 100%
    );
    pointer-events: none;
}

/* right-to-left fade */
.gift-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;   /* 👈 fade starts on the LEFT now */
    bottom: 0;
    width: 80%; /* adjust how far across the fade reaches */

    background: linear-gradient(
            to right,
            rgba(255,255,255,1) 0%,   /* not pure white */
            rgba(255,255,255,0.9) 30%,
            rgba(255,255,255,0.4) 60%,  /* gentle fade */
            rgba(255,255,255,0) 90%      /* full image */
    );
    pointer-events: none;
}
@media (max-width: 768px) {
    .gift-hero {
        background-attachment: scroll !important; /* mobile-safe */
        background-position: center center;
        min-height: 50vh;
    }

    .gift-hero::before {
        width: 100%;
        background: rgba(255,255,255,.8); /* dim entire image ~80% visibility */
    }

    .gift-hero::after {


    }
}

.gear-preview-image {
    height: 250px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
    max-width: 400px;
    margin: 0;
    background-position: center center; /* Changed from 'left bottom' to center so the fade is even */

    /* Change linear-gradient to radial-gradient */
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 60%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 60%);

    opacity: 0.75;
}
/* LEFT SIDE — text + preview */
.gift-left {
    max-width: 560px;
}
@media (max-width: 900px) {
    .gift-right-panel{
        padding-top: 10px!important;
    }
    .gift-hero { padding-top: 110px; }
    .gift-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 20px 40px; }
    .gear-preview-image {
        height: 200px;
        /*background-position: center bottom;*/
    }
}


.gift-card-preview-wrap {
    margin: 24px 0 16px;
}

/* placeholder card — you’ll swap the background-image */
.gift-card-preview {
    width: 380px;
    height: 300px;
    border-radius: 18px;
    background:  url('/assets/images/giftCard.png') center/cover no-repeat;

}

.gift-left-desc {
    line-height: 1.5;
    color: var(--ink-2, #5e6b72);
    max-width: 480px;
}

.gift-section-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.gift-section-title span {
    color: var(--moc-green);
    margin-right: 4px;
}



/* amount buttons */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.amount-btn {
    border-radius: 999px;
    padding: 10px 0;

    border: 2px solid #e1e5ea;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.amount-btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.amount-btn.active {
    border-color: var(--moc-green);
    box-shadow: 0 0 0 1px rgba(21,117,117,.25);
    background: rgba(21,117,117,.04);
}

/* shipping method selector */
.ship-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ship-pill {
    border-radius: 14px;
    border: 2px solid #e1e5ea;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    background: #fff;
    font-size:.9rem;
}

.ship-pill-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.ship-icon {
    font-size: 18px;
}

.ship-pill.active {
    border-color: var(--moc-green);
    background: rgba(21,117,117,.04);
    box-shadow: 0 0 0 1px rgba(21,117,117,.25);
}

.gift-field-label {
    font-size:.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.gift-input,
.gift-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #d3dae2;
    padding: 10px 12px;

    background: #fff;
}

.gift-textarea {
    resize: vertical;
    min-height: 80px;
}

.gift-input:focus,
.gift-textarea:focus {
    outline: none;
    border-color: var(--moc-green);
    box-shadow: 0 0 0 1px rgba(21,117,117,.18);
}


.btn-green:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.gift-helper {
    font-size:.9rem;
    color: var(--ink-2, #5e6b72);
    margin-top: 3px;
}

@media (max-width: 900px) {
    .gift-hero {
        padding-top: 110px;
    }

    .gift-card-preview {
        width: 100%;
        max-width: 360px;
    }
}
.amount-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.amount-sub {
    font-size: 0.75rem;
    color: var(--ink-2);
    margin-top: 2px;
}
/* Dynamic Info Box Styling */
.dynamic-info-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}
.dynamic-info-box h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #157575; /* Your brand green */
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dynamic-info-box p {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.4;
}
/* Optional: Animate the content switching */
.info-content {
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Progress Bar Container */
.checkout-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
    padding: 0 10px;
}

/* The gray connecting line behind the circles */
.checkout-steps::before {
    content: '';
    position: absolute;
    top: 14px; /* Vertically center with circles */
    left: 40px; /* Start after first circle */
    right: 40px; /* End before last circle */
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

/* Individual Step Wrapper */
.step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%; /* Divide space evenly */
}

/* The Circle */
.step .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff; /* White background to cover the line behind it */
    border: 2px solid #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

/* Label Text */
.step span {
    font-size: 0.75rem;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* === ACTIVE STATE (Green) === */
.step.active .circle {
    border-color: #157575;
    background: #157575;
    color: #fff;
    transform: scale(1.1); /* Slight pop */
    box-shadow: 0 2px 5px rgba(21, 117, 117, 0.3);
}
.step.active span {
    color: #157575;
}

/* === COMPLETE STATE (Orange with Check) === */
/* TYPO FIXED: Changed 'compzlete' to 'complete' */
.step.complete .circle {
    border-color: #F26C36; /* MOC Orange */
    background: #F26C36;
    color: #fff;
}

/* SYNTAX FIXED: Added the missing closing bracket below */
.step.complete span {
    color: #F26C36;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }

}
.map-legend {
    pointer-events: none;
}
.map-container {
    position: relative;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #000;
}
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(242, 108, 54, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(242, 108, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 108, 54, 0); }
}

.pulse-animation {
    animation: pulse-orange 2s infinite;
}

/* Ensure the iframe in the wrapper hits the corners */
.video-wrapper iframe {
    border-radius: calc(var(--radius) - 4px); /* Match parent radius minus border */
}

.btn-ask-live {
    background: linear-gradient(135deg, var(--moc-orange) 0%, #ff8a5b 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 280px;
    margin-left: auto; /* aligns right in flex container */
    box-shadow: 0 4px 15px rgba(242, 108, 54, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.btn-ask-live:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 108, 54, 0.4);
}

.btn-ask-live i {
    transition: transform 0.3s ease;
}

.btn-ask-live:hover i {
    transform: rotate(-15deg) scale(1.1);
}

/* Ensure Video Aspect Ratio holds even if stream delays */
.video-wrapper {
    aspect-ratio: 16 / 9;
    background: #000;
}

@media (max-width: 768px) {
    .action-row {
        flex-direction: column;
        gap: 20px;
    }
    .action-row > div {
        text-align: center !important;
        width: 100%;
    }
    .btn-ask-live {
        margin: 0 auto; /* Center on mobile */
    }
}

/* Mobile Fix for Oyster Hero Section */
@media (max-width: 900px) {

    /* 1. Allow the hero container to grow vertically based on text amount */
    .pv-hero {
        height: auto !important;     /* Stop forcing 60vh height */
        min-height: 80vh;            /* Ensure it still looks like a hero section */
        display: flex;
        align-items: flex-end;       /* Aligns content towards bottom visually */
    }

    /* 2. Stop floating the text. Make it sit naturally in the box. */
    .pv-hero-content {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 100%;

        /* 3. Add padding to clear the top navigation bar + breathing room at bottom */
        padding-top: 140px;          /* Clears the fixed header */
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 4. Ensure the background video stretches to cover the new taller height */
    .pv-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 5. Adjust the gradient overlay to cover the full new height */
    .pv-hero-overlay {
        height: 100%;
    }
}