* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #2c2c2c;
    overflow-x: clip;
    background: #fafafa;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Header */
header {
    padding: 0 80px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    height: 74px;
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #1a3a2a;
    display: flex;
    align-items: center;
}

.logo img {
    height: 26px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 48px;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.3s;
    position: relative;
}

.nav-links a:hover {
    color: #1a3a2a;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1a3a2a;
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

.header-buy-btn {
    background: #1a3a2a;
    color: white;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.header-buy-btn:hover {
    background: #0f2419;
}

/* Breadcrumb */
.breadcrumb {
    padding: 104px 0 0;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #aaa;
}

.breadcrumb-inner a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-inner a:hover {
    color: #1a3a2a;
}

.breadcrumb-inner svg {
    width: 14px;
    height: 14px;
    stroke: #ccc;
}

/* Product Section */
.product-page {
    padding: 40px 0 100px;
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left: Image Gallery */
.product-gallery {
    position: sticky;
    top: 114px;
}

.product-main-image {
    width: 100%;
    aspect-ratio: 1;
    background: #f2f0ed;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.product-main-image:hover img {
    transform: scale(1.05);
}

.product-main-image .product-badge-top {
    position: absolute;
    top: 24px;
    left: 24px;
    background: #1a3a2a;
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.product-thumb {
    width: 80px;
    height: 80px;
    background: #f2f0ed;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    overflow: hidden;
}

.product-thumb.active {
    border-color: #1a3a2a;
}

.product-thumb:hover {
    border-color: #ccc;
}

.product-thumb img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

/* Right: Product Info */
.product-info {
    padding-top: 8px;
}

.product-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #73cb73;
    font-weight: 600;
    margin-bottom: 12px;
}

.product-info-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 16px;
}

.product-info-subtitle {
    font-size: 16px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 480px;
}

/* Rating row */
.product-rating-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eee;
}

.product-stars {
    display: flex;
    gap: 2px;
}

.product-stars svg {
    width: 18px;
    height: 18px;
    fill: #f59e0b;
    stroke: none;
}

.product-rating-text {
    font-size: 14px;
    color: #888;
}

.product-rating-text strong {
    color: #2c2c2c;
    font-weight: 700;
}

/* Price */
.product-price-block {
    margin-bottom: 32px;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.product-price-now {
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -1.5px;
}

.product-price-was {
    font-size: 18px;
    color: #bbb;
    text-decoration: line-through;
}

.product-price-save {
    font-size: 12px;
    font-weight: 700;
    color: #1a3a2a;
    background: #e6f7e6;
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.product-price-note {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px;
}

/* Weight selector */
.product-weight-section {
    margin-bottom: 36px;
}

.product-weight-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 12px;
}

.product-weight-options {
    display: flex;
    gap: 10px;
}

.weight-option {
    padding: 10px 24px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.25s;
}

.weight-option:hover {
    border-color: #1a3a2a;
    color: #1a3a2a;
}

.weight-option.active {
    background: #1a3a2a;
    color: white;
    border-color: #1a3a2a;
}

/* Buy Now button */
.product-buy-section {
    margin-bottom: 40px;
}

.product-buy-now-btn {
    width: 100%;
    padding: 18px 40px;
    background: #1a3a2a;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.product-buy-now-btn:hover {
    background: #0f2419;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26, 58, 42, 0.2);
}

.product-buy-now-btn svg {
    width: 20px;
    height: 20px;
}

/* Buy Modal */
.buy-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

.buy-modal-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: all;
}

.buy-modal {
    background: white;
    border-radius: 24px;
    padding: 40px;
    width: 440px;
    max-width: 92vw;
    position: relative;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.buy-modal-overlay.active .buy-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.buy-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.buy-modal-close:hover {
    background: #eaeaea;
}

.buy-modal-close svg {
    width: 18px;
    height: 18px;
    stroke: #888;
}

.buy-modal-header {
    margin-bottom: 28px;
}

.buy-modal-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.buy-modal-header p {
    font-size: 14px;
    color: #999;
}

.buy-modal-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.buy-modal-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: white;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s;
}

.buy-modal-btn:hover {
    border-color: #1a3a2a;
    background: #f9faf9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.buy-modal-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
    filter: brightness(0);
}

.buy-modal-btn svg {
    width: 18px;
    height: 18px;
    stroke: #bbb;
    transition: all 0.25s;
}

.buy-modal-btn:hover svg {
    stroke: #1a3a2a;
    transform: translateX(3px);
}

.buy-modal-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.buy-modal-divider::before,
.buy-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

.buy-modal-divider span {
    font-size: 12px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.buy-modal-blinkit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: white;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s;
}

.buy-modal-blinkit:hover {
    border-color: #1a3a2a;
    background: #f9faf9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.buy-modal-blinkit-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.buy-modal-blinkit-left span {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.buy-modal-blinkit svg {
    width: 18px;
    height: 18px;
    stroke: #bbb;
    transition: all 0.25s;
}

.buy-modal-blinkit:hover svg {
    stroke: #1a3a2a;
    transform: translateX(3px);
}

/* Delivery note */
.product-delivery-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f7f7f5;
    border-radius: 12px;
    margin-bottom: 40px;
}

.product-delivery-note svg {
    width: 18px;
    height: 18px;
    stroke: #73cb73;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.product-delivery-note span {
    font-size: 13px;
    color: #777;
}

/* Trust row */
.product-trust-row {
    display: flex;
    gap: 28px;
    padding-top: 32px;
    border-top: 1px solid #eee;
}

.product-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-trust-icon {
    width: 34px;
    height: 34px;
    background: #f2f2f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-trust-icon svg {
    width: 16px;
    height: 16px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 2;
}

.product-trust-text {
    font-size: 12px;
    color: #888;
    line-height: 1.3;
}

.product-trust-text strong {
    display: block;
    color: #2c2c2c;
    font-weight: 600;
    font-size: 13px;
}

/* Details section below */
.product-details-section {
    padding: 80px 0;
}

.product-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.product-detail-block h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.product-detail-block p {
    font-size: 14px;
    color: #888;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Nutrition table */
.nutrition-table {
    width: 100%;
    border-collapse: collapse;
}

.nutrition-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.nutrition-table tr:last-child {
    border-bottom: none;
}

.nutrition-table td {
    padding: 12px 0;
    font-size: 14px;
}

.nutrition-table td:first-child {
    color: #888;
}

.nutrition-table td:last-child {
    color: #2c2c2c;
    font-weight: 600;
    text-align: right;
}

/* Related products */
.related-section {
    padding: 80px 0;
    background: #f7f7f5;
    border-radius: 40px;
    margin-bottom: 0;
}

.related-header {
    margin-bottom: 40px;
}

.related-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #73cb73;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.related-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -1px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.related-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.related-card-img {
    height: 200px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.related-card-info {
    padding: 20px;
}

.related-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 4px;
}

.related-card-weight {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
}

.related-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.related-card-price {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.related-card-btn {
    width: 34px;
    height: 34px;
    background: #1a3a2a;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.related-card-btn:hover {
    background: #0f2419;
    transform: scale(1.08);
}

.related-card-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
}

/* Footer */
footer {
    padding: 80px 0 40px;
    border-top: 1px solid #e0e0e0;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
    margin-bottom: 60px;
}

.footer-brand p {
    font-size: 12px;
    color: #ccc;
    line-height: 1.4;
    max-width: 320px;
}

.footer-links h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #2c2c2c;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    text-decoration: none;
    color: #666;
    font-size: 15px;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #1a3a2a;
}

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .container {
        padding: 0 32px;
    }

    header {
        padding: 0 32px;
    }

    .product-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-gallery {
        position: static;
    }

    .product-info-title {
        font-size: 34px;
    }

    .product-details-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .related-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }

    header {
        padding: 0 24px;
    }

    .nav-links {
        display: none;
    }

    .product-info-title {
        font-size: 28px;
    }

    .product-price-now {
        font-size: 32px;
    }

    .product-trust-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .related-section {
        border-radius: 28px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    header {
        padding: 0 16px;
    }

    .product-info-title {
        font-size: 26px;
    }

    .product-thumbs {
        gap: 8px;
    }

    .product-thumb {
        width: 64px;
        height: 64px;
    }

    .buy-btn {
        padding: 16px 22px;
    }

    .product-trust-row {
        flex-direction: column;
        gap: 14px;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .related-card-img {
        height: 180px;
    }
}

/* Image fallback — used when a product folder has no Front/bowl/etc. images yet.
   Mark a parent element with .img-pending; a styled "..." placeholder renders in its place. */
.product-main-image.img-pending img,
.product-thumb.img-pending img,
.related-card-img.img-pending img {
    visibility: hidden;
}
.product-main-image.img-pending::after,
.product-thumb.img-pending::after,
.related-card-img.img-pending::after {
    content: '...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 28px;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.product-thumb.img-pending::after { font-size: 14px; }
.related-card-img.img-pending::after { font-size: 22px; }
.product-main-image, .product-thumb, .related-card-img { position: relative; }

/* === Category landing page (e.g. /products/seeds) ============================= */
.category-hero {
    padding: 120px 0 56px;
    text-align: center;
}
.category-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #73cb73;
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
}
.category-hero-title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 18px;
}
.category-hero-subtitle {
    font-size: 17px;
    color: #888;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 24px;
}
.category-hero-count {
    font-size: 13px;
    color: #aaa;
    letter-spacing: 0.5px;
}

.category-grid-section {
    padding: 0 0 100px;
}
.category-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.category-product-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.category-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.category-product-img {
    height: 240px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px;
}
.category-product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.category-product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #1a3a2a;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
}
.category-product-info {
    padding: 20px 22px 22px;
    border-top: 1px solid #f5f5f5;
}
.category-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 6px;
}
.category-product-weight {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 14px;
}
.category-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.category-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.category-product-price.soon {
    font-size: 13px;
    color: #999;
    font-weight: 600;
}
.category-product-cta {
    width: 32px;
    height: 32px;
    background: #1a3a2a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.category-product-card:hover .category-product-cta {
    background: #0f2419;
    transform: scale(1.08);
}
.category-product-cta svg {
    width: 14px;
    height: 14px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
}

/* Reuse .img-pending fallback for empty category-product-img */
.category-product-img.img-pending img { visibility: hidden; }
.category-product-img.img-pending::after {
    content: '...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 28px;
    letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
    .category-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .category-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .category-hero { padding: 104px 0 40px; }
    .category-product-img { height: 200px; padding: 18px; }
}
@media (max-width: 480px) {
    .category-product-grid { grid-template-columns: 1fr; }
}

/* === Info pages (about, quality, blog, faq, shipping, returns) =============== */
.info-page {
    padding: 60px 0 100px;
}
.info-hero {
    padding: 60px 0 40px;
}
.info-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #73cb73;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}
.info-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 18px;
}
.info-lead {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 680px;
    margin-bottom: 56px;
}
.info-prose {
    max-width: 720px;
    color: #444;
}
.info-prose h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    margin: 40px 0 16px;
}
.info-prose h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1a3a2a;
    margin: 28px 0 10px;
}
.info-prose p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 18px;
}
.info-prose ul, .info-prose ol {
    padding-left: 22px;
    margin-bottom: 18px;
}
.info-prose li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.info-prose strong { color: #1a1a1a; }
.info-prose a { color: #1a3a2a; font-weight: 500; }
.info-prose a:hover { text-decoration: underline; }

/* FAQ accordion (no-JS, uses native <details>) */
.faq-list {
    max-width: 760px;
    margin-top: 12px;
}
.faq-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: '×'; }
.faq-item summary:hover { color: #1a3a2a; }
.faq-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-top: 14px;
    padding-right: 36px;
}

/* Blog "coming soon" empty state */
.blog-empty {
    text-align: center;
    padding: 80px 0;
}
.blog-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #f7f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #73cb73;
    font-size: 28px;
}
.blog-empty h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}
.blog-empty p {
    font-size: 15px;
    color: #888;
    max-width: 440px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .info-page { padding: 40px 0 80px; }
    .info-hero { padding: 40px 0 24px; }
}

/* === Benefits page — branded composition ==================================== */
/* Outer canvas: dark cocoa-brown. Inner page sits on it like a card. Massive
   all-caps display headlines (Poppins ExtraBold). Saturated accent blocks
   (mustard, terracotta, olive, cream). Terracotta pill CTAs with arrow chip.
   Each section is a bespoke layout, not a repeating template. */

:root {
    --canvas: #e6fff2;          /* pale mint page background */
    --canvas-deep: #1a3a2a;     /* footer dark forest green (for contrast) */
    --inner-bg: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #6a6a62;
    --accent: #e87646;
    --accent-deep: #d05f30;
    --mustard: #f5c252;
    --mustard-soft: #f8d488;
    --olive: #5b6e3b;
    --olive-deep: #44542c;
    --cream: #f9f1de;
    --leaf: #6fa84a;
}

/* Page-level dark canvas, scoped via class on <body> */
.benefits-canvas {
    background: var(--canvas);
    color: var(--ink);
}
/* Product detail pages use a plain white canvas */
.benefits-canvas[data-page="product"] {
    background: #ffffff;
}
/* Prevent horizontal scroll from decorative overflows (rotating wheel etc.)
   and force vertical scrollbar always visible so viewport width is consistent
   on initial load (prevents clamp() flash from scrollbar appearing late). */
html {
    overflow-x: clip;
    scrollbar-gutter: stable;
}
.benefits-canvas .breadcrumb {
    background: var(--canvas);
    color: rgba(26, 26, 26, 0.55);
    border-bottom: none;
}
.benefits-canvas .breadcrumb a { color: rgba(26, 26, 26, 0.62); }
.benefits-canvas .breadcrumb svg { stroke: rgba(26, 26, 26, 0.45); }
.benefits-canvas .breadcrumb span { color: rgba(26, 26, 26, 0.85); }

