/* -----------------------
   HEADER COMPONENT
------------------------ */
body {
  overflow : unset;
}
.site-header {
    width: 100%;
    background-color: var(--color-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 100;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header-left,
.header-right {
    flex: 1;
}

.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

.header-logo {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-primary);
    line-height: 1;
    text-decoration: none;
}

.header-logo img {
    display: block;
    width: 76px;
    height: auto;
    margin: 0 auto 7px;
}

.header-logo h1 {
    font-family: var(--font-logo);
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.header-logo span {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.icon-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.icon-btn:hover {
    color: var(--color-primary);
}

.icon-btn svg {
    width: 22px;
    height: 22px;
}

.badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: var(--color-primary);
    color: white;
    font-size: 10px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--font-body);
}

/* Navigation */
.main-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px 0;
    overflow: visible;
}

.main-nav a,
.nav-parent {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    position: relative;
    transition: color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--color-primary);
    font-weight: 600;
}

.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
}

.nav-separator {
    color: #d1d1d1;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-parent::before {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 24px;
}
.nav-parent::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.65;
    transition: transform 0.24s ease;
}
.nav-dropdown:hover .nav-parent::after,
.nav-dropdown:focus-within .nav-parent::after {
    transform: rotate(225deg) translateY(-1px);
}
.main-nav a.active.nav-parent::after {
    position: static;
    width: 5px;
    height: 5px;
    background: transparent;
}
.nav-mega {
    position: absolute;
    left: 50%;
    top: calc(100% + 18px);
    z-index: 130;
    width: 360px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% 12%, rgba(239,195,104,0.18), transparent 32%),
        rgba(255,255,255,0.88);
    box-shadow: 0 28px 70px rgba(28,58,19,0.16);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.98);
    transition: opacity 0.24s ease, transform 0.24s ease;
}
.nav-mega::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 14px;
    height: 14px;
    border-left: 1px solid rgba(28,58,19,0.08);
    border-top: 1px solid rgba(28,58,19,0.08);
    background: rgba(255,255,255,0.88);
    transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown:hover .nav-mega,
.nav-dropdown:focus-within .nav-mega {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}
.nav-product-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 10px;
    border-radius: 16px;
    color: var(--color-primary);
    background: rgba(248,243,231,0.58);
    text-decoration: none;
    transition: background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}
.nav-product-card:hover,
.nav-product-card:focus {
    background: rgba(239,195,104,0.18);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(28,58,19,0.08);
}
.nav-product-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    background: #F7F2E6;
}
.nav-product-card span,
.nav-product-card strong,
.nav-product-card small {
    display: block;
}
.nav-product-card strong {
    color: var(--color-primary);
    line-height: 1.2;
    font-size: 17px;
    font-weight: 700;
  
}
.nav-product-card small {
    margin-top: 4px;
    color: rgba(28,58,19,0.58)
    line-height: 1.25;
}
.nav-mega-ghee {
    background:
        radial-gradient(circle at 16% 12%, rgba(239,195,104,0.28), transparent 32%),
        rgba(255,252,242,0.9);
}

/* -----------------------
   DESKTOP SOCIAL & WHATSAPP
------------------------ */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-social-btn {
    color: rgba(28, 58, 19, 0.6);
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-social-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-social-btn:hover {
    color: #3D5B34;
    transform: translateY(-2px);
}

.wa-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #D3FA99;
    color: #1C3A13;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    text-decoration: none;
}

.wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #D3FA99;
    z-index: -1;
    animation: waPulse 2.5s infinite;
}

@keyframes waPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.wa-float:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* -----------------------
   MOBILE BOTTOM NAVIGATION DOCK
------------------------ */
.mobile-dock {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    padding: 10px 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    width: 90%;
    max-width: 380px;
    justify-content: space-between;
    align-items: center;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #556260;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.dock-item.active {
    color: #1C3A13;
}

.dock-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-item.active svg {
    stroke-width: 2.5px;
    stroke: #1C3A13;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .mobile-dock {
        display: flex;
        /* Show Bottom Dock on mobile */
    }

    .header-top {
        justify-content: center;
        /* Center logo on upper header */
        padding: 16px;
    }

    .header-left,
    .header-right,
    .main-nav {
        display: none;
        /* Hide old generic navs and text links */
    }

    .wa-float {
        display: none;
        /* Hide floating WA on mobile */
    }
}

/* -----------------------
   MOBILE BOTTOM SHEET
------------------------ */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 28, 9, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1001;
}

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

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FCFCF7;
    border-radius: 28px 28px 0 0;
    padding: 16px 24px 40px;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bottom-sheet.active {
    transform: translateY(0);
}

.sheet-handle {
    width: 48px;
    height: 5px;
    background: rgba(28, 58, 19, 0.15);
    border-radius: 10px;
    margin: 0 auto 8px;
}

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

.sheet-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1C3A13;
}

.sheet-close {
    background: none;
    border: none;
    color: #8aaa80;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.sheet-close:hover {
    background: rgba(28, 58, 19, 0.05);
    color: #1C3A13;
}

.sheet-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sheet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(28, 58, 19, 0.08);
    border-radius: 16px;
    text-decoration: none;
    color: #1C3A13;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    transition: background 0.25s, transform 0.25s;
}

.sheet-item:hover,
.sheet-item:active {
    background: #EFF1E5;
    border-color: #D3FA99;
    transform: scale(0.98);
}

.sheet-item-arr {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #3D5B34;
    stroke-width: 2;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.sheet-item:hover .sheet-item-arr {
    opacity: 1;
    transform: translateX(3px);
}

/* =====================================================
   REUSABLE PREMIUM CART DRAWER
===================================================== */
.cart-demo-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 120px 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(239,195,104,0.18), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(168,198,108,0.18), transparent 32%),
        linear-gradient(180deg, #FDFCF8, #EFF4E8);
}
.cart-demo-hero {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}
.cart-demo-kicker {
    display: inline-flex;
    margin-bottom: 16px;
    color: #8B5A2B;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cart-demo-hero h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: 0.98;
}
.cart-demo-hero p {
    max-width: 58ch;
    margin: 0 0 28px;
    color: rgba(28,58,19,0.72);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}
.cart-demo-trigger {
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FDFCF8;
    font-size: 0.88rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(28,58,19,0.14);
}
.cart-demo-hero figure {
    min-height: 420px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 72%, rgba(239,195,104,0.38), transparent 50%),
        linear-gradient(145deg, #244D19, #102A0C);
    overflow: hidden;
}
.cart-demo-hero img {
    width: min(330px, 82%);
    filter: drop-shadow(0 34px 36px rgba(0,0,0,0.28));
}
.cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(12,29,9,0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    backdrop-filter: blur(8px);
}
body.cart-drawer-open .cart-overlay {
    opacity: 1;
    visibility: visible;
}
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 991;
    width: min(470px, 100%);
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22,1,0.36,1);
    pointer-events: none;
}
body.cart-drawer-open .cart-drawer {
    transform: translateX(0);
    pointer-events: auto;
}
.cart-drawer-inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 82% 8%, rgba(239,195,104,0.18), transparent 28%),
        linear-gradient(180deg, #FDFCF8, #F8F8F1);
    color: var(--color-primary);
    box-shadow: -28px 0 80px rgba(12,29,9,0.24);
}
.cart-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 30px 30px 22px;
    border-bottom: 1px solid rgba(28,58,19,0.08);
}
.cart-drawer-head span {
    display: block;
    margin-bottom: 7px;
    color: #8B5A2B;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cart-drawer-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.02;
}
.cart-drawer-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 50%;
    background: rgba(255,255,255,0.72);
    color: var(--color-primary);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.cart-drawer-body {
    overflow-y: auto;
    padding: 22px 24px;
}
.cart-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(28,58,19,0.08);
}
.cart-item:first-child {
    padding-top: 0;
}
.cart-item-media {
    min-height: 104px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 74%, rgba(239,195,104,0.3), transparent 50%),
        linear-gradient(145deg, #FFFFFF, #FFF8E7);
    border: 1px solid rgba(28,58,19,0.06);
}
.cart-item-media img {
    width: 74px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 16px 16px rgba(28,58,19,0.12));
}
.cart-item-info {
    min-width: 0;
    display: grid;
    gap: 14px;
}
.cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.cart-item h3 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.96rem;
    font-weight: 900;
}
.cart-item p {
    margin: 0;
    color: rgba(28,58,19,0.55);
    font-size: 0.78rem;
    font-weight: 800;
}
.cart-item strong {
    white-space: nowrap;
    color: var(--color-primary);
    font-size: 0.94rem;
    font-weight: 900;
}
.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cart-qty {
    display: inline-grid;
    grid-template-columns: 34px 34px 34px;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    background: rgba(28,58,19,0.06);
    border: 1px solid rgba(28,58,19,0.08);
    overflow: hidden;
}
.cart-qty button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}
.cart-qty span {
    text-align: center;
    font-size: 0.84rem;
    font-weight: 900;
}
.cart-remove,
.cart-continue {
    border: 0;
    background: transparent;
    color: rgba(28,58,19,0.58);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}
.cart-empty {
    padding: 54px 30px;
    text-align: center;
}
.cart-empty span {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 2rem;
}
.cart-empty p {
    margin: 0;
    color: rgba(28,58,19,0.66);
    font-weight: 700;
    line-height: 1.6;
}
.cart-drawer-footer {
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(28,58,19,0.08);
    background: rgba(253,252,248,0.86);
    backdrop-filter: blur(18px);
}
.cart-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.cart-trust-strip span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(239,195,104,0.14);
    color: rgba(28,58,19,0.72);
    font-size: 0.68rem;
    font-weight: 900;
}
.cart-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}
.cart-summary div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(28,58,19,0.68);
    font-size: 0.84rem;
    font-weight: 800;
}
.cart-summary strong {
    color: var(--color-primary);
    font-weight: 900;
}
.cart-summary-total {
    padding-top: 12px;
    border-top: 1px solid rgba(28,58,19,0.08);
    font-size: 1rem !important;
}
.cart-checkout {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FDFCF8;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 900;
    box-shadow: 0 16px 30px rgba(28,58,19,0.16);
}
.prod-card,
.prod-card:hover,
.prod-card:focus,
.prod-name,
.prod-cart,
.all-product-primary,
.all-product-secondary,
.single-product-buy,
.single-product-cart,
.single-product-addon a,
.cart-checkout,
.shop-all-btn {
    text-decoration: none;
}
.cart-continue {
    display: block;
    width: 100%;
    margin-top: 14px;
    min-height: 34px;
    text-align: center;
}
@media (max-width: 640px) {
    .cart-demo-page {
        padding: 78px 16px;
    }
    .cart-demo-hero {
        grid-template-columns: 1fr;
    }
    .cart-demo-hero figure {
        min-height: 320px;
    }
    .cart-drawer {
        top: auto;
        bottom: 0;
        width: 100%;
        height: min(88vh, 760px);
        transform: translateY(100%);
    }
    body.cart-drawer-open .cart-drawer {
        transform: translateY(0);
    }
    .cart-drawer-inner {
        border-radius: 24px 24px 0 0;
    }
    .cart-drawer-head {
        padding: 24px 22px 18px;
    }
    .cart-drawer-body {
        padding: 18px;
    }
    .cart-item {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
    }
    .cart-item-media {
        min-height: 92px;
        border-radius: 14px;
    }
    .cart-item-media img {
        width: 62px;
        height: 74px;
    }
    .cart-drawer-footer {
        padding: 18px;
    }
}

/* -----------------------
   SECURE CHECKOUT PAGE
------------------------ */
.checkout-site-header .header-logo {
    text-decoration: none;
}
.checkout-back-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(28,58,19,0.14);
    color: var(--color-primary);
    background: rgba(255,255,255,0.46);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 900;
}
.checkout-page {
    min-height: 100vh;
    padding: 48px 0 90px;
    background:
        radial-gradient(circle at 12% 8%, rgba(239,195,104,0.22), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(211,250,153,0.18), transparent 32%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 46%, #EEF4E6 100%);
}
.checkout-hero,
.checkout-shell,
.checkout-progress {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}
.checkout-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}
.checkout-kicker {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.checkout-hero h1 {
    max-width: 640px;
    margin: 14px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.05rem, 4.4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: 0;
}
.checkout-hero p {
    max-width: 52ch;
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
}
.checkout-security-card {
    position: relative;
    min-height: 300px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(28,58,19,0.1);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,248,231,0.84)),
        radial-gradient(circle at 50% 44%, rgba(239,195,104,0.42), transparent 42%);
    box-shadow: 0 34px 80px rgba(28,58,19,0.12);
}
.checkout-security-card::before {
    content: "";
    position: absolute;
    inset: -40% auto auto -20%;
    width: 70%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: rotate(18deg);
    animation: checkoutSweep 4.8s ease-in-out infinite;
}
.checkout-orbit {
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(28,58,19,0.18);
    animation: checkoutRotate 18s linear infinite;
}
.checkout-orbit span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 10px rgba(239,195,104,0.14);
}
.checkout-orbit span:nth-child(1) { left: 18%; top: 4%; }
.checkout-orbit span:nth-child(2) { right: 8%; top: 52%; }
.checkout-orbit span:nth-child(3) { left: 32%; bottom: 2%; background: #D3FA99; }
.checkout-lock {
    position: relative;
    z-index: 1;
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
    border-radius: 32px;
    color: var(--color-primary);
    background: linear-gradient(145deg, #FFF9E8, #EFC368);
    box-shadow: 0 26px 42px rgba(28,58,19,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: checkoutPulse 2.8s ease-in-out infinite;
}
.checkout-lock svg {
    width: 62px;
    height: 62px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.checkout-card-line {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.76);
    color: rgba(28,58,19,0.68);
    font-size: 0.72rem;
    font-weight: 900;
    backdrop-filter: blur(16px);
}
.checkout-card-line strong {
    color: var(--color-primary);
}
.checkout-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.checkout-progress span {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(28,58,19,0.1);
    color: rgba(28,58,19,0.58);
    font-size: 0.72rem;
    font-weight: 900;
}
.checkout-progress .is-complete,
.checkout-progress .is-active {
    color: var(--color-primary);
    background: rgba(239,195,104,0.28);
    border-color: rgba(239,195,104,0.55);
}
.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}
.checkout-form {
    display: grid;
    gap: 18px;
}
.checkout-panel,
.checkout-summary {
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 24px 60px rgba(28,58,19,0.08);
    backdrop-filter: blur(18px);
}
.checkout-panel {
    padding: 24px;
}
.checkout-panel-head {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 22px;
}
.checkout-panel-head > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FDFCF8;
    font-size: 0.78rem;
    font-weight: 900;
}
.checkout-panel h2,
.checkout-summary h3 {
    margin: 0;
    color: var(--color-primary);
}
.checkout-panel h2 {
    font-size: 1rem;
    font-weight: 900;
}
.checkout-panel p {
    margin: 5px 0 0;
    color: rgba(28,58,19,0.58);
    font-size: 0.78rem;
    font-weight: 800;
}
.checkout-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.checkout-field-wide {
    grid-column: 1 / -1;
}
.checkout-field-grid label,
.checkout-coupon {
    display: grid;
    gap: 8px;
}
.checkout-field-grid span {
    color: rgba(28,58,19,0.74);
    font-size: 0.7rem;
    font-weight: 900;
}
.checkout-field-grid span em {
    color: rgba(28,58,19,0.48);
    font-style: normal;
    font-weight: 800;
}
.checkout-field-grid input,
.checkout-coupon input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(28,58,19,0.12);
    border-radius: 14px;
    padding: 0 16px;
    color: var(--color-primary);
    background: rgba(255,255,255,0.78);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    outline: none;
}
.checkout-field-grid input:focus,
.checkout-coupon input:focus {
    border-color: rgba(239,195,104,0.9);
    box-shadow: 0 0 0 4px rgba(239,195,104,0.16);
}
.checkout-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.checkout-payment-option {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(28,58,19,0.12);
    background: rgba(255,255,255,0.58);
    color: var(--color-primary);
    cursor: pointer;
}
.checkout-payment-option input {
    accent-color: var(--color-primary);
}
.checkout-payment-option span {
    font-size: 0.84rem;
    font-weight: 900;
}
.checkout-payment-option small {
    color: rgba(28,58,19,0.58);
    font-weight: 800;
}
.checkout-payment-option.is-selected,
.checkout-payment-option:has(input:checked) {
    border-color: rgba(239,195,104,0.88);
    background: rgba(239,195,104,0.18);
}
.checkout-summary {
    position: sticky;
    top: 22px;
    padding: 20px;
}
.checkout-summary-head,
.checkout-summary-item,
.checkout-totals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.checkout-summary-head {
    margin-bottom: 18px;
    color: rgba(28,58,19,0.6);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.checkout-summary-head strong {
    color: var(--color-primary);
}
.checkout-summary-item {
    padding: 14px 0;
    border-top: 1px solid rgba(28,58,19,0.08);
}
.checkout-summary-item img {
    width: 62px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: #F7F2E6;
}
.checkout-summary-item div {
    flex: 1;
    min-width: 0;
}
.checkout-summary-item h3 {
    font-size: 0.82rem;
    font-weight: 900;
}
.checkout-summary-item p {
    margin: 4px 0 0;
    color: rgba(28,58,19,0.56);
    font-size: 0.68rem;
    font-weight: 800;
}
.checkout-summary-item strong {
    color: var(--color-primary);
    font-size: 0.82rem;
}
.checkout-coupon {
    grid-template-columns: 1fr auto;
    margin: 18px 0;
}
.checkout-coupon button {
    min-width: 82px;
    border-radius: 14px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 900;
}
.checkout-totals {
    display: grid;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(28,58,19,0.1);
}
.checkout-totals div {
    color: rgba(28,58,19,0.66);
    font-size: 0.82rem;
    font-weight: 800;
}
.checkout-totals strong {
    color: var(--color-primary);
}
.checkout-total {
    padding-top: 12px;
    border-top: 1px solid rgba(28,58,19,0.1);
    font-size: 1rem !important;
}
.checkout-pay-button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FDFCF8;
    font-size: 0.84rem;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(28,58,19,0.18);
}
.checkout-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.checkout-trust span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(211,250,153,0.34);
    color: rgba(28,58,19,0.7);
    font-size: 0.64rem;
    font-weight: 900;
}
.checkout-mobile-pay {
    display: none;
}
@keyframes checkoutSweep {
    0%, 36% { transform: translateX(-120%) rotate(18deg); }
    70%, 100% { transform: translateX(240%) rotate(18deg); }
}
@keyframes checkoutRotate {
    to { transform: rotate(360deg); }
}
@keyframes checkoutPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
}
@media (max-width: 980px) {
    .checkout-hero,
    .checkout-shell {
        grid-template-columns: 1fr;
    }
    .checkout-summary {
        position: relative;
        top: auto;
    }
}
@media (max-width: 640px) {
    .checkout-page {
        padding: 36px 0 110px;
    }
    .checkout-hero,
    .checkout-shell,
    .checkout-progress {
        width: calc(100% - 24px);
    }
    .checkout-security-card {
        min-height: 280px;
        border-radius: 22px;
    }
    .checkout-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .checkout-panel {
        padding: 20px;
        border-radius: 20px;
    }
    .checkout-field-grid,
    .checkout-payment-grid {
        grid-template-columns: 1fr;
    }
    .checkout-summary {
        padding: 18px;
        border-radius: 20px;
    }
    .checkout-pay-button {
        display: none;
    }
    .checkout-mobile-pay {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 180;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px;
        border-radius: 20px;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 20px 44px rgba(28,58,19,0.18);
        backdrop-filter: blur(16px);
    }
    .checkout-mobile-pay span {
        display: block;
        color: rgba(28,58,19,0.58);
        font-size: 0.68rem;
        font-weight: 900;
        text-transform: uppercase;
    }
    .checkout-mobile-pay strong {
        color: var(--color-primary);
        font-size: 1.1rem;
    }
    .checkout-mobile-pay button {
        min-height: 48px;
        padding: 0 22px;
        border-radius: 999px;
        background: var(--color-primary);
        color: #FDFCF8;
        font-weight: 900;
    }
}
@media (prefers-reduced-motion: reduce) {
    .checkout-security-card::before,
    .checkout-orbit,
    .checkout-lock {
        animation: none;
    }
}

/* -----------------------
   LEGAL AND HELP PAGES
------------------------ */
.legal-page {
    min-height: 100vh;
    padding: 48px 0 96px;
    background:
        radial-gradient(circle at 12% 8%, rgba(239,195,104,0.2), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(211,250,153,0.16), transparent 32%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 44%, #EEF4E6 100%);
}
.legal-hero,
.legal-shell {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.legal-hero {
    padding: 18px 0 28px;
}
.legal-kicker {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.legal-hero h1 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.05rem, 4.4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: 0;
}
.legal-hero p {
    max-width: 62ch;
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
}
.legal-hero strong {
    display: inline-flex;
    margin-top: 16px;
    color: rgba(28,58,19,0.56);
    font-size: 0.72rem;
    font-weight: 900;
}
.legal-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.legal-nav {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 22px;
    background: rgba(255,255,255,0.64);
    box-shadow: 0 24px 60px rgba(28,58,19,0.08);
    backdrop-filter: blur(18px);
}
.legal-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: rgba(28,58,19,0.72);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 900;
}
.legal-nav a:hover {
    color: var(--color-primary);
    background: rgba(239,195,104,0.2);
}
.legal-content,
.faq-list {
    display: grid;
    gap: 16px;
}
.legal-content section,
.faq-list section {
    padding: 26px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 24px 60px rgba(28,58,19,0.08);
    backdrop-filter: blur(18px);
}
.legal-content h2,
.faq-list h2 {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
}
.legal-content p,
.legal-content li,
.faq-list p {
    color: rgba(28,58,19,0.72);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.62;
}
.legal-content p,
.faq-list p {
    margin: 0 0 12px;
}
.legal-content p:last-child,
.faq-list p:last-child {
    margin-bottom: 0;
}
.legal-content ul {
    margin: 14px 0 0;
    padding-left: 18px;
}
.legal-note {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(239,195,104,0.14);
    color: rgba(28,58,19,0.76) !important;
}
.faq-list details {
    border-top: 1px solid rgba(28,58,19,0.1);
}
.faq-list details:first-of-type {
    border-top: 0;
}
.faq-list summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 900;
    list-style: none;
}
.faq-list summary::-webkit-details-marker {
    display: none;
}
.faq-list summary::after {
    content: "+";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(239,195,104,0.24);
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
}
.faq-list details[open] summary::after {
    content: "-";
}
.faq-list details p {
    padding: 0 42px 18px 0;
}
@media (max-width: 860px) {
    .legal-shell {
        grid-template-columns: 1fr;
    }
    .legal-nav {
        position: relative;
        top: auto;
        display: flex;
        overflow-x: auto;
    }
    .legal-nav a {
        flex: 0 0 auto;
    }
}
@media (max-width: 640px) {
    .legal-page {
        padding: 34px 0 80px;
    }
    .legal-hero,
    .legal-shell {
        width: calc(100% - 24px);
    }
    .legal-content section,
    .faq-list section {
        padding: 20px;
        border-radius: 20px;
    }
    .legal-content p,
    .legal-content li,
    .faq-list p {
        font-size: 0.84rem;
    }
}

