/* ============================================================
   Tulasya Store — Custom Stylesheet
   Stack: Bootstrap 5 + custom tokens
   Palette: Emerald green #1E7D4D (brand), Cream #F9F6F0 (bg),
            Slate #2C3E50 (text), Amber #E8960C (accent/badge),
            Rose #D94F5C (Rx/discount), Soft grey #EEF1F4 (surface)
   ============================================================ */

:root {
    --tul-green:       #1E7D4D;
    --tul-green-dark:  #155C38;
    --tul-green-lt:    #E8F5EE;
    --tul-amber:       #E8960C;
    --tul-rose:        #D94F5C;
    --tul-slate:       #2C3E50;
    --tul-slate-lt:    #6B7E8E;
    /* --tul-cream: #F9F6F0; */
    --tul-surface:     #EEF1F4;
    --tul-border:      #D8DDE3;
    --tul-white:       #FFFFFF;
    --tul-shadow:      0 2px 12px rgba(0,0,0,.08);
    --tul-radius:      8px;
    --tul-radius-lg:   14px;
    --font-body:       'Segoe UI', sans-serif;
    --bs-primary:                #1E7D4D;
    --bs-primary-rgb:            30, 125, 77;
    --bs-primary-bg-subtle:      #E8F5EE;
    --bs-primary-border-subtle:  #9fcdb5;
    --bs-primary-text-emphasis:  #155C38;
    --bs-link-color:             #1E7D4D;
    --bs-link-hover-color:       #155C38;
    --bs-link-color-rgb:         30, 125, 77;
    --bs-focus-ring-color:       rgba(30,125,77,.25);
}

/* Bootstrap btn-primary = Tulasya green */
.btn-primary {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 #1E7D4D;
    --bs-btn-border-color:       #1E7D4D;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #155C38;
    --bs-btn-hover-border-color: #155C38;
    --bs-btn-active-bg:          #155C38;
    --bs-btn-active-border-color:#155C38;
    --bs-btn-focus-shadow-rgb:   30, 125, 77;
    --bs-btn-disabled-bg:        #1E7D4D;
    --bs-btn-disabled-border-color:#1E7D4D;
}
.btn-outline-primary {
    --bs-btn-color:              #1E7D4D;
    --bs-btn-border-color:       #1E7D4D;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #1E7D4D;
    --bs-btn-hover-border-color: #1E7D4D;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          #1E7D4D;
    --bs-btn-focus-shadow-rgb:   30, 125, 77;
}
/* Checkbox + radio checked = green */
.form-check-input:checked {
    background-color: #1E7D4D;
    border-color:     #1E7D4D;
}
/* Pagination active = green */
.pagination .page-link              { color: #1E7D4D; }
.pagination .page-item.active .page-link {
    background-color: #1E7D4D;
    border-color:     #1E7D4D;
    color: #fff;
}
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(30,125,77,.2); }

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--tul-slate);
    background: var(--tul-cream);
    font-size: 17px;
    line-height: 1.6;
}

a { color: var(--tul-green); text-decoration: none; }
a:hover { color: var(--tul-green-dark); }

/* ── Top Bar ───────────────────────────────────────────────────────────── */
.topbar {
    background: var(--tul-green);
    color: #fff;
    padding: .4rem 0;
    font-size: .78rem;
    letter-spacing: .02em;
}
.topbar-text { opacity: .92; }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.main-navbar {
    background: var(--tul-white);
    border-bottom: 1px solid var(--tul-border);
    padding: .6rem 0;
}

.navbar-brand { padding: 0; }
.brand-tul { color: var(--tul-green); font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.brand-ya  { color: var(--tul-amber); font-size: 1.55rem; font-weight: 700; }

/* Search */
.navbar-search { max-width: 560px; }
.search-icon { background: var(--tul-surface); border-right: none; color: var(--tul-slate-lt); }
.search-input { border-left: none; border-right: none; font-size: .9rem; }
.search-input:focus { box-shadow: none; border-color: var(--tul-green); }
.search-input:focus ~ .btn-search,
.search-input:focus + .search-icon { border-color: var(--tul-green); }
.btn-search {
    --bs-btn-bg:                 #1E7D4D;
    --bs-btn-border-color:       #1E7D4D;
    --bs-btn-hover-bg:           #155C38;
    --bs-btn-hover-border-color: #155C38;
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    font-size: .88rem;
    padding: .375rem 1rem;
}

/* Nav icon buttons */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    color: var(--tul-slate);
    font-size: .88rem;
    padding: .35rem .55rem;
    border-radius: var(--tul-radius);
    position: relative;
    transition: background .15s;
}
.nav-icon-btn:hover { background: var(--tul-surface); color: var(--tul-green); }
.nav-icon-btn .bi { font-size: 1.25rem; }

/* Cart badge */
.cart-btn { position: relative; }
.cart-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: var(--tul-rose);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    overflow: visible;
    isolation: isolate;
}

/* Cart heartbeat animation — fires on add-to-cart */
@keyframes cart-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.3); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.22); }
    70%  { transform: scale(1); }
}
@keyframes cart-badge-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.ha-btn-cart.cart-pulse .bi {
    animation: cart-heartbeat 0.7s ease-in-out;
}
.ha-btn-cart.cart-pulse .cart-badge {
    animation: cart-badge-pop 0.4s ease-out 0.1s;
}
/* Radial red wave pulse on cart badge */
@keyframes cart-ripple {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(2.8); opacity: 0;  }
}
.ha-btn-cart.cart-alive .cart-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #e53e3e;
    animation: cart-ripple 1.4s ease-out infinite;
    z-index: -1;
}

/* Collapse nav links */
.navbar-collapse .nav-link {
    color: var(--tul-slate);
    font-size: .88rem;
    padding: .4rem .75rem;
    border-radius: var(--tul-radius);
}
.navbar-collapse .nav-link:hover { background: var(--tul-surface); color: var(--tul-green); }

/* ── Section Headings ──────────────────────────────────────────────────── */
.section-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tul-slate);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tul-border);
    margin-left: .5rem;
}

/* ── Product Card ──────────────────────────────────────────────────────── */
.product-card {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: var(--tul-shadow);
    transform: translateY(-2px);
}

.product-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--tul-surface);
    position: relative;
}
.product-card-img picture {
    display: block;
    width: 100%;
    height: 100%;
}
.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s;
}
.product-card:hover .product-card-img img { transform: scale(1.04); }

.product-card-body {
    padding: .875rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Product card pack label + add-to-cart button */
.pc-pack-row { width: 100%; margin-bottom: 6px; }
.pc-pack-select {
    width: 100%; appearance: none; -webkit-appearance: none;
    border: 1.5px solid #D8D8D8; border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    padding: 9px 36px 9px 14px;
    font-size: .875rem; color: var(--tul-slate);
    cursor: pointer; outline: none; transition: border-color .15s;
}
.pc-pack-select:hover { border-color: #1A3D2B; }
.pc-pack-select:focus { border-color: #1A3D2B; box-shadow: 0 0 0 2px rgba(26,61,43,.12); }
.pc-pack-label {
    width: 100%;
    border: 1.5px solid #D8D8D8;
    border-radius: 10px;
    padding: 9px 36px 9px 14px;
    font-size: .875rem;
    color: var(--tul-slate);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    text-align: left;
}
.pc-atc-btn {
    width: 100%;
    background: #1A3D2B;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
    text-decoration: none;
}
.pc-atc-btn:hover { background: #1E7D4D; color: #fff; }
.pc-go-cart { background: #1E7D4D; }

.product-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--tul-slate);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .25rem;
}

.product-manufacturer {
    font-size: .75rem;
    color: var(--tul-slate-lt);
    margin-bottom: .5rem;
}

.product-salt {
    font-size: .72rem;
    color: var(--tul-slate-lt);
    font-style: italic;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
}
.pc-stars { color: #F59E0B; font-size: .78rem; }
.pc-rating-text { font-size: .75rem; color: #6b7280; }

.product-pricing {
    margin-top: auto;
    padding-top: .5rem;
    margin-bottom: .75rem;
}
.product-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tul-slate);
}
.product-mrp {
    font-size: .78rem;
    color: #dc2626;
    text-decoration: line-through;
    margin-left: .35rem;
}
.product-discount {
    font-size: .72rem;
    font-weight: 700;
    color: var(--tul-green);
    background: var(--tul-green-lt);
    padding: .1rem .35rem;
    border-radius: 4px;
    margin-left: .35rem;
    white-space: nowrap;
}

/* Badges — Bootstrap 5.3 native (badge bg-danger / bg-primary-subtle etc.) used in HTML.
   Font-size tweak so small badges match product card density. */
.badge { font-size: .65rem; letter-spacing: .02em; }

/* ── Hero Banner ───────────────────────────────────────────────────────── */
.hero-banner {
    background: linear-gradient(135deg, var(--tul-green) 0%, var(--tul-green-dark) 100%);
    color: #fff;
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
/* When a background photo is set — image flows naturally, no crop */
.hero-banner.hero-has-img {
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
}
/* Hide polka-dot ::before overlay when a real photo fills the hero */
.hero-banner.hero-has-img::before { content: none; }
/* Full-width banner image — width 100%, height auto = zero cropping */
.hero-bg-img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
/* Text overlay — position:absolute !important overrides Bootstrap's position-relative utility */
.hero-banner.hero-has-img .container-xl,
.hero-banner.hero-has-img .container-fluid {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.hero-banner.hero-has-img .hero-title   { text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hero-banner.hero-has-img .hero-subtitle { text-shadow: 0 1px 6px rgba(0,0,0,.55); opacity: 1; }
.hero-img-cta { box-shadow: 0 2px 12px rgba(0,0,0,.25); font-size: 15px; white-space: nowrap; }

.hero-title { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.2; }
.hero-subtitle { font-size: 1.05rem; opacity: .88; }

/* Hero buttons now use Bootstrap btn-warning + btn-outline-light */

/* Trust badges */
.trust-bar {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    padding: .75rem 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tul-slate);
}
.trust-item .bi { color: var(--tul-green); font-size: 1.1rem; }

/* ── Category Pills ────────────────────────────────────────────────────── */
.category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .75rem;
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    text-align: center;
    color: var(--tul-slate);
    font-size: .82rem;
    font-weight: 600;
    transition: all .2s;
    text-decoration: none;
}
.category-pill:hover {
    background: var(--tul-green-lt);
    border-color: var(--tul-green);
    color: var(--tul-green);
    transform: translateY(-2px);
    box-shadow: var(--tul-shadow);
}
.category-pill .icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--tul-green-lt);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--tul-green);
}

/* ── Sidebar Filters ───────────────────────────────────────────────────── */
.filter-sidebar {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    padding: 1.25rem;
}
.filter-heading {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tul-slate-lt);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--tul-border);
}
.filter-check .form-check-label { font-size: .88rem; cursor: pointer; }
.filter-check .form-check-input:checked { background-color: var(--tul-green); border-color: var(--tul-green); }