/* The white inner card that holds all content */
.benefits-inner {
    background: var(--inner-bg);
    margin: 24px;
    border-radius: 24px;
    /* overflow: hidden was clipping section bleeds; sections handle their own
       clipping where needed. */
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* === Shared atoms ========================================================== */
.bx-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}
.bx-display {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.92;
    color: var(--ink);
    margin: 0;
}
.bx-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--accent);
    padding: 14px 22px;
    border-radius: 999px;
    transition: background 0.25s, transform 0.25s;
}
.bx-cta:hover { background: var(--accent-deep); transform: translateY(-2px); }
/* Seeds-showcase side CTA — recolors to the active seed's accent (--seed-accent
   set by JS). No background transition so the colour swaps instantly with the
   seed; only the lift transition remains. */
.bx-seeds .bx-routine-side .bx-cta {
    background: var(--seed-accent, var(--accent));
    transition: transform 0.25s;
}
.bx-seeds .bx-routine-side .bx-cta:hover {
    background: var(--seed-accent, var(--accent-deep));
    transform: translateY(-2px);
}
.bx-seeds .bx-routine-side .bx-cta .bx-cta-chip {
    /* Darker shade of the active seed accent so the chip stands out */
    background: color-mix(in srgb, var(--seed-accent, var(--accent)) 72%, #000);
}
.bx-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -6px -10px -6px 6px;
    background: var(--accent-deep);
    border-radius: 999px;
}
.bx-cta-chip svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Small text link with diagonal arrow chip (for inline CTAs on accent cards) */
.bx-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 4px;
}
.bx-link svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tiny green leaf doodle, used as decoration near product images */
.bx-leaf {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.bx-leaf svg { width: 100%; height: 100%; fill: var(--leaf); }

/* === Hero ================================================================== */
.bx-hero {
    padding: 40px 48px 56px;
    position: relative;
}
.bx-hero-nav {
    /* room reserved if the header doesn't render inside (current layout has
       a separate <header>, so this is just visual breathing room) */
}
.bx-hero-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 0.90;
    color: var(--ink);
    font-size: clamp(48px, 8.6vw, 132px);
    margin: 24px 0 32px;
}
.bx-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 0.9fr;
    gap: 24px;
    align-items: end;
}
.bx-hero-blurb {
    max-width: 320px;
}
.bx-hero-blurb p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 22px;
}
.bx-hero-mini {
    margin-top: 26px;
}
.bx-hero-mini-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px;
}
.bx-hero-mini-list {
    display: flex;
    gap: 10px;
}
.bx-hero-mini-list a {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cream);
    transition: transform 0.25s;
}
.bx-hero-mini-list a:nth-child(2) { background: #e8efe4; }
.bx-hero-mini-list a:nth-child(3) { background: #f5ead6; }
.bx-hero-mini-list a:hover { transform: translateY(-3px); }
.bx-hero-mini-list img {
    width: 84%;
    height: 84%;
    object-fit: contain;
}

/* Middle column: product image cluster */
.bx-hero-product {
    position: relative;
    aspect-ratio: 4 / 5;
    background: #735cda;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bx-hero-product img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}
.bx-hero-product .bx-leaf { top: 8%; right: 12%; transform: rotate(20deg); }
.bx-hero-product .bx-leaf.b { top: 18%; right: 6%; transform: rotate(-30deg) scale(0.7); }

/* Right column: yellow accent card */
.bx-hero-accent {
    background: #e3ddff;
    border-radius: 24px;
    padding: 32px 28px;
    color: var(--canvas);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 5 / 6;
    position: relative;
    overflow: hidden;
}
.bx-hero-accent-head {
    position: relative;
    z-index: 3;
}
/* Date-with-vector hero — large, anchored bottom-right to leave room for
   the title at top-left. White photo bg blends into the lilac card. */
.bx-hero-accent-image {
    position: absolute;
    right: -8%;
    bottom: -20%;
    width: 80%;
    max-width: none;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 16px 32px rgba(49, 13, 210, 0.22));
}
.bx-hero-accent-stat { position: relative; z-index: 3; }
.bx-hero-accent-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: #735cda;
    margin: 0 0 8px;
}
.bx-hero-accent-sub {
    font-size: 18px;
    line-height: 1.5;
    color: #310dd296;
    margin: 0;
}
.bx-hero-accent-stat {
    margin-top: 24px;
    background: #735cda;
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
    .bx-hero-grid { grid-template-columns: 1fr 1fr; }
    .bx-hero-accent { grid-column: span 2; aspect-ratio: 5 / 2; flex-direction: row; align-items: center; }
    .bx-hero-accent-stat { margin-top: 0; }
}
@media (max-width: 700px) {
    .bx-hero { padding: 28px 24px 36px; }
    .bx-hero-grid { grid-template-columns: 1fr; }
    .bx-hero-product { aspect-ratio: 4 / 4; }
    .bx-hero-accent { grid-column: auto; aspect-ratio: auto; flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .bx-hero-accent-stat { margin-top: 18px; }
}

/* === Section divider line (used between major sections) ==================== */
.bx-divider {
    height: 1px;
    background: rgba(26, 24, 16, 0.10);
    margin: 0 48px;
}
@media (max-width: 700px) { .bx-divider { margin: 0 24px; } }

/* === Section 2: heading + 3 accent cards =================================== */
.bx-three {
    padding: 60px 48px;
}
.bx-three-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    margin-bottom: 32px;
}
.bx-three-head h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
/* Dark pill CTA that sits opposite the section heading */
.bx-three-headcta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px 14px 22px;
    background: var(--canvas-deep);
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background 0.25s, transform 0.25s;
    align-self: end;
}
.bx-three-headcta:hover { background: #0f2419; transform: translateY(-1px); }
.bx-three-headcta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -6px -10px -6px 6px;
    background: #73cb73;
    border-radius: 999px;
}
.bx-three-headcta-chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--canvas-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bx-three-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Card: vertical composition. Image area is a full-width hero on top, body
   below. Each variant uses a tinted card background + a complementary inner
   image-area shade so the image reads as integrated, not bolted on. */
.bx-three-card {
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bx-three-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 36, 25, 0.10); }

/* Variants are now visually unified — neutral grey at rest, fills with brand
   green on hover via a radial-gradient that originates at the cursor entry
   point (JS sets --mx/--my as percentage coords on pointer enter/move). */
.bx-three-card {
    --mx: 50%;
    --my: 50%;
    background: #ededed;
    color: var(--canvas-deep);
    isolation: isolate;
}
/* Fluid liquid blob fill — SVG path inside .bx-three-blob morphs on hover via anime.js */
.bx-three-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bx-three-blob svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;  /* let the blob's overshoot paint past viewBox edges */
}
.bx-three-blob path {
    fill: #73cb73;
}
/* All card content sits above the blob */
.bx-three-card > *:not(.bx-three-blob) { position: relative; z-index: 1; }

/* Image area is the visual hero of each card */
.bx-three-img {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e2e2;
    transition: background 0.4s ease;
}
.bx-three-card:hover .bx-three-img { background: transparent; }
.bx-three-img img {
    width: 70%;
    height: 88%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.bx-three-card:hover .bx-three-img img { transform: scale(1.06); }

/* Stacked variant — used on the Seeds card to fan multiple seed packs.
   Each img uses --si (stack index, 0..N-1). --sm is the middle index, set
   on the container. Items rotate + translate by (--si - --sm), and their
   distance from center drives z-index so the middle pack sits frontmost. */
.bx-three-img-stack {
    position: relative;
    --sm: 3;                 /* middle index for 7 items (0..6) */
}
.bx-three-img-stack .bx-three-stack-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Distance from middle (0 for centermost, grows toward edges) */
    --dist: max(calc(var(--si) - var(--sm)), calc(var(--sm) - var(--si)));
    /* Negative dist for left-half items, positive for right (signed offset) */
    --side: calc(var(--si) - var(--sm));
    /* Center pack 1.0; outer packs only mildly smaller — keeps the fan wide */
    --s: calc(1 - var(--dist) * 0.08);
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--side) * 26%))
        translateY(calc(var(--dist) * 1.5%))
        rotate(calc(var(--side) * 5deg))
        scale(var(--s));
    transform-origin: center 70%;
    /* Center pack frontmost; outer packs recede */
    z-index: calc(10 - var(--dist));
    filter:
        drop-shadow(0 14px 24px rgba(60, 40, 20, 0.22))
        brightness(calc(1 - var(--dist) * 0.04));
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
                filter 0.45s ease;
}
.bx-three-card:hover .bx-three-img-stack .bx-three-stack-img {
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--side) * 30%))
        translateY(calc(var(--dist) * 1%))
        rotate(calc(var(--side) * 7deg))
        scale(calc(var(--s) * 1.04));
}

/* Trio layout — three distinct products, NOT a fan. One pack centered-back
   and slightly larger, two packs in front flanking it L/R so each reads as a
   discrete product rather than a variant in a series. */
.bx-three-img-trio {
    position: relative;
    overflow: visible;
    /* Clip only the bottom — leave top + sides open so packs can extend
       in any direction except down (where they'd cover body text).
       inset: top right bottom left */
    clip-path: inset(-400px -400px 0 -400px);
}
/* Card holding the trio: let top + sides release so packs can poke beyond
   the card boundary. Only the bottom is clipped (so body text stays clean). */
.bx-three-card:has(.bx-three-img-trio) {
    overflow: visible;
    clip-path: inset(-400px -400px 0 -400px round 24px);
}
.bx-three-img-trio .bx-three-trio-img {
    position: absolute;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 16px 28px rgba(60, 40, 20, 0.24));
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Back: large hero pack, centered, slight tilt */
.bx-three-img-trio .bx-three-trio-back {
    top: 50%;
    left: 50%;
    width: 52%;
    height: 110%;
    transform: translate(-50%, -50%) rotate(-3deg);
    z-index: 1;
}
/* Front-left: tilted left, overlapping back from the left side */
.bx-three-img-trio .bx-three-trio-front-left {
    top: 50%;
    left: 50%;
    width: 46%;
    height: 100%;
    transform: translate(-92%, -42%) rotate(-12deg);
    z-index: 2;
}
/* Front-right: tilted right, overlapping back from the right side */
.bx-three-img-trio .bx-three-trio-front-right {
    top: 50%;
    left: 50%;
    width: 46%;
    height: 100%;
    transform: translate(-8%, -42%) rotate(10deg);
    z-index: 3;
}
/* Hover: spread the trio outward slightly */
.bx-three-card:hover .bx-three-img-trio .bx-three-trio-back {
    transform: translate(-50%, -52%) rotate(-3deg) scale(1.04);
}
.bx-three-card:hover .bx-three-img-trio .bx-three-trio-front-left {
    transform: translate(-100%, -40%) rotate(-14deg) scale(1.04);
}
.bx-three-card:hover .bx-three-img-trio .bx-three-trio-front-right {
    transform: translate(0%, -40%) rotate(12deg) scale(1.04);
}

/* Duo layout — TWO products leaning toward each other from opposite sides,
   meeting near the center. Distinct from the trio (no layering) and the
   fan (symmetric pair, no center-hero). On hover the pair separates. */
.bx-three-img-duo {
    position: relative;
    overflow: visible;
    clip-path: inset(-400px -400px 0 -400px);
}
.bx-three-card:has(.bx-three-img-duo) {
    overflow: visible;
    clip-path: inset(-400px -400px 0 -400px round 24px);
}
.bx-three-img-duo .bx-three-duo-img {
    position: absolute;
    top: 50%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 18px 30px rgba(60, 40, 20, 0.26));
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Kalmi — the hero: bigger, centered, in front, slight tilt */
.bx-three-img-duo .bx-three-duo-left {
    left: 50%;
    width: 62%;
    height: 115%;
    transform: translate(-62%, -50%) rotate(-6deg);
    z-index: 2;
}
/* Omani — supporting role: smaller, peeking from behind on the right */
.bx-three-img-duo .bx-three-duo-right {
    left: 50%;
    width: 42%;
    height: 88%;
    transform: translate(8%, -36%) rotate(14deg);
    z-index: 1;
    filter:
        drop-shadow(0 14px 24px rgba(60, 40, 20, 0.22))
        brightness(0.94);
}
.bx-three-card:hover .bx-three-img-duo .bx-three-duo-left {
    transform: translate(-66%, -50%) rotate(-8deg) scale(1.04);
}
.bx-three-card:hover .bx-three-img-duo .bx-three-duo-right {
    transform: translate(14%, -36%) rotate(18deg) scale(1.04);
}

/* Body content */
.bx-three-card .bx-three-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 6px 12px 14px;
}
.bx-three-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    opacity: 0.6;
    margin-bottom: 8px;
}
.bx-three-card h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.0;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    max-width: 100%;
}
.bx-three-card p {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 18px;
    opacity: 0.82;
}
/* Pill CTA at the foot of each card */
.bx-three-card .bx-three-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 10px 14px 10px 18px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s;
}
.bx-three-card .bx-three-cta {
    background: var(--canvas-deep);
    color: #fff;
    transition: transform 0.25s, background 0.3s, color 0.3s;
}
.bx-three-card .bx-three-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -4px -8px -4px 4px;
    border-radius: 999px;
    background: #73cb73;
    transition: background 0.3s;
}
.bx-three-card .bx-three-cta-chip svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--canvas-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s;
}
/* On hover the green fill is the card bg, so flip the CTA to inverse:
   white pill with dark green chip */