/* -----------------------
   CONTACT PAGE
------------------------ */
.contact-page {
    min-height: 100vh;
    padding: 48px 0 96px;
    background:
        radial-gradient(circle at 12% 8%, rgba(239,195,104,0.2), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(211,250,153,0.16), transparent 32%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 44%, #EEF4E6 100%);
}
.contact-hero,
.contact-shell {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.contact-hero {
    padding: 18px 0 30px;
}
.contact-kicker {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.contact-hero h1 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.05rem, 4.4vw, 3.8rem);
    line-height: 1.02;
}
.contact-hero p {
    max-width: 62ch;
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
}
.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 22px;
    align-items: start;
}
.contact-info-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.contact-info-grid article,
.contact-form,
.contact-location {
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 24px 60px rgba(28,58,19,0.08);
    backdrop-filter: blur(18px);
}
.contact-info-grid article {
    padding: 20px;
}
.contact-info-grid span,
.contact-location span,
.contact-field-grid span {
    color: rgba(28,58,19,0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.contact-info-grid strong {
    display: block;
    margin: 9px 0 8px;
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.25;
}
.contact-info-grid p,
.contact-location p,
.contact-form-head p {
    margin: 0;
    color: rgba(28,58,19,0.64);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.52;
}
.contact-form {
    padding: 26px;
}
.contact-form-head {
    margin-bottom: 22px;
}
.contact-form h2,
.contact-location h2 {
    margin: 0 0 8px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
}
.contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.contact-field-wide {
    grid-column: 1 / -1;
}
.contact-field-grid label {
    display: grid;
    gap: 8px;
}
.contact-field-grid input,
.contact-field-grid textarea {
    width: 100%;
    border: 1px solid rgba(28,58,19,0.12);
    border-radius: 14px;
    padding: 0 16px;
    color: var(--color-primary);
    background: rgba(255,255,255,0.78);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    outline: none;
}
.contact-field-grid input {
    min-height: 48px;
}
.contact-field-grid textarea {
    min-height: 130px;
    padding-top: 14px;
    resize: vertical;
}
.contact-field-grid input:focus,
.contact-field-grid textarea:focus {
    border-color: rgba(239,195,104,0.9);
    box-shadow: 0 0 0 4px rgba(239,195,104,0.16);
}
.contact-form button {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FDFCF8;
    font-size: 0.84rem;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(28,58,19,0.18);
}
.contact-location {
    display: grid;
    gap: 18px;
    padding: 24px;
}
.contact-location h2 {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.3vw, 1.86rem);
    line-height: 1.1;
}
.contact-map-card {
    position: relative;
    min-height: 260px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(28,58,19,0.08) 25%, transparent 25%) 0 0 / 34px 34px,
        linear-gradient(135deg, transparent 75%, rgba(239,195,104,0.22) 75%) 0 0 / 34px 34px,
        linear-gradient(145deg, #F8F3E7, #EAF2DE);
}
.contact-map-card span {
    width: 62px;
    height: 62px;
    border-radius: 50% 50% 50% 6px;
    background: var(--color-primary);
    transform: rotate(-45deg);
    box-shadow: 0 18px 32px rgba(28,58,19,0.22);
}
.contact-map-card strong,
.contact-map-card small {
    position: absolute;
    left: 22px;
    right: 22px;
    text-align: center;
}
.contact-map-card strong {
    bottom: 48px;
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 900;
}
.contact-map-card small {
    bottom: 28px;
    color: rgba(28,58,19,0.58);
    font-size: 0.68rem;
    font-weight: 900;
}
@media (max-width: 980px) {
    .contact-shell,
    .contact-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-form {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .contact-page {
        padding: 34px 0 80px;
    }
    .contact-hero,
    .contact-shell {
        width: calc(100% - 24px);
    }
    .contact-shell,
    .contact-info-grid,
    .contact-field-grid {
        grid-template-columns: 1fr;
    }
    .contact-form,
    .contact-location {
        padding: 20px;
        border-radius: 20px;
    }
}

/* -----------------------
   COMING SOON PAGE
------------------------ */
.coming-soon-header {
    background: #FDFCF8;
}
.coming-soon-page {
    min-height: 100vh;
    padding: 70px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(211,250,153,0.14), transparent 30%),
        radial-gradient(circle at 84% 24%, rgba(239,195,104,0.24), transparent 32%),
        linear-gradient(145deg, #102A0C 0%, #1C3A13 52%, #081706 100%);
    color: #FDFCF8;
}
.coming-soon-hero,
.coming-soon-categories,
.coming-soon-timeline {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}
.coming-soon-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
    min-height: 560px;
}
.coming-soon-kicker {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(211,250,153,0.12);
    color: #D3FA99;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.coming-soon-copy h1 {
    max-width: 760px;
    margin: 18px 0 18px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(2.55rem, 6vw, 5.4rem);
    line-height: 0.96;
}
.coming-soon-copy p {
    max-width: 58ch;
    margin: 0;
    color: rgba(253,252,248,0.7);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.62;
}
.coming-soon-form {
    width: min(560px, 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 28px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(253,252,248,0.12);
    backdrop-filter: blur(16px);
}
.coming-soon-form input {
    min-height: 48px;
    border: 0;
    outline: 0;
    border-radius: 999px;
    padding: 0 16px;
    color: #FDFCF8;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
}
.coming-soon-form input::placeholder {
    color: rgba(253,252,248,0.5);
}
.coming-soon-form button {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 900;
}
.coming-soon-visual {
    position: relative;
    min-height: 540px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: center;
}
.coming-soon-orbit {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px dashed rgba(239,195,104,0.22);
    animation: checkoutRotate 22s linear infinite;
}
.coming-soon-visual article {
    position: relative;
    z-index: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 18%, rgba(239,195,104,0.18), transparent 34%),
        rgba(255,255,255,0.08);
    border: 1px solid rgba(253,252,248,0.12);
    box-shadow: 0 28px 70px rgba(0,0,0,0.18);
    backdrop-filter: blur(18px);
    animation: comingSoonFloat 5.8s ease-in-out infinite;
}
.coming-soon-visual article:nth-child(3) {
    transform: translateY(34px);
    animation-delay: -1.6s;
}
.coming-soon-visual article:nth-child(4) {
    grid-column: 1 / -1;
    min-height: 190px;
    animation-delay: -3s;
}
.coming-soon-visual span,
.coming-soon-categories span,
.coming-soon-timeline span {
    color: #D3FA99;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.coming-soon-visual strong {
    margin-top: auto;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.05;
}
.coming-soon-visual small {
    margin-top: 10px;
    color: rgba(253,252,248,0.62);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.45;
}
.coming-soon-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 50px;
}
.coming-soon-categories article,
.coming-soon-timeline div {
    border: 1px solid rgba(253,252,248,0.1);
    border-radius: 22px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
}
.coming-soon-categories article {
    min-height: 260px;
    padding: 26px;
}
.coming-soon-categories h2 {
    margin: 42px 0 14px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.12;
}
.coming-soon-categories p,
.coming-soon-timeline p {
    margin: 0;
    color: rgba(253,252,248,0.62);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.58;
}
.coming-soon-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.coming-soon-timeline div {
    padding: 22px;
}
.coming-soon-timeline strong {
    display: block;
    margin: 14px 0 8px;
    color: #FDFCF8;
    font-size: 0.95rem;
    font-weight: 900;
}
@keyframes comingSoonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@media (max-width: 980px) {
    .coming-soon-hero,
    .coming-soon-categories,
    .coming-soon-timeline {
        grid-template-columns: 1fr;
    }
    .coming-soon-hero {
        min-height: auto;
    }
    .coming-soon-visual {
        min-height: auto;
    }
}
@media (max-width: 640px) {
    .coming-soon-page {
        padding: 46px 0 76px;
    }
    .coming-soon-hero,
    .coming-soon-categories,
    .coming-soon-timeline {
        width: calc(100% - 24px);
    }
    .coming-soon-form {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }
    .coming-soon-form button {
        width: 100%;
    }
    .coming-soon-visual {
        grid-template-columns: 1fr;
    }
    .coming-soon-visual article:nth-child(3) {
        transform: none;
    }
    .coming-soon-visual article:nth-child(4) {
        grid-column: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .coming-soon-orbit,
    .coming-soon-visual article {
        animation: none;
    }
}

/* -----------------------
   SECONDARY PAGE AUDIT REFINEMENTS
------------------------ */
.checkout-page,
.legal-page,
.contact-page {
    padding-top: 42px;
    padding-bottom: 84px;
}
.checkout-hero,
.checkout-shell,
.checkout-progress,
.legal-hero,
.legal-shell,
.contact-hero,
.contact-shell {
    width: min(1120px, calc(100% - 40px));
}
.checkout-kicker,
.legal-kicker,
.contact-kicker,
.coming-soon-kicker {
    min-height: 30px;
    padding-inline: 11px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}
.checkout-hero h1,
.legal-hero h1,
.contact-hero h1 {
    max-width: 680px;
    font-size: clamp(1.95rem, 3.4vw, 2.9rem);
    line-height: 1.08;
}
.checkout-hero p,
.legal-hero p,
.contact-hero p,
.coming-soon-copy p {
    max-width: 56ch;
    font-size: 0.92rem;
    line-height: 1.56;
    font-weight: 500;
}
.checkout-panel,
.checkout-summary,
.legal-content section,
.faq-list section,
.contact-info-grid article,
.contact-form,
.contact-location {
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(28,58,19,0.065);
}
.checkout-panel,
.legal-content section,
.faq-list section,
.contact-form {
    padding: 22px;
}
.checkout-panel h2,
.legal-content h2,
.faq-list h2,
.contact-form h2,
.contact-location h2 {
    font-size: 0.96rem;
}
.checkout-panel p,
.legal-content p,
.legal-content li,
.faq-list p,
.contact-info-grid p,
.contact-location p,
.contact-form-head p {
    font-size: 0.82rem;
    line-height: 1.55;
    font-weight: 500;
}
.checkout-field-grid input,
.checkout-coupon input,
.contact-field-grid input {
    min-height: 46px;
}
.checkout-field-grid input,
.checkout-coupon input,
.contact-field-grid input,
.contact-field-grid textarea {
    font-size: 0.8rem;
}
.checkout-security-card {
    min-height: 270px;
}
.checkout-lock {
    width: 96px;
    height: 96px;
    border-radius: 28px;
}
.checkout-lock svg {
    width: 56px;
    height: 56px;
}
.checkout-progress span {
    min-height: 40px;
}
.contact-info-grid article {
    padding: 18px;
}
.contact-info-grid strong {
    font-size: 16px;
}
.contact-location {
    padding: 22px;
}
.contact-location h2 {
    font-size: clamp(1.18rem, 2vw, 1.5rem);
}
.contact-map-card {
    min-height: 220px;
}
.coming-soon-page {
    padding-top: 54px;
    padding-bottom: 82px;
}
.coming-soon-hero,
.coming-soon-categories,
.coming-soon-timeline {
    width: min(1120px, calc(100% - 40px));
}
.coming-soon-hero {
    min-height: 460px;
    gap: clamp(28px, 5vw, 64px);
}
.coming-soon-copy h1 {
    max-width: 650px;
    margin: 15px 0 14px;
    font-size: clamp(2rem, 3.8vw, 3.35rem);
    line-height: 1.04;
}
.coming-soon-form {
    width: min(520px, 100%);
    margin-top: 24px;
}
.coming-soon-visual {
    min-height: 430px;
    gap: 14px;
}
.coming-soon-visual article {
    min-height: 170px;
    padding: 20px;
    border-radius: 20px;
}
.coming-soon-visual article:nth-child(4) {
    min-height: 160px;
}
.coming-soon-visual strong {
    font-size: clamp(1.08rem, 1.8vw, 1.42rem);
}
.coming-soon-visual small {
    font-size: 0.76rem;
    line-height: 1.42;
}
.coming-soon-categories {
    margin-top: 34px;
}
.coming-soon-categories article {
    min-height: 190px;
    padding: 22px;
    border-radius: 20px;
}
.coming-soon-categories h2 {
    margin: 32px 0 12px;
    font-size: clamp(1.02rem, 1.55vw, 1.24rem);
    line-height: 1.18;
}
.coming-soon-categories p,
.coming-soon-timeline p {
    font-size: 0.8rem;
    line-height: 1.52;
    font-weight: 500;
}
.coming-soon-timeline div {
    padding: 20px;
    border-radius: 20px;
}
.coming-soon-timeline strong {
    margin: 12px 0 7px;
    font-size: 0.88rem;
}
@media (max-width: 640px) {
    .checkout-page,
    .legal-page,
    .contact-page,
    .coming-soon-page {
        padding-top: 32px;
        padding-bottom: 72px;
    }
    .checkout-hero,
    .checkout-shell,
    .checkout-progress,
    .legal-hero,
    .legal-shell,
    .contact-hero,
    .contact-shell,
    .coming-soon-hero,
    .coming-soon-categories,
    .coming-soon-timeline {
        width: calc(100% - 24px);
    }
    .coming-soon-visual article,
    .coming-soon-categories article {
        min-height: auto;
    }
}

/* -----------------------
   JOURNAL PAGES
------------------------ */
.journal-page,
.journal-detail-page {
    min-height: 100vh;
    padding: 42px 0 84px;
    background:
        radial-gradient(circle at 12% 8%, rgba(239,195,104,0.18), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(211,250,153,0.14), transparent 32%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 44%, #EEF4E6 100%);
}
.journal-hero,
.journal-featured,
.journal-filters,
.journal-grid,
.journal-newsletter,
.journal-article,
.journal-related {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.journal-hero,
.journal-article-hero {
    padding: 18px 0 30px;
}
.journal-kicker,
.journal-category,
.journal-newsletter span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journal-hero h1,
.journal-article-hero h1 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.95rem, 3.4vw, 2.9rem);
    line-height: 1.08;
}
.journal-hero p,
.journal-article-hero p,
.journal-featured p,
.journal-card p {
    max-width: 58ch;
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.56;
}
.journal-featured {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: center;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(28,58,19,0.1);
    background: rgba(255,255,255,0.66);
    box-shadow: 0 18px 46px rgba(28,58,19,0.065);
}
.journal-featured figure,
.journal-card > img,
.journal-article-image {
    overflow: hidden;
    border-radius: 18px;
    background: #F7F2E6;
}
.journal-featured img,
.journal-card > img,
.journal-article-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.journal-featured figure {
    min-height: 320px;
    display: grid;
    place-items: center;
}
.journal-featured figure img {
    width: min(260px, 70%);
    height: auto;
}
.journal-featured h2,
.journal-card h2,
.journal-section-head h2,
.journal-newsletter h2,
.journal-article-body h2 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    line-height: 1.12;
}
.journal-featured h2 {
    margin: 16px 0 12px;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.journal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.journal-meta span {
    color: rgba(28,58,19,0.58);
    font-size: 0.7rem;
    font-weight: 900;
}
.journal-read {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FDFCF8;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 900;
}
.journal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 18px;
}
.journal-filters button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
    color: rgba(28,58,19,0.72);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}
.journal-filters button.is-active,
.journal-filters button:hover {
    background: var(--color-primary);
    color: #FDFCF8;
}
.journal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.journal-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(28,58,19,0.1);
    background: rgba(255,255,255,0.66);
    box-shadow: 0 18px 46px rgba(28,58,19,0.055);
}
.journal-card > img {
    min-height: 150px;
    padding: 18px;
}
.journal-card h2 {
    margin: 12px 0 8px;
    font-size: 1rem;
}
.journal-card h2 a {
    color: inherit;
    text-decoration: none;
}
.journal-card .blog-read-link {
    margin-top: 14px;
}
.journal-newsletter {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 420px);
    gap: 20px;
    align-items: center;
    margin-top: 22px;
    padding: 24px;
    border-radius: 22px;
    background: var(--color-primary);
    color: #FDFCF8;
}
.journal-newsletter span {
    color: #D3FA99;
    background: rgba(211,250,153,0.12);
}
.journal-newsletter h2 {
    max-width: 520px;
    margin: 14px 0 0;
    color: #FDFCF8;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}
.journal-newsletter form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}
.journal-newsletter input {
    min-height: 44px;
    border: 0;
    outline: 0;
    padding: 0 14px;
    background: transparent;
    color: #FDFCF8;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
}
.journal-newsletter button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 900;
}
.journal-article {
    max-width: 1120px;
}
.journal-detail-page .journal-article {
    padding-top: 4px;
}
.journal-article-hero {
    max-width: 790px;
    margin-inline: auto;
    text-align: center;
}
.journal-article-hero h1,
.journal-article-hero p {
    margin-left: auto;
    margin-right: auto;
}
.journal-article-hero .journal-meta {
    justify-content: center;
}
.journal-article-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
    gap: 28px;
    align-items: start;
    margin-top: 10px;
}
.journal-article-image {
    position: relative;
    position: sticky;
    top: 116px;
    min-height: 560px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    margin: 0;
    padding: 30px;
    border: 1px solid rgba(28,58,19,0.1);
    box-shadow: 0 22px 58px rgba(28,58,19,0.075);
}
.journal-article-image::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 26% 20%, rgba(239,195,104,0.22), transparent 34%),
        radial-gradient(circle at 78% 82%, rgba(211,250,153,0.18), transparent 32%);
    pointer-events: none;
}
.journal-article-image img {
    position: relative;
    width: min(360px, 84%);
    height: auto;
}
.journal-article-image figcaption {
    position: relative;
    max-width: 520px;
    margin-top: 14px;
    color: rgba(28,58,19,0.56);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.journal-article-body {
    max-width: none;
    margin: 0;
    padding: 34px 38px 38px;
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 24px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 18px 48px rgba(28,58,19,0.055);
}
.journal-article-body p {
    margin: 0 0 20px;
    color: rgba(28,58,19,0.78);
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.76;
}
.journal-article-body .journal-article-lead {
    color: rgba(28,58,19,0.84);
    font-size: 1.02rem;
    line-height: 1.78;
}
.journal-article-body h2 {
    margin: 34px 0 12px;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.journal-article-note {
    margin: 28px 0 32px;
    padding: 22px;
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(253,252,248,0.9), rgba(238,244,230,0.82)),
        rgba(255,255,255,0.7);
}
.journal-article-note span {
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journal-article-note ul {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.journal-article-note li {
    position: relative;
    padding-left: 18px;
    color: rgba(28,58,19,0.74);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.55;
}
.journal-article-note li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-secondary);
}
.journal-takeaway {
    margin: 30px 0;
    padding: 22px;
    border-radius: 20px;
    background: rgba(239,195,104,0.16);
    border: 1px solid rgba(239,195,104,0.28);
}
.journal-takeaway span {
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journal-takeaway p {
    margin: 10px 0 0;
}
.journal-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(28,58,19,0.1);
}
.journal-tags span {
    width: 100%;
    color: rgba(28,58,19,0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.journal-tags a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 999px;
    background: rgba(248,243,231,0.72);
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.journal-tags a:hover {
    background: var(--color-primary);
    color: #FDFCF8;
    transform: translateY(-2px);
}
.journal-related {
    margin-top: 52px;
}
.journal-section-head {
    margin-bottom: 18px;
}
.journal-section-head h2 {
    margin: 14px 0 0;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
@media (max-width: 840px) {
    .journal-featured,
    .journal-grid,
    .journal-newsletter,
    .journal-article-layout {
        grid-template-columns: 1fr;
    }
    .journal-card {
        grid-template-columns: 120px 1fr;
    }
    .journal-article-image {
        position: relative;
        top: auto;
        min-height: 420px;
    }
}
@media (max-width: 640px) {
    .journal-page,
    .journal-detail-page {
        padding: 32px 0 72px;
    }
    .journal-hero,
    .journal-featured,
    .journal-filters,
    .journal-grid,
    .journal-newsletter,
    .journal-article,
    .journal-related {
        width: calc(100% - 24px);
    }
    .journal-card {
        grid-template-columns: 1fr;
    }
    .journal-card > img {
        min-height: 210px;
    }
    .journal-newsletter form {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }
    .journal-article-hero {
        text-align: left;
    }
    .journal-article-hero .journal-meta {
        justify-content: flex-start;
    }
    .journal-article-image {
        min-height: 320px;
        padding: 22px;
    }
    .journal-article-image img {
        width: min(280px, 82%);
    }
    .journal-article-body {
        padding: 24px 18px 28px;
        border-radius: 20px;
    }
    .journal-article-note,
    .journal-takeaway {
        padding: 18px;
    }
}

/* -----------------------
   HERO BANNER COMPONENT
------------------------ */
.hero-banner {
    display: flex;
    width: 100%;
    height: calc(100vh - 139px);
    /* Approximate height minus header */
    min-height: 700px;
    position: relative;
    overflow: hidden;
}

/* Abstract Premium Ambient Shapes */
.bg-shape {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(8px);
    animation: float 10s ease-in-out infinite;
    pointer-events: none;
}

.bg-shape-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 30% 30%, rgba(239, 195, 104, 0.2), transparent);
    top: 15%;
    left: 2%;
    animation-delay: 0s;
}

.bg-shape-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
    bottom: -5%;
    right: 15%;
    animation-delay: -4s;
    animation-duration: 14s;
    backdrop-filter: blur(20px);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-40px) rotate(10deg);
    }
}

/* Panel Bases */
.hero-left,
.hero-right {
    width: 50%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* LEFT PANE - Mathematically scaled padding */
.hero-left {
    background-color: var(--color-light);
    padding: 0 5% 0 12%;
    justify-content: flex-start;
}

.left-content {
    max-width: 460px;
    padding-right: 20px;
}

.left-content h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3.8rem;
    letter-spacing: -1.8px;
    line-height: 1.05;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.left-content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 40px;
    padding-right: 20px;
}

/* Sleek standard pill button without cheap shadows */
.btn-primary {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    padding: 16px 44px;
    border-radius: 60px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: #f2cb7b;
    /* lighter secondary */
}

/* RIGHT PANE - Symmetrical padding */
.hero-right {
    background-color: var(--color-primary);
    padding: 0 12% 0 5%;
    justify-content: flex-end;
}

.dynamic-content-wrapper {
    display: grid;
    width: 100%;
    max-width: 460px;
    margin-left: 20%;
    position: relative;
    z-index: 10;
}

.slide-content {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.slide-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.slide-content h3 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.slide-content p {
    color: var(--text-muted-light);
    line-height: 1.6;
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 32px;
}

.features-list {
    list-style: none;
    margin-bottom: 40px;
}

.features-list li {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.features-list li svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-secondary);
}

.link-secondary {
    color: var(--color-secondary);
    font-family: var(--font-heading);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    padding-bottom: 6px;
    display: inline-block;
}

.link-secondary::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link-secondary:hover::after {
    transform: scaleX(1);
}

/* PAGINATION CONTROLS */
.pagination {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 28px;
    z-index: 10;
}

.page-item {
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    position: relative;
}

.page-item:hover {
    color: rgba(255, 255, 255, 0.8);
}

.page-item.active {
    color: var(--text-light);
    font-size: 24px;
    font-weight: 800;
    transform: scale(1.1);
}

/* -----------------------
   PRODUCT CAROUSEL ENTRANCE/EXIT
------------------------ */
.product-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(28vw, 320px);
    height: 500px;
    z-index: 20;
    pointer-events: none;
    /* Allows clicks to pass through */
}

.product-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    /* Premium cubic bezier for ultra smooth swooping motion */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
    /* Standard initial state before JS kicks in */
    transform: translate(-50%, -50%) translate3d(50vw, 0, 0) rotate(45deg) scale(0.7);
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* The item currently being viewed */
.product-item.active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
    visibility: visible;
}

/* The items that were already viewed (exit left) */
.product-item.prev {
    transform: translate(-50%, -50%) translate3d(-50vw, 0, 0) rotate(-45deg) scale(0.7);
    opacity: 0;
    visibility: hidden;
}

/* The items upcoming (enter right) */
.product-item.next {
    transform: translate(-50%, -50%) translate3d(50vw, 0, 0) rotate(45deg) scale(0.7);
    opacity: 0;
    visibility: hidden;
}

/* Responsive */
@media (max-width: 1200px) {
    .left-content h2 {
        font-size: 3rem;
    }

    .slide-content h3 {
        font-size: 2.2rem;
    }

    .hero-left {
        padding-left: 8%;
    }

    .hero-right {
        padding-right: 8%;
    }
}

@media (max-width: 991px) {
    .hero-banner {
        flex-direction: column;
        height: auto;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        padding: 12% 5% 5%;
        text-align: center;
        align-items: center;
    }

    .product-slider {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        margin: 20px auto;
        width: 300px;
        height: 380px;
        z-index: 25;
    }

    .product-item.prev {
        transform: translate(-50%, -50%) translate3d(-100%, 0, 0) rotate(-45deg);
    }

    .product-item.next {
        transform: translate(-50%, -50%) translate3d(100%, 0, 0) rotate(45deg);
    }

    .product-item.active {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    }

    .dynamic-content-wrapper {
        margin: 0 auto;
        text-align: center;
    }

    .pagination {
        flex-direction: row;
        top: auto;
        bottom: 5%;
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 540px) {
    .left-content h2 {
        font-size: 2.3rem;
    }

    .slide-content h3 {
        font-size: 1.8rem;
    }

    .product-slider {
        width: 260px;
        height: 340px;
        margin: -20px auto;
    }
}

/* =========================================
   CATEGORY SECTION — Exact Figma Match
========================================= */
.cat-section {
    background-color: #162b10;
    background-image:
        radial-gradient(ellipse 70% 55% at 5% 100%, rgba(61, 91, 52, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 95% 0%, rgba(28, 58, 19, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(211, 250, 153, 0.03) 0%, transparent 60%);
    padding: 64px 60px 80px;
    position: relative;
    overflow: hidden;
}

/* grain texture overlay */
.cat-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ------ Header Row ------ */
.cat-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.cat-header-left {
    max-width: 620px;
}

.cat-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #D3FA99;
    margin-bottom: 12px;
}

.cat-heading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 3vw, 2.88rem);
    font-weight: 400;
    letter-spacing: -0.72px;
    line-height: 1.15;
    color: #FCFCF7;
}

.cat-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    letter-spacing: -0.16px;
    color: rgba(252, 252, 247, 0.6);
    margin-top: 14px;
    max-width: 400px;
}

.cat-shop-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 13.6px;
    font-weight: 500;
    letter-spacing: -0.04px;
    color: #FCFCF7;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #FCFCF7;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.cat-shop-all:hover {
    color: #D3FA99;
    border-color: #D3FA99;
    gap: 11px;
}

.cat-shop-all svg {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cat-shop-all:hover svg {
    transform: translateX(3px);
}

/* ------ 4-Card Grid ------ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
    z-index: 2;
}

/* ------ Single Card ------ */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #3D5B34;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* Square card — aspect ratio 1:1 */
    aspect-ratio: 1 / 1;
    /* Entrance: starts hidden below */
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s ease;
}

/* Scroll-reveal active state */
.cat-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.cat-card:nth-child(1) {
    transition-delay: 0.05s;
}

.cat-card:nth-child(2) {
    transition-delay: 0.13s;
}

.cat-card:nth-child(3) {
    transition-delay: 0.21s;
}

.cat-card:nth-child(4) {
    transition-delay: 0.29s;
}

.cat-card:nth-child(5) {
    transition-delay: 0.37s;
}

/* Hover: lift + glow */
.cat-card:hover {
    box-shadow:
        0 0 0 1px rgba(211, 250, 153, 0.25),
        0 28px 64px rgba(0, 0, 0, 0.45);
    transform: translateY(-7px);
}

.cat-card.in-view:hover {
    opacity: 1;
    transform: translateY(-7px);
}

/* ------ Badge (top-left) ------ */
.cc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #D3FA99;
    color: #1C3A13;
    font-family: 'Inter', sans-serif;
    font-size: 11.8px;
    font-weight: 500;
    line-height: 12px;
    padding: 6px 14px;
    border-radius: 1188px;
    z-index: 10;
    letter-spacing: 0;
}

/* ------ Category Pill (outlined) ------ */
.cc-pill-wrap {
    margin-top: 39px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    /* never compress — always visible */
}

.cc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FCFCF7;
    border-radius: 1188px;
    padding: 0 20px;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 8px;
    letter-spacing: -0.24px;
    color: #FCFCF7;
    white-space: nowrap;
    max-width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-pill sup {
    font-size: 9px;
    vertical-align: super;
    line-height: 0;
    margin-left: 1px;
}

/* ------ Product Name ------ */
.cc-name {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: -0.48px;
    color: #FCFCF7;
    text-align: center;
    padding: 0 16px;
    flex-shrink: 0;
    /* never compress */
}

/* ------ Product Image ------ */
.cc-image {
    flex: 1;
    min-height: 0;
    /* allow flex shrinking below natural height */
    overflow: hidden;
    /* clip image if it tries to overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 16px 6px;
    position: relative;
}

/* glow disc behind image */
.cc-image::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211, 250, 153, 0.12) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cat-card:hover .cc-image::before {
    opacity: 1;
}