/* ── Cart ──────────────────────────────────────────────────────────────── */
.cart-item {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    padding: 1rem;
    margin-bottom: .75rem;
}
.cart-item-img {
    width: 80px;
    height: 100px;
    object-fit: contain;
    border-radius: var(--tul-radius);
    background: var(--tul-surface);
    padding: .25rem;
}
/* Cart item rating */
.ci-rating { display:flex; align-items:center; gap:4px; margin-top:4px; }
.ci-stars { color:#F59E0B; font-size:.72rem; }
.ci-rating-text { font-size:.72rem; color:#6b7280; }
/* Cart discount badge */
.ci-disc-badge {
    font-size: .7rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border-radius: 4px;
    padding: 2px 6px;
}
/* Cart qty stepper */
.ci-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--tul-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--tul-white);
}
.ci-qty-btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--tul-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ci-qty-btn:hover { background: var(--tul-surface); }
.ci-qty-input {
    width: 36px;
    border: none;
    border-left: 1.5px solid var(--tul-border);
    border-right: 1.5px solid var(--tul-border);
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--tul-slate);
    background: var(--tul-white);
    outline: none;
    -moz-appearance: textfield;
}
.ci-qty-input::-webkit-outer-spin-button,
.ci-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* PDP action row: Option B — single connected bar (cross-browser) */
.pdp-atc-row {
    display: flex;
    align-items: stretch;       /* children fill height — no height:100% needed on children */
    border: 2px solid #1E7D4D;
    border-radius: 14px;
    overflow: hidden;           /* clips children to pill shape */
    height: 52px;
    gap: 0;
    box-sizing: border-box;
}
/* Qty stepper — white left section */
.pdp-atc-row .pdp-qty-stepper {
    display: flex;
    align-items: stretch;
    flex: 0 0 125px;
    width: 125px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;     /* override base 54px — let parent stretch set height */
    background-color: #FFFFFF;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important; /* parent row clips the pill — stepper must not clip + button */
}
.pdp-atc-row .pdp-qty-btn {
    width: 44px;
    font-size: 1.25rem;
    font-weight: 300;
    color: #1E7D4D;
    background-color: #FFFFFF;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    align-self: stretch;        /* Firefox: buttons don't auto-stretch, must be explicit */
    transition: background-color .12s;
    -moz-appearance: none;      /* Firefox: remove UA button chrome that adds height */
    appearance: none;
    line-height: 1;
    vertical-align: middle;
}
/* Firefox: removes the 1px inner focus padding that shifts layout */
.pdp-atc-row .pdp-qty-btn::-moz-focus-inner { padding: 0; border: 0; }
.pdp-atc-row .pdp-qty-btn:hover { background-color: #E8F5EE; background: #E8F5EE; }
.pdp-atc-row .pdp-qty-num {
    flex: 0 0 36px !important;
    border-left: 1.5px solid #D8DDE3;
    border-right: 1.5px solid #D8DDE3;
    font-size: 1rem;
    font-weight: 700;
    color: #2C3E50;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;        /* explicit stretch for cross-browser safety */
    background-color: #FFFFFF;
    padding: 0;
    margin: 0;
}
/* ATC button — cross-browser: align-self:stretch + -moz-focus-inner fix */
.pdp-atc-row #addToCartBtn {
    flex: 1 1 0% !important;
    align-self: stretch !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: .88rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
}
.pdp-atc-row #addToCartBtn::-moz-focus-inner { padding: 0; border: 0; }
/* Wishlist — rightmost slot, explicit hex so no CSS-var resolution issue */
.pdp-atc-row .pdp-wl-btn {
    flex: 0 0 50px;
    width: 50px;
    align-self: stretch;
    background-color: #1E7D4D !important;
    background: #1E7D4D !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.85) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background-color .12s, color .12s;
    padding: 0;
    margin: 0;
    -moz-appearance: none;
    appearance: none;
    line-height: 1;
    vertical-align: middle;
}
.pdp-atc-row .pdp-wl-btn::-moz-focus-inner { padding: 0; border: 0; }
.pdp-atc-row .pdp-wl-btn:hover { background-color: #155C38 !important; background: #155C38 !important; color: #fff !important; }
.pdp-atc-row .pdp-wl-btn .bi-heart-fill { color: rgba(255,200,200,.95) !important; }

/* PDP full-width qty stepper */
.pdp-qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--tul-border);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    height: 54px;
    background: var(--tul-white);
}
.pdp-qty-btn {
    background: none;
    border: none;
    width: 64px;
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    color: var(--tul-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    user-select: none;
}
.pdp-qty-btn:hover { background: var(--tul-surface); }
.pdp-qty-num {
    flex: 1;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tul-slate);
    border-left: 1.5px solid var(--tul-border);
    border-right: 1.5px solid var(--tul-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-summary {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    padding: 1.25rem;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.summary-row.total {
    font-size: 1.05rem;
    font-weight: 700;
    border-top: 1px solid var(--tul-border);
    padding-top: .75rem;
    margin-top: .5rem;
}
.summary-savings { color: var(--tul-green); font-weight: 600; }

/* ── Cart Page (ct-) ───────────────────────────────────────────────────── */
/* Step bar */
.ct-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; }
.ct-step  { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ct-step-num { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:2px solid var(--tul-border); color:var(--tul-slate-lt); background:var(--tul-white); }
.ct-step.active .ct-step-num { background:var(--tul-green); border-color:var(--tul-green); color:#fff; }
.ct-step-label { font-size:11px; font-weight:600; color:var(--tul-slate-lt); white-space:nowrap; }
.ct-step.active .ct-step-label { color:var(--tul-green); }
.ct-conn { flex:1; height:2px; background:var(--tul-border); max-width:60px; margin:0 4px; margin-bottom:18px; }
/* Item cards */
.ct-item {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    overflow: hidden;
    transition: box-shadow .15s;
    margin-bottom: 14px;
}
.ct-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.ct-item-main { display: flex; gap: 0; align-items: stretch; }
.ct-img-wrap {
    flex-shrink: 0; width: 220px;
    background: #f7f9f4;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--tul-border);
    overflow: hidden;
}
.ct-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ct-img-wrap .ct-img-ph { font-size: 3rem; color: var(--tul-green); opacity: .3; }
.ct-item-body { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ct-item-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ct-item-name { font-size: 1.1rem; font-weight: 700; color: #111827; text-decoration: none; line-height: 1.3; display: block; }
.ct-item-name:hover { color: var(--tul-green); }
.ct-item-variant { font-size: 15px; color: var(--tul-slate-lt); margin-top: 2px; }
/* Pack selector */
.ct-pack-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid #c6e9d6; border-radius: 10px;
    background: #f2faf5; padding: .35rem .75rem;
    margin-top: 4px; width: fit-content;
}
.ct-pack-icon { color: #1a3d2b; font-size: .88rem; flex-shrink: 0; }
.ct-pack-sel {
    font-size: .88rem; font-weight: 600; color: #1a3d2b;
    border: none; background: transparent;
    cursor: pointer; outline: none; appearance: none;
    -webkit-appearance: none;
}
.ct-pack-chev { color: #1a3d2b; font-size: .72rem; flex-shrink: 0; pointer-events: none; }
.ct-item-rating { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: #f59e0b; margin-top: 2px; }
.ct-item-rating span { color: var(--tul-slate-lt); }
.ct-item-bottom { margin-top: 4px; }
/* Price */
.ct-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-price .ci-line-price { font-size: 1.5rem; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.ct-mrp  { font-size: .85rem; color: var(--tul-slate-lt); text-decoration: line-through; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ct-disc-pill { display: inline-flex; align-items: center; background: #dcfce7; color: #15803d; font-size: .72rem; font-weight: 700; border-radius: 20px; padding: 3px 10px; }
/* Remove btn */
.ct-remove { background: none; border: none; cursor: pointer; color: var(--tul-slate-lt); padding: 4px 6px; border-radius: 6px; line-height: 1; transition: color .12s, background .12s; flex-shrink: 0; font-size: 1.1rem; }
.ct-remove:hover { color: #dc2626; background: #fee2e2; }
/* Feature strip */
.ct-feat-strip {
    display: flex; align-items: stretch;
    border-top: 1px solid var(--tul-border);
    background: #f7f9f5;
}
.ct-feat-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px; padding: 12px 8px;
    text-align: center;
}
.ct-feat-item + .ct-feat-item { border-left: 1px solid var(--tul-border); }
.ct-feat-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: #1a3d2b; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; flex-shrink: 0;
}
.ct-feat-label { font-size: .72rem; font-weight: 600; color: #374151; line-height: 1.3; }
@media (max-width: 575px) {
    .ct-img-wrap { width: 110px; }
    .ct-item-body { padding: 12px 14px; }
    .ct-item-name { font-size: .92rem; }
    .ct-price .ci-line-price { font-size: 1.15rem; }
    .ct-feat-strip { flex-wrap: wrap; }
    .ct-feat-item { flex: 0 0 50%; }
    .ct-feat-item:nth-child(2) { border-left: 1px solid var(--tul-border); }
    .ct-feat-item:nth-child(3) { border-left: none; border-top: 1px solid var(--tul-border); }
    .ct-feat-item:nth-child(4) { border-left: 1px solid var(--tul-border); border-top: 1px solid var(--tul-border); }
}
/* Summary card */
.ct-summary { background:var(--tul-white); border:1px solid var(--tul-border); border-radius:var(--tul-radius-lg); padding:20px; position:sticky; top:80px; }
.ct-summary-title { font-size:1rem; font-weight:800; color:var(--tul-slate); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--tul-border); }
.ct-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:.87rem; }
.ct-row-label { color:var(--tul-slate-lt); }
.ct-row-val   { font-weight:600; color:var(--tul-slate); font-variant-numeric:tabular-nums; }
.ct-row.ct-savings .ct-row-label, .ct-row.ct-savings .ct-row-val { color:var(--tul-green); font-weight:700; }
.ct-row.ct-free .ct-row-val { color:var(--tul-green); font-weight:700; }
.ct-row.ct-total .ct-row-label { font-weight:800; font-size:.95rem; color:var(--tul-slate); }
.ct-row.ct-total .ct-row-val   { font-weight:800; font-size:1.1rem; color:var(--tul-slate); }
.ct-savings-tag { background:var(--tul-surface); color:var(--tul-green); font-size:.78rem; font-weight:700; border-radius:6px; padding:7px 10px; margin:8px 0 4px; display:flex; align-items:center; gap:6px; }
/* Coupon */
.ct-coupon-row { display:flex; gap:6px; margin:12px 0 4px; }
.ct-coupon-inp { flex:1; border:1.5px solid var(--tul-border); border-radius:7px; padding:8px 10px; font-size:.84rem; background:var(--tul-white); color:var(--tul-slate); outline:none; transition:border-color .12s; }
.ct-coupon-inp:focus { border-color:var(--tul-green); }
.ct-coupon-inp::placeholder { color:var(--tul-slate-lt); }
.ct-coupon-btn { background:var(--tul-green); color:#fff; border:none; border-radius:7px; padding:8px 14px; font-size:.84rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.ct-coupon-btn:hover { opacity:.88; }
/* CTA */
.ct-cta { display:block; width:100%; background:var(--tul-green); color:#fff; border:none; border-radius:9px; padding:13px; font-size:1rem; font-weight:700; text-align:center; cursor:pointer; text-decoration:none; margin-top:14px; transition:opacity .12s; }
.ct-cta:hover { opacity:.88; color:#fff; }
/* Trust row */
.ct-trust { display:flex; justify-content:center; gap:14px; margin-top:11px; font-size:.74rem; color:var(--tul-slate-lt); flex-wrap:wrap; }
.ct-trust-item { display:flex; align-items:center; gap:4px; }
/* Empty state */
.ct-empty { background:var(--tul-white); border:1px solid var(--tul-border); border-radius:var(--tul-radius-lg); padding:56px 24px; text-align:center; }
.ct-empty-icon { font-size:3.5rem; margin-bottom:14px; color:var(--tul-border); }
.ct-empty-title { font-size:1.1rem; font-weight:700; color:var(--tul-slate); margin-bottom:6px; }
.ct-empty-sub   { font-size:.85rem; color:var(--tul-slate-lt); margin-bottom:20px; }
/* Continue link */
.ct-continue { display:inline-flex; align-items:center; gap:6px; color:var(--tul-green); font-size:.85rem; font-weight:600; text-decoration:none; margin-top:14px; }
.ct-continue:hover { text-decoration:underline; }

/* ── Auth Forms ────────────────────────────────────────────────────────── */
.auth-card {
    background: var(--tul-white);
    border: 1px solid var(--tul-border);
    border-radius: var(--tul-radius-lg);
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}
.auth-logo { font-size: 1.75rem; font-weight: 800; margin-bottom: .25rem; }
/* btn-auth and btn-checkout now use Bootstrap btn-primary in HTML */
.form-control:focus { border-color: #1E7D4D; box-shadow: 0 0 0 .2rem rgba(30,125,77,.15); }

/* ── Footer ────────────────────────────────────────────────────────────── */
/* Newsletter bar */
.ft-newsletter-bar {
    background: #F3F5EF;
    border-top: 1px solid #DDE6D8;
    padding: 28px 0;
}
.ft-nl-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.ft-nl-left { flex-shrink: 0; }
.ft-nl-heading {
    display: block;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #1A1A1A;
    margin-bottom: 3px;
}
.ft-nl-sub { font-size: .8rem; color: #555; margin: 0; max-width: 200px; }
.ft-nl-form {
    display: flex;
    gap: 0;
    flex: 1;
    min-width: 280px;
    max-width: 420px;
}
.ft-nl-input {
    flex: 1;
    border: 1px solid #C8D5C0;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 10px 16px;
    font-size: .85rem;
    outline: none;
    background: #fff;
    color: #333;
}
.ft-nl-input:focus { border-color: #1E7D4D; }
.ft-nl-btn {
    background: #1E7D4D;
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 10px 22px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.ft-nl-btn:hover { background: #155C38; }
.ft-nl-msg { font-size: .8rem; color: #1E7D4D; }
.ft-nl-trust {
    display: flex;
    gap: 28px;
    margin-left: auto;
    flex-shrink: 0;
}
.ft-nl-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid #C8D5C0;
}
.ft-nl-trust-icon { font-size: 1.6rem; color: #1E7D4D; }
.ft-nl-trust-title { font-size: .85rem; font-weight: 700; color: #1A1A1A; }
.ft-nl-trust-sub { font-size: .75rem; color: #5f6b64; }

/* ── Main footer ─────────────────────────────────────────────────────────── */
.site-footer {
    background: #0D2117;
    color: rgba(255,255,255,.65);
    padding: 52px 0 0;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px 32px;
    align-items: start;
}
/* Brand column */
.footer-brand-col {}
.footer-logo-img { height: 42px; width: auto; max-width: 160px; object-fit: contain; }
.footer-logo-text { font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: -.4px; margin-bottom: 14px; line-height: 1; }
.footer-logo-text span { color: #F5A623; }
.footer-tagline { font-size: 16px; color: #fff; line-height: 1.7; margin: 14px 0 20px; max-width: 260px; }
/* Social */
.footer-social { display: flex; gap: 8px; margin-bottom: 24px; }
.footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.55); font-size: .88rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .15s;
}
.footer-social a:hover { background: #3D9E6B; border-color: #3D9E6B; color: #fff; }
/* Compliance row */
.footer-compliance {
    display: flex; align-items: center; gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-wrap: wrap;
}
.footer-gst-label { font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 3px; font-weight: 600; }
.footer-gst-val { font-size: .76rem; color: #fff; letter-spacing: .04em; }
.footer-compliance-sep { width: 1px; height: 34px; background: rgba(255,255,255,.1); flex-shrink: 0; }
.footer-fssai-img { height: 32px; width: auto; mix-blend-mode: screen; opacity: .8; display: block; }
/* Link columns */
.footer-links-col h6,
.footer-links-col .footer-col-heading {
    font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; line-height: 1.2;
    color: rgba(255,255,255,.88); margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-links-col ul { list-style: none; padding: 0; margin: 0; }
.footer-links-col ul li { margin-bottom: 10px; }
.footer-links-col ul li a {
    font-size: 15px; color: #fff; text-decoration: none;
    transition: color .15s; display: inline-flex; align-items: center; gap: 7px;
}
.footer-links-col ul li a::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: #3D9E6B; flex-shrink: 0; opacity: 0; transition: opacity .15s;
}
.footer-links-col ul li a:hover { color: #6FCF97; }
.footer-links-col ul li a:hover::before { opacity: 1; }
/* Contact items */
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; }
.footer-contact-item i { font-size: .88rem; color: #3D9E6B; margin-top: 2px; flex-shrink: 0; }
.footer-contact-item span,
.footer-contact-item a { font-size: 16px; color: #fff; text-decoration: none; line-height: 1.5; }
.footer-contact-item a:hover { color: #6FCF97; }
.footer-hours {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
    background: rgba(61,158,107,.12); border: 1px solid rgba(61,158,107,.2);
    border-radius: 20px; padding: 4px 12px; font-size: .71rem; color: #6FCF97;
}
/* Divider + bottom */
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 40px 0 0; }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; padding: 16px 0;
    font-size: .77rem; color: rgba(255,255,255,.7);
}
.footer-disclaimer { font-size: .71rem; color: rgba(255,255,255,.65); text-align: center; flex: 1; min-width: 200px; }
/* Payment badges */
.ft-payment-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ft-pay-label { font-size: .7rem; color: rgba(255,255,255,.7); margin-right: 2px; }
.ft-pay-badge {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px; padding: 3px 8px; font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; height: 22px;
    color: rgba(255,255,255,.5); letter-spacing: .03em;
}
.ft-pay-visa { color: #7B9CE8; }
.ft-pay-mc { gap: 0; padding: 3px 6px; }
.ft-mc-left  { width: 13px; height: 13px; border-radius: 50%; background: rgba(235,0,27,.65); display: inline-block; }
.ft-mc-right { width: 13px; height: 13px; border-radius: 50%; background: rgba(247,158,27,.65); display: inline-block; margin-left: -5px; }
.ft-pay-upi { color: #7DC97D; font-style: italic; }
.ft-pay-rupay { color: #9BAEDD; letter-spacing: -.02em; }
/* Footer responsive */
@media (max-width: 991.98px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand-col { grid-column: 1 / -1; }
    .footer-tagline { max-width: 100%; }
}
@media (max-width: 575.98px) {
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .footer-links-col { border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer-disclaimer { text-align: left; }
}

/* ── PDP (Product Detail) ──────────────────────────────────────────────── */
/* PDP Gallery — filmstrip below main image */
.pdp-gallery-inner {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
/* Bottom: horizontal filmstrip */
.pdp-thumb-rail {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    padding-bottom: 3px;
}
.pdp-thumb-rail::-webkit-scrollbar { height: 3px; }
.pdp-thumb-rail::-webkit-scrollbar-thumb { background: var(--tul-border); border-radius: 2px; }
.pdp-rail-item {
    flex: 1 1 0;
    min-width: 54px;
    max-width: 72px;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 2px solid var(--tul-border);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: var(--tul-surface);
    transition: border-color .18s, box-shadow .18s;
    flex-shrink: 0;
}
.pdp-rail-item img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pdp-rail-item.active  { border-color: var(--tul-green); box-shadow: 0 0 0 3px rgba(27,94,32,.12); }
.pdp-rail-item:hover:not(.active) { border-color: var(--tul-green); }
.pdp-rail-video { background: #111; }
.pdp-rail-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.38); color: #fff; font-size: 1.4rem;
}
/* Right: main image panel */
.pdp-main-panel {
    flex: 1;
    position: relative;
    background: radial-gradient(ellipse at 60% 40%, #ffffff 30%, #eef1f4 100%);
    border-radius: 14px;
    border: 1px solid var(--tul-border);
    overflow: hidden;
}
.pdp-badges {
    position: absolute; top: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 4px; z-index: 4;
}
.pdp-main-wrap { position: relative; }
.pdp-img-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    padding: .5rem;
    transition: transform .35s ease;
}
.pdp-main-panel:hover .pdp-img-main { transform: scale(1.06); }
.pdp-img-main { cursor: zoom-in; }
.pdp-video-wrap {
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdp-video-wrap video,
.pdp-video-wrap iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* ── Image Lightbox ──────────────────────────────────────────────────────── */
.pdp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0,0,0,.82);
    align-items: center;
    justify-content: center;
}
.pdp-lightbox.pdp-lb-open { display: flex; }
.pdp-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 48px rgba(0,0,0,.6);
    animation: pdpLbIn .18s ease;
}
@keyframes pdpLbIn {
    from { opacity:0; transform: scale(.92); }
    to   { opacity:1; transform: scale(1); }
}
.pdp-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s;
}
.pdp-lb-close:hover { background: rgba(255,255,255,.3); }
/* Legacy thumb class kept for backward compat */
.pdp-thumb {
    width: 64px; height: 64px;
    object-fit: contain;
    border-radius: var(--tul-radius);
    background: var(--tul-surface);
    padding: .25rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
}
.pdp-thumb.active, .pdp-thumb:hover { border-color: var(--tul-green); }
/* PDP Delivery Timeline */
/* ── Delivery timeline — Option A: pulse ring + animated track ── */
.pdp-delivery-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: #fafafa;
    border: 1px solid var(--tul-border);
    border-radius: 14px;
    padding: .65rem .6rem .6rem;
}
.pdp-dt-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}
/* connector track via pseudo-element — drawn from icon centre to right */
.pdp-dt-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 23px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #E2DED8;
    z-index: 0;
}
.pdp-dt-step.pdp-dt-done:not(:last-child)::after  { background: #1E7D4D; }
.pdp-dt-step.pdp-dt-active:not(:last-child)::after {
    background: linear-gradient(90deg, #1E7D4D 45%, #E2DED8 45%);
}
.pdp-dt-line { display: none; } /* replaced by pseudo-element */
.pdp-dt-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 5px;
    border: 2px solid #E2DED8;
    position: relative; z-index: 2;
    transition: background .2s, border-color .2s;
}
.pdp-dt-icon--active {
    background: #1E7D4D;
    border-color: #1E7D4D;
    animation: pdtPulse 1.8s ease-out infinite;
}
@keyframes pdtPulse {
    0%   { box-shadow: 0 0 0 0   rgba(30,125,77,.4); }
    70%  { box-shadow: 0 0 0 10px rgba(30,125,77,0); }
    100% { box-shadow: 0 0 0 0   rgba(30,125,77,0); }
}
.pdp-dt-label {
    font-size: .78rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 2px;
}
.pdp-dt-sub {
    font-size: .72rem;
    color: #6b7280;
    line-height: 1.3;
}
.pdp-dt-countdown {
    font-size: .74rem;
    font-weight: 700;
    color: #dc2626;
    margin-top: 4px;
    animation: pdtBlink .9s step-end infinite;
}
@keyframes pdtBlink { 50% { opacity: .45; } }
/* PDP Rating Row */
.pdp-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pdp-rating-stars { color: #F59E0B; font-size: .9rem; display:flex; gap:1px; }
.pdp-rating-score { font-size: .85rem; font-weight: 700; color: #1a1a1a; }
.pdp-rating-sep   { color: #d1d5db; font-size: .8rem; }
.pdp-rating-verified { font-size: .8rem; font-weight: 600; color: var(--tul-green); display:flex; align-items:center; gap:3px; }
.pdp-rating-rec   { font-size: .82rem; font-weight: 600; color: var(--tul-green); margin-bottom: .75rem; }
.pdp-title { font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: #000; }
/* PDP price row — Option C: price | sep | MRP+disc | sep | stock bar */
.pdp-price-row    { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pdp-price-divider { width: 1px; height: 36px; background: #D8DDE3; flex-shrink: 0; }
.pdp-price-group  { display: flex; flex-direction: column; gap: 3px; }
.pdp-mrp-group    { display: flex; align-items: center; gap: 6px; }
.pdp-tax          { font-size: .85rem; color: #000; font-weight: 600; }
/* Stock group */
.pdp-stock-group  { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; padding-right: 20px; }
.pdp-stock-top    { display: flex; justify-content: space-between; align-items: center; }
.pdp-stock-ok     { font-size: 1rem; font-weight: 600; color: #1E7D4D; }
.pdp-stock-pct    { font-size: .7rem; color: #6b7280; }
.pdp-stock-track  { height: 6px; background: #E2DED8; border-radius: 99px; overflow: hidden; }
.pdp-stock-fill   { height: 100%; background: linear-gradient(90deg, #1E7D4D, #2EA05E); border-radius: 99px; transition: width .4s ease; }
.pdp-stock-urgency { font-size: .90rem; font-weight: 600; color: #b45309; }
.pdp-stock-oos    { font-size: .78rem; font-weight: 600; color: #dc2626; }

.pdp-price { font-size: 1.75rem; font-weight: 600; color: #000; line-height: 1; flex-shrink: 0; }
.pdp-mrp { font-size: 1rem; color: red; text-decoration: line-through; font-weight: 700; }
.pdp-saving { font-size: .78rem; font-weight: 700; color: #1E7D4D; background: #E8F5EE; padding: 1px 7px; border-radius: 20px; }
.variant-btn {
    border: 2px solid var(--tul-border);
    background: var(--tul-white);
    color: var(--tul-slate);
    border-radius: var(--tul-radius);
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.variant-btn.active, .variant-btn:hover {
    border-color: var(--tul-green);
    background: var(--tul-green-lt);
    color: var(--tul-green);
}
.variant-btn:disabled { opacity: .45; cursor: not-allowed; }
.medicine-info-table td { font-size: .88rem; padding: .5rem .75rem; vertical-align: top; }
.medicine-info-table td:first-child { color: var(--tul-slate-lt); font-weight: 600; white-space: nowrap; width: 35%; }

/* ── PDP Info Section (How It Supports Your Body) ─────────────────────── */
.pdp-body-section { background: #eef6ee; border-radius: 16px; padding: 26px 26px 20px; }
.pdp-body-heading { font-size: 1.55rem; font-weight: 600; color: var(--tul-green-dk); margin: 0 0 20px; letter-spacing: -.2px; text-wrap: balance; }
.pdp-body-heading span { display: inline-block; border-bottom: 2px solid var(--tul-green); padding-bottom: 3px; }

.pdp-body-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.pdp-body-grid--novid { grid-template-columns: 1fr; }

.pdp-body-video { min-width: 0; }
.pdp-info-video-wrap { border-radius: 12px; overflow: hidden; }
.pdp-selfvid-thumb { width: 100%; height: 100%; background: #1a1a2e; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255,255,255,.5); }

.pdp-body-specs { display: flex; flex-direction: column; min-width: 0; }
.pdp-spec-row { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.pdp-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.pdp-spec-label { font-size: .90rem; letter-spacing: .6px; text-transform: uppercase; color: #3a7a52; font-weight: 700; margin-bottom: 3px; }
.pdp-spec-val { font-size: 1rem; color: #1a2b1f; line-height: 1.45; font-weight: 600; }

.pdp-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.pdp-benefit-card { background: #fff; border: 1px solid #b8dfca; border-radius: 10px; padding: 9px 10px; display: flex; align-items: flex-start; gap: 7px; }
.pdp-benefit-card .bi { font-size: .85rem; color: #2e7d52; flex-shrink: 0; margin-top: 2px; }
.pdp-benefit-card span { font-size: .78rem; color: #1e5631; font-weight: 600; line-height: 1.3; }

.pdp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.pdp-trust-badge { background: #fff; border: 1px solid #b8dfca; border-radius: 9px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; }
.pdp-trust-badge .bi { font-size: 1rem; color: #2e7d52; flex-shrink: 0; }
.pdp-trust-badge span { font-size: .72rem; color: #1e5631; font-weight: 600; line-height: 1.3; }
.pdp-storage-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.07); display: flex; gap: 8px; align-items: flex-start; }
.pdp-storage-note .bi { font-size: .95rem; color: #5a7a65; flex-shrink: 0; margin-top: 2px; }
.pdp-storage-note p { font-size: .90rem; color: #4a6455; margin: 0; line-height: 1.55; font-weight: 600; }

.pdp-section-heading { font-size: 1.1rem; font-weight: 700; color: var(--tul-green-dk); margin-bottom: 0; }

@media (max-width: 767px) {
  .pdp-body-grid { grid-template-columns: 1fr; }
  .pdp-body-section { padding: 18px 16px 16px; }
}

/* ── PDP Tabs ──────────────────────────────────────────────────────────── */
.pdp-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 2px solid var(--tul-border); }
.pdp-tabs-nav::-webkit-scrollbar { display: none; }
.pdp-tabs-nav .nav-link { white-space: nowrap; font-size: .82rem; font-weight: 600; color: var(--tul-slate-lt); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: .65rem .9rem; margin-bottom: -2px; }
.pdp-tabs-nav .nav-link:hover { color: var(--tul-green); }
.pdp-tabs-nav .nav-link.active { color: var(--tul-green); border-bottom-color: var(--tul-green); background: transparent; }
.pdp-tab-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--tul-surface); border-radius: 50%; flex-shrink: 0; font-size: 1rem; }
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* PDP gallery: filmstrip already below on all screens — just shrink thumbs on mobile */
    .pdp-rail-item {
        min-width: 48px;
        max-width: 60px;
    }

    /* PDP price row: center on mobile, stock drops to full-width second row */
    .pdp-price-row { justify-content: center; }
    .pdp-stock-group { flex: 0 0 100%; padding-right: 0; }
    .pdp-price-row .pdp-price-divider:last-of-type { display: none; }

    /* PDP title + price */
    .pdp-title { font-size: 1.2rem; }
    .pdp-price { font-size: 1.4rem; }

    /* Delivery timeline: shrink icon + font on very small screens */
    .pdp-dt-icon { width: 36px; height: 36px; font-size: 1rem; }
    .pdp-dt-step:not(:last-child)::after { top: 19px; }
    .pdp-dt-label { font-size: .7rem; }
    .pdp-dt-sub   { font-size: .64rem; }

    /* Rating row: allow wrap */
    .pdp-rating-row { flex-wrap: wrap; gap: 4px; }

    /* Tabs: already scrollable, reduce padding */
    .pdp-tabs-nav .nav-link { padding: .55rem .65rem; font-size: .78rem; }

    /* Cart items: tighten image */
    .cart-item-img { width: 68px !important; height: 85px !important; }

    /* Medicine info table: allow label to wrap */
    .medicine-info-table td:first-child { white-space: normal; width: 38%; }

    /* Product cards: ensure images don't overflow */
    .product-card-img { max-width: 100%; }

    /* Footer columns */
    .footer-links { margin-bottom: 1rem; }
}

@media (max-width: 575px) {
    /* Extra-small: hide vertical thumb rail if only 1 image */
    .pdp-thumb-rail:empty { display: none; }

    /* ATC row: same single-pill layout on all screen sizes — no mobile override */
}

/* Mobile landscape: restore desktop one-row price layout */
@media (max-width: 767px) and (orientation: landscape) {
    .pdp-price-row { justify-content: flex-start; }
    .pdp-price-row .pdp-price-divider { display: block; }
    .pdp-stock-group { flex: 1; padding-right: 20px; }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.section-pad { padding: 2.5rem 0; }
.bg-surface { background: var(--tul-surface); }
.text-green { color: var(--tul-green) !important; }
.text-muted-sm { font-size: .82rem; color: #000; font-weight: 500; }
.placeholder-img {
    background: var(--tul-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--tul-border);
}
.placeholder-img .bi { font-size: 2.5rem; }

/* ── Customer Reviews Section ────────────────────────────────────────────── */
.pdp-reviews-outer {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e5e9e6;
    padding: 2.5rem 2rem;
}
.pdp-reviews-leaf-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.pdp-reviews-title {
    font-size: 1.9rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
}
.pdp-reviews-subtitle {
    color: #6b7280;
    font-size: .9rem;
    margin: .35rem 0 0;
}
/* stats row */
.pdp-reviews-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    background: #f8faf8;
    border: 1px solid #e5e9e6;
    border-radius: 16px;
    padding: 1.5rem 2rem;
}
.pdp-reviews-score { text-align: center; min-width: 110px; }
.pdp-reviews-avg {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1e5c3a;
    line-height: 1;
}
.pdp-reviews-stars-row { font-size: 1.3rem; margin: .25rem 0; }
.pdp-rv-star-fill  { color: #f59e0b; }
.pdp-rv-star-empty { color: #d1d5db; }
.pdp-reviews-based { font-size: .78rem; color: #6b7280; margin-top: .3rem; }
.pdp-reviews-rec   { font-size: .75rem; color: #2d6a4f; font-weight: 600; margin-top: .2rem; }
/* bars */
.pdp-reviews-bars  { flex: 1; min-width: 180px; }
.pdp-rv-bar-row    { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .82rem; }
.pdp-rv-bar-label  { width: 32px; text-align: right; color: #374151; flex-shrink: 0; }
.pdp-rv-bar-track  { flex: 1; height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.pdp-rv-bar-fill   { height: 100%; background: #2d6a4f; border-radius: 99px; transition: width .4s; }
.pdp-rv-bar-count  { width: 28px; color: #6b7280; font-size: .78rem; }
/* verified badge */
.pdp-reviews-verified { text-align: center; min-width: 110px; }
.pdp-rv-shield { font-size: 2.2rem; color: #2d6a4f; line-height: 1; }
.pdp-rv-verified-title { font-weight: 700; font-size: .85rem; color: #111827; margin-top: .3rem; }
.pdp-rv-verified-sub   { font-size: .73rem; color: #6b7280; margin-top: .15rem; }
/* product image */
.pdp-reviews-img-wrap { margin-left: auto; }
.pdp-reviews-product-img { height: 160px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.12)); }
/* carousel */
.pdp-rv-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pdp-rv-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .5rem .25rem 1rem;
    flex: 1;
}
.pdp-rv-carousel::-webkit-scrollbar { display: none; }
.pdp-rv-card {
    flex: 0 0 270px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e5e9e6;
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.pdp-rv-card-top   { display: flex; justify-content: space-between; align-items: center; }
.pdp-rv-card-stars { font-size: 1rem; }
.pdp-rv-card-date  { font-size: .72rem; color: #9ca3af; }
.pdp-rv-card-title { font-weight: 700; font-size: .9rem; color: #111827; }
.pdp-rv-card-body  { font-size: 15px; color: #374151; line-height: 1.55; flex: 1; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-rv-card-footer { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.pdp-rv-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.pdp-rv-card-name     { font-size: .82rem; font-weight: 600; color: #111827; }
.pdp-rv-card-verified { font-size: .72rem; color: #2d6a4f; font-weight: 500; }
/* arrow buttons */
.pdp-rv-arrow {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #374151;
    font-size: 1rem;
    transition: background .15s, border-color .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pdp-rv-arrow:hover:not(:disabled) { background: #2d6a4f; border-color: #2d6a4f; color: #fff; }
.pdp-rv-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) {
    .pdp-reviews-outer  { padding: 1.5rem 1rem; }
    .pdp-reviews-title  { font-size: 1.4rem; }
    .pdp-reviews-stats  { gap: 1rem; padding: 1rem; }
    .pdp-reviews-img-wrap { display: none; }
    .pdp-reviews-avg    { font-size: 2.8rem; }
    .pdp-rv-card        { flex: 0 0 240px; }
}

/* ── PDP Standalone Sections — redesigned ───────────────────────────────── */
.pdp-rs {
    background: #fff;
    border: 1px solid #e2ece6;
    border-radius: 16px;
    padding: 1.75rem 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.pdp-rs--ing { background: #f2faf5; }
.pdp-rs-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
}
.pdp-rs-icon--dark { background: #1a3d2b; color: #fff; }
.pdp-rs-icon--light { background: #e8f5ee; color: #0f6e56; border: 2px solid #c6e9d6; }
.pdp-rs-body { flex: 1; min-width: 0; }
.pdp-rs-heading {
    font-size: 1.15rem; font-weight: 700;
    color: #111827; margin: 0 0 .4rem; line-height: 1.25;
}
.pdp-rs-accent {
    width: 2.5rem; height: 3px;
    background: #1a3d2b; border-radius: 2px;
    margin-bottom: 1rem;
}
.pdp-rs-text { font-size: .88rem; line-height: 1.75; color: #374151; margin: 0; }
.pdp-rs-subrow { display: flex; gap: .85rem; align-items: flex-start; }
.pdp-rs-subrow + .pdp-rs-subrow { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed #d1d9d3; }
.pdp-rs-sub-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #f0faf5; border: 1px solid #c6e9d6;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .9rem; color: #0f6e56;
}
.pdp-rs-sub-icon--warn { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.pdp-rs-sub-label { font-size: .88rem; font-weight: 700; color: #111827; margin: 0 0 .2rem; }
.pdp-rs-sub-text { font-size: .85rem; color: #000; line-height: 1.65; margin: 0; font-weight: 600; }
.pdp-rs-sub-text--warn { color: #000; font-size: .82rem; }
.pdp-rs-deco {
    position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
    font-size: 5.5rem; opacity: .08; pointer-events: none; color: #1a3d2b;
    line-height: 1;
}
@media (max-width: 575px) {
    .pdp-rs { padding: 1.1rem 1rem; gap: 1rem; }
    .pdp-rs-icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .pdp-rs-heading { font-size: 1rem; }
    .pdp-rs-deco { display: none; }
}

/* ── FAQ Section redesign ────────────────────────────────────────────────── */
.pdp-faq-section {
    background: #fff; border: 1px solid #e2ece4;
    border-radius: 18px; padding: 2rem;
}
.pdp-faq-header { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.75rem; }
.pdp-faq-header-icon {
    width: 54px; height: 54px; border-radius: 50%; background: #e8f0eb; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #2d6a4f; font-size: 1.4rem;
}
.pdp-faq-heading { font-size: 1.6rem; font-weight: 700; color: #000; line-height: 1.2; margin-bottom: .3rem; }
.pdp-faq-heading-green { color: #1a3d2b; }
.pdp-faq-subtitle { font-size: .85rem; color: #000; margin-bottom: .65rem; }
.pdp-faq-divider-wrap { display: flex; align-items: center; gap: .5rem; }
.pdp-faq-divider { height: 1.5px; width: 70px; background: #c8ddd0; }
.pdp-faq-divider-icon { color: #b7dfc8; font-size: .7rem; }
.pdp-faq-item { border: 1px solid #e2ece4; border-radius: 14px; margin-bottom: .65rem; overflow: hidden; }
.pdp-faq-btn {
    width: 100%; display: flex; align-items: center; gap: .85rem;
    padding: .9rem 1rem; background: #fff; border: none; cursor: pointer; text-align: left;
}
.pdp-faq-btn.active { background: #fff; }
.pdp-faq-icon {
    width: 38px; height: 38px; border-radius: 50%; background: #e8f0eb; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #2d6a4f; font-size: .95rem;
}
.pdp-faq-q { flex: 1; font-size: .9rem; font-weight: 700; color: #111827; line-height: 1.4; }
.pdp-faq-chevron {
    width: 34px; height: 34px; border-radius: 50%; background-color: #e8f0eb; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #2d6a4f; font-size: .82rem;
    transition: background-color .2s, color .2s;
}
.pdp-faq-chevron.open { background-color: #1a3d2b !important; color: #fff !important; }
.pdp-faq-ans { background: #f7f9f7; border-top: 1px solid #e2ece4; }
.pdp-faq-ans-inner {
    padding: .9rem 1rem .9rem calc(38px + .85rem + 1rem);
    font-size: .86rem; color: #000; line-height: 1.65;
}
.pdp-faq-contact {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: #f7f9f7; border: 1px solid #e2ece4; border-radius: 14px;
    padding: .9rem 1.1rem; margin-top: .25rem;
}
.pdp-faq-contact-left { display: flex; align-items: center; gap: .85rem; }
.pdp-faq-contact-icon {
    width: 38px; height: 38px; border-radius: 50%; background: #e8f0eb; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #2d6a4f; font-size: 1rem;
}
.pdp-faq-contact-title { font-size: .88rem; font-weight: 700; color: #111827; }
.pdp-faq-contact-sub { font-size: .76rem; color: #6b7280; }
.pdp-faq-contact-btn {
    display: inline-flex; align-items: center; background: #1a3d2b; color: #fff;
    border-radius: 10px; padding: .55rem 1.2rem; font-size: .83rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: background .2s;
}
.pdp-faq-contact-btn:hover { background: #2d6a4f; color: #fff; }
@media (max-width: 575px) {
    .pdp-faq-section { padding: 1.25rem; }
    .pdp-faq-ans-inner { padding-left: 1rem; }
    .pdp-faq-contact { flex-direction: column; align-items: flex-start; }
}

/* ── Why You'll Love It — reference redesign ─────────────────────────────── */
.pdp-wyli-section {
    background: #fff;
    border: 1px solid #e8ede9;
    border-radius: 18px;
    overflow: hidden;
    padding: 2rem 2rem 0;
}
/* TOP 2-col */
.pdp-wyli-top {
    display: grid;
    grid-template-columns: 1fr 35%;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.75rem;
}
/* LEFT */
.pdp-wyli-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #2d6a4f;
    display: flex; align-items: center; gap: .3rem;
    margin-bottom: .5rem;
}
.pdp-wyli-heading {
    font-size: 1.4em; font-weight: 600; color: #000;
    line-height: 1.15; margin-bottom: .35rem; text-wrap: balance;
}
.pdp-wyli-subtitle {
    font-size: 1rem; font-weight: 600; color: #111; margin-bottom: .6rem; line-height: 1.4;
}
.pdp-wyli-desc {
    font-size: 16px; line-height: 1.75; color: #000;
    margin-bottom: 1.25rem;
}
.pdp-wyli-desc p { margin-bottom: .5rem; }
/* 4 feature tiles */
.pdp-wyli-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}
.pdp-wyli-tile {
    background: #fff; border: 1px solid #dde8e1;
    border-radius: 14px; padding: 1.1rem .9rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.pdp-wyli-tile-icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff; border: 1.5px solid #b7dfc8;
    display: flex; align-items: center; justify-content: center;
    color: #2d6a4f; font-size: 1.3rem; margin-bottom: .35rem; flex-shrink: 0;
}
.pdp-wyli-tile-title { font-size: .85rem; font-weight: 700; color: #000; line-height: 1.35; }
.pdp-wyli-tile-desc  { font-size: .76rem; color: #000; line-height: 1.45; font-weight: 500; margin-top: .1rem; }
/* RIGHT */
.pdp-wyli-right { display: flex; flex-direction: column; gap: 1rem; }
.pdp-wyli-img-wrap {
    border-radius: 14px; overflow: hidden;
    background: #f3f4f6;
}
.pdp-wyli-img { width: 100%; display: block; object-fit: cover; }
/* certs card */
.pdp-wyli-certs {
    background: #fff; border: 1px solid #e2ece4; border-radius: 12px;
    padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.pdp-wyli-cert-item {
    display: flex; align-items: center; gap: .55rem;
    font-size: .78rem; font-weight: 600; color: #000;
}
.pdp-wyli-cert-item i { color: #2d6a4f; font-size: .9rem; flex-shrink: 0; }
/* SUPPLEMENT FACTS — Option A: Dark Panel */
.pdp-sf-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    margin: 0 -2rem;
    box-shadow: 0 4px 20px rgba(26,61,43,.12);
}
.pdp-sf-left {
    background: #1a3d2b;
    padding: 2rem 1.5rem;
    display: flex; flex-direction: column;
}
.pdp-sf-badge {
    font-size: .58rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #8dbe9e; margin-bottom: .9rem;
}
.pdp-sf-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 1.7rem; color: #fff; line-height: 1.2; margin-bottom: 1rem;
}
.pdp-sf-divider { width: 36px; height: 2px; background: #b8752a; margin-bottom: 1.2rem; }
.pdp-sf-stat { margin-bottom: 1rem; }
.pdp-sf-stat-label {
    font-size: .58rem; font-weight: 700; color: #8dbe9e;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem;
}
.pdp-sf-stat-val { font-size: 1rem; font-weight: 600; color: #fff; }
.pdp-sf-img {
    width: 100%; border-radius: 10px; margin-top: auto; padding-top: 1.5rem;
    display: block; object-fit: cover; opacity: .92;
}
/* RIGHT */
.pdp-sf-right { background: #fff; display: flex; flex-direction: column; }
.pdp-sf-right-header {
    display: flex; gap: 2rem; padding: .9rem 1.5rem;
    background: #f7f9f7; border-bottom: 1px solid #e8ede9;
}
.pdp-sf-right-title {
    font-size: .6rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem;
}
.pdp-sf-right-val { font-size: .9rem; font-weight: 600; color: #111827; }
/* nutrition table */
.pdp-sf-table-wrap { overflow-x: auto; flex: 1; }
.pdp-sf-table-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pdp-sf-table-wrap thead tr { background: #1a3d2b; color: #fff; }
.pdp-sf-table-wrap th {
    padding: .75rem 1.25rem; text-align: left; font-size: .67rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pdp-sf-table-wrap th:not(:first-child) { text-align: right; }
.pdp-sf-table-wrap td { padding: .6rem 1.25rem; border-bottom: 1px solid #f0f4f0; color: #374151; }
.pdp-sf-table-wrap td:not(:first-child) { text-align: right; color: #6b7280; }
.pdp-sf-table-wrap tbody tr:nth-child(even) td { background: #f7f9f7; }
.pdp-sf-table-wrap tbody tr:last-child td { font-weight: 700; color: #1a3d2b; border-bottom: none; background: #f0f7f3; }
/* FOOTNOTE BAR */
.pdp-wyli-footnote {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: #f0f7f3; border-top: 1px solid #d4e9db;
    margin: 0 -2rem; padding: .85rem 2rem;
}
.pdp-wyli-fn-text { font-size: .72rem; color: #6b7280; line-height: 1.5; }
.pdp-wyli-fn-certs { display: flex; gap: 1.5rem; flex-shrink: 0; }
.pdp-wyli-fn-cert {
    font-size: .74rem; font-weight: 600; color: #2d6a4f;
    display: flex; align-items: center; gap: .35rem;
}
@media (max-width: 991px) {
    .pdp-wyli-top { grid-template-columns: 1fr; }
    .pdp-wyli-tiles { grid-template-columns: repeat(2, 1fr); }
    .pdp-sf-wrap { grid-template-columns: 1fr; border-radius: 0 0 18px 18px; }
    .pdp-sf-left { flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
    .pdp-sf-img { display: none; }
    .pdp-sf-heading { font-size: 1.4rem; width: 100%; }
    .pdp-sf-divider { display: none; }
    .pdp-wyli-footnote { flex-direction: column; align-items: flex-start; }
    .pdp-wyli-fn-certs { flex-wrap: wrap; gap: .75rem; }
}
@media (max-width: 575px) {
    .pdp-wyli-section { padding: 1.25rem 1.25rem 0; }
    .pdp-wyli-tiles { grid-template-columns: repeat(2, 1fr); }
    .pdp-sf-wrap { margin: 0 -1.25rem; }
    .pdp-wyli-footnote { margin: 0 -1.25rem; padding: .75rem 1.25rem; }
}

/* ── How It Supports Your Body — v2 reference redesign ──────────────────── */
.pdp-hisb-section { margin-top: 1rem; }

/* Top label */
.pdp-hisb-top-label {
    display: flex; align-items: center; justify-content: center;
    position: relative; margin-bottom: .5rem;
}
.pdp-hisb-tagline {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #2d6a4f;
}
.pdp-hisb-leaf-deco {
    position: absolute; right: 0; top: -4px;
    font-size: 1.6rem; opacity: .55; pointer-events: none;
}

/* Heading */
.pdp-hisb-heading {
    font-size: 1.55rem; font-weight: 600; color: #111827;
    text-align: center; margin-bottom: .3rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid #2d6a4f;
    display: inline-block; width: 100%;
}

/* 3-col main grid */
.pdp-hisb-3col {
    display: grid;
    grid-template-columns: 36% 1fr 22%;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.25rem;
}

/* COL 1: video */
.pdp-hisb-col-video { display: flex; flex-direction: column; gap: .75rem; }
.pdp-hisb-vidplayer {
    width: 100%; border-radius: 14px; display: block;
    aspect-ratio: 16/9; object-fit: contain; background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.pdp-hisb-imgcard {
    border-radius: 14px; overflow: hidden;
    background: #f3f4f6;
}
.pdp-hisb-imgcard img { width: 100%; display: block; object-fit: cover; }

/* COL 2: benefits */
.pdp-hisb-col-benefits {
    display: flex; flex-direction: column; gap: .85rem;
}
.pdp-hisb-benefit-row {
    display: flex; gap: .75rem; align-items: flex-start;
}
.pdp-hisb-bicon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e8f5ee; border: 1.5px solid #b7dfc8;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #2d6a4f; font-size: 1rem;
}
.pdp-hisb-btitle { font-weight: 700; font-size: .90rem; color: #111827; line-height: 1.3; }
.pdp-hisb-bdesc  { font-size: 15px; color: #000; margin-top: .15rem; line-height: 1.45; font-weight: 500; }

/* COL 3: certifications */
.pdp-hisb-col-certs {
    display: flex; flex-direction: column; gap: .5rem;
}
.pdp-hisb-cert2 {
    display: flex; align-items: center; gap: .55rem;
    background: #fff; border: 1px solid #e5e9e6;
    border-radius: 10px; padding: .45rem .65rem;
    font-size: .74rem; font-weight: 600; color: #000;
}
.pdp-hisb-cicon {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid #b7dfc8;
    background: #f0faf4;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #2d6a4f; font-size: .85rem;
}

/* Bottom spec cards row */
.pdp-hisb-specs-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
.pdp-hisb-spec-card {
    display: flex; gap: .65rem; align-items: flex-start;
    background: #f8faf8; border: 1px solid #e2e8e4;
    border-radius: 12px; padding: .85rem 1rem;
}
.pdp-hisb-spec-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #2d6a4f;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff; font-size: 1rem;
}
.pdp-hisb-spec-label {
    font-size: .68rem; font-weight: 800;
    color: #2d6a4f; text-transform: uppercase; letter-spacing: .06em;
    line-height: 1.2;
}
.pdp-hisb-spec-val { font-size: .78rem; color: #000; margin-top: .2rem; line-height: 1.4; font-weight: 600; text-transform: capitalize; }

@media (max-width: 991px) {
    .pdp-hisb-3col { grid-template-columns: 38% 1fr; }
    .pdp-hisb-col-certs { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .pdp-hisb-cert2 { flex: 1 0 calc(33% - .5rem); }
    .pdp-hisb-specs-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .pdp-hisb-3col { grid-template-columns: 1fr; }
    .pdp-hisb-vidplayer { aspect-ratio: 16/9; }
    .pdp-hisb-specs-row { grid-template-columns: repeat(2, 1fr); }
    .pdp-hisb-cert2 { flex: 1 0 calc(50% - .25rem); }
}

/* ── Recently Viewed redesign ─────────────────────────────────────────────── */
.pdp-rvw-section { margin-top: 3rem; }
.pdp-rvw-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pdp-rvw-header-left { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.pdp-rvw-header-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #f0f7f3; border: 1.5px solid #d1e7dc;
    display: flex; align-items: center; justify-content: center;
    color: #1a3d2b; font-size: 1.3rem; flex-shrink: 0;
}
.pdp-rvw-heading { font-size: 1.5rem; font-weight: 600; color: #1a3d2b; margin: 0; line-height: 1.2; }
.pdp-rvw-subtitle { font-size: .85rem; color: #6b7280; margin: .15rem 0 0; }
.pdp-rvw-divider { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 60px; }
.pdp-rvw-divider-line { flex: 1; height: 1px; background: #e5e7eb; }
.pdp-rvw-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: #1a3d2b; flex-shrink: 0; }
/* product card */
.pdp-rvw-card {
    background: #fff; border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 8px rgba(0,0,0,.07);
    overflow: hidden; height: 100%;
    display: flex; flex-direction: column;
}
.pdp-rvw-img-wrap { position: relative; background: #f9fafb; padding: 1rem; text-align: center; }
.pdp-rvw-img-wrap img { height: auto; width: 100%; object-fit: cover; }
.pdp-rvw-badge {
    position: absolute; top: .6rem; left: .6rem;
    background: #1a3d2b; color: #fff;
    font-size: .71rem; font-weight: 600;
    padding: .22rem .55rem; border-radius: 99px;
    display: inline-flex; align-items: center; gap: .3rem;
}
.pdp-rvw-body { padding: .85rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.pdp-rvw-name { font-size: .9rem; font-weight: 700; color: #111827; line-height: 1.3; }
.pdp-rvw-price { font-size: .95rem; font-weight: 700; color: #1a3d2b; }
.pdp-rvw-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem 1rem;
    background: #f3f4f6; color: #374151;
    border: 0; border-top: 1px solid #e5e7eb;
    font-size: .84rem; font-weight: 600;
    text-decoration: none; transition: background .18s, color .18s;
}
.pdp-rvw-btn:hover { background: #1a3d2b; color: #fff; }
/* empty/explore filler card */
.pdp-rvw-empty-card {
    background: #fff; border: 2px dashed #d1d5db;
    border-radius: 14px; height: 100%; min-height: 280px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem 1rem; gap: .75rem; text-align: center;
}
.pdp-rvw-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #f0f7f3;
    display: flex; align-items: center; justify-content: center;
    color: #1a3d2b; font-size: 1.4rem;
}
.pdp-rvw-empty-title { font-weight: 700; font-size: 1rem; color: #111827; margin: 0; }
.pdp-rvw-empty-sub { font-size: .83rem; color: #6b7280; margin: 0; line-height: 1.4; }
.pdp-rvw-shop-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem 1.25rem; margin-top: .25rem;
    background: #f3f4f6; color: #374151;
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: .84rem; font-weight: 600; text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
}
.pdp-rvw-shop-btn:hover { background: #1a3d2b; color: #fff; border-color: #1a3d2b; }
@media (max-width: 575px) {
    .pdp-rvw-heading { font-size: 1.2rem; }
    .pdp-rvw-header-icon { width: 42px; height: 42px; font-size: 1.1rem; }
    .pdp-rvw-divider { display: none; }
}

/* ── Related Products carousel redesign ──────────────────────────────────── */
.rp-section { margin-top: 3rem; }
.rp-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.rp-header-left { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.rp-header-icon {
    width: 46px; height: 46px; border-radius: 10px;
    background: #f0f7f3; border: 1.5px solid #d1e7dc;
    display: flex; align-items: center; justify-content: center;
    color: #1a3d2b; font-size: 1.15rem; flex-shrink: 0;
}
.rp-heading { font-size: 1.6rem; font-weight: 600; color: #1a3d2b; margin: 0; line-height: 1.2; }
.rp-subtitle { font-size: .85rem; color: #6b7280; margin: .15rem 0 0; }
.rp-divider { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 60px; }
.rp-divider-line { flex: 1; height: 1.5px; background: #1a3d2b; opacity: .35; }
.rp-divider-dot { width: 10px; height: 10px; border-radius: 50%; background: #1a3d2b; flex-shrink: 0; }
.rp-arrows { display: flex; gap: .5rem; flex-shrink: 0; }
.rp-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid #d1d5db; background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: #374151; font-size: .9rem; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
.rp-arrow:hover { background: #1a3d2b; border-color: #1a3d2b; color: #fff; }
/* carousel */
.rp-carousel-wrap { overflow: hidden; }
.rp-carousel {
    display: flex; gap: 1.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: .5rem;
}
.rp-carousel::-webkit-scrollbar { display: none; }
/* card */
.rp-card {
    flex: 0 0 calc(25% - 1.125rem);
    scroll-snap-align: start;
    background: #fff; border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden; display: flex; flex-direction: column;
}
.rp-img-wrap {
    display: block; position: relative;
    background: #f5f5f0; overflow: hidden;
    text-decoration: none;
    height: 280px;
}
.rp-img-wrap picture, .rp-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 3rem;
}
/* badges */
.rp-badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.rp-badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.rp-badge-otc { background: rgba(209,231,220,.92); color: #1a3d2b; }
.rp-badge-rx  { background: rgba(220,38,38,.9); color: #fff; }
.rp-badge-feat { background: #f59e0b; color: #fff; }
/* wish icon */
.rp-wish {
    position: absolute; top: .75rem; right: .75rem;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: #374151; font-size: .95rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
/* body */
.rp-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.rp-name {
    font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.3;
    text-decoration: none; display: block;
}
.rp-name:hover { color: #1a3d2b; }
.rp-salt { font-size: .82rem; color: #6b7280; font-style: italic; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-rating { display: flex; align-items: center; gap: .4rem; }
.rp-stars { color: #f59e0b; font-size: .9rem; }
.rp-rating-text { font-size: .82rem; color: #6b7280; }
.rp-price-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.rp-price { font-size: 1.1rem; font-weight: 700; color: #111827; }
.rp-mrp   { font-size: .82rem; color: #dc2626; text-decoration: line-through; font-weight: 500; }
.rp-disc-pill {
    background: #f0f7f3; color: #1a3d2b;
    font-size: .75rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 99px;
    border: 1px solid #d1e7dc;
}
/* ATC row */
.rp-atc-row { display: flex; gap: .6rem; align-items: stretch; margin-top: auto; }
.rp-pack-sel {
    flex: 1; border: 1.5px solid #e5e7eb; border-radius: 8px;
    padding: .5rem .65rem; font-size: .83rem; color: #374151;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right .75rem center / 10px;
    appearance: none; cursor: pointer;
}
.rp-pack-label {
    flex: 1; border: 1.5px solid #e5e7eb; border-radius: 8px;
    padding: .5rem .65rem; font-size: .83rem; color: #374151;
    background: #fff; display: flex; align-items: center;
}
.rp-atc-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .55rem .75rem;
    background: #1a3d2b; color: #fff;
    border: 0; border-radius: 8px;
    font-size: .84rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background .18s;
    white-space: nowrap;
}
.rp-atc-btn:hover { background: #142f20; color: #fff; }
.rp-atc-row-solo { display: flex; }
@media (max-width: 991px) {
    .rp-card { flex: 0 0 calc(50% - .75rem); }
}
@media (max-width: 767px) {
    .rp-card { flex: 0 0 82%; }
    .rp-img-wrap { height: 220px; }
    .rp-heading { font-size: 1.3rem; }
    .rp-header-icon { display: none; }
    .rp-divider { display: none; }
    .rp-arrows { margin-left: auto; }
}
@media (max-width: 400px) {
    .rp-atc-row { flex-direction: column; }
}