.bx-three-card:hover .bx-three-cta {
    background: #fff;
    color: var(--canvas-deep);
    transform: translateX(2px);
}
.bx-three-card:hover .bx-three-cta-chip { background: var(--canvas-deep); }
.bx-three-card:hover .bx-three-cta-chip svg { stroke: #fff; }

@media (max-width: 1024px) {
    .bx-three-grid { grid-template-columns: 1fr 1fr; }
    .bx-three-head { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .bx-three { padding: 40px 24px; }
    .bx-three-grid { grid-template-columns: 1fr; }
    .bx-three-card h3 { font-size: 20px; }
}

/* === Section 3: big display headline over a "stacked food" centerpiece ===== */
.bx-banner {
    padding: 60px 48px 72px;
    text-align: center;
    position: relative;  /* anchor for .bx-banner-right absolute positioning */
}
.bx-banner-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(36px, 5.2vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 auto;
    /* Wide enough that the first line never wraps into a 3rd line on large
       displays (the <br> already sets the intended 2-line split). */
    max-width: 1400px;
}
.bx-banner-title .inline-img {
    display: inline-block;
    width: clamp(48px, 5.5vw, 80px);
    height: clamp(48px, 5.5vw, 80px);
    border-radius: 999px;
    background: var(--cream);
    vertical-align: middle;
    margin: 0 6px;
    position: relative;
    overflow: hidden;
}
.bx-banner-title .inline-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
}
.bx-banner-body {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 36px;
    align-items: center;
    text-align: left;
}
.bx-banner-left p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 22px;
}
.bx-banner-center {
    aspect-ratio: 1;
    background: var(--cream);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
}
.bx-banner-center img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    object-fit: contain;
    /* No filter, no will-change-y — keep the moving element pure transform.
       That's the only way browsers can promote it cleanly to a GPU layer. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
}
.bx-banner-center-front {
    z-index: 2;
}
.bx-banner-center-back {
    z-index: 1;
}
.bx-banner-center:hover .bx-banner-center-front {
    transform: translate3d(-78%, -50%, 0) rotate(-8deg);
}
.bx-banner-center:hover .bx-banner-center-back {
    transform: translate3d(-22%, -50%, 0) rotate(8deg);
}

/* Homepage: shrink the back (second) almond pack a touch */
.benefits-canvas[data-page="home"] .bx-banner-center-back {
    width: 64%;
    height: 64%;
}

/* Reveal box (homepage only) — hidden until hover, then fades + slides in
   from the RIGHT, sitting in the gap the front pack opens by sliding left. */
.benefits-canvas[data-page="home"] .bx-banner-center-reveal {
    position: absolute;
    /* Anchor the box's LEFT edge near the column's right edge (~78%), so only
       a sliver tucks behind the pack and the whole text body sits to the right,
       in the clear. Anchored to the column so it scales the same at all widths. */
    left: 79%;
    top: 50%;
    z-index: 0;                /* behind the back image (z-index:1) for depth */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(60, 40, 20, 0.22);
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(24px, -50%, 0);
    transition: opacity 0.4s ease 0.12s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.benefits-canvas[data-page="home"] .bx-banner-center:hover .bx-banner-center-reveal {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, -50%, 0);
}
.benefits-canvas[data-page="home"] .bx-banner-center-reveal-label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--canvas-deep);
}
.benefits-canvas[data-page="home"] .bx-banner-center-reveal-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 10px 9px 18px;
    background: #f5c252;
    color: var(--canvas-deep);
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background 0.25s, transform 0.2s;
}
.benefits-canvas[data-page="home"] .bx-banner-center-reveal-cta:hover {
    background: #f0b842;
    transform: translateY(-1px);
}
.benefits-canvas[data-page="home"] .bx-banner-center-reveal-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #d69913;
    border-radius: 999px;
}
.benefits-canvas[data-page="home"] .bx-banner-center-reveal-chip svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Right-side bowl panel — absolutely positioned to .bx-banner, anchored
   flush to the section's right padding edge. Bowl and semicircle both
   live inside, fully visible (no viewport overflow). */
.bx-banner-right {
    position: absolute;
    top: 65%;
    right: -48px;
    width: 240px;
    height: 420px;
    z-index: 2;
    overflow: hidden;  /* clip the bowl's right half to give the "tucked into edge" look */
    border-radius: 999px 0 0 999px;
    /* Start state: slid offscreen to the right + faded */
    transform: translate(120%, -50%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease-out;
    will-change: transform, opacity;
}
.bx-banner-right.is-revealed {
    transform: translate(0, -50%);
    opacity: 1;
}
/* The semicircle background fills the panel completely */
.bx-banner-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f5ead6;
    border-radius: inherit;
    box-shadow:
        inset 24px 0 36px rgba(180, 140, 70, 0.18),
        0 24px 40px rgba(26, 24, 16, 0.10);
    z-index: 0;
}
/* Bowl anchored to the panel's right edge, sized so half overflows past
   the right edge (clipped by .bx-banner-right's overflow: hidden). */
/* Bowl is now a 948:500 (tightly cropped) image. After rotate(90deg) it
   becomes vertical. We want its center on the panel's right edge so the
   right half is clipped by overflow:hidden + the half-pill radius. */
.bx-banner-right-bowl {
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%) rotate(90deg);
    width: 360px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter:
        drop-shadow(0 4px 6px rgba(60, 40, 20, 0.15))
        drop-shadow(0 16px 24px rgba(60, 40, 20, 0.22))
        drop-shadow(0 32px 48px rgba(60, 40, 20, 0.15));
}
@media (max-width: 900px) {
    .bx-banner-right {
        right: -24px;
        width: 280px;
        height: 280px;
    }
    .bx-banner-right-bowl { width: 280px; right: -50px; }
}

/* Curved text that arcs along the panel's left curve with a small gap */
.bx-banner-right-curvedtext {
    position: absolute;
    top: 65%;
    right: 32px;
    width: 264px;
    height: 444px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    /* Fade in slightly after the panel slides in */
    transform: translate(60%, -50%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                opacity 0.7s ease-out 0.15s;
    will-change: transform, opacity;
}
.bx-banner-right-curvedtext.is-revealed {
    transform: translate(0, -50%);
    opacity: 1;
}
.bx-banner-right-curvedtext text {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    fill: var(--canvas-deep);
    opacity: 0.75;
}
@media (max-width: 900px) {
    .bx-banner-right-curvedtext {
        right: -24px;
        width: 304px;
        height: 304px;
    }
    .bx-banner-right-curvedtext text { font-size: 10px; letter-spacing: 0.28em; }
}
@media (max-width: 900px) {
    .bx-banner-body { grid-template-columns: 1fr; text-align: center; }
}

/* === Section 4: "Our finest selections" inside a cream container ========== */
.bx-pantry {
    margin: 0 48px 60px;
    background: var(--cream);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;
}
.bx-pantry-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.bx-pantry-head h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
/* Stack of small product thumbnails — signals "more products available".
   Tiles overlap on the left side; rightmost is a +N count badge. */
.bx-pantry-stack {
    display: flex;
    align-items: center;
}
.bx-pantry-mid {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cream);
    box-shadow: 0 4px 12px rgba(15, 36, 25, 0.06);
    transition: transform 0.25s, z-index 0s;
    position: relative;
}
.bx-pantry-stack .bx-pantry-mid + .bx-pantry-mid { margin-left: -16px; }
/* Stagger so each subsequent tile sits one layer above the previous */
.bx-pantry-stack .bx-pantry-mid:nth-child(1) { z-index: 1; }
.bx-pantry-stack .bx-pantry-mid:nth-child(2) { z-index: 2; }
.bx-pantry-stack .bx-pantry-mid:nth-child(3) { z-index: 3; }
.bx-pantry-stack .bx-pantry-mid:nth-child(4) { z-index: 4; }
.bx-pantry-stack .bx-pantry-mid:hover {
    transform: translateY(-3px);
    z-index: 10;
}
.bx-pantry-mid img { width: 80%; height: 80%; object-fit: contain; }

/* Count badge — same dimensions, dark forest green chip with mint text */
.bx-pantry-mid-count {
    background: var(--canvas-deep);
    color: #73cb73;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.005em;
}

.bx-pantry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.bx-pantry-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}
.bx-pantry-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
.bx-pantry-card-img {
    aspect-ratio: 4 / 3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bx-pantry-card-img img { width: 80%; height: 80%; object-fit: contain; }
.bx-pantry-card-meta {
    padding: 18px 20px 8px;
}
.bx-pantry-card-name {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 4px;
}
.bx-pantry-card-tag {
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.bx-pantry-card-cta {
    margin: 14px 16px 16px;
    background: var(--canvas-deep);
    color: #fff;
    border-radius: 999px;
    padding: 8px 8px 8px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.25s, transform 0.25s;
}
.bx-pantry-card:hover .bx-pantry-card-cta {
    background: #0f2419;
    transform: translateY(-1px);
}
.bx-pantry-card-cta-price {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: #fff;
}
.bx-pantry-card-cta-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
    text-align: left;
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 12px;
}
.bx-pantry-card-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #73cb73;
    flex-shrink: 0;
    transition: transform 0.25s;
}
.bx-pantry-card-cta-chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--canvas-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bx-pantry-card:hover .bx-pantry-card-cta-chip { transform: translateX(2px); }

/* Variant: muted (one card in the trio gets reversed colors for rhythm) */
.bx-pantry-card-cta.muted { background: #73cb73; }
.bx-pantry-card-cta.muted .bx-pantry-card-cta-price { color: var(--canvas-deep); }
.bx-pantry-card-cta.muted .bx-pantry-card-cta-label {
    color: rgba(15, 36, 25, 0.65);
    border-left-color: rgba(15, 36, 25, 0.15);
}
.bx-pantry-card-cta.muted .bx-pantry-card-cta-chip { background: var(--canvas-deep); }
.bx-pantry-card-cta.muted .bx-pantry-card-cta-chip svg { stroke: #fff; }
.bx-pantry-card:hover .bx-pantry-card-cta.muted { background: #5db35d; }
@media (max-width: 900px) {
    .bx-pantry { margin: 0 24px 40px; padding: 24px; }
    .bx-pantry-grid { grid-template-columns: 1fr; }
    .bx-pantry-head { grid-template-columns: 1fr auto; }
    .bx-pantry-stack { display: none; }
}

/* === Section 5: routine list + image + side card ========================= */
.bx-routine {
    padding: 24px 48px 60px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1fr;
    gap: 32px;
    align-items: stretch;
}
.bx-routine-head {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 12px;
}
.bx-routine-head h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.bx-routine-list {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 8px 8px;
}
.bx-routine-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 14px 14px;
    align-items: center;
}
.bx-routine-item + .bx-routine-item { border-top: 1px solid #f0f0f0; }
.bx-routine-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bx-routine-thumb img { width: 76%; height: 76%; object-fit: contain; border-radius: 10px; }
.bx-routine-text strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: -0.005em;
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
}
.bx-routine-text span {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}
.bx-routine-image {
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 320px;
    position: relative;
}
.bx-routine-image img { width: 78%; height: 78%; object-fit: contain; }

/* === Seeds variant of .bx-routine — interactive seed showcase =============== */
.bx-seeds .bx-routine-item {
    cursor: pointer;
    transition: background 0.25s;
    border-radius: 12px;
}
.bx-seeds .bx-routine-item + .bx-routine-item { border-top: 1px solid transparent; }
.bx-seeds .bx-routine-item:hover,
.bx-seeds .bx-routine-item.is-active {
    background: var(--cream);
}
.bx-seeds .bx-routine-item .bx-routine-thumb {
    transition: transform 0.3s;
}
.bx-seeds .bx-routine-item:hover .bx-routine-thumb,
.bx-seeds .bx-routine-item.is-active .bx-routine-thumb {
    transform: scale(1.06);
}

/* Image area: a single centred hero jar (Chia by default), which the hover
   handler swaps to the active seed. No cluster/stack composite. */
.bx-seeds .bx-routine-image .bx-seeds-stack {
    display: none;            /* retired — single jar is the default visual */
}
.bx-seeds .bx-routine-image .bx-seeds-single {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    height: 86%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.25s ease;
    filter: drop-shadow(0 22px 40px rgba(60, 40, 20, 0.18));
}

/* Upsell card — appears only when Flax is the active seed */
.bx-seeds-upsell {
    display: none;
    margin-top: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--cream);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    align-items: center;
    gap: 14px;
    box-shadow: 0 6px 18px rgba(15, 36, 25, 0.06);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    opacity: 0;
    transform: translateY(8px);
    animation: bxUpsellIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bx-seeds.is-flax .bx-seeds-upsell { display: flex; }
.bx-seeds-upsell:hover {
    transform: translateY(-2px);
    border-color: #73cb73;
    box-shadow: 0 10px 24px rgba(15, 36, 25, 0.10);
}
.bx-seeds-upsell-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.bx-seeds-upsell-img img { width: 80%; height: 80%; object-fit: contain; border-radius: 10px; }
.bx-seeds-upsell-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bx-seeds-upsell-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.55;
}
.bx-seeds-upsell-body strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--canvas-deep);
}
.bx-seeds-upsell-sub {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
}
.bx-seeds-upsell-chip {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #73cb73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s;
}
.bx-seeds-upsell-chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--canvas-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bx-seeds-upsell:hover .bx-seeds-upsell-chip { transform: translateX(3px); }

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

/* === Per-seed CTA color theming ============================================= */
/* The right-side Shop button picks up a seed-appropriate accent color when its
   seed is active. Chip stays as a darker shade of the same hue. */