.cc-image img {
    width: 45%;
    max-width: 120px;
    max-height: 100%;
    /* never taller than its flex container */
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-card:hover .cc-image img {
    transform: scale(1.07) translateY(-6px);
}

/* ------ Shop Now Button ------ */
.cc-btn-wrap {
    width: 100%;
    padding: 0 16px 16px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    /* always pinned to bottom — never compressed */
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #1C3A13;
    color: #FCFCF7;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.04px;
    line-height: 1;
    border: none;
    border-radius: 1584px;
    padding: 11px 28px;
    width: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background-color 0.3s ease,
        gap 0.3s ease,
        box-shadow 0.3s ease;
}

.cc-btn .cc-arrow {
    display: inline-flex;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        width 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease,
        margin-left 0.3s ease;
    margin-left: 0;
}

.cc-btn .cc-arrow svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.cat-card:hover .cc-btn {
    background-color: #243f1a;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    gap: 6px;
}

.cat-card:hover .cc-btn .cc-arrow {
    width: 10px;
    opacity: 1;
    transform: translateX(0);
    margin-left: 4px;
}

/* ------ Responsive ------ */
@media (max-width: 1200px) {
    .cat-section {
        padding: 56px 36px 70px;
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

}

@media (max-width: 900px) {
    .cat-section {
        padding: 48px 20px 60px;
    }

    .cat-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 24px;
        scroll-padding-left: 20px;
    }

    .cat-grid::-webkit-scrollbar {
        display: none;
    }

    .cat-card {
        width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
        /* Note: keeping aspect-ratio: 1/1 from desktop, no min-height override */
    }

    .cat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 540px) {
    .cat-section {
        padding: 40px 14px 52px;
    }

    .cat-card {
        border-radius: 12px;
        width: 250px;
    }

    .cc-name {
        font-size: 15px;
    }

    .cc-pill {
        font-size: 11px;
    }

    .cc-image img {
        width: 40%;
        max-width: 100px;
    }
}

/* =========================================
   FARM TO TABLE — PROCESS SECTION
========================================= */
.proc-section {
    background-color: #FDFCF8;
    padding: 96px 60px 108px;
    position: relative;
    overflow: hidden;
}

.proc-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 8% 85%, rgba(107, 142, 35, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 92% 15%, rgba(239, 195, 104, 0.09) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* --- Header --- */
.proc-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.proc-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6b8e23;
    margin-bottom: 16px;
}

.proc-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    color: #1C3A13;
    margin-bottom: 18px;
}

.proc-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #556B52;
    max-width: 500px;
    margin: 0 auto;
}

/* --- Grid --- */
.proc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 2;
    align-items: start;
}

/* Horizontal connector line below icons */
.proc-grid::before {
    content: '';
    position: absolute;
    top: 76px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(107, 142, 35, 0.22) 15%,
            rgba(107, 142, 35, 0.22) 85%,
            transparent);
    z-index: 0;
}

/* --- Single Step --- */
.proc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.proc-step.in-view {
    opacity: 1;
    transform: translateY(0);
}

.proc-step:nth-child(1) {
    transition-delay: 0.08s;
}

.proc-step:nth-child(2) {
    transition-delay: 0.20s;
}

.proc-step:nth-child(3) {
    transition-delay: 0.32s;
}

.proc-step:nth-child(4) {
    transition-delay: 0.44s;
}

/* 3-D object wrapper */
.proc-obj {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    position: relative;
}

/* SVG size base */
.obj-3d {
    width: 130px;
    height: 130px;
    overflow: visible;
}

/* ---- Animations ---- */
.obj-leaf {
    animation: procFloat 5.0s ease-in-out infinite;
}

.obj-jar {
    animation: procFloat 6.0s ease-in-out infinite 0.8s;
}

.obj-box {
    animation: procFloat 5.5s ease-in-out infinite 0.4s;
}

@keyframes procFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0.6deg);
    }

    50% {
        transform: translateY(-9px) rotate(-0.6deg);
    }
}

/* Sun wrapper */
.obj-sun-wrap {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sunBob 4.5s ease-in-out infinite 0.2s;
}

@keyframes sunBob {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.03);
    }
}

.sun-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sun-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(239, 195, 104, 0.28);
}

.sun-ring.sr1 {
    width: 92px;
    height: 92px;
    animation: sRingP 3.0s ease-in-out infinite;
}

.sun-ring.sr2 {
    width: 116px;
    height: 116px;
    animation: sRingP 3.0s ease-in-out infinite 0.55s;
    border-color: rgba(239, 195, 104, 0.14);
}

@keyframes sRingP {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

.sun-rays-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: sunSpin 18s linear infinite;
}

@keyframes sunSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sun-core-3d {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 33%, #fce9a0 0%, #EFC368 38%, #c8852a 85%);
    box-shadow:
        0 0 0 6px rgba(239, 195, 104, 0.18),
        0 0 0 14px rgba(239, 195, 104, 0.08),
        0 10px 30px rgba(239, 195, 104, 0.45);
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    animation: sunGlow 3s ease-in-out infinite;
}

@keyframes sunGlow {

    0%,
    100% {
        box-shadow: 0 0 0 6px rgba(239, 195, 104, 0.18), 0 0 0 14px rgba(239, 195, 104, 0.08), 0 10px 30px rgba(239, 195, 104, 0.45);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(239, 195, 104, 0.25), 0 0 0 20px rgba(239, 195, 104, 0.12), 0 12px 38px rgba(239, 195, 104, 0.55);
    }
}

.sun-highlight {
    position: absolute;
    width: 22px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.44);
    top: 10px;
    left: 11px;
    filter: blur(2px);
}

/* Step text */
.proc-num {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(107, 142, 35, 0.5);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.proc-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.25;
    color: #1C3A13;
    margin-bottom: 12px;
}

.proc-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.70;
    color: #556B52;
    max-width: 210px;
    margin: 0 auto;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .proc-section {
        padding: 80px 36px 90px;
    }

    .proc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 24px;
    }

    .proc-grid::before {
        display: none;
    }

    .proc-step {
        padding: 0 12px;
    }
}

@media (max-width: 580px) {
    .proc-section {
        padding: 60px 20px 72px;
    }

    .proc-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .proc-heading {
        font-size: 1.85rem;
    }
}

/* =========================================
   SHOP — TABBED PRODUCT GRID
========================================= */
.shop-section {
    background-color: #162b10;
    background-image:
        radial-gradient(ellipse 65% 50% at 5% 100%, rgba(61, 91, 52, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 95% 0%, rgba(28, 58, 19, 0.6) 0%, transparent 50%);
    padding: 88px 60px 100px;
    position: relative;
    overflow: hidden;
}

/* --- Header --- */
.shop-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
}

.shop-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #D3FA99;
    margin-bottom: 14px;
}

.shop-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #FCFCF7;
    margin-bottom: 14px;
}

.shop-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(252, 252, 247, 0.58);
    max-width: 460px;
    margin: 0 auto;
}

/* --- Tab Strip --- */
.shop-tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 44px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.shop-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.shop-tabs {
    display: inline-flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 6px;
    white-space: nowrap;
}

.shop-tab {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(252, 252, 247, 0.6);
    background: transparent;
    border: none;
    border-radius: 100px;
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.28s ease;
    letter-spacing: -0.1px;
}

.shop-tab:hover {
    color: #FCFCF7;
    background: rgba(255, 255, 255, 0.08);
}

.shop-tab.active {
    background: #D3FA99;
    color: #1C3A13;
    font-weight: 700;
}

/* --- Panel --- */
.shop-panel {
    display: none;
    position: relative;
    z-index: 2;
}

.shop-panel.active {
    display: block;
    animation: shopFadeIn 0.38s ease;
}

@keyframes shopFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Product Grid --- */
.prod-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;
    /* Space for hover shadow */
    scroll-padding-left: 20px;
}

.prod-grid::-webkit-scrollbar {
    display: none;
}

/* --- Product Card --- */
.prod-card {
    width: 314px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 15px rgba(37, 143, 103, 0.13);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}

.prod-card.featured {
    background: #EFF1E5;
}

.prod-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(211, 250, 153, 0.18);
}

/* Image area */
.prod-img-wrap {
    position: relative;
    height: 196px;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.prod-img-wrap img {
    width: auto;
    height: 148px;
    max-width: 80%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
}

.prod-card:hover .prod-img-wrap img {
    transform: scale(1.09) translateY(-5px);
}

/* Wishlist */
.prod-wish {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #1C3A13;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    padding: 0;
}

.prod-wish:hover {
    border-color: #e05555;
    background: #fff5f5;
}

.wish-icon {
    width: 15px;
    height: 15px;
    fill: #1C3A13;
    transition: fill 0.2s;
}

.prod-wish:hover .wish-icon {
    fill: #e05555;
}

/* Card body */
.prod-body {
    padding: 14px 16px 18px;
    background: #FFFFFF;
}

.prod-card.featured .prod-body {
    background: #EFF1E5;
}

/* Stars */
.prod-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 8px;
}

.pstar {
    width: 15px;
    height: 15px;
}

/* Name */
.prod-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1C3A13;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 3px;
}

.prod-weight {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8aaa80;
    text-align: center;
    margin-bottom: 10px;
}

.prod-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.prod-price {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1C3A13;
}

.prod-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 100px;
    background: #1C3A13;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    width: 160px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.prod-cart:hover {
    background: #EFC368;
    color: #1C3A13;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* --- Shop All Button --- */
.shop-all-wrap {
    text-align: center;
    margin-top: 16px;
    position: relative;
    z-index: 2;
}

.shop-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #1C3A13;
    padding: 16px 40px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shop-all-btn:hover {
    transform: translateY(-3px);
    background: #EFC368;
    color: #1C3A13;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* --- Coming Soon panel --- */
.shop-coming {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 20px;
    text-align: center;
    gap: 14px;
}

.shop-coming-icon {
    font-size: 52px;
    opacity: 0.55;
    line-height: 1;
}

.shop-coming h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: rgba(252, 252, 247, 0.85);
}

.shop-coming p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(252, 252, 247, 0.42);
    max-width: 300px;
}

/* Responsive */
@media (max-width: 900px) {
    .shop-section {
        padding: 64px 24px 76px;
    }

    .prod-grid {
        gap: 16px;
        scroll-padding-left: 0;
    }

    .prod-card {
        width: 280px;
    }

    .shop-tabs-wrap {
        justify-content: flex-start;
    }

    .shop-tab {
        padding: 9px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .shop-section {
        padding: 52px 14px 64px;
    }

    .prod-card {
        width: 260px;
    }

    .prod-img-wrap {
        height: 160px;
    }

    .prod-name {
        font-size: 14px;
    }

    .prod-price {
        font-size: 18px;
    }

    .prod-cart {
        font-size: 14px;
        padding: 8px 0;
        width: 130px;
    }

    .shop-all-btn {
        font-size: 14px;
        padding: 12px 24px;
    }
}

/* =========================================
   BENTO GRID SECTION
========================================= */
/* =========================================
   CINEMATIC 3D BENTO GRID
========================================= */
/* =========================================
   GHEE FOCUS PARALLAX GRID (80/20)
========================================= */
/* =========================================
   SCIENTIFIC SEED-INSPIRED BENTO
========================================= */
.bento-section {
    padding: 80px 5% 100px;
    background: #FAFAFA;
    position: relative;
}

/* --- Bento Header --- */
.bento-header {
    text-align: center;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;
}

.bento-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(28, 58, 19, 0.4);
    margin-bottom: 14px;
}

.bento-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -2px;
    color: #1C3A13;
    margin-bottom: 16px;
}

.bento-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(28, 58, 19, 0.6);
    max-width: 520px;
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: auto;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.bento-card {
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    background: #fff;
    transition: transform 0.3s ease;
}

.promo-title {
    font-weight: 700;
    color: #1C3A13;
    opacity: 0.6;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Testimonial --- */
.testimonial-section {
    padding: 80px 5% 100px;
    background-color: #fff;
}

.testimonial-header {
    text-align: center;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;
}

.testimonial-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(28, 58, 19, 0.4);
    margin-bottom: 14px;
}

.testimonial-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -2px;
    color: #1C3A13;
    margin-bottom: 16px;
}

.testimonial-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(28, 58, 19, 0.6);
    max-width: 520px;
    margin: 0 auto;
}

/* --- Left Column Stack --- */
.bento-left-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-offer {
    flex: 1;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    min-height: 400px;
}

.scattered-accents {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.offer-content {
    position: relative;
    z-index: 2;
}

.offer-title {
    color: #1C3A13;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.offer-desc {
    color: rgba(28, 58, 19, 0.6);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
    max-width: 380px;
}

/* Seed-brand Timer Blocks */
.timer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 400px;
}

.timer-box {
    background: #1C3A13;
    border-radius: 12px;
    padding: 16px 0;
    text-align: center;
}

.timer-box .num {
    display: block;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.timer-box .label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-top: 4px;
}

.card-coupon {
    background: #fff;
    padding: 3px;
    /* Space for glowing border */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* The Spinning Aura (Premium RGB) */
.card-coupon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(#1C3A13,
            #2E7D32,
            #EFC368,
            #FF9800,
            #EFC368,
            #2E7D32,
            #1C3A13);
    animation: rotateGlow 6s linear infinite;
    z-index: -2;
}

/* Mask to create the 1.5px border effect */
.card-coupon::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #F4F7F2;
    border-radius: 38px;
    z-index: -1;
}

/* Ambient Floating Light (Blur Layer) */
.coupon-glow-layer {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: inherit;
    filter: blur(25px);
    opacity: 0.6;
    animation: pulseGlow 3s ease-in-out infinite alternate;
}

.card-coupon:hover::before {
    animation-duration: 2s;
    /* Speed up on attention */
}

@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {
    from {
        opacity: 0.4;
        transform: scale(0.95);
    }

    to {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.card-coupon-inner {
    padding: 38px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    position: relative;
}

.coupon-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 100px;
    padding: 8px 8px 8px 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.pill-code {
    font-weight: 800;
    color: #1C3A13;
    letter-spacing: 1px;
}

.pill-btn {
    background: #1C3A13;
    color: #fff;
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.pill-btn:hover {
    background: #EFC368;
    color: #1C3A13;
    transform: translateY(-2px);
}

/* --- Right Column Stack --- */
.bento-right-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-hero-product {
    height: 520px;
    background: #F4F7F2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.hero-product-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 50px;
    align-items: flex-end;
    justify-content: center;
}

.prod-jar {
    height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.1));
    z-index: 2;
    animation: floatJar 6s ease-in-out infinite;
}

.prod-jar:nth-child(2) {
    animation-delay: -3s;
}

@keyframes floatJar {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* Scientific ID Badges */
.sci-badge {
    position: absolute;
    top: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(28, 58, 19, 0.1);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    color: #1C3A13;
    letter-spacing: 1.5px;
    z-index: 10;
}

.sci-badge::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 1px;
    height: 30px;
    border-left: 1px dashed rgba(28, 58, 19, 0.2);
}

.badge-1 {
    left: 25%;
}

.badge-2 {
    right: 25%;
}

.lifestyle-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card-img-small {
    height: 220px;
    background-color: #eee;
}

.card-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.6s ease;
}

.card-img-small:hover img {
    scale: 1.05;
}

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

    .timer-grid {
        max-width: 100%;
    }

    .card-offer {
        min-height: auto;
    }

    .lifestyle-row {
        grid-template-columns: 1fr 1fr;
    }

    .lifestyle-row .card-img-small:last-child {
        display: none;
    }
}

/* =========================================
   HEALTH BENEFITS — PREMIUM SECTION
========================================= */
.benefits-section {
    position: relative;
    padding: 108px 60px;
    background:
        radial-gradient(circle at 82% 18%, rgba(239,195,104,0.16), transparent 28%),
        linear-gradient(180deg, #FAFAFA 0%, #FDFCF8 100%);
    overflow: hidden;
}
.benefits-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
}
.benefits-ambient {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.55;
}
.benefits-ambient-left {
    width: 320px;
    height: 320px;
    left: -150px;
    bottom: 80px;
    background: rgba(168,198,108,0.2);
}
.benefits-ambient-right {
    width: 360px;
    height: 360px;
    right: -170px;
    top: 70px;
    background: rgba(239,195,104,0.16);
}
.benefits-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}
.benefits-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 58px;
}
.benefits-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6b8e23;
    background: rgba(107,142,35,0.1);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.benefits-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #1C3A13;
    line-height: 1.15;
    margin-bottom: 14px;
}
.benefits-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #556B52;
    margin: 0 auto;
    max-width: 610px;
}
.benefits-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) 1.45fr;
    gap: 24px;
    align-items: stretch;
}
.benefits-hero-card,
.benefit-card {
    border: 1px solid rgba(28,58,19,0.08);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 24px 70px rgba(28,58,19,0.08);
    backdrop-filter: blur(14px);
}
.benefits-hero-card {
    min-height: 100%;
    border-radius: 8px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.benefits-hero-card::before {
    content: '';
    position: absolute;
    inset: auto -30px -72px auto;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239,195,104,0.25), transparent 68%);
}
.benefits-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 58px;
}
.benefits-hero-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b8e23;
}
.benefits-hero-mark {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1C3A13;
    color: #EFC368;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(28,58,19,0.18);
}
.benefits-hero-card h3 {
    position: relative;
    z-index: 1;
    color: #1C3A13;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.12;
    margin: 0 0 18px;
}
.benefits-hero-card p {
    position: relative;
    z-index: 1;
    color: #556B52;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 28px;
}
.benefits-ritual {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.benefits-ritual span {
    color: #1C3A13;
    background: rgba(239,195,104,0.18);
    border: 1px solid rgba(239,195,104,0.32);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.benefit-card {
    border-radius: 8px;
    padding: 26px;
    min-height: 238px;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.benefit-card:hover {
    transform: translateY(-6px);
    border-color: rgba(107,142,35,0.24);
    box-shadow: 0 30px 80px rgba(28,58,19,0.12);
}
.benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFF4E8;
    box-shadow: inset 0 0 0 1px rgba(28,58,19,0.06);
    margin-bottom: 22px;
}
.benefit-icon svg {
    width: 34px;
    height: 34px;
}
.benefit-tag {
    color: #6b8e23;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.benefit-card h3 {
    color: #1C3A13;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 10px;
}
.benefit-card p {
    color: #556B52;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}
.benefit-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.benefit-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.benefit-reveal:nth-child(2) { transition-delay: 0.08s; }
.benefit-reveal:nth-child(3) { transition-delay: 0.16s; }
.benefit-reveal:nth-child(4) { transition-delay: 0.24s; }

@media (max-width: 1024px) {
    .benefits-section { padding: 84px 40px; }
    .benefits-layout { grid-template-columns: 1fr; }
    .benefits-hero-card { min-height: auto; }
    .benefits-hero-top { margin-bottom: 34px; }
}
@media (max-width: 640px) {
    .benefits-section { padding: 68px 20px; }
    .benefits-header { margin-bottom: 38px; }
    .benefits-heading { letter-spacing: 0; }
    .benefits-grid { grid-template-columns: 1fr; }
    .benefits-hero-card,
    .benefit-card { padding: 22px; }
    .benefits-hero-top { align-items: flex-start; }
    .benefits-hero-mark {
        width: 50px;
        height: 50px;
        font-size: 13px;
    }
}

/* =========================================
   TESTIMONIALS — PREMIUM SECTION
========================================= */
.testi-section {
    position: relative;
    padding: 100px 60px;
    background-color: #FDFCF8;
    overflow: hidden;
}

/* Ambient blob shapes */
.testi-bg-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.45;
    z-index: 0;
}
.testi-blob-1 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(168,198,108,0.28), transparent 70%);
    top: -120px; left: -100px;
}
.testi-blob-2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(239,195,104,0.2), transparent 70%);
    bottom: -80px; right: -80px;
}

.testi-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}

/* Header */
.testi-header {
    text-align: center;
    margin-bottom: 48px;
}
.testi-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6b8e23;
    background: rgba(107,142,35,0.1);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 18px;
}
.testi-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #1C3A13;
    margin-bottom: 14px;
    line-height: 1.15;
}
.testi-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #556B52;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Stats Bar */
.testi-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 20px;
    padding: 28px 40px;
    margin-bottom: 56px;
    box-shadow: 0 4px 24px rgba(28,58,19,0.05);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.testi-stat {
    flex: 1;
    text-align: center;
}
.testi-stat-num {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1C3A13;
    line-height: 1;
    margin-bottom: 6px;
}
.testi-stat-star {
    color: #EFC368;
    font-size: 1.4rem;
    vertical-align: middle;
    margin-left: 2px;
}
.testi-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #556B52;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.testi-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(28,58,19,0.1);
    flex-shrink: 0;
}

/* Slider */
.testi-slider-wrap {
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.testi-slider-wrap:active { cursor: grabbing; }
.testi-track {
    display: flex;
    gap: 24px;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Card */
.testi-card {
    flex: 0 0 calc(33.333% - 16px);
    background: #ffffff;
    border: 1px solid rgba(28,58,19,0.07);
    border-radius: 24px;
    padding: 36px 32px 28px;
    box-shadow: 0 2px 16px rgba(28,58,19,0.04), 0 8px 32px rgba(28,58,19,0.04);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
}
.testi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a8c66c, #6b8e23);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.testi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 48px rgba(28,58,19,0.12);
}
.testi-card:hover::before { opacity: 1; }

/* Featured card accent */
.testi-card--featured {
    background: linear-gradient(160deg, #1C3A13 0%, #2f4f2f 100%);
    border-color: transparent;
}
.testi-card--featured::before {
    background: linear-gradient(90deg, #EFC368, #f2cb7b);
    opacity: 1;
}
.testi-card--featured .testi-quote-icon { color: rgba(239,195,104,0.5); }
.testi-card--featured .testi-text { color: rgba(255,255,255,0.9); }
.testi-card--featured .testi-stars span { color: #EFC368; }
.testi-card--featured .testi-author-info strong { color: #fff; }
.testi-card--featured .testi-author-info span { color: rgba(255,255,255,0.55); }
.testi-card--featured .testi-verified { color: rgba(255,255,255,0.5); }
.testi-card--featured .testi-verified svg path { fill: #EFC368; }
.testi-card--featured .testi-product-tag {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.1);
}

/* Quote icon */
.testi-quote-icon {
    width: 32px;
    height: 24px;
    color: rgba(107,142,35,0.25);
    flex-shrink: 0;
}
.testi-quote-icon svg { width: 100%; height: 100%; }

/* Review text */
.testi-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    line-height: 1.75;
    color: #3D5B34;
    flex: 1;
}

/* Stars */
.testi-stars {
    display: flex;
    gap: 3px;
    font-size: 15px;
}
.testi-stars span { color: #EFC368; }
.testi-stars .testi-star-empty { color: rgba(239,195,104,0.3); }

/* Author row */
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--av-bg, #2f4f2f);
    color: var(--av-color, #D3FA99);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.testi-author-info {
    flex: 1;
}
.testi-author-info strong {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1C3A13;
    margin-bottom: 2px;
}
.testi-author-info span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8aaa80;
}
.testi-verified {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #8aaa80;
    letter-spacing: 0.2px;
}
.testi-verified svg {
    width: 14px;
    height: 14px;
}

/* Product tag */
.testi-product-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #6b8e23;
    background: rgba(107,142,35,0.08);
    border: 1px solid rgba(107,142,35,0.15);
    padding: 5px 12px;
    border-radius: 100px;
    letter-spacing: 0.3px;
    align-self: flex-start;
}

/* Controls */
.testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
}
.testi-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(28,58,19,0.15);
    background: #fff;
    color: #1C3A13;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    flex-shrink: 0;
}
.testi-btn svg { width: 18px; height: 18px; }
.testi-btn:hover {
    background: #1C3A13;
    border-color: #1C3A13;
    color: #fff;
    transform: scale(1.08);
}
.testi-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(28,58,19,0.15);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.35s cubic-bezier(0.16,1,0.3,1), border-radius 0.35s;
}
.testi-dot.active {
    width: 28px;
    border-radius: 100px;
    background: #1C3A13;
}

/* Responsive */
@media (max-width: 1024px) {
    .testi-card { flex: 0 0 calc(50% - 12px); }
    .testi-section { padding: 80px 40px; }
}
@media (max-width: 640px) {
    .testi-card { flex: 0 0 calc(100% - 0px); }
    .testi-section { padding: 60px 20px; }
    .testi-stats { flex-direction: column; gap: 20px; padding: 24px 20px; }
    .testi-stat-divider { width: 60px; height: 1px; }
}

/* =========================================
   BILONA GHEE PROCESS — ANIMATED SECTION
========================================= */
.bilona-section {
    position: relative;
    padding: 110px 60px 104px;
    background:
        radial-gradient(circle at 15% 8%, rgba(239,195,104,0.18), transparent 28%),
        linear-gradient(180deg, #FDFCF8 0%, #EFF4E8 28%, #EFF4E8 100%);
    overflow: hidden;
}
.bilona-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}
.bilona-section::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -150px;
    width: min(760px, 84vw);
    height: 260px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(28,58,19,0.11), transparent 68%);
    pointer-events: none;
}
.bilona-ambient {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    opacity: 0.58;
}
.bilona-ambient-left {
    left: -120px;
    top: 150px;
    width: 280px;
    height: 280px;
    background: rgba(168,198,108,0.22);
}
.bilona-ambient-right {
    right: -150px;
    top: 90px;
    width: 340px;
    height: 340px;
    background: rgba(239,195,104,0.16);
}
.bilona-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}
.bilona-header {
    text-align: center;
    margin-bottom: 58px;
}
.bilona-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6b8e23;
    background: rgba(107,142,35,0.12);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 18px;
}
.bilona-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #1C3A13;
    margin-bottom: 14px;
    line-height: 1.15;
}
.bilona-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #556B52;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}
.bilona-proof-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.bilona-proof-row span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1C3A13;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(28,58,19,0.06);
    padding: 9px 14px;
}

/* Steps Track */
.bilona-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    align-items: start;
}
/* Dashed connector line */
.bilona-track::before {
    content: '';
    position: absolute;
    top: 80px;
    left: calc(10% + 8px);
    right: calc(10% + 8px);
    height: 2px;
    border-top: 2px dashed rgba(107,142,35,0.35);
    z-index: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s;
}
.bilona-track.in-view::before { transform: scaleX(1); }

/* Individual Step Card */
.bilona-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    min-width: 0;
}
.bilona-step.in-view { opacity: 1; transform: translateY(0); }
.bilona-step:nth-child(1) { transition-delay: 0.1s; }
.bilona-step:nth-child(2) { transition-delay: 0.22s; }
.bilona-step:nth-child(3) { transition-delay: 0.34s; }
.bilona-step:nth-child(4) { transition-delay: 0.46s; }
.bilona-step:nth-child(5) { transition-delay: 0.58s; }