.bx-seeds.is-chia .bx-routine-side .bx-cta {
    background: #4fbfb7;                      /* aqua */
}
.bx-seeds.is-chia .bx-routine-side .bx-cta .bx-cta-chip { background: #2e8a83; }

.bx-seeds.is-flax .bx-routine-side .bx-cta {
    background: #e88aa0;                      /* warm pink */
    color: #3a1822;
}
.bx-seeds.is-flax .bx-routine-side .bx-cta .bx-cta-chip { background: #b35d72; }
.bx-seeds.is-flax .bx-routine-side .bx-cta .bx-cta-chip svg { stroke: #fff; }

.bx-seeds.is-pumpkin .bx-routine-side .bx-cta {
    background: #5da856;                      /* pumpkin-leaf green */
}
.bx-seeds.is-pumpkin .bx-routine-side .bx-cta .bx-cta-chip { background: #2f6a2c; }

.bx-seeds.is-sunflower .bx-routine-side .bx-cta {
    background: #f5c252;                      /* mustard yellow */
    color: var(--canvas-deep);
}
.bx-seeds.is-sunflower .bx-routine-side .bx-cta .bx-cta-chip { background: #c8932a; }
.bx-seeds.is-sunflower .bx-routine-side .bx-cta .bx-cta-chip svg { stroke: #fff; }

/* Roasted-flax upsell card (shown when Flax is active) uses a deeper pink */
.bx-seeds-upsell .bx-seeds-upsell-chip { background: #8a3d52; }
.bx-seeds-upsell .bx-seeds-upsell-chip svg { stroke: #fff; }
.bx-seeds-upsell:hover { border-color: #8a3d52; }
.bx-routine-side h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 14px;
}
.bx-routine-side p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 18px;
}
.bx-routine-side-mini {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.bx-routine-side-mini-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bx-routine-side-mini-img img { width: 80%; height: 80%; object-fit: contain; border-radius: 10px; }
.bx-routine-side-mini-text strong {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    color: var(--ink);
}
.bx-routine-side-mini-text span {
    font-size: 12px;
    color: var(--ink-soft);
}

@media (max-width: 1024px) {
    .bx-routine { grid-template-columns: 1fr 1fr; }
    .bx-routine-side { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .bx-routine { padding: 16px 24px 40px; grid-template-columns: 1fr; }
}

/* === Section 6: olive + mustard accent cards ("zero tricks just taste") === */
.bx-accent-row {
    padding: 0 48px 60px;
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}
.bx-accent-olive {
    background: var(--olive);
    color: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
}
.bx-accent-olive-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 0;
}
/* === Olive card ============================================================ */
/* Default (no seed hovered): horizontal title centered in the card, bowl hidden.
   Active (a seed hovered): title flips to vertical pinned left, bowl reveals right. */
.bx-accent-olive {
    background: var(--canvas-deep);  /* default = Shop All Seeds dark green */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: background 0.45s ease;
}
.bx-accent-olive-title {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
    transition:
        writing-mode 0s,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        font-size 0.45s ease;
}
.bx-accent-olive-bowl {
    position: absolute;
    top: 50%;
    right: -1%;
    transform: translateY(-50%) translateX(40%) rotate(90deg);
    width: 340px;
    height: auto;
    pointer-events: none;
    opacity: 0;
    filter:
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18))
        drop-shadow(0 18px 32px rgba(0, 0, 0, 0.18));
    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Active state: bowl reveals from the right and the title pins to the left */
.bx-accent-row.is-active .bx-accent-olive {
    justify-content: flex-start;
    align-items: center;
}
.bx-accent-row.is-active .bx-accent-olive-title {
    /* Absolute-position so the vertical writing-mode doesn't fight the flex parent */
    position: absolute;
    top: 50%;
    left: 28px;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    margin: 0;
}
.bx-accent-row.is-active .bx-accent-olive-bowl {
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotate(90deg);
}

/* === Mustard card ========================================================== */
/* Default: only the heading block is visible, centered vertically + horizontally.
   Active (a seed hovered): heading slides up & shrinks slightly to top-left,
   the pill chips fade in below it. */
.bx-accent-mustard {
    background: #73cb73;  /* default = Shop All Seeds mint chip */
    border-radius: 20px;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 280px;
    color: var(--canvas-deep);
    transition: background 0.45s ease;
}
.bx-accent-row.is-active .bx-accent-mustard {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
/* Stacked headline block: small caps tag sitting tight above a big chunky display title.
   The underline divider only appears in the active state (when the pills are
   below it); in the default centered state there's nothing to divide from. */
.bx-accent-mustard-head {
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1.5px solid transparent;
    transition: margin-bottom 0.35s ease, padding-bottom 0.35s ease, border-color 0.35s ease;
}
.bx-accent-row.is-active .bx-accent-mustard-head {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom-color: rgba(15, 36, 25, 0.18);
}
.bx-accent-mustard-tag {
    display: block;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.55;
    margin: 0 0 12px;
}
.bx-accent-mustard-heading {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--canvas-deep);
    margin: 0;
}
.bx-accent-mustard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Hidden by default; revealed when a seed is active */
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition:
        opacity 0.4s ease 0.05s,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
        max-height 0.5s ease;
}
.bx-accent-row.is-active .bx-accent-mustard-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 400px;
}
.bx-accent-mustard-list li {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--canvas-deep);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}
.bx-accent-mustard-list li:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

.bx-accent-text {
    padding: 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bx-accent-text-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.62;
    margin-bottom: 14px;
}
.bx-accent-text-eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
}
.bx-accent-text h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--canvas-deep);
    margin: 0 0 14px;
}
.bx-accent-text h3 em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    opacity: 0.85;
}
.bx-accent-text p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 22px;
    max-width: 320px;
}
.bx-accent-text .bx-link { align-self: flex-start; }

/* Stat tiles — two-column grid of {big value, tiny label} */
.bx-accent-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 26px;
    padding: 16px 0;
    border-top: 1px solid rgba(15, 36, 25, 0.12);
    border-bottom: 1px solid rgba(15, 36, 25, 0.12);
}
.bx-accent-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bx-accent-stat-val {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 3.2vw, 44px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--canvas-deep);
    font-feature-settings: 'tnum' on;
}
.bx-accent-stat-lbl {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.3;
}
@media (max-width: 900px) {
    .bx-accent-row { padding: 0 24px 40px; grid-template-columns: 1fr; }
    .bx-accent-olive-title { writing-mode: horizontal-tb; transform: none; }
}

/* === Section 7: closing big-text + product moment ========================= */
.bx-closer {
    padding: 24px 48px 80px;
    text-align: center;
    position: relative;
}
.bx-closer-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(46px, 7.6vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0;
}
.bx-closer-row {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: center;
}
.bx-closer-img {
    aspect-ratio: 4 / 3;
    background: var(--cream);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.bx-closer-img img { width: 80%; height: 80%; object-fit: contain; }

/* Fan variant — stack multiple products across the closer box, each tilted
   and offset by its index so the group reads as an assortment. --n = count,
   --i = item index (0-based). Items are centered around (--n - 1) / 2. */
.bx-closer-fan { overflow: visible; }
.bx-closer-fan .bx-closer-fan-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 92%;
    object-fit: contain;
    object-position: center;
    /* Signed offset from the centre item: negative = left, positive = right */
    --off: calc(var(--i) - (var(--n) - 1) / 2);
    /* Absolute distance from centre, for z-index + scale falloff */
    --absoff: max(var(--off), calc(-1 * var(--off)));
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--off) * 38%))
        rotate(calc(var(--off) * 6deg))
        scale(calc(1 - var(--absoff) * 0.05));
    transform-origin: center 75%;
    z-index: calc(10 - var(--absoff));
    filter:
        drop-shadow(0 12px 22px rgba(60, 40, 20, 0.2))
        brightness(calc(1 - var(--absoff) * 0.03));
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.bx-closer-fan:hover .bx-closer-fan-img {
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--off) * 44%))
        rotate(calc(var(--off) * 8deg))
        scale(calc(1.03 - var(--absoff) * 0.05));
}
.bx-closer-mid {
    text-align: center;
}
.bx-closer-mid p {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 18px;
}
@media (max-width: 900px) {
    .bx-closer { padding: 16px 24px 60px; }
    .bx-closer-row { grid-template-columns: 1fr; }
}

/* === Customer voices (bx-voices) — two opposite-scrolling marquee rows ====== */
.bx-voices {
    padding: clamp(48px, 7vw, 96px) 0;
}
.bx-voices-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto clamp(32px, 4vw, 56px);
    padding: 0 24px;
}
.bx-voices-badge {
    display: inline-block;
    background: var(--cream);
    color: var(--canvas-deep);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.bx-voices-head h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--canvas-deep);
    margin: 0 0 14px;
}
.bx-voices-head p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}
.bx-voices-rows {
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.bx-voices-row { display: flex; overflow: hidden; }
.bx-voices-track {
    display: flex;
    gap: 22px;
    padding-right: 22px;
    animation: bxVoicesLeft var(--voices-duration, 64s) linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    contain: layout style paint;
    flex-shrink: 0;
}
.bx-voices-track.reverse { animation-name: bxVoicesRight; animation-duration: var(--voices-duration, 52s); }
@keyframes bxVoicesLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes bxVoicesRight {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
.bx-voices-row:hover .bx-voices-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .bx-voices-track { animation: none; }
}
.bx-voice-card {
    background: var(--inner-bg);
    border: 1px solid #eee4d4;
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 6px 18px rgba(60, 40, 20, 0.04);
    width: 360px;
    height: 210px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bx-voice-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}
.bx-voice-author { display: flex; align-items: center; gap: 12px; }
.bx-voice-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--canvas-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.bx-voice-name {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.bx-voice-meta { font-size: 12px; color: var(--ink-soft); }

/* === Feedback (bx-feedback) — inline form in the inner card =============== */
.bx-feedback {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px);
}
/* Feedback lander (homepage) — compact CTA card linking to /feedback */
.bx-feedback-lander {
    background: var(--cream);
    border-radius: 28px;
    padding: clamp(32px, 5vw, 64px);
    text-align: center;
}
.bx-feedback-lander .bx-feedback-eyebrow {
    display: inline-block;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.bx-feedback-lander h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: #372a0d;
    margin: 0 0 14px;
}
.bx-feedback-lander p {
    max-width: 560px;
    margin: 0 auto 26px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bx-feedback-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 14px 16px 14px 24px;
    background: #f5c252;
    color: var(--canvas-deep);
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background 0.25s, transform 0.2s;
}
.bx-feedback-cta:hover { background: #f0b842; transform: translateY(-1px); }
.bx-feedback-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #d69913;
    border-radius: 999px;
}
.bx-feedback-cta-chip svg {
    width: 13px;
    height: 13px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bx-feedback-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    background: var(--cream);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 56px);
}
.bx-feedback-eyebrow {
    display: inline-block;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.bx-feedback-intro h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: #382a09;
    margin: 0 0 16px;
}
.bx-feedback-intro p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}
/* Contact-page intro extras (methods + meta) inside the bx-feedback left column */
.bx-contact-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}
.bx-contact-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(26, 58, 42, 0.12);
}

.bx-feedback-form { display: flex; flex-direction: column; gap: 18px; }
.bx-ff-field { display: flex; flex-direction: column; gap: 8px; }
.bx-ff-field label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--canvas-deep);
}
.bx-ff-opt { font-weight: 400; color: var(--ink-soft); }
.bx-ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bx-ff-field input,
.bx-ff-field textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--inner-bg);
    border: 1px solid #e7dcc8;
    border-radius: 14px;
    padding: 13px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.bx-ff-field textarea { min-height: 110px; resize: vertical; }
.bx-ff-field input:focus,
.bx-ff-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 118, 70, 0.14);
}
.bx-ff-rating { display: flex; gap: 10px; }
.bx-ff-nr {
    flex: 1;
    aspect-ratio: 1;
    max-width: 56px;
    border: 1px solid #e7dcc8;
    background: var(--inner-bg);
    border-radius: 14px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.bx-ff-nr:hover { transform: translateY(-2px); }
.bx-ff-nr.active {
    background: #f5c252;
    border-color: #f5c252;
    color: var(--canvas-deep);
}
.bx-ff-submit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 13px 14px 13px 22px;
    background: #f5c252;
    color: var(--canvas-deep);
    border: none;
    cursor: pointer;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background 0.25s, transform 0.2s;
}
.bx-ff-submit:hover { background: #f0b842; transform: translateY(-1px); }
.bx-ff-submit-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #d69913;
    border-radius: 999px;
}
.bx-ff-submit-chip svg {
    width: 12px; height: 12px;
    stroke: #fff; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.bx-ff-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.bx-ff-note.is-ok { color: var(--olive-deep); font-weight: 600; }
.bx-ff-note.is-err { color: var(--accent-deep); font-weight: 600; }
/* Rating caption + anonymous checkbox row (used on the /feedback page form) */
.bx-feedback-form .rating-caption {
    text-align: left;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--ink-soft);
    min-height: 16px;
}
.bx-ff-anon {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.bx-ff-anon input { width: auto; }
.bx-ff-anon label {
    margin: 0;
    font-weight: 400;
    color: var(--ink-soft);
}
@media (max-width: 820px) {
    .bx-feedback-inner { grid-template-columns: 1fr; }
    .bx-voice-card { width: 300px; height: 200px; }
}
@media (max-width: 560px) {
    .bx-ff-row { grid-template-columns: 1fr; }
}

/* === Category catalog (bx-catalog) — /products + category index pages ====== */
.bx-catalog-hero {
    text-align: center;
    padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 56px);
    position: relative;
    overflow: hidden;
    background: #f9f9f9;
    /* Match the inner card's rounded top so the bg doesn't square off the corners */
    border-radius: 24px 24px 0 0;
}
/* Small product packs scattered around the headline as floating accents.
   --x / --y are container-relative positions; sit behind the text. */
.bx-catalog-orbit {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.bx-catalog-orbit img {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(48px, 6vw, 86px);
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%) rotate(var(--r));
    filter:
        blur(3px)
        saturate(0.92) brightness(1.02)
        drop-shadow(0 10px 18px rgba(15, 36, 25, 0.10));
    opacity: 0.85;
}
/* Keep hero text above the scattered packs */
.bx-catalog-hero > .bx-catalog-crumbs,
.bx-catalog-hero > .bx-catalog-label,
.bx-catalog-hero > .bx-catalog-title,
.bx-catalog-hero > .bx-catalog-sub,
.bx-catalog-hero > .bx-catalog-count {
    position: relative;
    z-index: 1;
}
@media (max-width: 720px) {
    .bx-catalog-orbit img { width: clamp(36px, 9vw, 56px); opacity: 0.8; }
}
.bx-catalog-crumbs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;           /* override global nav { width: 100% } */
    margin-right: auto;           /* hug the left edge inside the centered hero */
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
.bx-catalog-crumbs a {
    color: var(--canvas-deep);
    text-decoration: none;
    background: #f9f9f9;
    padding: 7px 14px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(15, 36, 25, 0.04);
}
.bx-catalog-crumbs a:hover { background: #ececea; }
.bx-catalog-crumbs svg {
    width: 14px;
    height: 14px;
    color: rgba(15, 36, 25, 0.35);
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}
.bx-catalog-crumbs span {
    color: var(--canvas-deep);
    background: transparent;
    padding: 7px 4px;
    font-weight: 700;
}
.bx-catalog-label {
    display: inline-block;
    background: #eef0ee;
    color: var(--canvas-deep);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.bx-catalog-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(40px, 7vw, 92px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--canvas-deep);
    margin: 0 0 18px;
}
.bx-catalog-sub {
    max-width: 560px;
    margin: 0 auto 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bx-catalog-count {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.55;
}
.bx-catalog-grid-wrap { padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 88px); }

/* Catalog controls (filter tabs + search + sort) — /products landing only */
.catalog-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: clamp(20px, 3vw, 36px);
}
/* Rounded brand pills — matches the site's 999px pill language (CTAs, chips).
   Inactive = quiet outlined ghost pill; active = solid dark-green pill. */