/* SVG Scene Wrapper */
.bilona-scene {
    width: 178px;
    height: 178px;
    background:
        radial-gradient(circle at 50% 66%, rgba(239,195,104,0.38), transparent 46%),
        radial-gradient(circle at 32% 18%, rgba(168,198,108,0.2), transparent 34%),
        linear-gradient(145deg, #FFFFFF, #FFF8E7 74%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 24px 56px rgba(28,58,19,0.14),
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 0 0 8px rgba(107,142,35,0.06),
        0 0 0 1px rgba(239,195,104,0.16);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
}
.bilona-scene img {
    position: relative;
    z-index: 1;
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(28,58,19,0.13));
    animation: bilonaAssetFloat 5.8s ease-in-out infinite;
}
.bilona-step:nth-child(2) .bilona-scene img { animation-delay: -1s; }
.bilona-step:nth-child(3) .bilona-scene img { animation-delay: -2s; }
.bilona-step:nth-child(4) .bilona-scene img { animation-delay: -3s; }
.bilona-step:nth-child(5) .bilona-scene img { animation-delay: -4s; }
.bilona-scene::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    border: 1px solid rgba(28,58,19,0.06);
    pointer-events: none;
}
.bilona-scene::after {
    content: "";
    position: absolute;
    inset: auto 18% 10%;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(28,58,19,0.16), transparent 70%);
    filter: blur(8px);
}
.bilona-step:hover .bilona-scene {
    transform: translateY(-6px);
    box-shadow:
        0 30px 68px rgba(28,58,19,0.18),
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 0 0 8px rgba(239,195,104,0.08),
        0 0 0 1px rgba(239,195,104,0.24);
}

/* Step Number Badge */
.bilona-step-num {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    background: #1C3A13;
    color: #EFC368;
    border-radius: 50%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #EFF4E8;
}
.bilona-step-kicker {
    display: inline-block;
    margin-bottom: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #6b8e23;
}
.bilona-step-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1C3A13;
    margin-bottom: 8px;
}
.bilona-step-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #556B52;
    line-height: 1.6;
    max-width: 160px;
}
.bilona-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(620px, 100%);
    margin: 58px auto 0;
    padding: 18px 22px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(28,58,19,0.08);
    backdrop-filter: blur(12px);
}
.bilona-note-mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1C3A13;
    color: #EFC368;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
}
.bilona-note p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #3f533b;
}

/* ---- CHARACTER ANIMATIONS ---- */
/* Step 1: Milking arm */
@keyframes milkArm {
    0%,100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
.anim-milk-arm { transform-origin: 50% 30%; animation: milkArm 1.3s ease-in-out infinite; }
@keyframes floatSoft {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.anim-float-soft { animation: floatSoft 3s ease-in-out infinite; }
.anim-delay-half { animation-delay: 0.8s; }

/* Step 2: Steam wisps */
@keyframes steam1 {
    0%   { transform: translateY(0) scaleX(1); opacity: 0.8; }
    100% { transform: translateY(-18px) scaleX(0.3); opacity: 0; }
}
@keyframes steam2 {
    0%   { transform: translateY(0) scaleX(1); opacity: 0.7; }
    100% { transform: translateY(-22px) scaleX(0.2); opacity: 0; }
}
.anim-steam1 { animation: steam1 2s ease-out infinite; }
.anim-steam2 { animation: steam2 2s ease-out 0.6s infinite; }
.anim-steam3 { animation: steam1 2s ease-out 1.1s infinite; }

/* Step 3: Churner rotate */
@keyframes churn {
    0%,100% { transform: rotate(-12deg); }
    50%      { transform: rotate(12deg); }
}
.anim-churn { transform-origin: 50% 20%; animation: churn 1s ease-in-out infinite; }

/* Step 4: Scoop hand */
@keyframes scoop {
    0%,100% { transform: translateY(0); }
    40%      { transform: translateY(-7px); }
    70%      { transform: translateY(-3px); }
}
.anim-scoop { animation: scoop 1.6s ease-in-out infinite; }

/* Step 5: Drip */
@keyframes drip {
    0%    { transform: scaleY(0); opacity: 1; }
    60%   { transform: scaleY(1); opacity: 1; }
    100%  { transform: scaleY(1) translateY(8px); opacity: 0; }
}
.anim-drip { transform-origin: top center; animation: drip 2.2s ease-in infinite; }
@keyframes flamePulse {
    0%,100% { transform: scaleY(0.94); opacity: 0.38; }
    50% { transform: scaleY(1.08); opacity: 0.62; }
}
.anim-flame {
    transform-origin: 40px 94px;
    animation: flamePulse 2.4s ease-in-out infinite;
}
/* Ghee jar glow */
@keyframes gheeGlow {
    0%,100% { filter: drop-shadow(0 0 4px rgba(239,195,104,0.3)); }
    50%      { filter: drop-shadow(0 0 14px rgba(239,195,104,0.7)); }
}
.anim-glow { animation: gheeGlow 2s ease-in-out infinite; }

@keyframes bilonaAssetFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-7px) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    .anim-milk-arm,
    .anim-float-soft,
    .anim-steam1,
    .anim-steam2,
    .anim-steam3,
    .anim-churn,
    .anim-scoop,
    .anim-drip,
    .anim-flame,
    .anim-glow,
    .bilona-scene img,
    .ghee-process-mark img,
    .ghee-process-hero-card > img {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .bilona-track { grid-template-columns: repeat(3, 1fr); }
    .bilona-track::before { display: none; }
    .bilona-section { padding: 80px 40px; }
    .bilona-step-desc { max-width: 220px; }
}
@media (max-width: 640px) {
    .bilona-track {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .bilona-section { padding: 64px 20px; }
    .bilona-header { margin-bottom: 42px; }
    .bilona-heading { letter-spacing: 0; }
    .bilona-scene { width: 148px; height: 148px; }
    .bilona-scene img { width: 84%; height: 84%; }
    .bilona-step-desc { max-width: 280px; }
    .bilona-note {
        align-items: flex-start;
        padding: 16px;
    }
}

/* =========================================
   BLOG — PREMIUM EDITORIAL SECTION
========================================= */
.blog-section {
    position: relative;
    padding: 108px 60px 116px;
    background:
        radial-gradient(circle at 18% 12%, rgba(168,198,108,0.2), transparent 30%),
        linear-gradient(180deg, #FDFCF8 0%, #EFF4E8 100%);
    overflow: hidden;
}
.blog-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
}
.blog-ambient {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.55;
}
.blog-ambient-left {
    width: 330px;
    height: 330px;
    left: -150px;
    top: 130px;
    background: rgba(239,195,104,0.18);
}
.blog-ambient-right {
    width: 390px;
    height: 390px;
    right: -190px;
    bottom: -80px;
    background: rgba(28,58,19,0.1);
}
.blog-inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}
.blog-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
    gap: 40px;
    align-items: end;
    margin-bottom: 52px;
}
.blog-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.blog-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6b8e23;
    background: rgba(107,142,35,0.1);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.blog-heading {
    color: #1C3A13;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.14;
    margin: 0;
    max-width: 660px;
}
.blog-subtext {
    color: #556B52;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
.blog-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    color: #EFC368;
    background: #1C3A13;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(28,58,19,0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(28,58,19,0.22);
}
.blog-grid {
    display: grid;
    grid-template-columns: 1.22fr 0.78fr 0.78fr;
    gap: 18px;
}
.blog-card {
    position: relative;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(28,58,19,0.08);
    box-shadow: 0 24px 70px rgba(28,58,19,0.08);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.blog-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.44), transparent 34%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(107,142,35,0.24);
    box-shadow: 0 34px 90px rgba(28,58,19,0.13);
}
.blog-card:hover::before { opacity: 1; }
.blog-featured {
    grid-row: span 2;
}
.blog-media {
    display: block;
    background: #EFF4E8;
    overflow: hidden;
}
.blog-media svg {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.blog-featured .blog-media svg {
    height: 360px;
}
.blog-card:hover .blog-media svg {
    transform: scale(1.035);
}
.blog-content {
    position: relative;
    z-index: 2;
    padding: 24px;
}
.blog-featured .blog-content {
    padding: 30px;
}
.blog-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.blog-card-top span {
    color: rgba(28,58,19,0.56);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.blog-card-top span + span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: rgba(107,142,35,0.5);
}
.blog-category {
    display: inline-block;
    color: #6b8e23;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.blog-card h3 {
    margin: 0 0 12px;
    color: #1C3A13;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: -0.2px;
}
.blog-featured h3 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -1px;
}
.blog-card h3 a {
    color: inherit;
    text-decoration: none;
}
.blog-card p {
    margin: 0 0 18px;
    color: #556B52;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
}
.blog-featured p {
    font-size: 15px;
    max-width: 620px;
}
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.blog-meta span {
    color: #1C3A13;
    background: rgba(239,195,104,0.18);
    border: 1px solid rgba(239,195,104,0.3);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 10px;
}
.blog-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #1C3A13;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.blog-read-link::after {
    content: '';
    width: 18px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(0 42%, 68% 42%, 68% 0, 100% 50%, 68% 100%, 68% 58%, 0 58%);
    transition: transform 0.25s ease;
}
.blog-read-link:hover::after {
    transform: translateX(4px);
}
.blog-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 22px;
    padding: 28px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 22%, rgba(239,195,104,0.18), transparent 32%),
        #1C3A13;
    border: 1px solid rgba(239,195,104,0.18);
    box-shadow: 0 30px 80px rgba(28,58,19,0.16);
}
.blog-newsletter-kicker {
    display: inline-block;
    color: #EFC368;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.blog-newsletter h3 {
    margin: 0;
    max-width: 540px;
    color: #FDFCF8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.22;
}
.blog-newsletter-form {
    display: flex;
    align-items: center;
    width: min(420px, 100%);
    min-height: 54px;
    padding: 5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
}
.blog-newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    color: #FDFCF8;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 0 16px;
}
.blog-newsletter-form input::placeholder {
    color: rgba(253,252,248,0.55);
}
.blog-newsletter-form button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1C3A13;
    background: #EFC368;
    cursor: pointer;
}
.blog-newsletter-form button svg {
    width: 20px;
    height: 20px;
}
.blog-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.blog-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.blog-reveal:nth-child(2) { transition-delay: 0.08s; }
.blog-reveal:nth-child(3) { transition-delay: 0.16s; }
.blog-reveal:nth-child(4) { transition-delay: 0.24s; }
.blog-reveal:nth-child(5) { transition-delay: 0.32s; }

@media (max-width: 1024px) {
    .blog-section { padding: 88px 40px 96px; }
    .blog-header {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 40px;
    }
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .blog-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}
@media (max-width: 640px) {
    .blog-section { padding: 70px 20px 82px; }
    .blog-heading { letter-spacing: 0; }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-media svg,
    .blog-featured .blog-media svg {
        height: 230px;
    }
    .blog-content,
    .blog-featured .blog-content {
        padding: 22px;
    }
    .blog-newsletter {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }
    .blog-newsletter-form {
        width: 100%;
    }
}



/* =========================================
   ALL PRODUCTS - PRODUCT LIST GRID
========================================= */
.all-products-page {
    background: #FDFCF8;
    color: var(--color-primary);
}
.all-products-listing {
    width: min(1420px, calc(100% - 48px));
    margin: 0 auto;
    padding: 12px 0 96px;
}
.all-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.all-product-list-card {
    position: relative;
    min-height: 282px;
    display: grid;
    grid-template-columns: minmax(230px, 0.48fr) minmax(0, 0.52fr);
    align-items: center;
    gap: clamp(22px, 3vw, 48px);
    overflow: hidden;
    border-radius: 14px;
    background: #F3F5EC;
    padding: 38px clamp(30px, 3.4vw, 58px) 36px 34px;
    box-shadow: 0px 0px 15px rgba(37, 143, 103, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.all-product-list-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(211, 250, 153, 0.18);
}
.all-product-status {
    position: absolute;
    top: 24px;
    left: 24px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    color: #FDFCF8;
    background: #7D8765;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}
.all-product-status-muted {
    background: #719575;
}
.all-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 206px;
}
.all-product-image img {
    width: min(245px, 88%);
    max-height: 232px;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(28,58,19,0.16));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.all-product-list-card:hover .all-product-image img {
    transform: scale(1.09) translateY(-5px);
}
.all-product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.all-product-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 10px;
    color: #EFC368;
    font-size: 0.92rem;
    line-height: 1;
}
.all-product-info h2 {
    margin: 0 0 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.8vw, 1.76rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.all-product-info p {
    max-width: 34ch;
    margin: 0 0 28px;
    color: #11270E;
    font-size: clamp(0.9rem, 1vw, 1.02rem);
    font-weight: 600;
    line-height: 1.48;
}
.all-product-save {
    width: fit-content;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    margin: -6px 0 16px;
    padding: 0 12px;
    border-radius: 999px;
    color: #31540F;
    background: #D3FA99;
    font-size: 0.72rem;
    font-weight: 800;
}
.all-product-info strong {
    display: block;
    margin-bottom: 30px;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
}
.all-product-info del {
    color: rgba(28,58,19,0.46);
    font-weight: 500;
    margin-left: 6px;
}
.all-product-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.all-product-primary {
    min-width: 150px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #FDFCF8;
    background: var(--color-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 800;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.all-product-primary:hover {
    color: var(--color-primary);
    background: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.all-product-secondary {
    color: var(--color-primary);
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color 0.24s ease, transform 0.24s ease;
}
.all-product-secondary:hover {
    color: var(--color-secondary);
    transform: translateY(-2px);
}
@media (max-width: 1100px) {
    .all-products-grid {
        grid-template-columns: 1fr;
    }
    .all-product-list-card {
        min-height: 300px;
    }
}
@media (max-width: 680px) {
    .all-products-listing {
        width: calc(100% - 28px);
        padding: 12px 0 72px;
    }
    .all-products-grid {
        gap: 16px;
    }
    .all-product-list-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 54px 22px 24px;
    }
    .all-product-image {
        min-height: auto;
    }
    .all-product-image img {
        width: min(210px, 80%);
    }
    .all-product-info p {
        max-width: 100%;
    }
    .all-product-actions {
        width: 100%;
        gap: 16px;
    }
    .all-product-primary {
        flex: 1 1 170px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .all-product-list-card,
    .all-product-image img,
    .all-product-primary,
    .all-product-secondary {
        transition: none;
    }
    .all-product-list-card:hover,
    .all-product-list-card:hover .all-product-image img,
    .all-product-primary:hover,
    .all-product-secondary:hover {
        transform: none;
    }
}

/* =========================================
   SINGLE PRODUCT - HERO PURCHASE SECTION
========================================= */
.single-product-page {
    background: #F8F8F1;
    color: var(--color-primary);
    --single-product-shell: min(1288px, calc(100% - 48px));
    --single-product-deep: var(--color-primary);
    --single-product-rich: #244E1D;
    --single-product-glow: #5F7D4D;
}
.single-product-hero {
    width: var(--single-product-shell);
    margin: 0 auto;
    padding: 16px 0 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 370px);
    gap: 28px;
    align-items: start;
}
.single-product-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.single-product-gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--single-product-deep);
}
.single-product-gallery-main {
    grid-column: 1 / -1;
    min-height: 584px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 60% 26%, rgba(253,252,248,0.13), transparent 26%),
        radial-gradient(ellipse at 54% 52%, rgba(95,125,77,0.46), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 26%, rgba(0,0,0,0.2) 100%),
        linear-gradient(145deg, #244E1D 0%, var(--color-primary) 48%, #102A0C 100%);
}
.single-product-gallery-main::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: min(540px, 74%);
    height: min(300px, 48%);
    border-radius: 50% 50% 44% 44%;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at bottom, rgba(211,250,153,0.66) 0%, rgba(151,190,96,0.4) 34%, rgba(46,89,31,0.22) 58%, transparent 80%);
    filter: blur(26px);
    opacity: 1;
}
.single-product-gallery-main img {
    position: relative;
    z-index: 1;
    width: min(500px, 70%);
    max-height: 535px;
    object-fit: contain;
    filter: drop-shadow(0 42px 46px rgba(0,0,0,0.38));
    transform: rotate(-5deg) scale(1.04);
}
.single-product-gallery-tile {
    min-height: 254px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-product-gallery-tile img {
    width: min(205px, 60%);
    max-height: 218px;
    object-fit: contain;
    filter: drop-shadow(0 20px 26px rgba(0,0,0,0.22));
}
.single-product-tile-process {
    background:
        radial-gradient(circle at 52% 28%, rgba(253,252,248,0.1), transparent 28%),
        radial-gradient(circle at 50% 46%, rgba(95,125,77,0.34), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22)),
        linear-gradient(145deg, #244E1D, var(--color-primary));
}
.single-product-tile-process img {
    width: min(150px, 42%);
}
.single-product-tile-kit {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(13,37,15,0.08), rgba(13,37,15,0.72)),
        url("https://images.unsplash.com/photo-1556228720-195a672e8a03?auto=format&fit=crop&q=80&w=900") center / cover;
}
.single-product-tile-kit span {
    color: #FDFCF8;
    font-size: 1.02rem;
    font-weight: 800;
}
.single-product-tile-ritual {
    background:
        radial-gradient(circle at 58% 32%, rgba(253,252,248,0.1), transparent 30%),
        radial-gradient(circle at 58% 48%, rgba(95,125,77,0.32), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2)),
        linear-gradient(145deg, #244E1D, var(--color-primary));
}
.single-product-tile-facts {
    padding: 28px;
    align-items: center;
    background:
        radial-gradient(circle at 54% 30%, rgba(253,252,248,0.08), transparent 30%),
        radial-gradient(circle at 54% 42%, rgba(95,125,77,0.28), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.24)),
        linear-gradient(145deg, #244E1D, var(--color-primary));
}
.single-product-tile-facts div {
    width: min(280px, 100%);
    color: #FDFCF8;
    border: 1px solid rgba(253,252,248,0.52);
    padding: 18px;
}
.single-product-tile-facts strong,
.single-product-tile-facts span {
    display: block;
}
.single-product-tile-facts strong {
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.single-product-tile-facts span {
    padding: 8px 0;
    border-top: 1px solid rgba(253,252,248,0.2);
    color: rgba(253,252,248,0.74);
    font-size: 0.78rem;
    font-weight: 700;
}
.single-product-summary {
    position: sticky;
    top: 20px;
    padding: 0 0 8px;
}
.single-product-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.single-product-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.single-product-summary h1 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.single-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
}
.single-product-rating span {
    color: var(--color-primary);
    letter-spacing: 1px;
    font-size: 0.72rem;
}
.single-product-rating strong {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
}
.single-product-rating a {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    text-underline-offset: 3px;
    transition: color 0.24s ease;
}
.single-product-summary a:hover {
    color: var(--color-secondary);
}
.single-product-description {
    max-width: 42ch;
    margin: 0 0 18px;
    color: #183114;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.48;
}
.single-product-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.single-product-price {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.single-product-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--color-primary);
    background: #D3FA99;
    font-size: 0.66rem;
    font-weight: 900;
}
.single-product-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 0 14px;
    padding: 12px;
    border: 1px solid rgba(28,58,19,0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 8%, rgba(239,195,104,0.16), transparent 34%),
        rgba(255,255,255,0.62);
    box-shadow: 0 14px 32px rgba(28,58,19,0.055);
}
.single-product-option {
    position: relative;
    display: grid;
    gap: 7px;
}
.single-product-options span {
    color:#fff;
    font-family: var(--font-body);
    font-size: 14px;
    text-transform: uppercase;
}
.single-product-select {
    position: relative;
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(28,58,19,0.18);
    border-radius: 999px;
    outline: 0;
    padding: 0 42px 0 16px;
    color: #FDFCF8;
    background:
        linear-gradient(45deg, transparent 50%, var(--color-secondary) 50%) right 18px center / 7px 7px no-repeat,
        linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
        linear-gradient(135deg, var(--color-primary), #244E1D);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.single-product-select span {
    color: #FDFCF8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.single-product-select:hover,
.single-product-select:focus,
.single-product-option.is-open .single-product-select {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(239,195,104,0.18), inset 0 1px 0 rgba(255,255,255,0.14);
    transform: translateY(-1px);
}
.single-product-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(239,195,104,0.3);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 8%, rgba(239,195,104,0.16), transparent 34%),
        linear-gradient(145deg, #244E1D, var(--color-primary));
    box-shadow: 0 18px 40px rgba(28,58,19,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.single-product-option.is-open .single-product-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.single-product-select-menu button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 999px;
    padding: 0 13px;
    color: var(--color-primary);
    background: rgba(253,252,248,0.92);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.single-product-select-menu button:hover,
.single-product-select-menu button:focus,
.single-product-select-menu button[aria-selected="true"] {
    color: var(--color-primary);
    background: var(--color-secondary);
    transform: translateX(2px);
}
.single-product-select-menu button[aria-selected="true"]::after {
    content: "";
    width: 7px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.single-product-subscribe {
    margin: 0 0 20px;
    color: rgba(28,58,19,0.72);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
}
.single-product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.single-product-buy,
.single-product-cart {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #FDFCF8;
    background: var(--color-primary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 900;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.single-product-cart {
    border: 1px solid rgba(28,58,19,0.2);
    color: var(--color-primary);
    background: rgba(255,255,255,0.48);
}
.single-product-summary .single-product-buy:hover {
    color: var(--color-primary);
    background: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(28,58,19,0.16);
}
.single-product-summary .single-product-cart:hover {
    color: var(--color-primary);
    border-color: var(--color-secondary);
    background: rgba(239,195,104,0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(28,58,19,0.1);
}
.single-product-guarantee {
    margin: 0 0 20px;
    text-align: center;
    color: rgba(28,58,19,0.5);
    font-size: 0.72rem;
    font-weight: 800;
}
.single-product-accordion {
    border-top: 1px solid rgba(28,58,19,0.18);
    border-bottom: 1px solid rgba(28,58,19,0.18);
    margin-bottom: 22px;
}
.single-product-accordion-panel {
    border-bottom: 1px solid rgba(28,58,19,0.18);
}
.single-product-accordion-panel:last-child {
    border-bottom: 0;
}
.single-product-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0;
    border: 0;
    color: var(--color-primary);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 900;
    cursor: pointer;
}
.single-product-accordion-icon {
    width: 18px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}
.single-product-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.34s ease, opacity 0.24s ease, padding 0.34s ease;
}
.single-product-accordion-panel.is-open .single-product-accordion-content {
    max-height: 360px;
    opacity: 1;
    padding-bottom: 18px;
}
.single-product-accordion-panel ul {
    margin: 0 0 14px 16px;
    padding: 0;
    color: #1C3A13;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
}
.single-product-accordion-panel li {
    margin-bottom: 6px;
}
.single-product-accordion-panel a {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-underline-offset: 4px;
    transition: color 0.24s ease;
}
.single-product-addon {
    display: grid;
    grid-template-columns: 62px 1fr minmax(96px, auto);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.48);
}
.single-product-addon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}
.single-product-addon h2 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 900;
}
.single-product-addon p {
    max-width: 28ch;
    margin: 0 0 8px;
    color: #1C3A13;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.4;
}
.single-product-addon strong {
    color: var(--color-primary);
    font-size: 0.78rem;
}
.single-product-addon del {
    color: rgba(28,58,19,0.48);
    margin-left: 4px;
}
.single-product-addon a {
    min-width: 96px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 900;
    transition: color 0.24s ease, background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.single-product-addon a:hover {
    color: var(--color-primary);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}
.single-product-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    background: rgba(7, 18, 7, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}
.single-product-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 221;
    width: min(520px, 100vw);
    height: 100vh;
    background: #F8F8F1;
    border-left: 1px solid rgba(28,58,19,0.16);
    box-shadow: -24px 0 54px rgba(7,18,7,0.18);
    transform: translateX(104%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
body.single-product-drawer-open {
    overflow: hidden;
}
body.single-product-drawer-open .single-product-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}
body.single-product-drawer-open .single-product-drawer {
    transform: translateX(0);
}
.single-product-drawer-inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.single-product-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 36px 46px 20px;
}
.single-product-drawer-head h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
}
.single-product-drawer-head button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
}
.single-product-drawer-body {
    margin: 0 46px 40px;
    padding-top: 44px;
    overflow: auto;
    border-top: 1px solid rgba(28,58,19,0.32);
}
.single-product-drawer-body h3 {
    margin: 0 0 18px;
    color: var(--color-primary);
    font-size: 1.35rem;
    line-height: 1.2;
}
.single-product-drawer-body h3:not(:first-child) {
    margin-top: 30px;
}
.single-product-drawer-body p,
.single-product-drawer-body li {
    color: #17310F;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.62;
}
.single-product-drawer-body p {
    margin: 0 0 16px;
}
.single-product-drawer-body ul {
    margin: 0 0 18px 18px;
    padding: 0;
}
.single-product-drawer-body li {
    margin-bottom: 8px;
}
.single-product-proof {
    width: var(--single-product-shell);
    margin: 0 auto;
    padding: 0 0 96px;
}
.single-product-proof-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 20px;
    padding: 78px 36px 0;
    background:
        linear-gradient(180deg, rgba(7,26,10,0.08), rgba(7,26,10,0.58)),
        url("https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&q=82&w=1600") center / cover;
}
.single-product-proof-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(239,195,104,0.18), transparent 32%),
        radial-gradient(circle at 76% 34%, rgba(68,100,58,0.24), transparent 36%),
        linear-gradient(90deg, rgba(12,43,18,0.14), rgba(12,43,18,0.62));
    mix-blend-mode: multiply;
}
.single-product-proof-hero h2 {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 0 88px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.018em;
}
.single-product-proof-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 14px;
    padding: 32px 42px;
    border-radius: 12px;
    background: rgba(28, 32, 22, 0.55);
    border: 1px solid rgba(253,252,248,0.16);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 38px rgba(7,18,7,0.22);
}
.single-product-proof-strip article {
    color: #FDFCF8;
}
.single-product-proof-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #FDFCF8;
}
.single-product-proof-icon svg {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.single-product-proof-strip h3 {
    margin: 0 0 10px;
    color: #FDFCF8;
    font-size:15px;
    font-weight: 800;
}
.single-product-proof-strip p {
    max-width: 28ch;
    margin: 0;
    color: rgba(253,252,248,0.78);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.52;
}
.single-product-standards {
    display: grid;
    grid-template-columns: minmax(230px, 315px) 1fr;
    gap: 16px;
    margin-top: 18px;
}
.single-product-standards-image {
    margin: 0;
    min-height: 465px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    background:
        radial-gradient(circle at 48% 38%, rgba(239,195,104,0.16), transparent 35%),
        radial-gradient(circle at 56% 70%, rgba(89,129,70,0.34), transparent 42%),
        linear-gradient(145deg, #43693D 0%, #7D9D53 48%, #244D19 100%);
}
.single-product-standards-image::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: min(340px, 86%);
    height: min(210px, 52%);
    border-radius: 50% 50% 44% 44%;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at bottom, rgba(211,250,153,0.78) 0%, rgba(151,190,96,0.48) 36%, rgba(46,89,31,0.22) 60%, transparent 82%);
    filter: blur(26px);
    opacity: 1;
}
.single-product-standards-image img {
    position: relative;
    z-index: 1;
    width: min(250px, 76%);
    max-height: 410px;
    object-fit: contain;
    filter: drop-shadow(0 28px 36px rgba(7,18,7,0.3));
}
.single-product-standards-grid {
    min-height: 465px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    padding: 72px 74px 58px;
    background:
        radial-gradient(circle at 18% 8%, rgba(253,252,248,0.08), transparent 28%),
        radial-gradient(circle at 76% 82%, rgba(0,0,0,0.28), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22)),
        linear-gradient(145deg, #244E1D 0%, var(--color-primary) 54%, #102A0C 100%);
    color: #FDFCF8;
}
.single-product-standards-grid ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 58px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.single-product-standards-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(253,252,248,0.9);
    font-weight: 550;
    font-size: 15px;
    white-space: nowrap;
}
.single-product-standards-grid li span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1B3F12;
    background: #FDFCF8;
}
.single-product-standards-grid li svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.single-product-standards-grid p {
    margin: 62px 0 0;
    color: rgba(253,252,248,0.72);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
}
.single-product-benefits {
    width: var(--single-product-shell);
    margin: 0 auto;
    padding: 4px 0 104px;
}
.single-product-benefits-head {
    max-width: 720px;
    margin: 0 auto 66px;
    text-align: center;
}
.single-product-benefits-head h2 {
    margin: 0 0 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
}
.single-product-benefits-head p {
    max-width: 62ch;
    margin: 0 auto;
    color: rgba(28,58,19,0.78);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.58;
}
.single-product-benefits-layout {
    display: grid;
    grid-template-columns: minmax(420px, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(52px, 7vw, 94px);
    align-items: center;
}
.single-product-benefits-copy {
    padding-left: clamp(0px, 2vw, 34px);
}
.single-product-timeline {
    position: relative;
    display: grid;
    gap: 60px;
    margin: 0;
    padding: 0 0 0 44px;
    list-style: none;
}
.single-product-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(28,58,19,0.2), rgba(28,58,19,0.68), rgba(28,58,19,0.2));
}
.single-product-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
}
.single-product-timeline li::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 7px #F8F8F1;
}
.single-product-timeline > li > span {
    min-width: 78px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #FDFCF8;
    background: #7A835F;
    font-size: 15px;
    font-weight: 700;
}
.single-product-timeline h3 {
    margin: 6px 0 14px;
    color: var(--color-primary);
    font-size: 0.98rem;
    font-weight: 900;
}
.single-product-timeline ul {
    margin: 0;
    padding-left: 18px;
}
.single-product-timeline li li {
    display: list-item;
    margin-bottom: 8px;
    color: rgba(28,58,19,0.86);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.34;
}
.single-product-timeline li li::before {
    content: none;
}
.single-product-use-card {
    width: min(520px, 100%);
    margin: 62px 0 0 18px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 22px;
    align-items: center;
    padding: 28px 34px;
    border-radius: 16px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(28,58,19,0.055);
    box-shadow: 0 16px 36px rgba(28,58,19,0.055);
}
.single-product-use-card span {
    width: 42px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(28,58,19,0.72);
}
.single-product-use-card svg {
    width: 42px;
    height: 62px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.single-product-use-card h3 {
    margin: 0 0 8px;
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 900;
}
.single-product-use-card p {
    margin: 0;
    color: rgba(28,58,19,0.84);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
}
.single-product-benefits-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 18px;
    align-items: stretch;
}
.single-product-benefits-media figure {
    margin: 0;
    overflow: hidden;
    background: #ECF0E5;
}
.single-product-benefits-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.single-product-benefits-main {
    min-height: 520px;
    border-radius: 28px;
}
.single-product-benefits-main img {
    filter: saturate(0.86) contrast(0.98);
}
.single-product-benefits-side {
    display: grid;
    gap: 18px;
}
.single-product-benefits-side figure {
    min-height: 246px;
    border-radius: 16px;
}
.single-product-benefits-side figure:first-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at bottom, rgba(211,250,153,0.66), rgba(151,190,96,0.32) 38%, transparent 74%),
        linear-gradient(145deg, #244E1D, var(--color-primary));
}
.single-product-benefits-side figure:first-child img {
    width: 72%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(7,18,7,0.28));
}
.single-product-testing {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    margin: 0 0 104px;
    background:
        radial-gradient(circle at 82% 24%, rgba(95,125,77,0.24), transparent 34%),
        linear-gradient(90deg, rgba(12,29,9,0.18), rgba(12,29,9,0.04) 46%, rgba(12,29,9,0.18)),
        linear-gradient(145deg, #244E1D 0%, var(--color-primary) 48%, #102A0C 100%);
    color: #FDFCF8;
}
.single-product-testing::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 36%, rgba(0,0,0,0.26)),
        radial-gradient(ellipse at 24% 100%, rgba(211,250,153,0.16), transparent 46%);
    pointer-events: none;
}
.single-product-testing-bg {
    position: absolute;
    inset: -42% auto auto -4%;
    width: min(760px, 58vw);
    opacity: 0.18;
    transform: rotate(-18deg);
    filter: blur(1px) saturate(0.8);
}
.single-product-testing-bg img {
    width: 100%;
    display: block;
}
.single-product-testing-inner {
    position: relative;
    z-index: 1;
    width: var(--single-product-shell);
    min-height: 360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1fr);
    gap: clamp(42px, 6vw, 80px);
    align-items: center;
    padding: 64px 0;
}
.single-product-testing-copy h2 {
    max-width: 570px;
    margin: 0 0 26px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(2.05rem, 4.4vw, 3.8rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.single-product-testing-copy p {
    max-width: 58ch;
    margin: 0;
    color: rgba(253,252,248,0.78);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.58;
}
.single-product-testing-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.single-product-testing-cards article {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 22px;
    border-radius: 14px;
    background: #F8F8F1;
    color: var(--color-primary);
    text-align: center;
    box-shadow: 0 18px 34px rgba(7,18,7,0.16);
}
.single-product-testing-cards span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.single-product-testing-cards svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.single-product-testing-cards p {
    max-width: 22ch;
    margin: 0;
    color: rgba(28,58,19,0.86);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.42;
}
.single-product-faq {
    width: var(--single-product-shell);
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    margin: 0 auto 92px;
    padding: 40px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 10%, rgba(239,195,104,0.16), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.7), rgba(248,243,231,0.74));
    border: 1px solid rgba(28,58,19,0.08);
    box-shadow: 0 28px 70px rgba(28,58,19,0.08);
}
.single-product-faq-copy {
    position: sticky;
    top: 24px;
}
.single-product-faq-copy span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.single-product-faq-copy h2 {
    margin: 16px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.08;
}
.single-product-faq-copy p {
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.58;
}
.single-product-faq-list {
    display: grid;
    gap: 10px;
}
.single-product-faq-list details {
    overflow: hidden;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.62);
}
.single-product-faq-list summary {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}
.single-product-faq-list summary::-webkit-details-marker {
    display: none;
}
.single-product-faq-list summary::after {
    content: "+";
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(239,195,104,0.22);
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
}
.single-product-faq-list details[open] summary::after {
    content: "-";
}
.single-product-faq-list p {
    margin: 0;
    padding: 0 64px 20px 18px;
    color: rgba(28,58,19,0.72);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.58;
}
.ghee-product-faq {
    background:
        radial-gradient(circle at 12% 10%, rgba(239,195,104,0.26), transparent 28%),
        linear-gradient(145deg, rgba(255,252,242,0.82), rgba(248,236,204,0.72));
}
.single-product-related {
    width: var(--single-product-shell);
    margin: 0 auto;
    padding: 0 0 110px;
}
.single-product-related .shop-header {
    padding-top: 0;
}
.single-product-related .shop-eyebrow {
    color: #7A8F45;
}
.single-product-related .shop-heading {
    color: var(--color-primary);
}
.single-product-related .shop-subtext {
    color: rgba(28,58,19,0.72);
}
.single-product-related .prod-grid {
    justify-content: center;
    padding: 10px 0 20px;
}
.single-product-related .prod-card {
    width: calc((100% - 72px) / 4);
    min-width: 280px;
}