.catalog-filter-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--canvas-deep);
    background: transparent;
    border: 1.5px solid #dfe3df;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Count badge — small pill counter inside each tab */
.filter-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-soft);
    background: rgba(26, 58, 42, 0.08);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
.filter-tab:hover { border-color: var(--canvas-deep); }
.filter-tab.active {
    color: #fff;
    background: var(--canvas-deep);
    border-color: var(--canvas-deep);
}
.filter-tab.active span {
    background: #73cb73;
    color: var(--canvas-deep);
}
.catalog-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.catalog-search {
    position: relative;
    display: flex;
    align-items: center;
}
.catalog-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    stroke: var(--ink-soft);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}
.catalog-search input {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--inner-bg);
    border: 1px solid #e3e3e0;
    border-radius: 999px;
    padding: 10px 16px 10px 38px;
    width: 220px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.catalog-search input::placeholder { color: var(--ink-soft); }
.catalog-search input:focus {
    outline: none;
    border-color: var(--canvas-deep);
    box-shadow: 0 0 0 3px rgba(26, 58, 42, 0.10);
}
.catalog-sort .custom-select { min-width: 168px; }
.catalog-empty {
    text-align: center;
    padding: 56px 20px;
}
.catalog-empty p {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0 0 16px;
}
.catalog-empty-reset {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--canvas-deep);
    border: none;
    padding: 11px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.catalog-empty-reset:hover { background: #2a5440; transform: translateY(-1px); }
@media (max-width: 680px) {
    .catalog-controls { flex-direction: column; align-items: stretch; }
    .catalog-controls-right { flex-direction: column; align-items: stretch; }
    .catalog-search input { width: 100%; }
    .catalog-sort .custom-select { width: 100%; }
}

.bx-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(16px, 1.6vw, 26px);
}
.bx-catalog-card {
    display: flex;
    flex-direction: column;
    background: var(--inner-bg);
    border: 1px solid #ececec;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bx-catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 36, 25, 0.10);
    border-color: #dcdcdc;
}
.bx-catalog-card-img {
    position: relative;
    aspect-ratio: 1;
    background: #f4f4f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bx-catalog-card-img img {
    width: 86%;
    height: 94%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.bx-catalog-card:hover .bx-catalog-card-img img { transform: scale(1.06); }
/* Frosted-glass pill — translucent white with backdrop blur, dark-green
   tracked caps. Reads premium and sits cleanly over the product image. */
.bx-catalog-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    color: var(--canvas-deep);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px rgba(15, 36, 25, 0.08);
    z-index: 1;
}
/* Green highlight chip behind "Best" inside the frosted pill */
.bx-badge-hl {
    background: var(--canvas-deep);
    color: #fff;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: 1px;
}
.bx-catalog-card-info { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.bx-catalog-card-name {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--canvas-deep);
    margin-bottom: 4px;
}
.bx-catalog-card-weight { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px; }
.bx-catalog-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bx-catalog-card-price {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--canvas-deep);
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.bx-catalog-card-price.soon { font-size: 12px; font-weight: 600; color: var(--ink-soft); display: inline; }
/* Selling price (prominent) + struck MRP + discount badge */
.bx-price-sp { font-size: 15px; font-weight: 700; color: var(--canvas-deep); }
.bx-price-mrp {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: line-through;
}
.bx-price-off {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #2a7a3a;
    background: rgba(115, 203, 115, 0.16);
    padding: 2px 7px;
    border-radius: 999px;
    align-self: center;
}
.bx-catalog-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--canvas-deep);
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.25s, transform 0.2s;
}
.bx-catalog-card:hover .bx-catalog-card-cta { background: #2a5440; transform: translateX(2px); }
.bx-catalog-card-cta svg {
    width: 15px; height: 15px;
    stroke: #fff; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Image-pending placeholder (failed/missing product photo) */
.bx-catalog-card-img.img-pending img { opacity: 0; }
.bx-catalog-card-img.img-pending::after {
    content: 'Coming soon';
    position: absolute;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    color: var(--ink-soft);
}
@media (max-width: 560px) {
    .bx-catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bx-catalog-card-info { padding: 14px; }
}

/* === Info / form pages on the new shell (about, quality, feedback, contact) =
   Scoped to .benefits-canvas so the un-converted info pages (blog, faq, etc.)
   keep their original layout. */
.benefits-canvas .bx-info-crumbs {
    padding: clamp(20px, 4vw, 36px) clamp(20px, 5vw, 64px) 0;
    margin-bottom: 0;
}
.benefits-canvas .info-page {
    padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 80px);
}
.benefits-canvas .info-hero {
    padding: clamp(16px, 3vw, 32px) 0 clamp(20px, 3vw, 36px);
}
/* The inner card already insets content; soften the .container max so prose
   doesn't run too wide inside the card. Contact has a 2-col layout so it gets
   more room than the single-column prose pages. */
.benefits-canvas .info-page .container {
    max-width: 920px;
}
.benefits-canvas .info-page .container:has(.contact-layout) {
    max-width: 1120px;
}

/* === Quality page (bx-quality) — brand-system layout ====================== */
.bx-quality-eyebrow {
    display: inline-block;
    background: var(--cream);
    color: var(--canvas-deep);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.bx-quality-hero {
    text-align: center;
    padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(20px, 3vw, 36px);
}
.bx-quality-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(40px, 7vw, 92px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--canvas-deep);
    margin: 0 0 18px;
}
/* Green highlighter box on the second line — white text, slight tilt */
.bx-quality-mark {
    display: inline-block;
    background: var(--canvas-deep);
    color: #fff;
    padding: 0 0.22em 0.06em;
    border-radius: 0.12em;
    transform: rotate(-1.5deg);
    line-height: inherit;
}
.bx-quality-lead {
    max-width: 580px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bx-quality-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
    max-width: 880px;
    margin: clamp(32px, 4vw, 52px) auto 0;
}
.bx-quality-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--cream);
    border-radius: 18px;
    padding: clamp(18px, 2.4vw, 28px) 14px;
}
.bx-quality-stat-val {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: -0.02em;
    color: var(--canvas-deep);
    line-height: 1;
}
.bx-quality-stat-lbl {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.bx-quality-section { padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 64px); }
.bx-quality-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 48px); }
.bx-quality-head h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--canvas-deep);
    margin: 0 0 14px;
}
.bx-quality-head p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.bx-quality-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
}
.bx-quality-card {
    background: var(--cream);
    border-radius: 22px;
    padding: clamp(24px, 2.6vw, 36px);
}
.bx-quality-card-wide { grid-column: 1 / -1; }
.bx-quality-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--canvas-deep);
    border-radius: 14px;
    margin-bottom: 18px;
}
.bx-quality-card-icon svg {
    width: 22px; height: 22px;
    stroke: #73cb73; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.bx-quality-card h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--canvas-deep);
    margin: 0 0 10px;
}
.bx-quality-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.bx-quality-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    margin-top: 20px;
}
.bx-quality-checks span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--canvas-deep);
}
.bx-quality-checks svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    stroke: #2a7a3a; fill: none; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
}

.bx-quality-source-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
}
.bx-quality-source {
    border-radius: 22px;
    padding: clamp(24px, 2.6vw, 34px);
}
.bx-quality-source.mustard { background: var(--canvas-deep); }   /* green */
.bx-quality-source.olive   { background: #ffffff; border: 1px solid #ececec; }  /* white */
.bx-quality-source.cream   { background: var(--canvas-deep); }   /* green */
.bx-quality-source-region {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.bx-quality-source h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.015em;
    margin: 0 0 16px;
}
.bx-quality-source ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bx-quality-source li {
    font-size: 13.5px;
    line-height: 1.45;
    padding-left: 18px;
    position: relative;
}
.bx-quality-source li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}
/* per-card text colors */
/* Green cards (1 & 3) — white text; white card (2) — dark text */
.bx-quality-source.mustard, .bx-quality-source.mustard h3, .bx-quality-source.mustard .bx-quality-source-region { color: #fff; }
.bx-quality-source.cream,   .bx-quality-source.cream h3,   .bx-quality-source.cream .bx-quality-source-region   { color: #fff; }
.bx-quality-source.mustard li, .bx-quality-source.cream li { color: rgba(255,255,255,0.9); }
.bx-quality-source.olive,   .bx-quality-source.olive h3,   .bx-quality-source.olive .bx-quality-source-region   { color: var(--canvas-deep); }
.bx-quality-source.olive li { color: var(--ink); }

.bx-quality-promise { padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.bx-quality-promise-inner {
    text-align: center;
    background: var(--canvas-deep);
    border-radius: 28px;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.bx-quality-promise-inner .bx-quality-eyebrow { background: rgba(255,255,255,0.12); color: #fff; }
.bx-quality-promise-inner h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 14px;
}
.bx-quality-promise-inner p {
    max-width: 520px;
    margin: 0 auto 26px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}
.bx-quality-promise-cta { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bx-cta-ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.bx-cta-ghost:hover { background: rgba(255,255,255,0.1); }
.bx-cta-ghost .bx-cta-chip { background: rgba(255,255,255,0.2); }

@media (max-width: 760px) {
    .bx-quality-stats { grid-template-columns: repeat(2, 1fr); }
    .bx-quality-grid { grid-template-columns: 1fr; }
    .bx-quality-source-grid { grid-template-columns: 1fr; }
    .bx-quality-checks { grid-template-columns: 1fr; }
}

/* === Branded header (scoped to benefits page) ============================== */
/* Solid dark forest green pill that floats on the cream-mint canvas with a
   small inset from the page edges. White logo + links, mustard CTA pill. */

/* Cancel the global fixed/blurred white header for this page so the pill
   sits cleanly on the canvas. Note: don't override `position` here — the
   later .bx-header rule sets position: sticky and would lose to !important. */
.benefits-canvas > header.bx-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    display: block !important;
}
/* Global body has top-padding to compensate for the fixed 74px header.
   Reset it here so the page doesn't have a phantom gap at the top. */
body.benefits-canvas { padding-top: 0 !important; }

.benefits-canvas .bx-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0;
    margin: 0;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.benefits-canvas .bx-header.scrolled {
    padding: 16px 24px 0;
}
.bx-header-nav {
    /* Animate ONLY visual properties so the morph from banner to pill stays
       at 60fps. Layout properties (padding, margin, etc.) stay constant. */
    margin: 0 auto;
    background: var(--canvas-deep);
    border: 2px solid transparent;
    border-radius: 0 0 32px 32px;
    padding: 16px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 0 0 rgba(115, 203, 115, 0);
    will-change: background-color, border-color, border-radius, box-shadow;
    transition:
        background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state: pill morph. Outer .bx-header gains side padding which
   creates the floating inset; nav background/border/radius flip in. */
.bx-header-nav {
    max-width: 1400px;
}
.benefits-canvas .bx-header.scrolled .bx-header-nav {
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(115, 203, 115, 0.18);
}
/* Product pages: scrolled pill blends with the grey hero band background */
.benefits-canvas[data-page="product"] .bx-header.scrolled .bx-header-nav {
    background: #f9f9f9;
    box-shadow: 0 6px 18px rgba(15, 36, 25, 0.10);
}
/* Product pages: expanded (rest) state uses grey instead of dark green */
.benefits-canvas[data-page="product"] .bx-header-nav {
    background: #f9f9f9;
}
.benefits-canvas[data-page="product"] .bx-header-logo img {
    filter: none;                 /* keep the dark logo on grey */
}
.benefits-canvas[data-page="product"] .bx-header-links li a {
    color: var(--canvas-deep);
}
.benefits-canvas[data-page="product"] .bx-header-links li a:hover {
    background: rgba(15, 36, 25, 0.06);
}
.benefits-canvas[data-page="product"] .bx-header-links li a.active {
    color: #000000;
    background: #e7e7e7;
}
/* Per-product accent theme. Defaults below = the standard green scheme;
   individual products override these vars via [data-product="..."] (see the
   per-product theme block lower in this file). */
.benefits-canvas[data-page="product"] {
    --pp-accent: var(--canvas-deep);   /* main accent (header CTA bg, price-save bg, active weight) */
    --pp-accent-deep: #73cb73;         /* chip / arrow fill */
    --pp-accent-on: var(--canvas-deep);/* text/stroke that sits ON the accent-deep fill */
    --pp-accent-ink: #fff;             /* text that sits ON the main accent */
}
.benefits-canvas[data-page="product"] .bx-header-cta {
    background: var(--pp-accent);
    color: var(--pp-accent-ink);
}
.benefits-canvas[data-page="product"] .bx-header-cta .bx-cta-chip {
    background: var(--pp-accent-deep);
}
.benefits-canvas[data-page="product"] .bx-header-cta .bx-cta-chip svg {
    stroke: var(--pp-accent-on);
}

/* ===== Per-product accent themes ==========================================
   A product opts in by adding data-product="<slug>" to its <body>.
   Each block just remaps the theme vars; all themed elements read from them. */
.benefits-canvas[data-page="product"][data-product="cashews"] {
    --pp-accent: #fd863d;          /* header CTA + active weight bg */
    --pp-accent-deep: #a24c21;     /* header CTA chip */
    --pp-accent-on: #f9f9f9;       /* stroke on the chip */
    --pp-accent-ink: #fff;         /* text on the main accent */
    --pp-savebg: #ee7638;          /* price-save pill bg */
    --pp-savebg-ink: #f9f9f9;      /* price-save pill text */
    --pp-buy-arrow: #ff893f;       /* Buy Now arrow chip (pill stays black) */
    --pp-buy-arrow-ink: #f9f9f9;   /* arrow stroke */
}
/* Kalmi Dates — dark navy-purple pack */
.benefits-canvas[data-page="product"][data-product="kalmi-dates"] {
    --pp-accent: #5b2d8e; --pp-accent-deep: #2a1646; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #5b2d8e; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #6b3aa0; --pp-buy-arrow-ink: #f9f9f9;
}
/* Omani Dates — rust / terracotta pack */
.benefits-canvas[data-page="product"][data-product="omani-dates"] {
    --pp-accent: #a8472a; --pp-accent-deep: #6e2c19; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #b8512f; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #c0512c; --pp-buy-arrow-ink: #f9f9f9;
}
/* California Almonds — soft peach / tan pack */
.benefits-canvas[data-page="product"][data-product="almonds"] {
    --pp-accent: #d98a52; --pp-accent-deep: #a85f38; --pp-accent-on: #fff; --pp-accent-ink: #fff;
    --pp-savebg: #e2925a; --pp-savebg-ink: #fff;
    --pp-buy-arrow: #e89b6c; --pp-buy-arrow-ink: #5a3320;
}
/* Chia Seeds — teal jar label */
.benefits-canvas[data-page="product"][data-product="chia-seeds"] {
    --pp-accent: #1f8a82; --pp-accent-deep: #0e4f4a; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #1f9c92; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #25a399; --pp-buy-arrow-ink: #f9f9f9;
}
/* Basil Seeds — sky-blue label */
.benefits-canvas[data-page="product"][data-product="basil-seeds"] {
    --pp-accent: #2f93d4; --pp-accent-deep: #1a5e8a; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #2f9cdc; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #38a4e0; --pp-buy-arrow-ink: #f9f9f9;
}
/* Flax (raw) Seeds — terracotta-tan label */
.benefits-canvas[data-page="product"][data-product="flax-seeds"] {
    --pp-accent: #c47a5a; --pp-accent-deep: #8a4e34; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #cc7e54; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #d2865f; --pp-buy-arrow-ink: #f9f9f9;
}
/* Roasted Flax Seeds — warm brown label */
.benefits-canvas[data-page="product"][data-product="roasted-flax-seeds"] {
    --pp-accent: #9a5c3c; --pp-accent-deep: #653a24; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #a8633e; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #b06a44; --pp-buy-arrow-ink: #f9f9f9;
}
/* Pumpkin Seeds — forest-green label */
.benefits-canvas[data-page="product"][data-product="pumpkin-seeds"] {
    --pp-accent: #2d6a3f; --pp-accent-deep: #184026; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #2f7a45; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #37854f; --pp-buy-arrow-ink: #f9f9f9;
}
/* Sunflower Seeds — golden-yellow label */
.benefits-canvas[data-page="product"][data-product="sunflower-seeds"] {
    --pp-accent: #d8a02a; --pp-accent-deep: #9a6f14; --pp-accent-on: #fff; --pp-accent-ink: #3a2a08;
    --pp-savebg: #e8b62a; --pp-savebg-ink: #3a2a08;
    --pp-buy-arrow: #e8b62a; --pp-buy-arrow-ink: #3a2a08;
}
/* Watermelon Seeds — deep-green label */
.benefits-canvas[data-page="product"][data-product="watermelon-seeds"] {
    --pp-accent: #2e7d4f; --pp-accent-deep: #184a2e; --pp-accent-on: #f9f9f9; --pp-accent-ink: #fff;
    --pp-savebg: #2f8a52; --pp-savebg-ink: #f9f9f9;
    --pp-buy-arrow: #38955c; --pp-buy-arrow-ink: #f9f9f9;
}

.bx-header-logo {
    display: inline-flex;
    align-items: center;
}
.bx-header-logo img {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);  /* white on dark green banner */
    transition: opacity 0.25s ease;
}
/* Cross-fade between white and original logo for a clean visual swap
   (filter values can't always interpolate smoothly across browsers) */
.bx-header-logo {
    position: relative;
}
.benefits-canvas .bx-header.scrolled .bx-header-logo img {
    filter: none;
}

.bx-header-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}
.bx-header-links li a {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    transition: color 0.25s, background 0.25s;
}
.bx-header-links li a:hover { color: #fff; }
.bx-header-links li a.active {
    color: var(--canvas-deep);
    background: #73cb73;
}
/* Scrolled (white pill) state: dark links + dark fill on active */
.benefits-canvas .bx-header.scrolled .bx-header-links li a {
    color: var(--canvas-deep);
}
.benefits-canvas .bx-header.scrolled .bx-header-links li a:hover {
    background: #e6fff2;
}
.benefits-canvas .bx-header.scrolled .bx-header-links li a.active {
    color: #fff;
    background: var(--canvas-deep);
}

.bx-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #73cb73;
    color: var(--canvas-deep);
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 12px 18px;
    border-radius: 999px;
    transition: background 0.25s, color 0.25s, transform 0.2s;
}
.bx-header-cta:hover { background: #5db35d; transform: translateY(-1px); }
.bx-header-cta .bx-cta-chip {
    width: 26px;
    height: 26px;
    margin: -4px -6px -4px 4px;
    background: var(--canvas-deep);
    transition: background 0.25s;
}
.bx-header-cta .bx-cta-chip svg { stroke: #fff; transition: stroke 0.25s; }
/* Scrolled (white pill): swap CTA to dark fill */
.benefits-canvas .bx-header.scrolled .bx-header-cta {
    background: var(--canvas-deep);
    color: #fff;
}
.benefits-canvas .bx-header.scrolled .bx-header-cta:hover { background: #0f2419; }
.benefits-canvas .bx-header.scrolled .bx-header-cta .bx-cta-chip { background: #73cb73; }
.benefits-canvas .bx-header.scrolled .bx-header-cta .bx-cta-chip svg { stroke: var(--canvas-deep); }

/* Hide breadcrumb on the benefits page only — its floating header anchors the top */
.benefits-canvas[data-page="benefits"] .breadcrumb { display: none; }

@media (max-width: 900px) {
    .bx-header-nav { padding: 12px 20px; gap: 12px; border-radius: 0 0 24px 24px; }
    .bx-header-links { display: none; }
    .bx-header-cta { padding: 10px 14px; font-size: 12px; }
    .benefits-canvas .bx-header.scrolled { padding: 8px 12px 0; }
    .benefits-canvas .bx-header.scrolled .bx-header-nav { padding: 8px 8px 8px 18px; border-radius: 999px; }
}

/* === Section 8: branded footer (scoped to benefits page) =================== */
/* The footer is its own dark-cocoa surface with rounded TOP corners (the page
   above flows into it visually). Tagline as a big display caps line with
   decorative quote marks, then a quiet 4-column row, then small copyright. */
.benefits-canvas .bx-footer {
    background: var(--canvas-deep);
    color: rgba(255, 255, 255, 0.82);
    margin: 24px 0 0;
    border-radius: 32px 32px 0 0;
    padding: 80px clamp(32px, 6vw, 96px) 28px;
    position: relative;
}
.bx-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.bx-footer-tagline {
    position: relative;
    text-align: center;
    padding: 8px 56px 64px;
}
.bx-footer-tagline p {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(28px, 4vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
}
.bx-footer-mark {
    position: absolute;
    top: -16px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(64px, 8vw, 120px);
    color: #73cb73;
    line-height: 1;
    pointer-events: none;
}
.bx-footer-mark.left  { left: 0; }
.bx-footer-mark.right { right: 0; transform: scaleX(-1); }

.bx-footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
    gap: 48px;
    padding: 48px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bx-footer-brand-col img {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
}
.bx-footer-brand-col p {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 360px;
}

.bx-footer-col h4 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #73cb73;
    margin: 0 0 18px;
}
.bx-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bx-footer-col li a {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.2s;
}
.bx-footer-col li a:hover { color: #fff; }

.bx-footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}
.bx-footer-bottom-dot { color: rgba(255, 255, 255, 0.30); }

@media (max-width: 900px) {
    .benefits-canvas .bx-footer {
        margin: 16px 0 0;
        padding: 56px 24px 24px;
        border-radius: 28px 28px 0 0;
    }
    .bx-footer-tagline { padding: 8px 32px 48px; }
    .bx-footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 36px 24px;
        padding-top: 36px;
    }
    .bx-footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .bx-footer-bottom { flex-direction: column; gap: 4px; }
    .bx-footer-bottom-dot { display: none; }
}

/* === Stats strip — used on quality / about pages ============================== */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 56px 0;
}
.stat-tile {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 28px 22px;
    text-align: center;
}
.stat-tile-value {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 36px;
    color: #1a3a2a;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
}
.stat-tile-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
}
@media (max-width: 768px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* === Source breakdown cards (used on /quality) ============================== */
.source-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.source-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 28px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.source-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.05);
}
.source-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f4faf4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.source-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 1.8;
}
.source-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.source-card-region {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin-bottom: 14px;
}
.source-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.source-card ul li {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    padding: 6px 0;
    border-top: 1px solid #f5f5f5;
}
.source-card ul li:first-child { border-top: none; padding-top: 0; }
@media (max-width: 768px) {
    .source-grid { grid-template-columns: 1fr; }
}

/* === Lab tests list (visual checklist) ====================================== */
.test-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}
.test-item {
    background: #f7faf7;
    border: 1px solid #e0ecdd;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #2c2c2c;
}
.test-item svg {
    width: 18px;
    height: 18px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .test-grid { grid-template-columns: 1fr; }
}

/* === FAQ category tabs ====================================================== */
.faq-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 32px 0 28px;
}
.faq-cat {
    padding: 9px 16px;
    background: white;
    border: 1.5px solid #e5e5e5;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}
.faq-cat:hover {
    border-color: #1a3a2a;
    color: #1a3a2a;
}
.faq-cat.active {
    background: #1a3a2a;
    border-color: #1a3a2a;
    color: white;
}
.faq-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #1a3a2a;
    background: #e6f7e6;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
}

/* === Contact methods grid =================================================== */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0 48px;
}
.contact-method-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    display: block;
}
.contact-method-card:hover {
    transform: translateY(-3px);
    border-color: #d8e8d8;
    box-shadow: 0 12px 32px rgba(0,0,0,0.05);
}
.contact-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f4faf4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.contact-method-icon svg {
    width: 22px;
    height: 22px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 1.8;
}
.contact-method-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}
.contact-method-card .method-value {
    font-size: 14px;
    color: #1a3a2a;
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-word;
}
.contact-method-card .method-note {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .contact-methods { grid-template-columns: 1fr; }
}

/* === Contact page — form + sidebar layout =================================== */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    margin: 32px 0 0;
}
.contact-form-col { min-width: 0; }

.contact-side {
    position: sticky;
    top: 96px;
}
.contact-side-card {
    background: linear-gradient(180deg, #fbfdfa 0%, #ffffff 100%);
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(26, 58, 42, 0.04);
}
.side-section { display: flex; flex-direction: column; gap: 6px; }
.side-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a3a2a;
    margin-bottom: 10px;
}

.side-method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.side-method:hover {
    background: #fff;
    border-color: #e6f0e6;
    transform: translateX(2px);
}
.side-method-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f4faf4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.side-method-icon svg {
    width: 18px;
    height: 18px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.side-method-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.side-method-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}
.side-method-value {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-method-arrow {
    width: 14px;
    height: 14px;
    stroke: #c8c8c8;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: stroke 0.15s, transform 0.15s;
}
.side-method:hover .side-method-arrow {
    stroke: #1a3a2a;
    transform: translateX(2px);
}

.side-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 18px 0;
}

.side-meta { gap: 14px; }
.side-meta-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.side-meta-row svg {
    width: 18px;
    height: 18px;
    stroke: #1a3a2a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 2px;
}
.side-meta-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}
.side-meta-sub {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 20px; }
    .contact-side { position: static; }
}

/* === Form card (used on /contact and /feedback) ============================= */
.form-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 4px 24px rgba(26, 58, 42, 0.04);
}
.form-card-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.form-card-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    margin: 0 0 6px;
}
.form-card-header p {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    margin: 0;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.form-field { margin-bottom: 14px; }
.form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1a3a2a;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.form-field label .optional {
    color: #999;
    font-weight: 400;
    margin-left: 4px;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #2c2c2c;
    background: #fafafa;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    transition: border 0.15s, background 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #1a3a2a;
    background: #fff;
}
.form-field textarea {
    min-height: 130px;
    resize: vertical;
    font-family: inherit;
}
.form-field .field-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}
.form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 16px 24px;
    background: #1a3a2a;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.form-submit:hover { background: #0f2419; }
.form-submit:active { transform: scale(0.99); }
.form-submit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.form-note {
    margin-top: 14px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
@media (max-width: 540px) {
    .form-row { grid-template-columns: 1fr; }
    .form-card { padding: 28px 20px; }
}

/* === Star rating widget ===================================================== */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.star-rating input { display: none; }
.star-rating label {
    cursor: pointer;
    color: #e0e0e0;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
}
.star-rating label svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #f5b800;
}
.star-rating label:active { transform: scale(0.9); }
.rating-caption {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: #888;
    min-height: 18px;
}