/* =========================================
   GHEE PRODUCT - HERO VARIANT
========================================= */
.ghee-product-page {
    --ghee-gold: #EFC368;
    --ghee-amber: #B87924;
    --ghee-deep: #1C3A13;
    --ghee-cream: #FFF8E7;
    background:
        radial-gradient(circle at 16% 8%, rgba(239,195,104,0.11), transparent 26%),
        linear-gradient(180deg, #FDFCF8 0%, #F8F8F1 100%);
}
.ghee-product-hero {
    position: relative;
}
.ghee-product-hero::before {
    content: "";
    position: absolute;
    inset: -34px -4vw auto;
    height: 430px;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(239,195,104,0.2), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(168,198,108,0.16), transparent 28%);
    z-index: -1;
}
.ghee-product-gallery-main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(239,195,104,0.76), rgba(184,121,36,0.25) 36%, transparent 70%),
        radial-gradient(ellipse at 54% 38%, rgba(255,248,231,0.2), transparent 34%),
        linear-gradient(145deg, #284C19 0%, var(--color-primary) 52%, #112B0C 100%);
}
.ghee-product-gallery-main::before {
    bottom: 10%;
    background: radial-gradient(ellipse at bottom, rgba(239,195,104,0.76) 0%, rgba(184,121,36,0.42) 36%, rgba(28,58,19,0.18) 62%, transparent 82%);
}
.ghee-product-gallery-main::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255,248,231,0.18);
    border-radius: 50%;
    transform: rotate(-18deg);
    z-index: 0;
}
.ghee-product-image {
    position: relative;
    z-index: 2;
    width: min(430px, 74%);
    max-height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 42px 46px rgba(0,0,0,0.34));
    transform: rotate(-3deg) translateY(6px);
}
.ghee-hero-seal {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,248,231,0.12);
    border: 1px solid rgba(239,195,104,0.36);
    color: #FFF8E7;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
}
.ghee-hero-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.ghee-hero-orbit span {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,252,242,0.92);
    border: 1px solid rgba(239,195,104,0.28);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 14px 26px rgba(7,18,7,0.16);
}
.ghee-hero-orbit span:nth-child(1) {
    top: 22%;
    right: 9%;
}
.ghee-hero-orbit span:nth-child(2) {
    left: 8%;
    bottom: 22%;
}
.ghee-hero-orbit span:nth-child(3) {
    right: 12%;
    bottom: 14%;
}
.ghee-hero-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(239,195,104,0.18);
    color: #8B5A2B;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ghee-trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
}
.ghee-trust-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(28,58,19,0.06);
    border: 1px solid rgba(28,58,19,0.08);
    color: rgba(28,58,19,0.78);
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}
.ghee-product-page .single-product-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ghee-ghost-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(28,58,19,0.16);
    color: var(--color-primary);
    font-size: 0.84rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ghee-ghost-link:hover {
    transform: translateY(-2px);
    border-color: rgba(239,195,104,0.7);
    background: rgba(239,195,104,0.12);
}
.ghee-jar-visual {
    position: relative;
    z-index: 1;
    width: min(370px, 62%);
    height: min(450px, 76%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 42px 46px rgba(0,0,0,0.34));
    transform: rotate(-3deg);
}
.ghee-jar-lid {
    position: absolute;
    top: 5%;
    width: 72%;
    height: 58px;
    border-radius: 50% 50% 28% 28%;
    background:
        linear-gradient(90deg, #4A2B13, #8B5A2B 36%, #EFC368 52%, #6E421D 72%, #2B1A0E);
    box-shadow: inset 0 -12px 18px rgba(0,0,0,0.24);
}
.ghee-jar-body {
    position: relative;
    width: 78%;
    height: 84%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 34px 34px 48px 48px;
    background:
        linear-gradient(90deg, rgba(96,55,15,0.22), transparent 20%, rgba(255,255,255,0.3) 48%, transparent 68%, rgba(96,55,15,0.24)),
        linear-gradient(180deg, #FFF3B0 0%, #EFC368 48%, #B87924 100%);
    border: 1px solid rgba(255,248,231,0.45);
    box-shadow: inset 0 22px 36px rgba(255,255,255,0.24), inset 0 -26px 34px rgba(101,56,10,0.26);
}
.ghee-jar-body::before,
.ghee-jar-body::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,248,231,0.26);
}
.ghee-jar-body::before { top: -18px; }
.ghee-jar-body::after {
    bottom: -16px;
    background: rgba(86,47,12,0.2);
}
.ghee-jar-label {
    position: relative;
    z-index: 1;
    width: 64%;
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,252,242,0.9);
    border: 1px solid rgba(28,58,19,0.22);
    color: var(--color-primary);
    text-align: center;
    padding: 18px 14px;
}
.ghee-jar-label strong,
.ghee-jar-label em,
.ghee-jar-label b {
    display: block;
    font-style: normal;
    line-height: 1.05;
}
.ghee-jar-label strong {
    font-size: 0.88rem;
    font-weight: 900;
}
.ghee-jar-label em {
    margin: 10px 0 4px;
    color: var(--ghee-amber);
    font-size: 1rem;
    font-weight: 900;
}
.ghee-jar-label b {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.02em;
}
.ghee-jar-glow {
    position: absolute;
    bottom: -10%;
    width: 110%;
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(239,195,104,0.64), transparent 70%);
    filter: blur(22px);
}
.ghee-product-tile-process,
.ghee-product-tile-ritual,
.ghee-product-tile-facts {
    background:
        radial-gradient(circle at 50% 72%, rgba(239,195,104,0.32), transparent 42%),
        linear-gradient(145deg, #284C19, var(--color-primary));
}
.ghee-product-tile-kit {
    background:
        linear-gradient(180deg, rgba(28,58,19,0.06), rgba(28,58,19,0.72)),
        url("https://images.unsplash.com/photo-1609501676725-7186f734b3c2?auto=format&fit=crop&q=82&w=900") center / cover;
}
.ghee-process-icon,
.ghee-spoon-visual {
    color: var(--ghee-gold);
}
.ghee-process-icon svg {
    width: 124px;
    height: 124px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 18px 20px rgba(0,0,0,0.2));
}
.ghee-spoon-visual {
    position: relative;
    width: 220px;
    height: 150px;
}
.ghee-spoon-visual::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 62px;
    width: 150px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6E421D, #EFC368, #FFF3B0);
    transform: rotate(-18deg);
}
.ghee-spoon-visual span {
    position: absolute;
    right: 24px;
    top: 34px;
    width: 72px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 34%, #FFF3B0, #EFC368 52%, #B87924);
    box-shadow: 0 18px 24px rgba(0,0,0,0.2);
    transform: rotate(-18deg);
}
.ghee-product-page .single-product-badge {
    background: rgba(239,195,104,0.34);
}
.ghee-product-page .single-product-buy:hover,
.ghee-product-page .single-product-addon a:hover {
    color: var(--color-primary);
    background: var(--ghee-gold);
}
.ghee-product-page .single-product-cart:hover {
    color: var(--color-primary);
    border-color: var(--ghee-gold);
    background: rgba(239,195,104,0.2);
}
.ghee-product-page .single-product-summary h1 {
    max-width: 680px;
}
.ghee-product-page .single-product-addon img {
    background:
        radial-gradient(circle at 50% 72%, rgba(239,195,104,0.32), transparent 48%),
        #FFF8E7;
}
.ghee-ritual-band {
    width: var(--single-product-shell);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.ghee-ritual-band article {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border-radius: 24px;
    padding: clamp(26px, 4vw, 42px);
    background:
        radial-gradient(circle at 90% 8%, rgba(239,195,104,0.24), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,248,241,0.82));
    border: 1px solid rgba(28,58,19,0.08);
    box-shadow: 0 24px 50px rgba(28,58,19,0.08);
}
.ghee-ritual-band article:first-child {
    background:
        radial-gradient(circle at 86% 16%, rgba(239,195,104,0.32), transparent 34%),
        linear-gradient(145deg, #244D19, #112B0C);
}
.ghee-ritual-band article:first-child h2,
.ghee-ritual-band article:first-child p {
    color: #FFF8E7;
}
.ghee-ritual-band span {
    display: inline-flex;
    margin-bottom: 42px;
    color: var(--ghee-gold);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 0.8;
    opacity: 0.9;
}
.ghee-ritual-band h2 {
    max-width: 520px;
    margin: 0 0 16px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    line-height: 1.05;
}
.ghee-ritual-band p {
    max-width: 62ch;
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.68;
}
.ghee-process-story {
    width: var(--single-product-shell);
    margin: 0 auto;
    padding: 10px 0 96px;
}
.ghee-process-story-head {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}
.ghee-process-story-head span {
    display: inline-flex;
    margin-bottom: 14px;
    color: #9B6A21;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ghee-process-story-head h2 {
    margin: 0 0 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.3vw, 3.6rem);
    font-weight: 600;
    line-height: 1.05;
}
.ghee-process-story-head p {
    max-width: 66ch;
    margin: 0 auto;
    color: rgba(28,58,19,0.74);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.62;
}
.ghee-process-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}
.ghee-process-hero-card {
    position: sticky;
    top: 116px;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 28px;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 52%, rgba(239,195,104,0.28), transparent 40%),
        radial-gradient(circle at 14% 12%, rgba(168,198,108,0.22), transparent 32%),
        linear-gradient(145deg, #264D1C 0%, #1C3A13 54%, #0F270B 100%);
    border: 1px solid rgba(239,195,104,0.18);
    box-shadow: 0 30px 70px rgba(28,58,19,0.18);
}
.ghee-process-hero-card::before {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255,248,231,0.12);
    pointer-events: none;
}
.ghee-process-hero-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 18%;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.28), transparent 70%);
    filter: blur(18px);
}
.ghee-process-hero-kicker {
    position: relative;
    z-index: 2;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,248,231,0.1);
    border: 1px solid rgba(239,195,104,0.28);
    color: #FFF8E7;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
}
.ghee-process-hero-card > img {
    position: relative;
    z-index: 2;
    width: min(470px, 96%);
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 34px rgba(0,0,0,0.26));
    animation: bilonaMainFloat 7s ease-in-out infinite;
}
.ghee-process-hero-note {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,248,231,0.1);
    border: 1px solid rgba(255,248,231,0.14);
    color: #FFF8E7;
    backdrop-filter: blur(16px);
}
.ghee-process-hero-note strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.1;
}
.ghee-process-hero-note span {
    color: rgba(255,248,231,0.78);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.5;
}
.ghee-process-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ghee-process-steps article {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 18px;
    padding: 26px 18px 24px;
    background:
        radial-gradient(circle at 50% 8%, rgba(239,195,104,0.28), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,248,241,0.74));
    border: 1px solid rgba(28,58,19,0.08);
    box-shadow: 0 16px 34px rgba(28,58,19,0.08);
}
.ghee-process-steps article::before {
    content: "";
    position: absolute;
    inset: auto 20px 0;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, rgba(239,195,104,0.9), transparent);
}
.ghee-process-steps article > span {
    position: absolute;
    top: 18px;
    left: 18px;
    color: rgba(28,58,19,0.36);
    font-size: 20px !important;
    font-weight: 700 !important;
}
.ghee-process-mark {
    width: 134px;
    height: 134px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 26px 0 24px;
    border-radius: 24px;
    color: var(--color-primary);
    background:
        radial-gradient(circle at 50% 76%, rgba(239,195,104,0.55), transparent 58%),
        radial-gradient(circle at 24% 18%, rgba(168,198,108,0.2), transparent 34%),
        linear-gradient(145deg, #FFFFFF, #FFF8E7);
    border: 1px solid rgba(239,195,104,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 34px rgba(28,58,19,0.12);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.ghee-process-mark img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(28,58,19,0.12));
    animation: bilonaAssetFloat 6s ease-in-out infinite;
}
.ghee-process-steps article:nth-child(2) .ghee-process-mark img { animation-delay: -1s; }
.ghee-process-steps article:nth-child(3) .ghee-process-mark img { animation-delay: -2s; }
.ghee-process-steps article:nth-child(4) .ghee-process-mark img { animation-delay: -3s; }
.ghee-process-steps article:nth-child(5) .ghee-process-mark img { animation-delay: -4s; }
.ghee-process-steps article:nth-child(6) .ghee-process-mark img { animation-delay: -5s; }
.ghee-process-steps article:hover .ghee-process-mark {
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 44px rgba(28,58,19,0.16);
}
.ghee-process-steps h3 {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}
.ghee-process-steps p {
    margin: 0;
    color: rgba(28,58,19,0.72);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}
@keyframes bilonaMainFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.015); }
}
.ghee-product-proof .single-product-proof-hero {
    background:
        linear-gradient(180deg, rgba(28,58,19,0.08), rgba(28,58,19,0.58)),
        url("https://images.unsplash.com/photo-1609501676725-7186f734b3c2?auto=format&fit=crop&q=82&w=1600") center / cover;
}
.ghee-product-proof .single-product-proof-hero::before {
    background:
        radial-gradient(circle at 18% 14%, rgba(239,195,104,0.28), transparent 32%),
        radial-gradient(circle at 76% 34%, rgba(184,121,36,0.26), transparent 36%),
        linear-gradient(90deg, rgba(28,58,19,0.2), rgba(28,58,19,0.66));
}
.ghee-standards-image {
    background:
        radial-gradient(ellipse at bottom, rgba(239,195,104,0.72), rgba(184,121,36,0.28) 40%, transparent 72%),
        linear-gradient(145deg, #FFF3B0 0%, #D79A34 48%, #244D19 100%);
}
.ghee-product-testing {
    background:
        radial-gradient(circle at 82% 24%, rgba(239,195,104,0.24), transparent 34%),
        linear-gradient(90deg, rgba(12,29,9,0.2), rgba(12,29,9,0.03) 46%, rgba(12,29,9,0.2)),
        linear-gradient(145deg, #244E1D 0%, var(--color-primary) 48%, #102A0C 100%);
}
.ghee-addon-thumb {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 72%, rgba(239,195,104,0.7), transparent 48%),
        linear-gradient(145deg, #FFF3B0, #B87924);
    border: 1px solid rgba(28,58,19,0.12);
    box-shadow: inset 0 8px 18px rgba(255,255,255,0.25);
}
.ghee-jar-visual-small,
.ghee-testing-bg-jar {
    width: min(230px, 78%);
    height: 300px;
    transform: none;
}
.ghee-jar-visual-small::before,
.ghee-testing-bg-jar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    width: 68%;
    height: 44px;
    border-radius: 50% 50% 30% 30%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #4A2B13, #8B5A2B 38%, #EFC368 54%, #3A220F);
    box-shadow: inset 0 -10px 14px rgba(0,0,0,0.24);
}
.ghee-jar-visual-small::after,
.ghee-testing-bg-jar::after {
    content: "A2\A GHEE";
    white-space: pre;
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: 74%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px 28px 42px 42px;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, rgba(96,55,15,0.2), transparent 24%, rgba(255,255,255,0.28) 50%, transparent 70%, rgba(96,55,15,0.24)),
        linear-gradient(180deg, #FFF3B0, #EFC368 50%, #B87924);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    box-shadow: inset 0 18px 30px rgba(255,255,255,0.22), inset 0 -22px 30px rgba(101,56,10,0.26), 0 28px 36px rgba(7,18,7,0.28);
}
.ghee-testing-bg-jar {
    width: 100%;
    height: 520px;
    opacity: 0.95;
}
.ghee-benefit-thumb {
    width: min(160px, 64%);
    height: min(170px, 74%);
    border-radius: 30px;
}
.ghee-related-thumb {
    width: min(180px, 68%);
    height: 148px;
    margin: 0 auto;
    border-radius: 28px 28px 38px 38px;
    background:
        linear-gradient(90deg, rgba(96,55,15,0.2), transparent 24%, rgba(255,255,255,0.3) 50%, transparent 70%, rgba(96,55,15,0.24)),
        linear-gradient(180deg, #FFF3B0, #EFC368 50%, #B87924);
    box-shadow: inset 0 18px 30px rgba(255,255,255,0.22), inset 0 -20px 30px rgba(101,56,10,0.24), 0 24px 30px rgba(28,58,19,0.14);
    position: relative;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ghee-related-thumb::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -13px;
    width: 76%;
    height: 30px;
    border-radius: 50% 50% 30% 30%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #4A2B13, #8B5A2B 38%, #EFC368 54%, #3A220F);
}
.ghee-related-thumb::after {
    content: "A2\A GHEE";
    white-space: pre;
    position: absolute;
    inset: 38% 20% auto;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}
.ghee-related-thumb-dark {
    background:
        linear-gradient(90deg, rgba(66,34,12,0.24), transparent 24%, rgba(255,255,255,0.22) 50%, transparent 70%, rgba(66,34,12,0.28)),
        linear-gradient(180deg, #F4D27A, #B87924 54%, #6E421D);
}
.ghee-related-thumb-bundle {
    width: min(220px, 78%);
    background:
        radial-gradient(circle at 78% 70%, rgba(211,250,153,0.45), transparent 30%),
        linear-gradient(180deg, #FFF3B0, #EFC368 50%, #B87924);
}
.prod-card:hover .ghee-related-thumb {
    transform: scale(1.09) translateY(-5px);
}
@media (max-width: 1100px) {
    .single-product-hero {
        grid-template-columns: 1fr;
        width: min(900px, calc(100% - 32px));
    }
    .single-product-summary {
        position: relative;
        top: auto;
    }
    .single-product-proof {
        width: min(900px, calc(100% - 32px));
    }
    .single-product-proof-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .single-product-standards {
        grid-template-columns: 1fr;
    }
    .single-product-standards-grid ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .single-product-benefits {
        width: min(900px, calc(100% - 32px));
    }
    .single-product-benefits-layout {
        grid-template-columns: 1fr;
    }
    .single-product-benefits-media {
        grid-template-columns: 1fr 220px;
    }
    .single-product-testing-inner {
        width: min(900px, calc(100% - 32px));
        grid-template-columns: 1fr;
    }
    .single-product-faq {
        width: min(900px, calc(100% - 32px));
        grid-template-columns: 1fr;
    }
    .single-product-faq-copy {
        position: relative;
        top: auto;
    }
    .ghee-ritual-band {
        width: min(900px, calc(100% - 32px));
        grid-template-columns: 1fr;
        margin-top: 18px;
    }
    .ghee-process-story {
        width: min(900px, calc(100% - 32px));
    }
    .ghee-process-layout {
        grid-template-columns: 1fr;
    }
    .ghee-process-hero-card {
        position: relative;
        top: auto;
        min-height: 520px;
    }
    .ghee-process-hero-card > img {
        width: min(520px, 82%);
    }
    .ghee-process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .single-product-related {
        width: min(900px, calc(100% - 32px));
    }
    .single-product-related .prod-grid {
        justify-content: flex-start;
    }
    .single-product-related .prod-card {
        width: 280px;
    }
}
@media (max-width: 640px) {
    .single-product-hero {
        width: calc(100% - 20px);
        padding-top: 10px;
    }
    .single-product-gallery {
        grid-template-columns: 1fr;
    }
    .single-product-gallery-main {
        min-height: 420px;
    }
    .single-product-gallery-main img,
    .ghee-product-image {
        width: min(320px, 74%);
    }
    .ghee-product-gallery-main {
        min-height: 500px;
    }
    .ghee-hero-seal {
        top: 18px;
        left: 18px;
    }
    .ghee-hero-orbit span {
        font-size: 0.66rem;
        min-height: 30px;
        padding: 0 10px;
    }
    .ghee-hero-orbit span:nth-child(1) {
        top: 18%;
        right: 5%;
    }
    .ghee-hero-orbit span:nth-child(2) {
        left: 5%;
        bottom: 18%;
    }
    .ghee-hero-orbit span:nth-child(3) {
        right: 7%;
        bottom: 10%;
    }
    .ghee-trust-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ghee-product-page .single-product-actions {
        grid-template-columns: 1fr;
    }
    .single-product-actions {
        grid-template-columns: 1fr;
    }
    .single-product-options {
        grid-template-columns: 1fr;
    }
    .ghee-ghost-link {
        width: 100%;
    }
    .single-product-gallery-tile {
        min-height: 220px;
    }
    .single-product-title-row {
        flex-wrap: wrap;
    }
    .single-product-addon {
        grid-template-columns: 56px 1fr;
    }
    .single-product-addon a {
        grid-column: 1 / -1;
        width: 100%;
    }
    .single-product-drawer-head {
        padding: 28px 26px 18px;
    }
    .single-product-drawer-body {
        margin: 0 26px 34px;
        padding-top: 32px;
    }
    .single-product-proof {
        width: calc(100% - 20px);
        padding-bottom: 72px;
    }
    .single-product-proof-hero {
        min-height: auto;
        padding: 44px 16px 0;
    }
    .single-product-proof-hero h2 {
        margin-bottom: 44px;
    }
    .single-product-proof-strip,
    .single-product-standards-grid ul {
        grid-template-columns: 1fr;
    }
    .single-product-proof-strip {
        gap: 20px;
        padding: 24px;
    }
    .single-product-standards-image,
    .single-product-standards-grid {
        min-height: 360px;
    }
    .single-product-standards-grid {
        padding: 34px 28px;
    }
    .single-product-standards-grid li {
        white-space: normal;
    }
    .single-product-standards-grid p {
        margin-top: 34px;
    }
    .single-product-benefits {
        width: calc(100% - 20px);
        padding-bottom: 72px;
    }
    .single-product-benefits-head {
        margin-bottom: 42px;
    }
    .single-product-benefits-layout {
        gap: 40px;
    }
    .single-product-benefits-copy {
        padding-left: 0;
    }
    .single-product-timeline {
        gap: 42px;
        padding-left: 34px;
    }
    .single-product-timeline li {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .single-product-timeline li::before {
        left: -30px;
    }
    .single-product-timeline > li > span {
        width: fit-content;
    }
    .single-product-use-card {
        margin-left: 0;
        grid-template-columns: 44px 1fr;
        padding: 22px;
    }
    .single-product-benefits-media {
        grid-template-columns: 1fr;
    }
    .single-product-benefits-main,
    .single-product-benefits-side figure {
        min-height: 320px;
        border-radius: 18px;
    }
    .single-product-testing {
        margin-bottom: 72px;
    }
    .single-product-testing-inner {
        width: calc(100% - 20px);
        padding: 54px 0;
    }
    .single-product-testing-cards {
        grid-template-columns: 1fr;
    }
    .single-product-testing-cards article {
        min-height: 160px;
    }
    .single-product-faq {
        width: calc(100% - 20px);
        margin-bottom: 72px;
        padding: 24px 18px;
        border-radius: 20px;
    }
    .single-product-faq-list summary {
        min-height: 56px;
        padding: 0 14px;
        font-size: 0.82rem;
    }
    .single-product-faq-list p {
        padding: 0 44px 18px 14px;
        font-size: 0.82rem;
    }
    .single-product-testing-bg {
        width: 105vw;
        inset: -10% auto auto -24%;
    }
    .ghee-ritual-band {
        width: calc(100% - 20px);
        margin: 12px auto 66px;
        gap: 12px;
    }
    .ghee-ritual-band article {
        min-height: 230px;
        border-radius: 18px;
        padding: 26px 22px;
    }
    .ghee-ritual-band span {
        margin-bottom: 34px;
    }
    .ghee-process-story {
        width: calc(100% - 20px);
        padding-bottom: 72px;
    }
    .ghee-process-hero-card {
        min-height: 420px;
        border-radius: 20px;
        padding: 22px;
    }
    .ghee-process-hero-card > img {
        width: min(340px, 96%);
    }
    .ghee-process-hero-note {
        padding: 15px;
    }
    .ghee-process-steps {
        grid-template-columns: 1fr;
    }
    .ghee-process-steps article {
        min-height: 250px;
    }
    .ghee-process-mark {
        width: 150px;
        height: 150px;
    }
    .single-product-related {
        width: calc(100% - 20px);
        padding-bottom: 82px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .single-product-buy,
    .single-product-cart,
    .single-product-accordion-content,
    .single-product-drawer,
    .single-product-drawer-overlay,
    .single-product-addon a {
        transition: none;
    }
    .single-product-buy:hover,
    .single-product-cart:hover,
    .single-product-addon a:hover {
        transform: none;
    }
}
/* =========================================
   FOOTER — PREMIUM FARMLAND SECTION
========================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(239,195,104,0.18), transparent 28%),
        linear-gradient(180deg, #EFF4E8 0%, #FDFCF8 44%, #DDE9CE 100%);
    color: #1C3A13;
    padding: 104px 60px 0;
}
.footer-sky {
    position: absolute;
    inset: 0 0 auto;
    height: 360px;
    pointer-events: none;
    overflow: hidden;
}
.footer-cloud {
    position: absolute;
    width: 168px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    box-shadow:
        38px -18px 0 4px rgba(255,255,255,0.62),
        78px 2px 0 8px rgba(255,255,255,0.48),
        0 18px 38px rgba(28,58,19,0.06);
    filter: blur(0.2px);
}
.footer-cloud-1 {
    top: 58px;
    left: -240px;
    animation: footerCloudDrift 58s linear infinite;
}
.footer-cloud-2 {
    top: 124px;
    left: 38%;
    transform: scale(0.72);
    opacity: 0.72;
    animation: footerCloudDriftSmall 76s linear infinite;
}
.footer-cloud-3 {
    top: 42px;
    left: 72%;
    transform: scale(0.86);
    opacity: 0.64;
    animation: footerCloudDriftSmall 68s linear infinite reverse;
}
.footer-birds {
    position: absolute;
    color: rgba(28,58,19,0.52);
    opacity: 0.58;
}
.footer-birds-1 {
    width: 180px;
    top: 92px;
    left: -210px;
    animation: footerBirdFlight 34s linear infinite;
}
.footer-birds-2 {
    width: 150px;
    top: 172px;
    right: -190px;
    animation: footerBirdFlightReverse 42s linear infinite;
}
.footer-inner {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(420px, 1fr);
    gap: 28px;
}
.footer-brand-panel,
.footer-links-panel,
.footer-app-row {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(28,58,19,0.1);
    backdrop-filter: blur(16px);
}
.footer-brand-panel {
    min-height: 360px;
    padding: 38px;
}
.footer-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    margin-bottom: 32px;
}
.footer-logo span {
    color: #1C3A13;
    font-family: 'Playfair Display', serif;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
}
.footer-logo strong {
    color: #EFC368;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 5px;
    line-height: 1;
    text-transform: uppercase;
}
.footer-brand-panel h2 {
    max-width: 620px;
    color: #1C3A13;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 20px;
}
.footer-brand-panel p {
    max-width: 540px;
    color: #556B52;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 28px;
}
.footer-subscribe {
    display: flex;
    align-items: center;
    width: min(520px, 100%);
    min-height: 58px;
    padding: 6px;
    background: #FDFCF8;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.footer-subscribe input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    color: #1C3A13;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 0 18px;
}
.footer-subscribe input::placeholder {
    color: rgba(85,107,82,0.68);
}
.footer-subscribe button {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #EFC368;
    background: #1C3A13;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.footer-subscribe button svg {
    width: 21px;
    height: 21px;
}
.footer-links-panel {
    padding: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.footer-link-col h3 {
    color: #6B8E23;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.footer-link-col a {
    display: block;
    color: #1C3A13;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
    opacity: 0.76;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.footer-link-col a:hover {
    opacity: 1;
    transform: translateX(3px);
}
.footer-app-row {
    grid-column: 2;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1C3A13;
    background: rgba(239,195,104,0.18);
    border: 1px solid rgba(239,195,104,0.28);
    transition: transform 0.25s ease, background 0.25s ease;
}
.footer-socials a:hover {
    transform: translateY(-3px);
    background: rgba(239,195,104,0.32);
}
.footer-socials svg {
    width: 19px;
    height: 19px;
}
.footer-store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.footer-store-btn {
    min-width: 142px;
    border-radius: 8px;
    padding: 10px 14px;
    color: #FDFCF8;
    background: #1C3A13;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(28,58,19,0.16);
}
.footer-store-btn span,
.footer-store-btn strong {
    display: block;
}
.footer-store-btn span {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    opacity: 0.68;
    margin-bottom: 2px;
}
.footer-store-btn strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
}
.footer-landscape {
    position: relative;
    z-index: 2;
    margin: 26px -60px 0;
    height: 330px;
    overflow: hidden;
}
.footer-landscape svg {
    width: 100%;
    height: 100%;
    display: block;
}
.footer-hill-back {
    animation: footerHillFloat 12s ease-in-out infinite;
}
.footer-hill-front {
    animation: footerHillFloat 15s ease-in-out infinite reverse;
}
.footer-bottom {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(28,58,19,0.1);
    color: rgba(28,58,19,0.68);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}
.footer-bottom a {
    color: rgba(28,58,19,0.76);
    text-decoration: none;
    margin-left: 18px;
}
.footer-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.footer-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.footer-reveal:nth-child(2) { transition-delay: 0.12s; }
.footer-reveal:nth-child(3) { transition-delay: 0.2s; }

@keyframes footerCloudDrift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 520px)); }
}
@keyframes footerCloudDriftSmall {
    from { transform: translateX(0) scale(0.8); }
    to { transform: translateX(-48vw) scale(0.8); }
}
@keyframes footerBirdFlight {
    0% { transform: translateX(0) translateY(0); opacity: 0; }
    10% { opacity: 0.55; }
    50% { transform: translateX(58vw) translateY(-18px); }
    90% { opacity: 0.55; }
    100% { transform: translateX(calc(100vw + 260px)) translateY(10px); opacity: 0; }
}
@keyframes footerBirdFlightReverse {
    0% { transform: translateX(0) translateY(0); opacity: 0; }
    10% { opacity: 0.48; }
    50% { transform: translateX(-52vw) translateY(16px); }
    90% { opacity: 0.48; }
    100% { transform: translateX(calc(-100vw - 240px)) translateY(-8px); opacity: 0; }
}
@keyframes footerHillFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
@media (max-width: 1024px) {
    .site-footer { padding: 84px 40px 0; }
    .footer-inner {
        grid-template-columns: 1fr;
    }
    .footer-app-row {
        grid-column: auto;
    }
    .footer-landscape {
        margin-left: -40px;
        margin-right: -40px;
    }
}
@media (max-width: 640px) {
    .site-footer { padding: 68px 20px 76px; }
    .footer-brand-panel,
    .footer-links-panel,
    .footer-app-row {
        padding: 22px;
    }
    .footer-links-panel {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .footer-app-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .footer-store-buttons {
        justify-content: flex-start;
        width: 100%;
    }
    .footer-store-btn {
        flex: 1;
    }
    .footer-landscape {
        height: 250px;
        margin: 22px -20px 0;
    }
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 0;
    }
    .footer-bottom a {
        margin: 0 18px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-cloud,
    .footer-birds,
    .footer-hill-back,
    .footer-hill-front {
        animation: none;
    }
}

/* =========================================
   FOOTER — DARK PREMIUM REBUILD OVERRIDES
========================================= */
.site-footer {
    padding: 112px 60px 0;
    background:
        radial-gradient(circle at 16% 10%, rgba(239,195,104,0.16), transparent 28%),
        linear-gradient(180deg, #1C3A13 0%, #142A14 58%, #0F210F 100%);
    color: #FDFCF8;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
}
.site-footer .footer-sky {
    height: 310px;
}
.site-footer .footer-cloud {
    width: 190px;
    height: 48px;
    background: rgba(253,252,248,0.18);
    box-shadow:
        42px -15px 0 4px rgba(253,252,248,0.14),
        88px 4px 0 8px rgba(253,252,248,0.1);
    filter: blur(0.4px);
}
.site-footer .footer-cloud-1 {
    top: 54px;
    left: -260px;
}
.site-footer .footer-cloud-2 {
    top: 134px;
    left: 58%;
}
.site-footer .footer-birds {
    color: rgba(253,252,248,0.52);
}
.site-footer .footer-inner {
    grid-template-columns: minmax(320px, 0.95fr) minmax(480px, 1.05fr);
    align-items: start;
    gap: 36px;
}
.site-footer .footer-brand-panel,
.site-footer .footer-links-panel,
.site-footer .footer-app-row {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.site-footer .footer-brand-panel {
    padding: 0;
    min-height: auto;
}
.site-footer .footer-logo span {
    color: #FDFCF8;
}
.site-footer .footer-logo strong {
    color: #EFC368;
}
.site-footer .footer-brand-panel h2 {
    color: #FDFCF8;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.25rem, 4.6vw, 4.6rem);
    max-width: 760px;
}
.site-footer .footer-brand-panel p {
    color: rgba(253,252,248,0.68);
    max-width: 560px;
}
.site-footer .footer-subscribe {
    background: rgba(253,252,248,0.08);
    border-color: rgba(253,252,248,0.16);
    box-shadow: none;
}
.site-footer .footer-subscribe input {
    color: #FDFCF8;
}
.site-footer .footer-subscribe input::placeholder {
    color: rgba(253,252,248,0.48);
}
.site-footer .footer-subscribe button {
    color: #1C3A13;
    background: #EFC368;
}
.site-footer .footer-links-panel {
    padding: 10px 0 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-footer .footer-link-col h3 {
    color: #EFC368;
}
.site-footer .footer-link-col a {
    color: rgba(253,252,248,0.76);
    font-weight: 500;
}
.site-footer .footer-link-col a:hover {
    color: #FDFCF8;
}
.site-footer .footer-app-row {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(253,252,248,0.1);
    padding: 28px 0 0;
    margin-top: 28px;
}
.site-footer .footer-socials a {
    color: #FDFCF8;
    background: rgba(253,252,248,0.08);
    border-color: rgba(253,252,248,0.12);
}
.site-footer .footer-socials a:hover {
    background: rgba(239,195,104,0.18);
}
.site-footer .footer-store-btn {
    color: #1C3A13;
    background: #EFC368;
    box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}
.site-footer .footer-landscape {
    margin-top: 54px;
    height: 300px;
}
.site-footer .footer-bottom {
    border-top-color: rgba(253,252,248,0.1);
    color: rgba(253,252,248,0.58);
}
.site-footer .footer-bottom a {
    color: rgba(253,252,248,0.66);
}

@media (max-width: 1024px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
    }
    .site-footer .footer-app-row {
        grid-column: auto;
    }
}
@media (max-width: 640px) {
    .site-footer {
        padding: 78px 20px 82px;
    }
    .site-footer .footer-brand-panel,
    .site-footer .footer-links-panel,
    .site-footer .footer-app-row {
        padding-left: 0;
        padding-right: 0;
    }
    .site-footer .footer-links-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }
    .site-footer .footer-app-row {
        margin-top: 10px;
    }
    .site-footer .footer-landscape {
        height: 220px;
        margin-top: 36px;
    }
}

/* =========================================
   FOOTER — STATIC PREMIUM REFERENCE STYLE
========================================= */
.site-footer {
    padding: 0;
    background:
        radial-gradient(circle at 50% -12%, rgba(239,195,104,0.16), transparent 30%),
        #183B0F;
    color: #FDFCF8;
    overflow: hidden;
}
.site-footer::before,
.site-footer .footer-sky,
.site-footer .footer-landscape,
.footer-cloud,
.footer-birds {
    display: none;
}
.site-footer .footer-inner {
    max-width: 1080px;
    min-height: 330px;
    margin: 0 auto;
    padding: 72px 24px 76px;
    display: grid;
    grid-template-columns: 1.28fr 1.18fr 0.86fr 1.18fr;
    gap: 62px;
    align-items: start;
}
.footer-newsletter {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 8px;
    padding: 22px 24px;
    border: 1px solid rgba(239,195,104,0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 88% 20%, rgba(239,195,104,0.12), transparent 32%),
        rgba(253,252,248,0.045);
}
.footer-newsletter span {
    display: inline-block;
    color: #EFC368;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.footer-newsletter h3 {
    color: #FDFCF8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}
.footer-newsletter-form {
    display: flex;
    align-items: center;
    width: min(390px, 100%);
    min-height: 50px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(253,252,248,0.08);
    border: 1px solid rgba(253,252,248,0.12);
}
.footer-newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    color: #FDFCF8;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 0 15px;
}
.footer-newsletter-form input::placeholder {
    color: rgba(253,252,248,0.48);
}
.footer-newsletter-form button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #183B0F;
    background: #EFC368;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.footer-newsletter-form button svg {
    width: 19px;
    height: 19px;
}
.site-footer .footer-brand-panel,
.site-footer .footer-contact-panel,
.site-footer .footer-links-panel,
.site-footer .footer-instagram-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    min-height: 68px;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.site-footer .footer-logo img {
    display: block;
    width: 100%;
    max-height: 54px;
    object-fit: contain;
}
.footer-tagline {
    display: inline-block;
    color: rgba(239,195,104,0.82);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.site-footer .footer-brand-panel p {
    max-width: 230px;
    color: rgba(253,252,248,0.72);
    font-size: 12px;
    line-height: 1.75;
    margin: 0 0 30px;
}
.site-footer .footer-brand-panel h2,
.site-footer .footer-subscribe,
.site-footer .footer-app-row {
    display: none;
}
.site-footer .footer-socials {
    gap: 14px;
}
.site-footer .footer-socials a {
    width: auto;
    height: auto;
    color: #EFC368;
    background: transparent;
    border: 0;
}
.site-footer .footer-socials svg {
    width: 15px;
    height: 15px;
}
.site-footer .footer-contact-panel h3,
.site-footer .footer-link-col h3,
.site-footer .footer-instagram-panel h3 {
    color: #FDFCF8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 20px;
}
.footer-contact-item {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 15px;
}
.footer-contact-item span {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #183B0F;
    background: #EFC368;
}
.footer-contact-item svg {
    width: 14px;
    height: 14px;
}
.footer-contact-item p {
    color: rgba(253,252,248,0.72);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
.site-footer .footer-links-panel {
    display: block;
}
.site-footer .footer-link-col a {
    position: relative;
    color: rgba(253,252,248,0.72);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 13px;
    padding-left: 10px;
}
.site-footer .footer-link-col a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #EFC368;
    border-right: 1px solid #EFC368;
    transform: rotate(45deg);
}
.site-footer .footer-link-col a:hover {
    color: #FDFCF8;
    transform: translateX(2px);
}
.footer-insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 11px;
}
.footer-insta-grid a {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(253,252,248,0.08);
    border: 1px solid rgba(239,195,104,0.16);
}
.footer-insta-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-insta-grid a:hover img {
    transform: scale(1.06);
    opacity: 0.88;
}
.site-footer .footer-bottom {
    max-width: none;
    min-height: 74px;
    margin: 0;
    padding: 0 calc((100% - 1080px) / 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F4F4EF;
    border: 0;
    color: rgba(28,58,19,0.52);
    font-size: 11px;
}
.footer-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 30px;
    margin-left: 10px;
    padding: 0 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(28,58,19,0.08);
    box-shadow: 0 4px 14px rgba(28,58,19,0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
}
.footer-payment-visa { color: #173EA5; font-size: 14px; }
.footer-payment-master { color: #E75A24; font-size: 18px; letter-spacing: -5px; padding-right: 14px; }
.footer-payment-paypal { color: #245AA8; font-size: 13px; }
.footer-payment-upi {
    color: #F08A00;
    min-width: 42px;
    font-size: 10px;
}
.footer-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (max-width: 1024px) {
    .site-footer .footer-inner {
        max-width: 760px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px;
    }
    .footer-newsletter {
        align-items: flex-start;
        flex-direction: column;
    }
    .site-footer .footer-bottom {
        padding: 0 40px;
    }
}
@media (max-width: 640px) {
    .site-footer {
        padding: 0;
    }
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 54px 24px;
    }
    .footer-newsletter {
        padding: 20px;
    }
    .footer-newsletter-form {
        width: 100%;
    }
    .site-footer .footer-brand-panel p {
        max-width: 100%;
    }
    .site-footer .footer-bottom {
        min-height: auto;
        padding: 22px 24px 96px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
    .footer-payment {
        margin: 0 8px 8px 0;
    }
}

/* =========================================
   FOOTER — THEME MATCHED PREMIUM VERSION
========================================= */
.site-footer {
    position: relative;
    padding: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(239,195,104,0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(168,198,108,0.11), transparent 26%),
        linear-gradient(180deg, #1C3A13 0%, #142A14 100%);
    color: #FDFCF8;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(28,58,19,0.92), rgba(28,58,19,0.76)),
        radial-gradient(circle at 50% 16%, rgba(239,195,104,0.22), transparent 34%),
        url("assets/images/footer-background.png") center center / cover no-repeat;
    opacity: 0.4;
    pointer-events: none;
}
.site-footer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 74px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,195,104,0.32), transparent);
    pointer-events: none;
}
.site-footer .footer-inner {
    position: relative;
    z-index: 2;
    max-width: 92%;
    min-height: auto;
    margin: 0 auto;
    padding: 112px 28px 122px;
    display: grid;
    grid-template-columns: 1.18fr 1.08fr 0.82fr 0.9fr 1.1fr;
    gap: 24px;
    align-items: stretch;
}
.site-footer .footer-newsletter {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0 0 10px;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 86% 20%, rgba(239,195,104,0.14), transparent 30%),
        rgba(253,252,248,0.065);
    border: 1px solid rgba(253,252,248,0.1);
    box-shadow: 0 24px 70px rgba(0,0,0,0.12);
}
.site-footer .footer-newsletter h3 {
    color: #FDFCF8;
}
.site-footer .footer-newsletter-form {
    background: rgba(253,252,248,0.08);
    border-color: rgba(253,252,248,0.16);
}
.site-footer .footer-brand-panel,
.site-footer .footer-contact-panel,
.site-footer .footer-links-panel,
.site-footer .footer-quick-panel,
.site-footer .footer-instagram-panel {
    min-height: 292px;
    padding: 30px;
    border-radius: 8px;
    background: rgba(253,252,248,0.055);
    border: 1px solid rgba(253,252,248,0.1);
    box-shadow: 0 22px 60px rgba(0,0,0,0.1);
    backdrop-filter: none;
}
.site-footer .footer-logo-text {
    color: #EFC368;
}
.site-footer .footer-logo strong {
    color: rgba(253,252,248,0.68);
}
.site-footer .footer-tagline,
.site-footer .footer-contact-panel h3,
.site-footer .footer-link-col h3,
.site-footer .footer-quick-panel h3,
.site-footer .footer-instagram-panel h3 {
    color: #EFC368;
}
.site-footer .footer-brand-panel p,
.footer-contact-item p,
.site-footer .footer-link-col a {
    color: rgba(253,252,248,0.72);
}
.site-footer .footer-socials a {
    color: #EFC368;
    background: rgba(239,195,104,0.1);
    border: 1px solid rgba(239,195,104,0.16);
    width: 30px;
    height: 30px;
}
.site-footer .footer-socials a:hover {
    background: rgba(239,195,104,0.2);
}
.footer-contact-item span {
    color: #1C3A13;
    background: #EFC368;
}
.footer-insta-grid a {
    border-color: rgba(239,195,104,0.16);
    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.site-footer .footer-bottom {
    position: relative;
    z-index: 2;
    min-height: 86px;
    padding: 0 max(24px, calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: #FDFCF8;
    border-top: 1px solid rgba(28,58,19,0.08);
    color: rgba(28,58,19,0.78);
    font-weight: 600;
    backdrop-filter: none;
}
.site-footer .footer-sky,
.site-footer .footer-landscape,
.site-footer .footer-cloud,
.site-footer .footer-birds {
    display: none;
}

@media (max-width: 1024px) {
    .site-footer .footer-inner {
        max-width: 820px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        padding: 92px 32px 100px;
    }
    .site-footer .footer-bottom {
        padding: 0 32px;
    }
}
@media (max-width: 640px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
        padding: 68px 20px 84px;
    }
    .site-footer .footer-newsletter {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }
    .site-footer .footer-newsletter-form {
        width: 100%;
    }
    .site-footer .footer-brand-panel,
    .site-footer .footer-contact-panel,
    .site-footer .footer-links-panel,
    .site-footer .footer-quick-panel,
    .site-footer .footer-instagram-panel {
        min-height: auto;
        padding: 22px;
    }
    .site-footer .footer-bottom {
        padding: 22px 20px 96px;
    }
}

/* Footer-only cloud and bird motion */
.footer-motion-sky {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 210px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.footer-motion-cloud {
    position: absolute;
    width: 100px;
    height: 35px;
    border-radius: 50px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 38px rgba(0,0,0,0.1);
}
.footer-motion-cloud::before,
.footer-motion-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
}
.footer-motion-cloud::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}
.footer-motion-cloud::after {
    width: 40px;
    height: 40px;
    top: -18px;
    left: 45px;
}
.footer-motion-cloud-1 {
    top: 44px;
    left: -150px;
    animation: footerCloudMove 32s linear infinite;
}
.footer-motion-cloud-2 {
    top: 70px;
    left: -130px;
    width: 80px;
    height: 28px;
    opacity: 0.76;
    animation: footerCloudMove 38s linear infinite 8s;
}
.footer-motion-cloud-2::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 12px;
}
.footer-motion-cloud-2::after {
    width: 32px;
    height: 32px;
    top: -14px;
    left: 38px;
}
.footer-motion-cloud-3 {
    top: 24px;
    left: -180px;
    width: 118px;
    height: 38px;
    opacity: 0.9;
    animation: footerCloudMove 44s linear infinite 15s;
}
.footer-motion-cloud-3::before {
    width: 58px;
    height: 58px;
    top: -28px;
    left: 18px;
}
.footer-motion-cloud-3::after {
    width: 46px;
    height: 46px;
    top: -20px;
    left: 58px;
}
.footer-motion-cloud-4 {
    top: 92px;
    left: -130px;
    width: 72px;
    height: 26px;
    opacity: 0.82;
    animation: footerCloudMove 34s linear infinite 22s;
}
.footer-motion-cloud-4::before {
    width: 36px;
    height: 36px;
    top: -18px;
    left: 10px;
}
.footer-motion-cloud-4::after {
    width: 30px;
    height: 30px;
    top: -13px;
    left: 34px;
}
.footer-bird-flock {
    position: absolute;
    left: -140px;
    color: rgba(239,195,104,0.72);
    white-space: nowrap;
    animation: footerBirdsFly 22s linear infinite;
}
.footer-bird-flock-1 {
    top: 34px;
    animation-duration: 20s;
}
.footer-bird-flock-2 {
    top: 70px;
    animation-duration: 26s;
    animation-delay: 7s;
}
.footer-cloud-set {
    position: absolute;
    top: 46px;
    left: -260px;
    width: 220px;
    height: 90px;
    animation: footerCloudSetMove 36s linear infinite 4s;
}
.footer-cloud-set .footer-motion-cloud {
    animation: none;
}
.footer-motion-cloud-set-a {
    top: 20px;
    left: 0;
    width: 118px;
    height: 38px;
    opacity: 0.98;
}
.footer-motion-cloud-set-a::before {
    width: 58px;
    height: 58px;
    top: -28px;
    left: 18px;
}
.footer-motion-cloud-set-a::after {
    width: 46px;
    height: 46px;
    top: -20px;
    left: 58px;
}
.footer-motion-cloud-set-b {
    top: 34px;
    left: 78px;
    width: 88px;
    height: 30px;
    opacity: 0.9;
}
.footer-motion-cloud-set-b::before {
    width: 42px;
    height: 42px;
    top: -20px;
    left: 12px;
}
.footer-motion-cloud-set-b::after {
    width: 34px;
    height: 34px;
    top: -14px;
    left: 42px;
}
.footer-bird-flock-cloud {
    top: 0;
    left: 142px;
    color: rgba(239,195,104,0.8);
    animation: none;
}
.footer-motion-bird {
    display: inline-block;
    margin-right: 12px;
}
.footer-motion-bird svg {
    display: block;
    animation: footerBirdFlap 0.34s ease-in-out infinite alternate;
}
.footer-motion-bird:nth-child(2) svg { animation-delay: 0.1s; }
.footer-motion-bird:nth-child(3) svg { animation-delay: 0.2s; }


.footer-motion-bird svg {
    display: block;
    animation: footerBirdFlap 0.48s ease-in-out infinite alternate;
}
.footer-motion-bird:nth-child(2) svg { animation-delay: 0.1s; }
.footer-motion-bird:nth-child(3) svg { animation-delay: 0.2s; }

@keyframes footerCloudMove {
    0% { transform: translateX(-160px); }
    100% { transform: translateX(calc(100vw + 320px)); }
}
@keyframes footerCloudSetMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 520px)); }
}
@keyframes footerBirdsFly {
    0% { transform: translateX(-160px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(calc(100vw + 250px)); opacity: 0; }
}
@keyframes footerBirdFlap {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-motion-cloud,
    .footer-bird-flock,
    .footer-motion-bird svg {
        animation: none;
    }
}

/* =========================================
   ABOUT PAGE — PREMIUM STORY LAYOUT
========================================= */
.about-page {
    background:
        radial-gradient(circle at 8% 6%, rgba(239,195,104,0.1), transparent 25%),
        linear-gradient(180deg, #FDFCF8 0%, #F6FAF1 44%, #FDFCF8 100%);
    color: var(--text-dark);
}
.about-page section {
    width: min(1220px, calc(100% - 72px));
    margin: 0 auto;
}
.about-page section + section {
    position: relative;
}
.about-page section + section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(680px, 82vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(28,58,19,0.12), rgba(239,195,104,0.26), transparent);
}
.about-kicker {
    display: inline-block;
    color: #6b8e23;
    background: rgba(107,142,35,0.08);
    border: 1px solid rgba(107,142,35,0.14);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.about-section-head {
    margin: 0 0 34px;
    max-width: 680px;
}
.about-section-head h2 {
    margin-top: 12px;
    font-family: var(--font-heading);
    font-size: clamp(1.78rem, 3vw, 2.46rem);
    line-height: 1.14;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}
.about-hero {
    padding: 88px 0 56px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.about-hero-inner {
    padding: clamp(18px, 2vw, 28px) 0;
}
.about-hero-inner h1 {
    margin: 14px 0 16px;
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: clamp(2.55rem, 5.7vw, 4.85rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    max-width: 720px;
}
.about-hero-inner p {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.4vw, 1.08rem);
    line-height: 1.74;
    max-width: 60ch;
}
.about-hero-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.about-btn-primary,
.about-btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.about-btn-primary {
    background: var(--color-primary);
    color: var(--color-secondary);
    border: 1px solid rgba(28,58,19,0.22);
}
.about-btn-secondary {
    background: rgba(255,255,255,0.65);
    color: var(--color-primary);
    border: 1px solid rgba(28,58,19,0.15);
}
.about-btn-primary:hover,
.about-btn-secondary:hover {
    transform: translateY(-1px);
}
.about-btn-primary:hover {
    box-shadow: 0 14px 28px rgba(28,58,19,0.18);
}
.about-btn-play {
    gap: 10px;
    padding-left: 12px;
}
.about-play-icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(239,195,104,0.34), 0 10px 26px rgba(28,58,19,0.18);
}
.about-play-icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1px solid rgba(239,195,104,0.46);
    animation: aboutPlayPulse 3.8s ease-out infinite;
}
.about-play-icon::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor;
}
.about-hero-media-wrap {
    display: grid;
    gap: 16px;
}
.about-hero-media {
    position: relative;
    min-height: clamp(340px, 38vw, 510px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(28,58,19,0.1), rgba(28,58,19,0.42)),
        url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6?auto=format&fit=crop&q=84&w=960") center / cover;
    border: 1px solid rgba(28,58,19,0.12);
    box-shadow: 0 22px 46px rgba(28,58,19,0.14);
}
.about-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(28,58,19,0.78), rgba(28,58,19,0.16) 52%, rgba(239,195,104,0.26)),
        radial-gradient(circle at 82% 18%, rgba(239,195,104,0.38), transparent 34%);
    mix-blend-mode: multiply;
}
.about-hero-media::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(253,252,248,0.28);
    border-radius: 6px;
    pointer-events: none;
}
.about-media-label,
.about-media-caption {
    position: absolute;
    left: 28px;
    z-index: 1;
    color: #FDFCF8;
}
.about-media-label {
    top: 26px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.about-media-caption {
    right: 28px;
    bottom: 26px;
    max-width: 34ch;
    font-family: var(--font-heading);
    font-size: clamp(1.08rem, 1.8vw, 1.38rem);
    line-height: 1.32;
}
.about-media-play {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
}
.about-hero-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.about-hero-stat-grid article {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 8px;
    padding: 18px;
}
.about-hero-stat-grid h3 {
    color: var(--color-primary);
    font-size: 1.75rem;
    line-height: 1;
}
.about-hero-stat-grid p {
    margin-top: 10px;
    color: var(--text-muted);
    line-height: 1.55;
    font-size: 0.9rem;
}
.about-origin,
.about-journey,
.about-difference,
.about-founder,
.about-trust,
.about-story-cta {
    padding: 58px 0;
}
.about-origin-grid,
.about-pillars,
.about-trust-grid {
    display: grid;
    gap: 18px;
}
.about-origin-grid,
.about-trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-origin-grid article,
.about-pillars article,
.about-trust-grid article {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(28,58,19,0.055);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 10px 24px rgba(28,58,19,0.045);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.about-origin-grid article::before,
.about-pillars article::before,
.about-trust-grid article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, rgba(239,195,104,0.05), rgba(239,195,104,0.55), rgba(107,142,35,0.22));
    transition: opacity 0.28s ease;
}
.about-origin-grid article:hover,
.about-pillars article:hover,
.about-trust-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(28,58,19,0.1);
    box-shadow: 0 14px 30px rgba(28,58,19,0.07);
}
.about-origin-grid article:hover::before,
.about-pillars article:hover::before,
.about-trust-grid article:hover::before {
    opacity: 1;
}
.about-card-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    color: var(--color-primary);
    background: rgba(239,195,104,0.24);
    border: 1px solid rgba(239,195,104,0.36);
}
.about-card-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.about-origin-grid h3,
.about-pillars h3,
.about-trust-grid h3 {
    color: var(--color-primary);
    font-size: 1.08rem;
    margin-bottom: 10px;
}
.about-origin-grid p,
.about-pillars p,
.about-trust-grid p {
    color: var(--text-muted);
    line-height: 1.72;
    font-size: 0.95rem;
    max-width: 62ch;
}
.about-journey-stage {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(340px, 0.72fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: stretch;
}
.about-timeline {
    position: relative;
    list-style: none;
    display: grid;
    gap: 16px;
}
.about-timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 35px;
    width: 1px;
    background: linear-gradient(180deg, rgba(239,195,104,0.1), rgba(28,58,19,0.26), rgba(239,195,104,0.12));
}
.about-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: stretch;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(28,58,19,0.06);
    border-radius: 8px;
    padding: 18px;
}
.about-timeline li:nth-child(even) {
    background: rgba(242,247,236,0.76);
}
.about-timeline li > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    align-self: start;
    font-weight: 800;
    color: var(--color-secondary);
    background: var(--color-primary);
    border: 1px solid rgba(239,195,104,0.36);
    box-shadow: 0 0 0 8px #FDFCF8;
}
.about-timeline li > span::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(239,195,104,0.18);
}
.about-timeline li > span i {
    font-style: normal;
    font-size: 0.78rem;
}
.about-timeline h3 {
    color: var(--color-primary);
    margin-bottom: 6px;
    font-size: 1.03rem;
}
.about-timeline p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 64ch;
}
.about-journey-media {
    position: sticky;
    top: 24px;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(28,58,19,0.08), rgba(28,58,19,0.48)),
        url("https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&q=84&w=820") center / cover;
    border: 1px solid rgba(28,58,19,0.12);
    box-shadow: 0 18px 38px rgba(28,58,19,0.12);
}
.about-journey-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(28,58,19,0.74), rgba(28,58,19,0.18) 54%, rgba(239,195,104,0.28)),
        radial-gradient(circle at 82% 16%, rgba(239,195,104,0.34), transparent 34%);
    mix-blend-mode: multiply;
}
.about-journey-media::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(253,252,248,0.28);
    border-radius: 6px;
    pointer-events: none;
}
.about-journey-seal {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 0 0 10px rgba(239,195,104,0.15), 0 18px 34px rgba(28,58,19,0.18);
}
.about-founder-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: clamp(20px, 4vw, 42px);
    align-items: center;
    background:
        radial-gradient(circle at 84% 18%, rgba(239,195,104,0.12), transparent 34%),
        linear-gradient(180deg, #1C3A13 0%, #142A14 100%);
    border-radius: 8px;
    border: 1px solid rgba(239,195,104,0.24);
    padding: clamp(24px, 4vw, 46px);
    box-shadow: 0 22px 52px rgba(28,58,19,0.14);
}
.about-founder-mark {
    width: 112px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239,195,104,0.26);
    border-radius: 999px 999px 10px 10px;
    background:
        linear-gradient(180deg, rgba(253,252,248,0.12), rgba(253,252,248,0.03)),
        radial-gradient(circle at 50% 22%, rgba(239,195,104,0.2), transparent 45%);
}
.about-founder-mark img {
    width: 78px;
    max-height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}