/* === Custom dropdown =========================================================
   Reusable styled dropdown. Markup:
     <div class="custom-select">
       <button class="cs-trigger" type="button">
         <span class="cs-value">Default label</span>
         <svg class="cs-arrow">...</svg>
       </button>
       <div class="cs-panel" role="listbox">
         <button class="cs-option" type="button" data-value="value">Label</button>
       </div>
       <input type="hidden" name="form-field" value="default">
     </div>
   Init via window.initCustomSelects() (idempotent).
   ========================================================================= */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: inherit;
    color: #2c2c2c;
}
.cs-trigger {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #2c2c2c;
    background: #fafafa;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border 0.15s, background 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.2;
}
.cs-trigger:hover { border-color: #c8d8c8; }
.cs-trigger:focus,
.custom-select.open .cs-trigger {
    outline: none;
    border-color: #1a3a2a;
    background: #fff;
}
.cs-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-value.placeholder { color: #999; }
.cs-arrow {
    width: 16px;
    height: 16px;
    stroke: #888;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: block;
    transition: transform 0.2s ease;
}
.custom-select.open .cs-arrow { transform: rotate(180deg); }

.cs-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(26, 58, 42, 0.10);
    z-index: 50;
    max-height: 280px;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.cs-panel-scroll {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    /* Hide native scrollbar — Firefox + IE/Edge legacy */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* When the panel actually overflows, reserve room on the right so the
   custom thumb has its own gutter and never sits over option text. */
.cs-panel.cs-has-scroll .cs-option {
    width: calc(100% - 22px);
    margin-right: 16px;
}
/* Hide native scrollbar — WebKit / Blink (no buttons, no track, no thumb) */
.cs-panel-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* Custom overlay thumb, painted by JS as the content scrolls */
.cs-thumb {
    position: absolute;
    top: 6px;
    right: 4px;
    width: 4px;
    background: #d8d8d8;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.custom-select.open .cs-thumb.active { opacity: 1; }
.custom-select.open .cs-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cs-option {
    display: block;
    width: calc(100% - 12px);
    margin: 0 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: #2c2c2c;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.cs-option:hover {
    background: #f4faf4;
    color: #1a3a2a;
}
.cs-option.selected {
    background: #1a3a2a;
    color: #fff;
    font-weight: 600;
}


/* === Number rating (1-5 buttons) ============================================ */
.number-rating {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.nr-btn {
    flex: 1;
    max-width: 64px;
    padding: 16px 0;
    background: #fafafa;
    border: 1.5px solid #e3e3e3;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    transition: all 0.18s;
}
.nr-btn:hover {
    border-color: #1a3a2a;
    color: #1a3a2a;
}
.nr-btn.active {
    background: #1a3a2a;
    border-color: #1a3a2a;
    color: #a3f7a3;
    transform: scale(1.06);
}


/* ============================================================================
   Product page — bespoke brand hero (warm-canvas band, vertical thumbs,
   circular feature chips, big add-to-cart pill, scalloped divider).
   Inspired by Treato / The Health Factory product pages.
   ============================================================================ */

/* === Hero band: warm cream stage, full-width inside .benefits-inner ========= */
.benefits-canvas .product-page.pp-hero {
    padding: 0;
    background: transparent;
}
.pp-hero-band {
    background: #f9f9f9;
    position: relative;
    padding: 24px 0 60px;
    border-radius: 24px 24px 32px 32px;   /* match top + soft rounded bottom */
}
.pp-hero-band .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Breadcrumb — small pill chips with slash separators between */
.pp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;       /* hug content width instead of filling the container */
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: clamp(24px, 5vw, 48px);
}
.pp-crumbs a {
    color: var(--canvas-deep);
    text-decoration: none;
    background: #f9f9f9;
    padding: 7px 14px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(15, 36, 25, 0.04);
}
.pp-crumbs a:hover {
    background: #ececea;
}
.pp-crumbs-sep {
    width: 14px;
    height: 14px;
    color: rgba(15, 36, 25, 0.35);
    flex-shrink: 0;
}
.pp-crumbs-current {
    color: var(--canvas-deep);
    background: transparent;
    padding: 7px 4px;
    font-weight: 700;
}
.pp-scallop {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    display: block;
}

.benefits-canvas .pp-hero .product-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

/* === Left: gallery with vertical circular thumbs + tinted stage ============ */
.benefits-canvas .pp-hero .product-gallery {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 18px;
    align-items: center;
}
.pp-thumbs-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.pp-thumb {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(15, 36, 25, 0.04);
}
.pp-thumb img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}
.pp-thumb:hover { transform: translateY(-2px); }
.pp-thumb.active {
    border-color: var(--canvas-deep);
    box-shadow: 0 4px 12px rgba(15, 36, 25, 0.10);
}

/* Main stage — large rounded card with the product centered */
.pp-stage {
    position: relative;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 36, 25, 0.08);
}
.pp-stage-img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-stage:hover .pp-stage-img { transform: scale(1.04); }
/* Stage wrapper — holds the raised tag above the stage */
.pp-stage-wrap { position: relative; }

/* Raised tab — sits above .pp-stage, top corners rounded, bottom flush with stage */
.pp-stage-tag {
    position: absolute;
    top: -20px;
    left: 32px;
    background: #fff;
    color: var(--canvas-deep);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 6px;
    line-height: 1;
    border-radius: 12px 12px 0 0;     /* top corners rounded, bottom square */
    z-index: 2;
}
/* Grey inner pad that holds the text, nested inside the white badge frame */
.pp-stage-tag-inner {
    display: inline-block;
    background: #f9f9f9;
    color: var(--canvas-deep);
    padding: 8px 14px;
    border-radius: 8px;
}
.pp-stage-tag::before { content: none; }
.pp-stage-tag::before { content: none; }
.pp-stage-tag::after { content: none; }

/* === Right: info column ==================================================== */
.benefits-canvas .pp-hero .product-info { padding: 0; }
.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.65;
    margin-bottom: 14px;
}
.pp-eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
}
.pp-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--canvas-deep);
    margin: 0 0 14px;
}
.pp-sub {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(15, 36, 25, 0.72);
    margin: 0 0 22px;
    max-width: 480px;
}

/* Rating */
.pp-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.pp-stars { display: inline-flex; gap: 2px; }
.pp-stars svg { width: 16px; height: 16px; fill: var(--canvas-deep); }
.pp-rating-text {
    font-size: 13px;
    color: rgba(15, 36, 25, 0.65);
}
.pp-rating-text strong {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    color: var(--canvas-deep);
    font-size: 14px;
    margin-right: 2px;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' on;
}

/* Price — Inter for clean numerals */
.pp-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.pp-price-cur {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--canvas-deep);
    align-self: flex-start;
    margin-top: 6px;
    letter-spacing: -0.02em;
}
.pp-price-now {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--canvas-deep);
    margin-left: -6px;
    font-feature-settings: 'tnum' on;
}
.pp-price-was {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: rgba(15, 36, 25, 0.5);
    text-decoration: line-through;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' on;
}
.pp-price-save {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pp-savebg-ink, var(--canvas-deep));
    background: var(--pp-savebg, #73cb73);
    padding: 6px 12px;
    border-radius: 999px;
    align-self: center;
}

/* === Feature tags: thin outlined pills, food-pack label style ============= */
.pp-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.pp-feature-tag {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    padding: 7px 14px;
    border: 1px solid rgba(15, 36, 25, 0.22);
    border-radius: 999px;
    background: transparent;
    transition: border-color 0.2s, background 0.2s;
}
.pp-feature-tag:hover {
    border-color: var(--canvas-deep);
    background: rgba(15, 36, 25, 0.04);
}

/* === Pack size pills ====================================================== */
.pp-pack { margin-bottom: 22px; }
.pp-pack-label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.65;
    margin-bottom: 10px;
}
.pp-pack-options { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-pack-options .weight-option {
    padding: 12px 22px;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--canvas-deep);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pp-pack-options .weight-option:hover { border-color: var(--canvas-deep); }
.pp-pack-options .weight-option.active {
    background: var(--pp-accent);
    color: var(--pp-accent-ink);
}

/* === Buy Now pill ========================================================= */
.benefits-canvas .pp-hero .product-buy-section { margin: 8px 0 22px; }
.pp-buy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 16px 16px 16px 32px;
    background: #000000;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: 'Poppins', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    box-shadow: 0 10px 28px rgba(15, 36, 25, 0.18);
}
.pp-buy:hover { background: #1a1a1a; transform: translateY(-2px); }
.pp-buy-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pp-buy-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -8px -8px -8px 10px;
    background: var(--pp-buy-arrow, #73cb73);
    border-radius: 999px;
    transition: transform 0.25s;
}
.pp-buy:hover .pp-buy-arrow { transform: translateX(2px); }
.pp-buy-arrow svg {
    width: 14px;
    height: 14px;
    stroke: var(--pp-buy-arrow-ink, var(--canvas-deep));
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* === Quiet trust bullets row ============================================== */
.pp-trustline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-trustline li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(15, 36, 25, 0.72);
    line-height: 1.4;
}
.pp-trustline-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #73cb73;
    flex-shrink: 0;
}

/* === Details + related sections (sit on white card below the hero) ======== */
.benefits-canvas .product-details-section {
    padding: 64px 0;
    background: transparent;
}
.benefits-canvas .product-details-section .container {
    max-width: 1280px;
    padding: 0 32px;
}
.benefits-canvas .product-details-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 6vw, 80px);
}
.benefits-canvas .product-detail-block h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--canvas-deep);
    margin: 0 0 18px;
}
.benefits-canvas .product-detail-block p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 14px;
    max-width: 520px;
}
.benefits-canvas .nutrition-table { width: 100%; border-collapse: collapse; }
.benefits-canvas .nutrition-table td {
    padding: 12px 0;
    font-size: 13.5px;
    color: var(--canvas-deep);
    border-bottom: 1px solid rgba(15, 36, 25, 0.08);
}
.benefits-canvas .nutrition-table td:first-child { color: var(--ink-soft); }
.benefits-canvas .nutrition-table td:last-child {
    text-align: right;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' on;
}
.benefits-canvas .nutrition-table tr:last-child td { border-bottom: none; }

.benefits-canvas .related-section { padding: 40px 0 80px; }

/* Mirror of the hero band: rounded on all top + bottom-corner sides */
.benefits-canvas .pp-related-band {
    background: #f9f9f9;
    border-radius: 32px 32px 24px 24px;   /* soft top + match bottom of inner-card */
    padding: 60px 0 80px;
    position: relative;
}
.benefits-canvas .pp-related-band .related-label {
    color: var(--canvas-deep);
    opacity: 0.65;
}
.benefits-canvas .pp-related-band .related-title {
    color: var(--canvas-deep);
}
.benefits-canvas .related-section .container {
    max-width: 1280px;
    padding: 0 32px;
}
.benefits-canvas .related-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
}
.benefits-canvas .related-label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.6;
}

/* Mobile collapse */
@media (max-width: 900px) {
    .benefits-canvas .pp-hero .product-layout { grid-template-columns: 1fr; }
    .benefits-canvas .pp-hero .product-gallery {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }
    .pp-thumb { width: 56px; height: 56px; }
    .pp-features { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .pp-feature-icon { width: 48px; height: 48px; }
    .pp-feature span { font-size: 9.5px; }
    .pp-title { font-size: clamp(30px, 8vw, 42px); }
    .pp-hero-band { padding: 32px 0 80px; }
    .pp-buy { padding: 16px 22px; max-width: 100%; }
    .benefits-canvas .product-details-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* === Buy modal — brand restyle (scoped to .benefits-canvas) ============== */
.benefits-canvas .buy-modal-overlay.active {
    background: rgb(0 0 0 / 50%);
}
.benefits-canvas .buy-modal {
    background: #fff;
    border-radius: 32px;
    padding: 40px 36px 36px;
    max-width: 480px;
    box-shadow: 0 28px 64px rgba(15, 36, 25, 0.28);
    position: relative;
}

/* Close — soft tinted square chip in the corner */
.benefits-canvas .buy-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f1f1ef;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    color: var(--canvas-deep);
}
.benefits-canvas .buy-modal-close:hover {
    background: var(--canvas-deep);
    color: #fff;
}
.benefits-canvas .buy-modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
}

/* Header — eyebrow + serif-italic accent in heading */
.benefits-canvas .buy-modal-header {
    text-align: left;
    margin-bottom: 28px;
    padding-right: 40px;
}
.benefits-canvas .buy-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0.55;
    margin-bottom: 14px;
}
.benefits-canvas .buy-modal-eyebrow::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
}
.benefits-canvas .buy-modal-header h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: none;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--canvas-deep);
    margin: 0 0 6px;
}
.benefits-canvas .buy-modal-header p {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
}

/* Marketplace cards: side-by-side, equal-weight tiles, no arrow */
.benefits-canvas .buy-modal-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.benefits-canvas .buy-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f4;
    border: none;
    border-radius: 16px;
    padding: 22px 16px;
    text-decoration: none;
    color: var(--canvas-deep);
    transition: background 0.2s, transform 0.2s;
    min-height: 76px;
}
.benefits-canvas .buy-modal-btn:hover {
    background: #ececea;
    transform: translateY(-2px);
}
.benefits-canvas .buy-modal-btn .buy-modal-logo {
    height: 22px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}

/* Blinkit row: dark green tile, logo left + 2-line title/sub right */
.benefits-canvas .buy-modal-blinkit {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--canvas-deep);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 16px 30px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.benefits-canvas .buy-modal-blinkit:hover { background: #0f2419; transform: translateY(-2px); }
/* Disabled state: muted grey tile, no hover effects */
.benefits-canvas .buy-modal-blinkit.is-disabled {
    background: #f1f1ef;
    cursor: not-allowed;
    pointer-events: none;
}
.benefits-canvas .buy-modal-blinkit.is-disabled:hover {
    background: #f1f1ef;
    transform: none;
}
.benefits-canvas .buy-modal-blinkit.is-disabled .buy-modal-logo {
    filter: grayscale(1) brightness(0.9);
    opacity: 0.55;
}
.benefits-canvas .buy-modal-blinkit.is-disabled .buy-modal-blinkit-title {
    color: rgba(15, 36, 25, 0.60);
}
.benefits-canvas .buy-modal-blinkit.is-disabled .buy-modal-blinkit-sub {
    color: rgba(15, 36, 25, 0.42);
}
.benefits-canvas .buy-modal-blinkit .buy-modal-logo {
    height: 26px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.benefits-canvas .buy-modal-blinkit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.benefits-canvas .buy-modal-blinkit-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: #fff;
}
.benefits-canvas .buy-modal-blinkit-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
}

/* ============================================================================
   Homepage hero — bold display headline with yellow marker highlight + 3-col
   composition (left blurb+CTA+core thumbs / center BIG product+badge / right
   yellow accent card). Trust strip at the bottom on dark forest green band.
   ============================================================================ */

/* Hero band — two states, connected by a single smooth transition.
   Default (at top of page): 100dvh tall, full-bleed beyond the inner card,
   covers the floating header area, no rounded top corners.
   .is-collapsed (after scroll): tucks into the boxed inner-card layout. */