.about-founder-card .about-kicker {
    color: var(--color-secondary);
    background: rgba(239,195,104,0.12);
    border-color: rgba(239,195,104,0.3);
}
.about-founder blockquote {
    margin: 16px 0 14px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(1.34rem, 2.3vw, 1.86rem);
    line-height: 1.58;
    font-weight: 500;
    max-width: 820px;
}
.about-sign {
    color: rgba(253,252,248,0.76);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
.about-story-cta {
    margin-top: 0;
    margin-bottom: 86px;
    text-align: center;
    padding: 34px 0 74px;
}
.about-story-cta a {
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(28,58,19,0.22);
}
.about-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.about-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.about-reveal:nth-of-type(2) { transition-delay: 0.06s; }
.about-reveal:nth-of-type(3) { transition-delay: 0.1s; }
.about-reveal:nth-of-type(4) { transition-delay: 0.14s; }
.about-reveal:nth-of-type(5) { transition-delay: 0.18s; }
.about-reveal:nth-of-type(6) { transition-delay: 0.22s; }
@keyframes aboutPlayPulse {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    28% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}
@media (max-width: 1024px) {
    .about-page section {
        width: min(920px, calc(100% - 48px));
    }
    .about-hero {
        grid-template-columns: 1fr;
    }
    .about-hero-media {
        min-height: 420px;
    }
    .about-journey-stage {
        grid-template-columns: 1fr;
    }
    .about-journey-media {
        position: relative;
        top: auto;
        min-height: 380px;
    }
    .about-origin-grid,
    .about-pillars,
    .about-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .about-page section {
        width: calc(100% - 32px);
    }
    .about-hero {
        padding-top: 62px;
    }
    .about-hero-inner h1 {
        font-size: clamp(2.35rem, 12vw, 3.2rem);
    }
    .about-hero-media {
        min-height: 330px;
    }
    .about-media-label,
    .about-media-caption {
        left: 22px;
    }
    .about-media-caption {
        right: 22px;
    }
    .about-hero-stat-grid {
        grid-template-columns: 1fr;
    }
    .about-journey-media {
        min-height: 320px;
    }
    .about-journey-seal {
        top: 22px;
        right: 22px;
        width: 70px;
        height: 70px;
        font-size: 0.72rem;
    }
    .about-origin,
    .about-journey,
    .about-difference,
    .about-founder,
    .about-trust,
    .about-story-cta {
        padding: 34px 0;
    }
    .about-origin-grid,
    .about-pillars,
    .about-trust-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .about-timeline li {
        grid-template-columns: 58px 1fr;
        gap: 10px;
        padding: 14px;
    }
    .about-timeline::before {
        left: 29px;
    }
    .about-founder-card {
        grid-template-columns: 1fr;
    }
    .about-founder-mark {
        width: 96px;
        height: 126px;
    }
    .about-story-cta {
        margin-bottom: 72px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .about-reveal,
    .about-btn-primary,
    .about-btn-secondary,
    .about-origin-grid article,
    .about-pillars article,
    .about-trust-grid article {
        transition: none;
    }
    .about-reveal {
        opacity: 1;
        transform: none;
    }
    .about-btn-primary:hover,
    .about-btn-secondary:hover,
    .about-origin-grid article:hover,
    .about-pillars article:hover,
    .about-trust-grid article:hover {
        transform: none;
    }
    .about-play-icon::before {
        animation: none;
    }
}

/* =========================================
   INDEX TYPOGRAPHY ALIGNMENT - MAIN CONTENT
========================================= */
.all-products-page,
.single-product-page,
.checkout-page,
.legal-page,
.contact-page,
.coming-soon-page,
.journal-page,
.journal-detail-page,
.about-page {
    font-family: var(--font-body);
}
.all-products-page h1,
.all-products-page h2,
.all-products-page h3,
.single-product-page h1,
.single-product-page h2,
.single-product-page h3,
.checkout-page h1,
.checkout-page h2,
.checkout-page h3,
.legal-page h1,
.legal-page h2,
.legal-page h3,
.contact-page h1,
.contact-page h2,
.contact-page h3,
.coming-soon-page h1,
.coming-soon-page h2,
.coming-soon-page h3,
.journal-page h1,
.journal-page h2,
.journal-page h3,
.journal-detail-page h1,
.journal-detail-page h2,
.journal-detail-page h3,
.about-page h1,
.about-page h2,
.about-page h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}
.all-products-page p,
.single-product-page p,
.checkout-page p,
.legal-page p,
.legal-page li,
.contact-page p,
.coming-soon-page p,
.journal-page p,
.journal-detail-page p,
.about-page p,
.about-page li {
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.65;
}
.checkout-kicker,
.legal-kicker,
.contact-kicker,
.coming-soon-kicker,
.journal-kicker,
.journal-category,
.about-kicker,
.blog-eyebrow,
.shop-eyebrow,
.single-product-kicker,
.ghee-hero-kicker,
.ghee-process-story-head span,
.ghee-process-hero-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.checkout-hero h1,
.legal-hero h1,
.contact-hero h1,
.journal-hero h1,
.journal-article-hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.14;
}
.checkout-hero p,
.legal-hero p,
.contact-hero p,
.journal-hero p,
.journal-article-hero p,
.journal-featured p,
.journal-card p,
.coming-soon-copy p {
    color: #556B52;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
}
.checkout-panel h2,
.checkout-summary h3,
.legal-content h2,
.faq-list h2,
.contact-form h2,
.contact-location h2,
.journal-featured h2,
.journal-card h2,
.journal-section-head h2,
.journal-newsletter h2,
.journal-article-body h2 {
    font-weight: 800;
}
.checkout-panel p,
.legal-content p,
.legal-content li,
.faq-list p,
.contact-info-grid p,
.contact-location p,
.contact-form-head p,
.journal-article-body p,
.journal-article-note li,
.journal-takeaway p {
    color: #556B52;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}
.all-product-info h2 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.16;
}
.all-product-info p {
    color: #556B52;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}
.all-product-info strong {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
}
.all-product-status,
.all-product-save,
.all-product-primary,
.all-product-secondary {
    font-family: var(--font-body);
}
.single-product-summary h1 {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.12;
}
.single-product-description,
.single-product-subscribe,
.single-product-guarantee,
.single-product-accordion-content,
.single-product-accordion-panel li,
.single-product-addon p,
.single-product-proof-strip p,
.single-product-standards-grid p,
.single-product-benefits-head p,
.single-product-timeline li li,
.single-product-use-card p,
.single-product-testing-copy p,
.single-product-testing-cards p,
.single-product-faq-copy p,
.single-product-faq-list p {
    color: #556B52;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
}
.single-product-price,
.single-product-addon h2,
.single-product-proof-hero h2,
.single-product-benefits-head h2,
.single-product-testing-copy h2,
.single-product-faq-copy h2,
.single-product-drawer-head h2,
.single-product-drawer-body h3 {
    font-family: var(--font-heading);
    font-weight: 800;
}
.single-product-buy,
.single-product-cart,
.single-product-addon a,
.single-product-accordion-trigger,
.single-product-source-link {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
}
.ghee-ritual-band h2,
.ghee-process-story-head h2 {
    font-weight: 800;
    line-height: 1.14;
}
.ghee-ritual-band p,
.ghee-process-story-head p,
.ghee-process-hero-note span,
.ghee-process-steps p {
    color: #556B52;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}
.ghee-ritual-band article:first-child p,
.ghee-process-hero-note span {
    color: rgba(255,248,231,0.78);
}
.ghee-process-steps h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
}
.coming-soon-copy h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.14;
}
.coming-soon-visual strong,
.coming-soon-categories h2,
.coming-soon-timeline strong {
    font-family: var(--font-heading);
    font-weight: 800;
}
.coming-soon-visual small,
.coming-soon-categories p,
.coming-soon-timeline p {
    color: #556B52;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}
.journal-card h2 {
    font-size: 20px;
    line-height: 1.22;
}
.journal-article-body .journal-article-lead {
    color: #556B52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.journal-tags a,
.blog-read-link,
.journal-read,
.journal-newsletter button {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
}
.about-section-head h2,
.about-hero-inner h1 {
    font-weight: 800;
    line-height: 1.14;
}
.about-hero-inner p,
.about-origin-grid p,
.about-pillars p,
.about-trust-grid p,
.about-timeline p,
.about-hero-stat-grid p {
    color: #556B52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.about-founder blockquote {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.58;
}
.single-product-testing-copy p {
    color: rgba(253,252,248,0.78);
}
@media (max-width: 640px) {
    .single-product-summary h1 {
        font-size: clamp(1.55rem, 8vw, 2rem);
    }
    .checkout-hero h1,
    .legal-hero h1,
    .contact-hero h1,
    .journal-hero h1,
    .journal-article-hero h1,
    .coming-soon-copy h1 {
        font-size: clamp(1.85rem, 9vw, 2.45rem);
    }
}

/* =========================================
   ORDER SUMMARY PAGE
========================================= */
.order-header-link {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.order-header-link:hover {
    color: #7A8F45;
}
.order-summary-page {
    min-height: 100vh;
    padding: 54px 0 88px;
    background:
        radial-gradient(circle at 10% 5%, rgba(239,195,104,0.14), transparent 27%),
        radial-gradient(circle at 92% 18%, rgba(211,250,153,0.14), transparent 30%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 44%, #EEF4E6 100%);
    color: var(--color-primary);
    font-family: var(--font-body);
}
.order-summary-hero,
.order-summary-form {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.order-summary-hero {
    position: relative;
    padding: 0 190px 34px 0;
}
.order-summary-kicker,
.order-panel-heading > span,
.order-panel-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(239,195,104,0.2);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.order-summary-hero h1 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.14;
}
.order-summary-hero > p {
    max-width: 62ch;
    margin: 0;
    color: #556B52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.order-security-pill {
    position: absolute;
    top: 10px;
    right: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.68);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(28,58,19,0.06);
}
.order-security-pill svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 1.8;
}
.order-summary-form {
    display: grid;
    gap: 18px;
}
.order-summary-primary {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr);
    gap: 20px;
    align-items: start;
}
.order-address-card,
.order-total-card,
.order-checkout-steps {
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 22px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 20px 52px rgba(28,58,19,0.065);
    backdrop-filter: blur(12px);
}
.order-address-card,
.order-total-card {
    padding: 24px;
}
.order-total-card {
    position: sticky;
    top: 24px;
}
.order-panel-heading {
    margin-bottom: 22px;
}
.order-panel-heading h2 {
    margin: 12px 0 6px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.18;
}
.order-panel-heading p {
    margin: 0;
    color: #556B52;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}
.order-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.order-field-wide {
    grid-column: 1 / -1;
}
.order-address-grid label,
.order-customer-panel > label:not(.order-choice) {
    display: grid;
    gap: 7px;
}
.order-address-grid label > span,
.order-customer-panel > label > span {
    color: rgba(28,58,19,0.68);
    font-size: 11px;
    font-weight: 700;
}
.order-address-grid input,
.order-address-grid select,
.order-customer-panel input[type="email"],
.order-customer-panel input[type="password"] {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(28,58,19,0.13);
    border-radius: 12px;
    outline: 0;
    padding: 0 14px;
    color: var(--color-primary);
    background: rgba(253,252,248,0.92);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.order-address-grid select {
    cursor: pointer;
}
.order-address-grid input:focus,
.order-address-grid select:focus,
.order-customer-panel input[type="email"]:focus,
.order-customer-panel input[type="password"]:focus {
    border-color: var(--color-secondary);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(239,195,104,0.14);
}
.order-total-lines {
    display: grid;
    gap: 13px;
    padding: 17px 0;
    border-top: 1px solid rgba(28,58,19,0.09);
    border-bottom: 1px solid rgba(28,58,19,0.09);
}
.order-total-lines div,
.order-payable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.order-total-lines span {
    color: #556B52;
    font-size: 12px;
    font-weight: 500;
}
.order-total-lines strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
}
.order-payable {
    margin: 18px -10px 0;
    padding: 18px 14px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 12%, rgba(239,195,104,0.28), transparent 38%),
        var(--color-primary);
    color: #FDFCF8;
}
.order-payable > span {
    font-size: 12px;
    font-weight: 600;
}
.order-payable strong {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
}
.order-payable small {
    margin-right: 4px;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
}
.order-assurance {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}
.order-assurance span {
    position: relative;
    padding-left: 18px;
    color: #556B52;
    font-size: 11px;
    font-weight: 600;
}
.order-assurance span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.34em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(239,195,104,0.14);
}
.order-payment-button,
.order-secondary-button {
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}
.order-payment-button {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-secondary);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(184,121,36,0.17);
}
.order-payment-button strong {
    padding-left: 18px;
    border-left: 1px solid rgba(28,58,19,0.18);
    font-family: var(--font-heading);
    font-size: 14px;
}
.order-payment-button:hover,
.order-secondary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(28,58,19,0.15);
}
.order-checkout-steps {
    overflow: hidden;
    padding: 8px;
}
.order-step {
    border-bottom: 1px solid rgba(28,58,19,0.09);
}
.order-step:last-child {
    border-bottom: 0;
}
.order-step summary {
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}
.order-step summary::-webkit-details-marker {
    display: none;
}
.order-step summary::after {
    content: "+";
    grid-column: 3;
    grid-row: 1;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(28,58,19,0.06);
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 500;
}
.order-step[open] summary::after {
    content: "−";
    color: var(--color-primary);
    background: var(--color-secondary);
}
.order-step-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 10px;
    font-weight: 800;
}
.order-step summary > span:nth-child(2) {
    display: grid;
    gap: 4px;
}
.order-step summary strong {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
}
.order-step summary small {
    color: #556B52;
    font-size: 11px;
    font-weight: 500;
}
.order-step-content {
    margin: 0 16px 16px 68px;
    padding: 20px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(248,243,231,0.76), rgba(238,244,230,0.72));
}
.order-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.order-customer-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(28,58,19,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
}
.order-customer-panel h3 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 800;
}
.order-customer-panel p,
.order-step-note {
    margin: 0;
    color: #556B52;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
}
.order-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
}
.order-choice input,
.order-payment-methods input {
    accent-color: var(--color-primary);
}
.order-secondary-button {
    min-height: 44px;
    margin-top: 4px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-secondary);
    font-size: 12px;
    font-weight: 800;
}
.order-forgot-link {
    width: fit-content;
    color: #6B7D55;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.order-forgot-link:hover {
    color: var(--color-primary);
}
.order-payment-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.order-payment-methods label {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 14px;
    background: rgba(255,255,255,0.76);
    cursor: pointer;
}
.order-payment-methods label > span {
    display: grid;
    gap: 4px;
}
.order-payment-methods strong {
    color: var(--color-primary);
    font-size: 12px;
}
.order-payment-methods small {
    color: #556B52;
    font-size: 10px;
    line-height: 1.4;
}
.order-summary-footer {
    margin-top: 0;
}
.order-summary-footer .footer-inner {
    grid-template-columns: 1.1fr 1fr 0.8fr 0.85fr 0.8fr;
}
.order-summary-footer .footer-contact-item > span {
    color: var(--color-secondary);
    font-size: 9px;
}
.order-summary-footer .footer-instagram-panel > p {
    margin: 0 0 14px;
    color: rgba(253,252,248,0.66);
    font-size: 12px;
    line-height: 1.6;
}
.order-footer-support {
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
@media (max-width: 980px) {
    .order-summary-primary {
        grid-template-columns: 1fr;
    }
    .order-total-card {
        position: relative;
        top: auto;
    }
    .order-summary-footer .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .order-summary-page {
        padding: 38px 0 72px;
    }
    .order-summary-hero,
    .order-summary-form {
        width: calc(100% - 24px);
    }
    .order-summary-hero {
        padding-right: 0;
    }
    .order-security-pill {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 18px;
    }
    .order-address-grid,
    .order-customer-grid,
    .order-payment-methods {
        grid-template-columns: 1fr;
    }
    .order-field-wide {
        grid-column: auto;
    }
    .order-address-card,
    .order-total-card {
        padding: 18px;
        border-radius: 18px;
    }
    .order-step summary {
        grid-template-columns: 34px 1fr;
        padding: 12px 8px;
    }
    .order-step summary::after {
        width: 28px;
        height: 28px;
    }
    .order-step-number {
        width: 34px;
        height: 34px;
    }
    .order-step-content {
        margin: 0 6px 12px;
        padding: 14px;
    }
    .order-customer-panel {
        padding: 18px;
    }
    .order-summary-footer .footer-inner {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   ORDER SUCCESS PAGE
========================================= */
.order-success-page {
    min-height: 100vh;
    padding: 60px 0 84px;
    background:
        radial-gradient(circle at 12% 5%, rgba(239,195,104,0.16), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(211,250,153,0.16), transparent 30%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 46%, #EEF4E6 100%);
    color: var(--color-primary);
    font-family: var(--font-body);
}
.order-success-hero,
.order-success-shell,
.order-success-actions {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.order-success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40px;
    text-align: center;
}
.order-success-mark {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.22), transparent 34%),
        var(--color-primary);
    box-shadow: 0 24px 55px rgba(28,58,19,0.18);
}
.order-success-mark::before,
.order-success-mark span {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(239,195,104,0.48);
    border-radius: inherit;
    animation: orderSuccessPulse 2.8s ease-out infinite;
}
.order-success-mark span {
    inset: -22px;
    border-color: rgba(211,250,153,0.26);
    animation-delay: 0.8s;
}
.order-success-mark svg {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,0.14));
}
.order-success-mark path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: orderSuccessCheck 0.65s 0.25s cubic-bezier(0.16,1,0.3,1) forwards;
}
.order-success-kicker {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239,195,104,0.2);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.order-success-hero h1 {
    max-width: 760px;
    margin: 15px 0 13px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
}
.order-success-hero > p {
    max-width: 66ch;
    margin: 0;
    color: #556B52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.order-success-reference {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 24px;
    padding: 9px;
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 18px;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 16px 38px rgba(28,58,19,0.055);
}
.order-success-reference div {
    display: grid;
    gap: 5px;
    padding: 13px 18px;
    border-radius: 12px;
    background: rgba(248,243,231,0.66);
}
.order-success-reference span {
    color: #6B7D55;
    font-size: 10px;
    font-weight: 600;
}
.order-success-reference strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
}
.order-success-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
    gap: 20px;
    align-items: start;
}
.order-success-main {
    display: grid;
    gap: 18px;
}
.order-success-card,
.order-success-summary,
.order-success-actions {
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 22px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 20px 52px rgba(28,58,19,0.065);
}
.order-success-card,
.order-success-summary {
    padding: 24px;
}
.order-success-summary {
    position: sticky;
    top: 24px;
}
.order-success-card-head {
    margin-bottom: 20px;
}
.order-success-card-head > span {
    color: #7A8F45;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.order-success-card-head h2 {
    margin: 9px 0 6px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
}
.order-success-card-head p {
    margin: 0;
    color: #556B52;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}
.order-delivery-address,
.order-success-payment {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(248,243,231,0.82), rgba(238,244,230,0.78));
}
.order-success-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
}
.order-success-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.order-delivery-address div {
    display: grid;
    gap: 5px;
}
.order-delivery-address strong {
    color: var(--color-primary);
    font-size: 13px;
}
.order-delivery-address p {
    margin: 0;
    color: #556B52;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}
.order-delivery-address div > span {
    color: #7A8F45;
    font-size: 11px;
    font-weight: 600;
}
.order-status-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.order-status-timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 19px;
    width: 1px;
    background: rgba(28,58,19,0.13);
}
.order-status-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 13px 0;
}
.order-status-timeline li > span {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(28,58,19,0.12);
    border-radius: 50%;
    background: #FDFCF8;
    color: #6B7D55;
    font-size: 9px;
    font-weight: 700;
}
.order-status-timeline li.is-complete > span {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-secondary);
    box-shadow: 0 0 0 5px rgba(239,195,104,0.14);
}
.order-status-timeline li div {
    display: grid;
    align-content: center;
    gap: 4px;
}
.order-status-timeline strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
}
.order-status-timeline p {
    margin: 0;
    color: #556B52;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}
.order-success-product {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 15px 0 18px;
    border-top: 1px solid rgba(28,58,19,0.09);
    border-bottom: 1px solid rgba(28,58,19,0.09);
}
.order-success-product-image {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #F7F2E6;
}
.order-success-product-image img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}
.order-success-product-image span {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
}
.order-success-product h3 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}
.order-success-product p {
    margin: 0;
    color: #6B7D55;
    font-size: 10px;
}
.order-success-product > strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
}
.order-success-totals {
    display: grid;
    gap: 12px;
    padding: 19px 0;
}
.order-success-totals div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #556B52;
    font-size: 11px;
}
.order-success-totals strong {
    color: var(--color-primary);
    font-weight: 700;
}
.order-success-total {
    margin-top: 3px;
    padding-top: 15px;
    border-top: 1px solid rgba(28,58,19,0.09);
}
.order-success-total span,
.order-success-total strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
}
.order-success-payment {
    align-items: center;
    padding: 14px;
}
.order-success-payment div {
    display: grid;
    gap: 3px;
}
.order-success-payment div span {
    color: #6B7D55;
    font-size: 9px;
    font-weight: 600;
}
.order-success-payment div strong {
    color: var(--color-primary);
    font-size: 11px;
}
.order-success-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
    padding: 22px 24px;
}
.order-success-actions > div:first-child {
    max-width: 570px;
}
.order-success-actions span {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
}
.order-success-actions p {
    margin: 6px 0 0;
    color: #556B52;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}
.order-success-actions > div:last-child {
    display: flex;
    gap: 10px;
}
.order-success-primary,
.order-success-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}
.order-success-primary {
    color: var(--color-primary);
    background: var(--color-secondary);
}
.order-success-secondary {
    border: 1px solid rgba(28,58,19,0.14);
    color: var(--color-primary);
    background: rgba(255,255,255,0.72);
}
.order-success-primary:hover,
.order-success-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(28,58,19,0.1);
}
.order-success-footer {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px max(24px, calc((100% - 1120px) / 2));
    background: var(--color-primary);
    color: rgba(253,252,248,0.72);
    font-family: var(--font-body);
    font-size: 11px;
}
.order-success-footer div {
    display: flex;
    gap: 18px;
}
.order-success-footer a {
    color: rgba(253,252,248,0.72);
    text-decoration: none;
}
.order-success-footer a:hover {
    color: var(--color-secondary);
}
@keyframes orderSuccessCheck {
    to { stroke-dashoffset: 0; }
}
@keyframes orderSuccessPulse {
    0% { opacity: 0; transform: scale(0.82); }
    30% { opacity: 0.65; }
    100% { opacity: 0; transform: scale(1.35); }
}
@media (max-width: 900px) {
    .order-success-shell {
        grid-template-columns: 1fr;
    }
    .order-success-summary {
        position: relative;
        top: auto;
    }
}
@media (max-width: 640px) {
    .order-success-page {
        padding: 48px 0 68px;
    }
    .order-success-hero,
    .order-success-shell,
    .order-success-actions {
        width: calc(100% - 24px);
    }
    .order-success-mark {
        width: 88px;
        height: 88px;
    }
    .order-success-mark svg {
        width: 44px;
        height: 44px;
    }
    .order-success-reference {
        width: 100%;
        grid-template-columns: 1fr;
    }
    .order-success-card,
    .order-success-summary {
        padding: 18px;
        border-radius: 18px;
    }
    .order-success-product {
        grid-template-columns: 58px 1fr;
    }
    .order-success-product-image {
        width: 58px;
        height: 58px;
    }
    .order-success-product > strong {
        grid-column: 2;
    }
    .order-success-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .order-success-actions > div:last-child {
        display: grid;
        grid-template-columns: 1fr;
    }
    .order-success-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .order-success-footer div {
        flex-wrap: wrap;
        gap: 10px 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .order-success-mark::before,
    .order-success-mark span,
    .order-success-mark path {
        animation: none;
    }
    .order-success-mark path {
        stroke-dashoffset: 0;
    }
}

/* =========================================
   ORDER FAILED PAGE
========================================= */
.order-failed-page {
    min-height: 100vh;
    padding: 60px 0 84px;
    background:
        radial-gradient(circle at 12% 5%, rgba(239,195,104,0.14), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(28,58,19,0.1), transparent 30%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 46%, #EEF4E6 100%);
    color: var(--color-primary);
    font-family: var(--font-body);
}
.order-failed-hero,
.order-failed-shell,
.order-failed-note {
    width: min(1040px, calc(100% - 40px));
    margin-inline: auto;
}
.order-failed-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 42px;
    text-align: center;
}
.order-failed-mark {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid rgba(150,63,49,0.22);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.28), transparent 34%),
        #FFF4EE;
    box-shadow: 0 24px 55px rgba(76,45,35,0.12);
}
.order-failed-mark::before,
.order-failed-mark span {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(150,63,49,0.24);
    border-radius: inherit;
    animation: orderFailedPulse 3s ease-out infinite;
}
.order-failed-mark span {
    inset: -22px;
    border-color: rgba(239,195,104,0.28);
    animation-delay: 0.9s;
}
.order-failed-mark svg {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    fill: none;
    stroke: #963F31;
    stroke-width: 4.5;
    stroke-linecap: round;
}
.order-failed-mark path {
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
    animation: orderFailedDraw 0.65s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.order-failed-kicker {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(150,63,49,0.09);
    color: #7A382E;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.order-failed-hero h1 {
    max-width: 760px;
    margin: 15px 0 13px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
}
.order-failed-hero > p {
    max-width: 66ch;
    margin: 0;
    color: #556B52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.order-failed-reference {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 9px;
    margin-top: 24px;
    padding: 9px;
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 18px;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 16px 38px rgba(28,58,19,0.055);
}
.order-failed-reference div {
    display: grid;
    gap: 5px;
    padding: 13px 18px;
    border-radius: 12px;
    background: rgba(248,243,231,0.7);
}
.order-failed-reference span {
    color: #6B7D55;
    font-size: 10px;
    font-weight: 600;
}
.order-failed-reference strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
}
.order-failed-reference div:last-child strong {
    color: #963F31;
}
.order-failed-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.order-failed-primary,
.order-failed-secondary {
    min-width: 150px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}