.benefits-canvas[data-page="home"] .hp-spotlight {
    background: #fbe9c1;
    border-radius: 0;
    /* Negative side+top margins escape the inner-card insets AND the header
       area so the cream background reaches the actual viewport top, behind
       the floating header (which has z-index:100). */
    margin-top: -120px;
    margin-left: -24px;
    margin-right: -24px;
    /* Hero top sits at: (header height ~88px) - 120px = -32px (32px ABOVE
       viewport top). For bottom edge to land at viewport bottom (= 100dvh
       from top), height = 100dvh + 32px. */
    height: calc(100dvh + 32px);
    min-height: 0;
    z-index: 0;
    padding:
        clamp(88px, 12vh, 120px)
        clamp(28px, 5vw, 72px)
        clamp(20px, 3vh, 40px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition:
        margin 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: margin, height, border-radius, padding;
}
/* Collapsed: tucked into the boxed inner-card layout. Height stays at 100dvh
   so the hero remains full-viewport regardless of scroll position; only the
   margins / corners / padding-top change. */
.benefits-canvas[data-page="home"] .hp-spotlight.is-collapsed {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 24px 24px 0 0;
    height: calc(100dvh - 24px); /* boxed: top sits 24px below viewport; bottom at viewport edge */
    padding-top: clamp(48px, 6vw, 72px);
}

/* Massive headline — scaled by both width AND height so it always fits viewport.
   The min() takes the smaller of width-driven and height-driven sizes. */
.hp-spotlight-title {
    align-self: end;
    max-width: 600px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: min(clamp(48px, 8vw, 128px), 11dvh);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: #372a0d;
    margin: 180px 0 clamp(20px, 3.5vh, 48px);
    text-align: center;
}
.hp-spotlight-mark {
    display: inline-block;
    background: #f5c252;          /* mustard marker, like a highlighter */
    color: #fff;
    padding: 0 0.22em 0.06em;
    border-radius: 0.12em;
    transform: rotate(-1.5deg);
    line-height: inherit;
}

/* 3-column body: blurb left, product center (big), accent card right.
   flex: 1 1 0 with min-height: 0 lets the grid shrink to fit the remaining
   viewport space below the title. */
.hp-spotlight-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr 0.85fr;
    gap: clamp(20px, 3vw, 48px);
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.hp-spotlight-grid > * { min-height: 0; }

/* === LEFT: blurb + CTA + core products row === */
.hp-spotlight-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(14px, 2.5vh, 24px);
    padding-bottom: 0;
    min-height: 0;
}
.hp-spotlight-blurb {
    font-size: clamp(13px, 1.1vw, 14.5px);
    line-height: 1.55;
    color: rgba(15, 36, 25, 0.7);
    margin: 0;
    background: #fffffff0;
    backdrop-filter: blur(4px);
    border-radius: 16px;
    padding: 12px 24px;
    max-width: 320px;
}
.hp-spotlight-actions {
    display: inline-block;
    margin: 0;
}
.hp-spotlight-core { margin-top: 0; }

/* Primary CTA — terracotta-orange pill with dark green arrow chip */
.hp-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 13px 14px 13px 22px;
    background: #f5c252;
    color: var(--canvas-deep);
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 30px;
    transition: background 0.25s, transform 0.2s;
}
.hp-cta:hover { background: #f0b842; transform: translateY(-1px); }
.hp-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -6px -6px -6px 4px;
    background: #d69913;
    border-radius: 999px;
}
.hp-cta-chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-spotlight-core-label {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    margin-bottom: 12px;
}
.hp-spotlight-core-list {
    display: flex;
    gap: 8px;
}
.hp-spotlight-core-list a {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 6px rgba(15, 36, 25, 0.06);
}
.hp-spotlight-core-list a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 36, 25, 0.10);
}
.hp-spotlight-core-list img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* === CENTER: rotating product wheel — spans full hero width ===
   The product column wraps the wheel. The wheel itself is positioned relative
   to the entire hero (extends beyond the center column horizontally) so it
   can be as wide as the hero. The hero's overflow: hidden clips the bottom
   half of the circle naturally. */
.hp-spotlight-product {
    position: static;            /* let the wheel position relative to .hp-spotlight */
    min-height: 0;
    height: 100%;
    pointer-events: none;
}

.hp-spotlight-wheel {
    --radius: clamp(360px, 42vw, 720px);
    --itemSize: clamp(240px, 98vw, 420px);
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--radius));
    width: 600px;
    height: 600px;
    margin-left: calc(-1 * var(--radius));
    border-radius: 50%;
    animation: hpWheelSpin 90s linear infinite;
    transform-origin: center;
    z-index: 0;
    pointer-events: none;
}

/* Lift hero elements above the wheel */
.hp-spotlight-title,
.hp-spotlight-grid {
    position: relative;
    z-index: 1;
}

.hp-spotlight-wheel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--itemSize);
    height: var(--itemSize);
    margin-top: calc(-1 * var(--itemSize) / 2);
    margin-left: calc(-1 * var(--itemSize) / 2);
    /* --offset: per-item radial offset (small + or - value) — lets products
       sit slightly above or below the perfect-circle ring for organic feel.
       Defaults to 0 if no override set. */
    --offset: 0px;
    transform: rotate(var(--a)) translateY(calc(-1 * (var(--radius) + var(--offset))));
}
.hp-spotlight-wheel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    /* Subtle warm wash so products sit naturally on the cream canvas without
       looking like cutouts pasted on. Saturation kept high, sepia kept tiny. */
    filter:
        saturate(0.92)
        sepia(0.04)
        drop-shadow(0 18px 34px rgba(60, 40, 20, 0.16));
}

@keyframes hpWheelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Discount badge — circular, rotated, terracotta */
.hp-spotlight-badge {
    position: absolute;
    top: 8%;
    right: -2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #e87646;
    color: #fff;
    transform: rotate(-12deg);
    text-align: center;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(232, 118, 70, 0.32);
}
.hp-spotlight-badge-num {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    font-feature-settings: 'tnum' on;
}
.hp-spotlight-badge-lbl {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Tiny green leaf doodles scattered around the product */
.hp-spotlight-leaf {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
}
.hp-spotlight-leaf svg { width: 100%; height: 100%; fill: #6fa84a; }
.hp-spotlight-leaf-1 {
    top: 18%;
    left: 0%;
    transform: rotate(-30deg);
}
.hp-spotlight-leaf-2 {
    bottom: 18%;
    right: 6%;
    transform: rotate(45deg);
    opacity: 0.85;
}

/* === RIGHT: yellow accent card === */
.hp-spotlight-accent {
    background: #f5c252;
    border-radius: 22px;
    padding: clamp(16px, 2vh, 28px) clamp(18px, 2vw, 26px);
    align-self: stretch;
    margin-bottom: 0;
    height: max-content;
    position: relative;          /* anchor for the hanging date image + overlay */
    overflow: hidden;
}
/* Inner content wrapper — blurs on hover to reveal the Order Now overlay. */
.hp-spotlight-accent-inner {
    position: relative;
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.hp-spotlight-accent:hover .hp-spotlight-accent-inner {
    filter: blur(5px);
    opacity: 0.55;
}
/* Kalmi date vector — bottom-right, half inside the card, half hanging below.
   Absolutely positioned, so it does not affect the hero grid layout. */
.hp-spotlight-accent-date {
    position: absolute;
    right: clamp(-14px, -1vw, -2px);
    bottom: clamp(-48px, -6vh, -72px);
    width: clamp(68px, 7.5vw, 108px);
    height: auto;
    object-fit: contain;
    transform: rotate(8deg);
    filter: drop-shadow(0 14px 22px rgba(60, 40, 20, 0.28));
    pointer-events: none;
    z-index: 2;
}
/* Order Now overlay — hidden until the card is hovered. */
.hp-spotlight-accent-order {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--canvas-deep);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-spotlight-accent:hover .hp-spotlight-accent-order {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.hp-spotlight-accent-order-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    background: var(--canvas-deep);
    border-radius: 999px;
}
.hp-spotlight-accent-order-chip svg {
    width: 12px;
    height: 12px;
    stroke: #f5c252;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hp-spotlight-accent-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 10px;
}
.hp-spotlight-accent-price {
    display: inline-block;
    background: #372a0d;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    padding: 9px 18px;
    border-radius: 999px;
    font-feature-settings: 'tnum' on;
    align-self: flex-start;
}

/* === Trust strip — full-bleed dark band, pinned to the bottom of the hero === */
.hp-spotlight-trust {
    margin: 0 calc(-1 * clamp(28px, 5vw, 72px));
    padding: 16px clamp(28px, 5vw, 72px);
    background: var(--canvas-deep);
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-top: auto;          /* pins to the bottom of the flex column */
}
.hp-spotlight-trust-mark {
    color: #f5c252;        /* mustard star separator */
    font-size: 11px;
}

@media (max-width: 900px) {
    /* ===== HERO ===== */
    /* Drop the fixed 100dvh + huge top-margin; let the hero size to content so
       the headline, wheel and cards all fit without clipping or dead space. */
    .benefits-canvas[data-page="home"] .hp-spotlight,
    .benefits-canvas[data-page="home"] .hp-spotlight.is-collapsed {
        height: auto;
        min-height: 0;
        padding: 96px 20px 40px;
        display: block;
        overflow: hidden;
    }
    .hp-spotlight-title {
        align-self: auto;
        max-width: 100%;
        font-size: clamp(40px, 13vw, 72px);
        margin: 0 0 24px;
    }
    .hp-spotlight-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    /* Center column is just the empty wheel anchor — hide it in the stack */
    .hp-spotlight-product { display: none; }
    .hp-spotlight-left { justify-content: flex-start; gap: 16px; }
    .hp-spotlight-blurb { max-width: 100%; }
    .hp-spotlight-accent { height: auto; }

    /* Wheel: smaller radius + items + STATIC (no spin) on mobile — saves battery
       and avoids continuous compositor work / jank on phones. */
    .hp-spotlight-wheel {
        --radius: 200px;
        --itemSize: 92px;
        width: 280px;
        height: 280px;
        opacity: 0.5;
        animation: none;
        will-change: auto;
    }
    .hp-spotlight-wheel-item { width: var(--itemSize); height: var(--itemSize);
        margin-top: calc(-1 * var(--itemSize) / 2);
        margin-left: calc(-1 * var(--itemSize) / 2); }

    /* ===== SECTION RHYTHM ===== */
    .bx-three,
    .bx-banner,
    .bx-pantry,
    .bx-voices,
    .bx-feedback,
    .bx-closer { padding-left: 20px; padding-right: 20px; }

    /* bx-three: stack the 3 cards */
    .bx-three-head { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .bx-three-grid { grid-template-columns: 1fr; gap: 16px; }

    /* bx-banner: stack body, hide the desktop-only hover reveal box */
    .bx-banner-body { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .bx-banner-right,
    .bx-banner-right-curvedtext { display: none; }
    .benefits-canvas[data-page="home"] .bx-banner-center-reveal { display: none; }

    /* pantry: stack header + single-column cards */
    .bx-pantry-grid { grid-template-columns: 1fr; gap: 14px; }

    /* voices marquee: smaller fixed cards (keep equal heights for tidy rows) */
    .bx-voice-card { width: 280px; height: 196px; padding: 22px; }

    /* closer fans can overflow awkwardly when tiny — keep them contained */
    .bx-closer-row { gap: 16px; }
}

@media (max-width: 560px) {
    .benefits-canvas[data-page="home"] .hp-spotlight { padding: 88px 16px 32px; }
    .hp-spotlight-title { font-size: clamp(34px, 13vw, 56px); }
    .hp-spotlight-wheel { --radius: 150px; --itemSize: 72px; width: 220px; height: 220px; }
    .hp-spotlight-wheel-item { width: var(--itemSize); height: var(--itemSize);
        margin-top: calc(-1 * var(--itemSize) / 2);
        margin-left: calc(-1 * var(--itemSize) / 2); }
    .bx-three-card { border-radius: 18px; }
    .bx-voice-card { width: 240px; }
}

/* ============================================================================
   Homepage palette override: terracotta replaces mint on .bx-* CTAs.
   ============================================================================ */
.benefits-canvas[data-page="home"] .bx-cta {
    background: #f5c252;
    color: var(--canvas-deep);
}
.benefits-canvas[data-page="home"] .bx-cta:hover { background: #f0b842; }
.benefits-canvas[data-page="home"] .bx-cta-chip { background: #d69913; }
.benefits-canvas[data-page="home"] .bx-cta-chip svg { stroke: #fff; }

.benefits-canvas[data-page="home"] .bx-header-nav { background: transparent; }
.benefits-canvas[data-page="home"] .bx-header-links li a { color: rgb(255 255 255); }
.benefits-canvas[data-page="home"] .bx-header-cta { background: #f5c252; color: var(--canvas-deep); }
.benefits-canvas[data-page="home"] .bx-header-cta .bx-cta-chip { background: #d69913; }
.benefits-canvas[data-page="home"] .bx-header-cta .bx-cta-chip svg { stroke: #fff; }

/* Feedback + contact pages — white canvas + mustard header nav with brown CTA */
.benefits-canvas[data-form-page] { background: #ffffff; color: var(--ink); }
.benefits-canvas[data-form-page] .bx-header-nav { background: #ffc951; }
.benefits-canvas[data-form-page] .bx-header-links li a { color: #624910; }
.benefits-canvas[data-form-page] .bx-header-links li a:hover { background: rgba(98, 73, 16, 0.12); }
.benefits-canvas[data-form-page] .bx-header-links li a.active { color: #ffffff; background: #624910; }
.benefits-canvas[data-form-page] .bx-header-logo img { filter: none; }
.benefits-canvas[data-form-page] .bx-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #624910;
    color: #ffffff;
}
.benefits-canvas[data-form-page] .bx-header-cta .bx-cta-chip { background: #d69913; }
.benefits-canvas[data-form-page] .bx-header-cta .bx-cta-chip svg { stroke: #fff; }