.order-failed-primary {
    color: var(--color-primary);
    background: var(--color-secondary);
    box-shadow: 0 14px 28px rgba(184,121,36,0.14);
}
.order-failed-secondary {
    border: 1px solid rgba(28,58,19,0.14);
    color: var(--color-primary);
    background: rgba(255,255,255,0.72);
}
.order-failed-primary:hover,
.order-failed-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(28,58,19,0.1);
}
.order-failed-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 20px;
    align-items: stretch;
}
.order-failed-card,
.order-failed-support,
.order-failed-note {
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 22px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 20px 52px rgba(28,58,19,0.065);
}
.order-failed-card,
.order-failed-support {
    padding: 24px;
}
.order-failed-card-head {
    margin-bottom: 18px;
}
.order-failed-card-head > span,
.order-failed-support > span:not(.order-failed-support-icon) {
    color: #7A8F45;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.order-failed-card-head h2,
.order-failed-support h2 {
    margin: 9px 0 6px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
}
.order-failed-card-head p,
.order-failed-support > p {
    margin: 0;
    color: #556B52;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
}
.order-failed-checks {
    display: grid;
    gap: 10px;
}
.order-failed-checks article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 13px;
    align-items: start;
    padding: 16px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(248,243,231,0.76), rgba(238,244,230,0.72));
}
.order-failed-checks article > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 9px;
    font-weight: 800;
}
.order-failed-checks h3 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
}
.order-failed-checks p {
    margin: 0;
    color: #556B52;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}
.order-failed-support {
    background:
        radial-gradient(circle at 90% 10%, rgba(239,195,104,0.24), transparent 34%),
        linear-gradient(145deg, #244E1D, var(--color-primary));
    color: #FDFCF8;
}
.order-failed-support-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
}
.order-failed-support-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.order-failed-support > span:not(.order-failed-support-icon) {
    color: var(--color-secondary);
}
.order-failed-support h2 {
    color: #FDFCF8;
}
.order-failed-support > p {
    color: rgba(253,252,248,0.7);
}
.order-failed-support-details {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 16px 0;
    border-top: 1px solid rgba(253,252,248,0.12);
    border-bottom: 1px solid rgba(253,252,248,0.12);
}
.order-failed-support-details div {
    display: grid;
    gap: 3px;
}
.order-failed-support-details span {
    color: rgba(253,252,248,0.52);
    font-size: 9px;
    font-weight: 600;
}
.order-failed-support-details strong {
    color: #FDFCF8;
    font-size: 11px;
    font-weight: 600;
}
.order-failed-support > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border-radius: 999px;
    color: var(--color-primary);
    background: var(--color-secondary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
.order-failed-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    padding: 18px 22px;
}
.order-failed-note span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(239,195,104,0.2);
    color: var(--color-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.order-failed-note p {
    margin: 0;
    color: #556B52;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}
@keyframes orderFailedDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes orderFailedPulse {
    0% { opacity: 0; transform: scale(0.82); }
    30% { opacity: 0.55; }
    100% { opacity: 0; transform: scale(1.35); }
}
@media (max-width: 820px) {
    .order-failed-shell {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .order-failed-page {
        padding: 48px 0 68px;
    }
    .order-failed-hero,
    .order-failed-shell,
    .order-failed-note {
        width: calc(100% - 24px);
    }
    .order-failed-mark {
        width: 88px;
        height: 88px;
    }
    .order-failed-mark svg {
        width: 42px;
        height: 42px;
    }
    .order-failed-reference {
        width: 100%;
        grid-template-columns: 1fr;
    }
    .order-failed-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
    .order-failed-card,
    .order-failed-support {
        padding: 18px;
        border-radius: 18px;
    }
    .order-failed-note {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .order-failed-mark::before,
    .order-failed-mark span,
    .order-failed-mark path {
        animation: none;
    }
    .order-failed-mark path {
        stroke-dashoffset: 0;
    }
}

/* =========================================
   LOGIN AND REGISTRATION PAGE
========================================= */
.account-page {
    min-height: calc(100vh - 112px);
    display: grid;
    place-items: center;
    padding: 54px 20px 78px;
    background:
        radial-gradient(circle at 12% 8%, rgba(239,195,104,0.16), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(211,250,153,0.15), transparent 30%),
        linear-gradient(180deg, #F8F3E7 0%, #FDFCF8 48%, #EEF4E6 100%);
    color: var(--color-primary);
    font-family: var(--font-body);
}
.account-shell {
    width: min(1040px, 100%);
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
    overflow: hidden;
    border: 1px solid rgba(28,58,19,0.1);
    border-radius: 26px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 32px 80px rgba(28,58,19,0.12);
}
.account-offer-panel {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-primary);
}
.account-offer-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% center;
    opacity: 0.72;
    transform: scale(1.04);
}
.account-offer-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(18,42,14,0.16), rgba(18,42,14,0.93) 78%),
        linear-gradient(90deg, rgba(18,42,14,0.55), transparent 72%);
}
.account-offer-copy {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 38px;
    color: #FDFCF8;
}
.account-offer-copy > span,
.account-panel-head > span {
    width: fit-content;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.account-offer-copy > span {
    border: 1px solid rgba(239,195,104,0.3);
    background: rgba(239,195,104,0.12);
    color: var(--color-secondary);
}
.account-offer-copy h1 {
    max-width: 470px;
    margin: 15px 0 12px;
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
}
.account-offer-copy > p {
    max-width: 48ch;
    margin: 0;
    color: rgba(253,252,248,0.76);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}
.account-offer-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid rgba(239,195,104,0.24);
    border-radius: 16px;
    background: rgba(255,255,255,0.09);
    backdrop-filter: blur(12px);
}
.account-offer-code div {
    display: grid;
    gap: 4px;
}
.account-offer-code span {
    color: rgba(253,252,248,0.62);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}
.account-offer-code strong {
    color: #FDFCF8;
    font-family: var(--font-heading);
    font-size: 16px;
}
.account-offer-code code {
    padding: 9px 12px;
    border: 1px dashed var(--color-secondary);
    border-radius: 10px;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.account-offer-copy ul {
    display: grid;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.account-offer-copy li {
    position: relative;
    padding-left: 20px;
    color: rgba(253,252,248,0.76);
    font-size: 11px;
    font-weight: 500;
}
.account-offer-copy li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: 800;
}
.account-form-panel {
    display: flex;
    flex-direction: column;
    padding: 30px 38px 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(239,195,104,0.1), transparent 28%),
        rgba(253,252,248,0.96);
}
.account-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 28px;
    padding: 5px;
    border: 1px solid rgba(28,58,19,0.09);
    border-radius: 999px;
    background: rgba(28,58,19,0.045);
}
.account-tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    color: #66765E;
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.account-tabs button.is-active {
    color: var(--color-secondary);
    background: var(--color-primary);
    box-shadow: 0 10px 22px rgba(28,58,19,0.13);
}
.account-panel {
    animation: accountPanelIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
.account-panel[hidden] {
    display: none;
}
.account-panel-head {
    margin-bottom: 22px;
}
.account-panel-head > span {
    background: rgba(239,195,104,0.18);
    color: var(--color-primary);
}
.account-panel-head h2 {
    margin: 12px 0 7px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 800;
    line-height: 1.16;
}
.account-panel-head p {
    max-width: 52ch;
    margin: 0;
    color: #556B52;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
}
.account-form {
    display: grid;
    gap: 14px;
}
.account-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.account-form > label:not(.account-check),
.account-field-grid label {
    display: grid;
    gap: 7px;
}
.account-form > label > span:first-child,
.account-field-grid label > span {
    color: rgba(28,58,19,0.7);
    font-size: 11px;
    font-weight: 700;
}
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="tel"],
.account-form input[type="password"] {
    width: 100%;
    min-height: 47px;
    border: 1px solid rgba(28,58,19,0.13);
    border-radius: 12px;
    outline: 0;
    padding: 0 14px;
    color: var(--color-primary);
    background: rgba(255,255,255,0.9);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.account-form input:focus {
    border-color: var(--color-secondary);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(239,195,104,0.14);
}
.account-password-field {
    position: relative;
    display: block;
}
.account-password-field input {
    padding-right: 62px !important;
}
.account-password-field button {
    position: absolute;
    top: 50%;
    right: 12px;
    border: 0;
    padding: 4px;
    transform: translateY(-50%);
    color: #718268;
    background: transparent;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.account-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.account-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #66765E;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}
.account-check input {
    margin-top: 2px;
    accent-color: var(--color-primary);
}
.account-check a,
.account-form-meta > a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.account-form-meta > a {
    font-size: 11px;
}
.account-submit {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    color: var(--color-secondary);
    background: var(--color-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(28,58,19,0.15);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}
.account-submit:hover {
    color: var(--color-primary);
    background: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(28,58,19,0.16);
}
.account-switch-copy {
    margin: 18px 0 0;
    color: #66765E;
    font-size: 11px;
    text-align: center;
}
.account-switch-copy button {
    border: 0;
    padding: 0;
    color: var(--color-primary);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.account-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}
.account-security-note svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 1.8;
}
.account-security-note p {
    margin: 0;
    color: #7A8873;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}
@keyframes accountPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
    .account-shell {
        grid-template-columns: 1fr;
    }
    .account-offer-panel {
        min-height: 410px;
    }
    .account-offer-copy {
        padding: 30px;
    }
}
@media (max-width: 640px) {
    .account-page {
        padding: 28px 12px 56px;
    }
    .account-shell {
        border-radius: 20px;
    }
    .account-offer-panel {
        min-height: 370px;
    }
    .account-offer-copy {
        padding: 22px;
    }
    .account-offer-copy h1 {
        font-size: clamp(1.8rem, 10vw, 2.55rem);
    }
    .account-form-panel {
        padding: 24px 18px;
    }
    .account-field-grid {
        grid-template-columns: 1fr;
    }
    .account-form-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (prefers-reduced-motion: reduce) {
    .account-panel {
        animation: none;
    }
}



/* Product Option Select Design */
.single-product-options select.form-control {
  width: 100%;
  height: 52px;
  padding: 0 50px 0 22px;

  background-color: #123f14;
  color: #ffffff;

  border: 2px solid #e8c45a;
  border-radius: 30px;

  font-size: 15px;
  font-weight: 700;

  outline: none;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-shadow: 0 8px 22px rgba(18, 63, 20, 0.18);

  background-image:
    linear-gradient(45deg, transparent 50%, #f2c85b 50%),
    linear-gradient(135deg, #f2c85b 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 21px,
    calc(100% - 16px) 21px;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

/* Hover */
.single-product-options select.form-control:hover {
  background-color: #174a18;
  border-color: #f0cc62;
}

/* Focus */
.single-product-options select.form-control:focus {
  border-color: #f4cc5c;
  box-shadow: 0 0 0 4px rgba(240, 200, 91, 0.25);
}

/* Dropdown Options */
.single-product-options select.form-control option {
  background-color: #eef0ea;
  color: #123f14;
  font-size: 15px;
  font-weight: 600;
}

/* Selected Option */
.single-product-options select.form-control option:checked {
  background-color: #f2c85b;
  color: #123f14;
  font-weight: 700;
}

/* Label Style */
.single-product-options .control-label {
  display: block;
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #6f7f5f;
}

/* Option Group Spacing */
.single-product-options .form-group {
  margin-bottom: 18px;
}


/*----------------------------*/



/* =========================================================
   OPEN MIX - PREMIUM CUSTOM PRODUCT OPTION DROPDOWN
   Reference style
========================================================= */

.single-product-options .form-group {
    margin-bottom: 18px;
}


/* LABEL */
.single-product-options .control-label {
    display: block;
    margin-bottom: 7px;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #73816b;
}


/* =========================================================
   CUSTOM SELECT OUTER WRAPPER
========================================================= */

.omd-select-box {
    position: relative;
    width: 100%;
    border-radius: 18px;
    box-sizing: border-box;
    z-index: 10;
}


/* Hide actual OpenCart select but keep it in form */
.omd-select-box > select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;

    left: 0 !important;
    bottom: 0 !important;
}


/* =========================================================
   SELECTED VALUE BUTTON
========================================================= */

.omd-select-trigger {
    width: 100%;
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    padding: 0 48px 0 20px;

    box-sizing: border-box;

    border: 2px solid #e9c45b;
    border-radius: 28px;

    background: #174b18;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    font-family: inherit;

    cursor: pointer;

    outline: none;

    box-shadow:
        0 4px 10px rgba(19, 65, 20, 0.12);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.omd-select-trigger:hover {
    background: #1c561e;
}


.omd-select-trigger:focus,
.omd-select-box.open .omd-select-trigger {
    border-color: #efc85c;

    box-shadow:
        0 0 0 3px rgba(233, 196, 91, 0.17);
}


/* Selected text */
.omd-selected-text {
    display: block;

    width: 100%;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    text-align: center;
}


/* =========================================================
   ARROW
========================================================= */

.omd-select-arrow {
    position: absolute;

    right: 16px;
    top: 50%;

    width: 0;
    height: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #efc85c;

    transform: translateY(-35%);

    transition: transform 0.25s ease;

    pointer-events: none;
}


.omd-select-box.open .omd-select-arrow {
    transform:
        translateY(-35%)
        rotate(180deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.omd-select-menu {
    display: none;

    position: absolute;

    top: calc(100% - 4px);
    left: 10px;
    right: 10px;

    padding: 8px;

    background: #214f1c;

    border-radius: 18px;

    box-shadow:
        0 14px 30px rgba(19, 58, 18, 0.18);

    z-index: 9999;

    box-sizing: border-box;
}


.omd-select-box.open .omd-select-menu {
    display: block;

    animation: omdDropdownOpen 0.18s ease;
}


@keyframes omdDropdownOpen {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   OPTION
========================================================= */

.omd-select-option {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
    min-height: 40px;

    padding: 9px 42px 9px 14px;

    margin: 0 0 6px;

    border: 0;
    border-radius: 22px;

    background: #f0f1ec;

    color: #31512e;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.omd-select-option:last-child {
    margin-bottom: 0;
}


.omd-select-option:hover {
    background: #e5e9df;

    transform: translateX(2px);
}


/* SELECTED OPTION - GOLD */
.omd-select-option.selected {
    background: #efc760;

    color: #173f18;

    font-weight: 700;
}


/* Check mark */
.omd-select-option.selected::after {
    content: "";

    position: absolute;

    right: 14px;
    top: 50%;

    width: 10px;
    height: 6px;

    border-left: 2px solid #174319;
    border-bottom: 2px solid #174319;

    transform:
        translateY(-65%)
        rotate(-45deg);
}


/* Placeholder */
.omd-select-option.placeholder-option {
    color: #788777;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 576px) {

    .omd-select-box {
        padding: 9px;

        border-radius: 17px;
    }

    .omd-select-trigger {
        min-height: 48px;

        font-size: 13px;

        border-radius: 26px;
    }

    .omd-select-option {
        min-height: 40px;

        padding:
            9px
            40px
            9px
            13px;

        font-size: 13px;
    }

    .omd-select-menu {
        left: 9px;
        right: 9px;

        border-radius: 17px;
    }
}