/* =================================================================
   DryFruitBox - Main stylesheet
   ----------------------------------------------------------------
   All colors come from CSS custom-properties injected by
   config/colors.php → dfb_render_color_vars().  Never hardcode a
   colour here — extend the palette in colors.php instead.
   ================================================================= */

/* ---------- 1. Reset & base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: #ffffff;                       /* pure-white page */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 72px;                    /* room for bottom-nav */

    /* No element may push the page wider than the viewport. */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans', serif;
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.2;
}

p { margin: 0 0 1em; }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--color-primary-dark); }

img, svg { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; }

input, select, textarea {
    font: inherit;
    color: inherit;
}

::selection { background: var(--color-primary); color: var(--color-white); }

/* ---------- 2. Layout utilities ------------------------------ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.section { padding: 24px 0; }
.section--lg { padding: 40px 0; }

.grid { display: grid; gap: 16px; }
.grid--products {
    grid-template-columns: repeat(2, 1fr);   /* always 2 on mobile */
    gap: 12px;
}
@media (min-width: 640px) {
    .grid--products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
    .grid--products { gap: 20px; }
}

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-8         { gap: 8px; }
.gap-12        { gap: 12px; }
.gap-16        { gap: 16px; }

.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-small   { font-size: 13px; }
.text-tiny    { font-size: 11px; }

.hide-mobile  { display: none; }
@media (min-width: 768px) {
    .hide-mobile { display: initial; }
    .hide-desktop { display: none; }
}

[hidden] { display: none !important; }

/* ---------- 3. Buttons --------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 6px 14px var(--color-shadow);
}
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); }

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: var(--color-white); }

.btn--light {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.btn--block { width: 100%; }
.btn--lg    { padding: 14px 22px; font-size: 15px; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }

/* ---------- 4. Header --------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.app-header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    text-decoration: none;
    margin-right: auto;
}
.brand:hover { color: var(--color-white); }
.brand__mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.brand__text { line-height: 1.1; display: flex; flex-direction: column; }
.brand__name {
    font-family: 'Plus Jakarta Sans', serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .3px;
}
.brand__tagline {
    font-size: 10.5px;
    opacity: .85;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.app-header__actions { display: flex; align-items: center; gap: 4px; }

.cart-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-badge);
    color: var(--color-white);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--color-primary);
}
.cart-badge--nav { border-color: var(--color-white); }

/* search bar */
.app-search { padding-bottom: 12px; }
.search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-white);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.search__icon  { color: var(--color-text-muted); margin-left: 14px; flex-shrink: 0; }
.search__input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 11px 12px;
    background: transparent;
    font-size: 14px;
}
.search__submit {
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 11px 18px;
    font-weight: 600;
    font-size: 13px;
}
.search__submit:hover { background: var(--color-primary-dark); }

/* ---------- 5. Side menu ------------------------------------ */
.side-menu {
    position: fixed; inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
}
.side-menu.is-open { visibility: visible; pointer-events: auto; }
.side-menu__scrim {
    position: absolute; inset: 0;
    background: var(--color-overlay);
    opacity: 0;
    transition: opacity .2s ease;
}
.side-menu.is-open .side-menu__scrim { opacity: 1; }
.side-menu__panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(280px, 80vw);
    background: var(--color-white);
    box-shadow: 4px 0 24px rgba(0,0,0,.2);
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.side-menu.is-open .side-menu__panel { transform: translateX(0); }
.side-menu__head {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
}
.side-menu__title { font-family: 'Plus Jakarta Sans', serif; font-size: 18px; font-weight: 700; }
.side-menu__nav { padding: 8px 0; flex: 1; }
.side-menu__nav a {
    display: block;
    padding: 14px 18px;
    color: var(--color-text);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border-light);
}
.side-menu__nav a.is-active { color: var(--color-primary); background: var(--color-secondary); }
.side-menu__foot {
    padding: 16px 18px;
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 4px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ---------- 6. Marquee -------------------------------------- */
.marquee {
    background: var(--color-primary);
    color: var(--color-white);
    overflow: hidden;
    position: relative;
}
.marquee__track {
    display: inline-block;
    white-space: nowrap;
    padding: 9px 0;
    animation: dfb-marquee 28s linear infinite;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .8px;
}
.marquee__track span { padding: 0 30px; }
@keyframes dfb-marquee {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}

/* ---------- 7. Product card --------------------------------- */
.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--color-shadow);
}
.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-surface-alt);
    overflow: hidden;
}
.product-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__badge {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--color-badge);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(231, 76, 60, .35);
}
.product-card__free {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: .3px;
    border: 1px solid rgba(46, 139, 87, .25);
}

.product-card__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__cat {
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: .6px;
}
.product-card__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}
.product-card__weight { font-size: 12px; color: var(--color-text-muted); }
.product-card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    width: max-content;
}
.product-card__price {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}
.product-card__price .sale { color: var(--color-primary); font-weight: 800; font-size: 18px; }
.product-card__price .mrp  { color: var(--color-text-light); text-decoration: line-through; font-size: 13px; }
.product-card__price .off  { color: var(--color-success); font-size: 11.5px; font-weight: 700; }

.product-card__btn {
    margin: 0;
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.product-card__btn:hover { background: var(--color-primary); color: var(--color-white); }

/* ---------- 8. Stars ---------------------------------------- */
.stars { color: var(--color-star); letter-spacing: 1px; }
.star.is-empty { color: var(--color-border); }
.star.is-half { position: relative; }
.star.is-half::before {
    content: '★';
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    color: var(--color-star);
}

/* ---------- 9. Hero / categories ---------------------------- */
.hero {
    background:
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: var(--color-white);
    padding: 28px 0 24px;
    border-radius: 0 0 24px 24px;
    margin-bottom: 8px;
}
.hero h1 {
    color: var(--color-white);
    font-size: 26px;
    margin-bottom: 6px;
}
.hero p { opacity: .9; margin-bottom: 14px; }
.hero .btn--light { background: var(--color-white); }

.cat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    /* 4-column grid, no scroll */
    gap: 8px;
    margin: 0;
    padding: 4px 0 12px;
    position: relative;
    z-index: 2;
}
.cat-strip__item {
    min-width: 0;                              /* allow shrink in grid cell */
    background: var(--color-white);
    border-radius: 14px;
    padding: 8px 4px 10px;
    text-align: center;
    box-shadow: 0 4px 12px var(--color-shadow);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 2px solid var(--color-border-light);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cat-strip__item.is-active {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px var(--color-shadow);
}
.cat-strip__item:hover:not(.is-active) {
    border-color: var(--color-accent);
}

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.section-head h2 {
    font-size: 18px;
    margin: 0;
}
.section-head a { font-size: 13px; font-weight: 600; }

/* ---------- 10. Bottom navigation --------------------------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 -4px 14px var(--color-shadow);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.bottom-nav__item.is-active { color: var(--color-primary); }
.bottom-nav__item.is-active svg { stroke: var(--color-primary); }
.bottom-nav__icon-wrap { position: relative; display: inline-flex; }

/* ---------- 11. Site footer (desktop) ----------------------- */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(255,255,255,.85);
    padding: 28px 0 calc(70px + 12px);
    margin-top: 32px;
}
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: var(--color-white); }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: 1fr 2fr 1fr; align-items: start; }
}
.site-footer__brand strong {
    display: block;
    font-family: 'Plus Jakarta Sans', serif;
    font-size: 20px;
    color: var(--color-white);
    margin-bottom: 4px;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.site-footer__copy {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 14px;
    margin-top: 18px;
    font-size: 12px;
    opacity: .75;
}

/* ---------- 12. Product detail page ------------------------- */
.back-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
}
.back-bar__btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-secondary);
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary);
}
.back-bar__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.pd { padding: 0 0 90px; }
.pd__gallery {
    position: relative;
    background: var(--color-white);
    padding: 12px 16px 0;
}
.pd__main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-surface-alt);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}
.pd__main img { width: 100%; height: 100%; object-fit: cover; }
.pd__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 2px 8px var(--color-shadow);
}
.pd__nav--prev { left: 10px; }
.pd__nav--next { right: 10px; }
.pd__badge-discount {
    position: absolute; top: 12px; left: 12px;
    background: var(--color-badge); color: #fff;
    padding: 5px 10px; border-radius: 6px;
    font-weight: 700; font-size: 12px;
}
.pd__badge-delivery {
    position: absolute; top: 12px; right: 12px;
    background: var(--color-success); color: #fff;
    padding: 5px 10px; border-radius: 6px;
    font-weight: 700; font-size: 11.5px;
    display: inline-flex; align-items: center; gap: 4px;
}
.pd__thumbs {
    display: flex; gap: 8px; padding: 12px 16px;
    overflow-x: auto;
    background: var(--color-white);
}
.pd__thumb {
    flex: 0 0 64px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--color-surface-alt);
    cursor: pointer;
    padding: 0;
}
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb.is-active { border-color: var(--color-primary); }

.pd__header { padding: 14px 16px 4px; background: var(--color-white); }
.pd__chips { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 11.5px;
    font-weight: 600;
}
.chip--rating { background: var(--color-success); color: #fff; }
.pd__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}
.pd__weight { color: var(--color-text-muted); font-size: 13px; }

.pd__price-box {
    margin: 12px 16px;
    background: var(--color-secondary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
}
.pd__price-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.pd__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd__price-row .sale  { font-size: 26px; font-weight: 800; color: var(--color-primary); }
.pd__price-row .mrp   { font-size: 14px; text-decoration: line-through; color: var(--color-text-light); }
.pd__price-row .save  { color: var(--color-success); font-weight: 700; font-size: 13.5px; }
.pd__price-tax { margin-top: 6px; font-size: 11.5px; color: var(--color-text-muted); }

.pd__icon-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 0 16px;
    margin-bottom: 14px;
}
.pd__icon-row .item {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    color: var(--color-primary);
}
.pd__icon-row .item .ic { font-size: 18px; margin-bottom: 4px; }
.pd__icon-row .item .lbl { font-size: 11px; font-weight: 600; color: var(--color-text); }

.pd__offers {
    margin: 0 16px 14px;
    background: var(--color-white);
    border: 1px dashed var(--color-primary);
    border-radius: 12px;
    padding: 12px 14px;
}
.pd__offers h4 { margin: 0 0 8px; font-size: 14px; color: var(--color-primary); font-family: 'Plus Jakarta Sans', sans-serif; }
.pd__offers ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pd__offers li { font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.pd__offers li::before { content: '🎁'; }

.pd__support {
    margin: 0 16px 14px;
    background: var(--color-success-light);
    border-radius: 12px;
    padding: 12px;
    display: flex; gap: 10px; align-items: center;
    color: var(--color-text);
    font-size: 13px;
}
.pd__support svg { color: var(--color-success); flex-shrink: 0; }

.pd__section {
    background: var(--color-white);
    margin: 0 0 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border-light);
}
.pd__section h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-text);
    font-size: 15px;
    margin: 0 0 10px;
}
.pd__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pd__bullets li {
    display: flex; gap: 10px; font-size: 13.5px; color: var(--color-text);
    align-items: flex-start;
}
.pd__bullets li::before {
    content: '';
    flex-shrink: 0;
    width: 8px; height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    margin-top: 7px;
}

.pd__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}
.pd__specs .k { font-size: 11px; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: .5px; }
.pd__specs .v { font-size: 14px; font-weight: 600; color: var(--color-text); }

.pd__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pd__tags .tag {
    background: var(--color-secondary);
    color: var(--color-accent);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.pd__similar-track {
    display: flex; gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}
.pd__similar-track > * {
    flex: 0 0 160px;
    scroll-snap-align: start;
}

/* Reviews */
.review-summary {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}
.review-summary__score {
    background: var(--color-success);
    color: #fff;
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
}
.review-summary__score .num { font-size: 28px; font-weight: 800; line-height: 1; }
.review-summary__bars { display: flex; flex-direction: column; gap: 4px; }
.review-bar {
    display: grid; grid-template-columns: 24px 1fr 36px;
    align-items: center; gap: 8px;
    font-size: 12px;
}
.review-bar__track {
    height: 6px;
    background: var(--color-border-light);
    border-radius: 999px;
    overflow: hidden;
}
.review-bar__fill {
    height: 100%;
    background: var(--color-success);
}

.review-card {
    border-top: 1px solid var(--color-border-light);
    padding: 12px 0;
}
.review-card__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.review-card__avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.review-card__name { font-weight: 600; font-size: 13.5px; }
.verified-pill {
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .3px;
    margin-left: auto;
}
.review-card__body { font-size: 13.5px; color: var(--color-text); margin-top: 4px; }
.review-card__meta { font-size: 11.5px; color: var(--color-text-light); margin-top: 4px; }

.pd__cta-bar {
    position: fixed;
    left: 0; right: 0; bottom: 72px;
    z-index: 55;
    background: var(--color-white);
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    display: flex; gap: 10px;
}
.pd__cta-bar .btn { flex: 1; }

/* ---------- 13. Cart page ----------------------------------- */
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 12px;
    background: var(--color-white);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    align-items: center;
}
.cart-item__img {
    width: 80px; height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cart-item__weight { font-size: 11.5px; color: var(--color-text-muted); }
.cart-item__price {
    margin-top: 4px;
    display: flex; align-items: baseline; gap: 6px;
}
.cart-item__price .sale { color: var(--color-primary); font-weight: 700; }
.cart-item__price .mrp { color: var(--color-text-light); text-decoration: line-through; font-size: 11.5px; }

.qty {
    display: inline-flex; align-items: center;
    background: var(--color-secondary);
    border-radius: 999px;
    padding: 2px;
}
.qty button {
    width: 28px; height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px var(--color-shadow);
}
.qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: 13.5px; }

.cart-item__remove {
    background: transparent; border: 0;
    color: var(--color-text-light);
    font-size: 11.5px;
    margin-top: 6px;
    padding: 0;
    text-align: left;
}
.cart-item__remove:hover { color: var(--color-danger); }

.cart-summary {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    padding: 14px;
    margin-top: 16px;
}
.cart-summary__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.cart-summary__row.total { font-weight: 800; font-size: 16px; border-top: 1px dashed var(--color-border); margin-top: 6px; padding-top: 10px; color: var(--color-primary); }
.cart-summary__row.save { color: var(--color-primary); font-weight: 600; }
.cart-summary__row.free { color: var(--color-success); font-weight: 700; }

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--color-text-muted);
}
.empty-state__icon {
    font-size: 48px;
    margin-bottom: 10px;
}

/* ---------- 14. Forms (address / support) ------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form__field { display: flex; flex-direction: column; gap: 5px; }
.form__field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
}
.form__field input,
.form__field select,
.form__field textarea {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--color-white);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102,54,0,.12);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__radios { display: flex; gap: 8px; flex-wrap: wrap; }
.form__radios label {
    flex: 1; min-width: 90px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 10px 14px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}
.form__radios input { display: none; }
.form__radios input:checked + span,
.form__radios label:has(input:checked) {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ---------- 15. Toasts -------------------------------------- */
.toast-host {
    position: fixed;
    left: 50%; bottom: 86px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--color-text);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    animation: dfb-toast-in .25s ease both;
}
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-danger); }
@keyframes dfb-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 16. Admin --------------------------------------- */
.admin-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 16px;
}
.admin-wrap--center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
}
.admin-card {
    max-width: 380px;
    margin: 60px auto;
    background: var(--color-white);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 8px 30px var(--color-shadow);
}
.admin-card h1 {
    text-align: center;
    margin-bottom: 18px;
    font-size: 22px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--color-shadow);
}
.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13.5px;
}
.admin-table th {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    letter-spacing: .4px;
}

/* ---------- 17. Misc helpers -------------------------------- */
.divider { height: 1px; background: var(--color-border-light); margin: 16px 0; }

.spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: dfb-spin .7s linear infinite;
}
@keyframes dfb-spin { to { transform: rotate(360deg); } }

@media (max-width: 380px) {
    .brand__tagline { display: none; }
}

/* =================================================================
   Sections added in step 3 (homepage + products page)
   ================================================================= */

/* ---------- 18. Hero slider (homepage) ---------------------- */
.hero-slider {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px var(--color-shadow);
}
.hero-slider__viewport { overflow: hidden; }
.hero-slider__track {
    display: flex;
    width: 100%;
    transition: transform .55s cubic-bezier(.5, 0, .15, 1);
    will-change: transform;
}
.hero-slider__slide {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: 220px;
    padding: 28px 22px 38px;
    display: flex;
    align-items: center;
    color: var(--color-white);
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-slider__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(102,54,0,.15) 0%, rgba(74,39,0,.35) 100%);
    z-index: 0;
    pointer-events: none;
}
.hero-slide-1 { background-image: linear-gradient(135deg, #8B4513 0%, #663600 100%); }
.hero-slide-2 { background-image: linear-gradient(135deg, #663600 0%, #4a2700 100%); }
.hero-slide-3 { background-image: linear-gradient(135deg, #a05a1c 0%, #663600 100%); }

.hero-slider__content { position: relative; z-index: 1; max-width: 460px; }
.hero-slider__kicker {
    display: inline-block;
    background: rgba(255,255,255,.18);
    color: var(--color-white);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.hero-slider__content h2 {
    color: var(--color-white);
    font-size: 26px;
    margin-bottom: 6px;
    line-height: 1.2;
}
.hero-slider__content p {
    color: rgba(255,255,255,.94);
    margin-bottom: 14px;
    font-size: 14px;
}
.hero-slider__dots {
    position: absolute;
    bottom: 12px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 2;
}
.hero-slider__dots button {
    width: 8px; height: 8px;
    padding: 0; border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    transition: width .2s ease, background .2s ease;
    cursor: pointer;
}
.hero-slider__dots button.is-active {
    width: 22px;
    background: var(--color-white);
}
@media (min-width: 640px) {
    .hero-slider__slide   { min-height: 280px; padding: 36px 32px 44px; }
    .hero-slider__content h2 { font-size: 32px; }
}

/* ---------- 19. Page hero (static, products.php) ------------ */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: var(--color-white);
    padding: 32px 0 36px;
    text-align: center;
    border-radius: 0 0 24px 24px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.page-hero h1 {
    color: var(--color-white);
    font-size: 26px;
    margin-bottom: 6px;
    position: relative;
}
.page-hero p {
    color: rgba(255,255,255,.92);
    margin: 0;
    font-size: 14px;
    position: relative;
}

/* ---------- 20. Section title with bolt --------------------- */
.section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-primary);
}
.section-title__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 7px;
}
.section-head__count {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ---------- 21. Category strip icons ------------------------ */
.cat-strip__ic {
    display: block;
    width: 52px; height: 52px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    overflow: hidden;
}
.cat-strip__ic svg { width: 100%; height: 100%; display: block; }
.cat-strip__name { display: block; font-size: 12px; font-weight: 600; }

/* ---------- 22. Category banner ----------------------------- */
.cat-banner {
    position: relative;
    margin: 16px 0;
    min-height: 130px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: var(--color-white);
    box-shadow: 0 4px 14px var(--color-shadow);
}
.cat-banner::before {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.cat-banner::after {
    content: '';
    position: absolute;
    right: 20px; bottom: -50px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.cat-banner__overlay { display: none; }
.cat-banner__content {
    position: relative;
    height: 100%;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.cat-banner__kicker {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, #f5a623 0%, #c4881b 100%);
    color: var(--color-white);
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 10px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(245, 166, 35, .35);
}
.cat-banner h3 {
    color: var(--color-white);
    font-size: 22px;
    margin: 0 0 4px;
}
.cat-banner p {
    margin: 0;
    font-size: 13px;
    opacity: .92;
    max-width: 70%;
}

/* ---------- 23. Product card pill + qty swap ---------------- */
.product-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    width: max-content;
    letter-spacing: .3px;
    margin-top: 2px;
    border: 1px solid var(--color-border-light);
}
.product-card__action {
    margin-top: 8px;
}
.product-card__action[data-state="qty"] .product-card__btn--add { display: none; }
.product-card__action[data-state="add"] .product-card__qty       { display: none; }

.product-card__btn--add { width: 100%; }

.product-card__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    border-radius: 8px;
    padding: 4px;
    width: 100%;
}
.product-card__qty button {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-primary);
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease;
}
.product-card__qty button:hover { background: var(--color-secondary); }
.product-card__qty span {
    color: var(--color-white);
    font-weight: 800;
    font-size: 14px;
    min-width: 24px;
    text-align: center;
}

.product-card__name { text-decoration: none; }
.product-card__name:hover { color: var(--color-primary); }

/* ---------- 24. Trust strip --------------------------------- */
.trust-strip {
    margin: 20px 0 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .trust-strip { grid-template-columns: repeat(4, 1fr); }
}
.trust-strip__item {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
}
.trust-strip__ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
}

/* =================================================================
   25. Horizontal-overflow safeguards
   ----------------------------------------------------------------
   html / body already clip overflow-x at the root.  This section
   makes sure no descendant *causes* that clip to engage in the
   first place by:
     - constraining the main scroll region to 100%
     - giving the header flex children a min-width of 0 so they
       shrink instead of pushing the cart icon off-screen
     - ensuring text fields never blow past their flex track
     - guaranteeing the marquee / hero / strip wrappers stay
       within their parents on every screen size
   ================================================================= */

.app-main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;          /* clip preserves position:sticky in ancestors */
}

.app-header,
.marquee,
.bottom-nav,
.site-footer,
.page-hero,
.cat-banner,
.hero-slider,
.hero-slider__viewport {
    width: 100%;
    max-width: 100%;
}

/* The container itself: lock to the viewport, never exceed it */
.container {
    box-sizing: border-box;
    max-width: min(1200px, 100%);
}

/* Header flex children — let them shrink rather than push */
.app-header__inner   { min-width: 0; flex-wrap: nowrap; }
.brand               { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.brand__text         { min-width: 0; overflow: hidden; }
.brand__name,
.brand__tagline      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Search */
.search              { min-width: 0; max-width: 100%; }
.search__input       { min-width: 0; width: 100%; }

/* Marquee track is *deliberately* wider than the viewport (animation),
   so reinforce that the wrapper clips it. */
.marquee             { overflow: hidden; }

/* Hero-slider track is intrinsically 3 × 100%; clip the viewport hard. */
.hero-slider,
.hero-slider__viewport { overflow: hidden; }
.hero-slider__slide   { box-sizing: border-box; max-width: 100%; }
.hero-slider__content { max-width: 100%; }

/* Category strip — already overflow-x:auto, just make sure the
   negative margin doesn't push past the viewport. */
.cat-strip           { max-width: 100vw; }

/* Product grid + card never breach their cell */
.grid--products      { width: 100%; max-width: 100%; }
.product-card        { min-width: 0; max-width: 100%; }
.product-card__name,
.product-card__weight,
.product-card__pill,
.product-card__price { max-width: 100%; min-width: 0; }
.product-card__name  { overflow-wrap: anywhere; }

/* Form fields shouldn't blow out their column */
.form__field input,
.form__field select,
.form__field textarea { max-width: 100%; }

/* Images: never wider than their slot, keep aspect */
img, video { max-width: 100%; height: auto; }
svg        { max-width: 100%; }   /* leave inline icon sizing alone */

/* =================================================================
   26. Step-5 additions: product-detail + cart pages
   ================================================================= */

/* Extra bottom padding for pages that pin a sticky CTA above the nav */
.page-cart,
.page-product-detail { padding-bottom: 168px; }

/* Back bar "checkout" variant: title + small item-count below */
.back-bar__main {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.back-bar__title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.back-bar__sub   { font-size: 12px; color: var(--color-text-muted); }

/* ---- Product-detail sticky CTA: ADD-TO-CART ↔ qty stepper -- */
.pd__cta-action          { width: 100%; }
.pd__cta-action[data-state="qty"] .pd__cta-add { display: none; }
.pd__cta-action[data-state="add"] .pd__cta-qty { display: none; }
.pd__cta-add  { width: 100%; padding: 14px; font-size: 14px; letter-spacing: .5px; }
.pd__cta-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    border-radius: 10px;
    padding: 6px;
    width: 100%;
}
.pd__cta-qty button {
    width: 40px; height: 40px;
    background: var(--color-white);
    color: var(--color-primary);
    border: 0;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.pd__cta-qty button:hover { background: var(--color-secondary); }
.pd__cta-qty span {
    color: var(--color-white);
    font-weight: 800;
    font-size: 16px;
    min-width: 40px;
    text-align: center;
}

/* PD spec rows look like little brown info chips */
.pd__specs > div {
    background: var(--color-secondary);
    padding: 10px 12px;
    border-radius: 8px;
}

/* PD reviews "View all" button spacing */
.review-card:first-of-type { border-top: 0; }
.pd__view-all { margin-top: 14px; }

/* PD price-box savings line uses brand brown */
.pd__price-row .save { color: var(--color-primary); }

/* ---- Cart page: section heading ---------------------------- */
.cart-summary h3,
.cart-offers h3 {
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Offers Available block ------------------------------- */
.cart-offers {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 14px;
    margin-top: 18px;
}
.cart-offer-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    background: var(--color-secondary);
    margin-bottom: 8px;
    border: 1px dashed var(--color-border);
    transition: background .2s ease, border-color .2s ease;
}
.cart-offer-item:last-child { margin-bottom: 0; }
.cart-offer-item.is-unlocked {
    background: var(--color-success-light);
    border-color: var(--color-success);
}
.cart-offer-item__ic {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cart-offer-item.is-unlocked .cart-offer-item__ic {
    background: var(--color-success);
    color: var(--color-white);
}
.cart-offer-item__body { flex: 1; min-width: 0; }
.cart-offer-item__body strong {
    display: block;
    font-size: 14px;
    color: var(--color-primary);
    margin-bottom: 2px;
}
.cart-offer-item__body span {
    font-size: 12px;
    color: var(--color-text-muted);
}
.cart-offer-item.is-unlocked .cart-offer-item__body strong { color: var(--color-success); }
.cart-offer-item.is-unlocked .cart-offer-item__body span   { color: var(--color-success); font-weight: 600; }
.cart-offer-item__lock {
    color: var(--color-text-muted);
    font-size: 16px;
    flex-shrink: 0;
}
.cart-offer-item.is-unlocked .cart-offer-item__lock { color: var(--color-success); }

/* ---- Cart sticky CTA bar (total + Add Address) ------------- */
.cart-cta {
    position: fixed;
    left: 0; right: 0; bottom: 72px;
    z-index: 55;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -4px 14px var(--color-shadow);
}
.cart-cta__total { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cart-cta__label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cart-cta__total strong {
    font-size: 20px;
    color: var(--color-primary);
    font-weight: 800;
}
.cart-cta__btn {
    flex: 1;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ---- Cart item polish ------------------------------------- */
.cart-item .qty {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
}
.cart-item .qty button {
    width: 30px; height: 30px;
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: 6px;
    border: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}
.cart-item .qty span {
    color: var(--color-white);
    font-weight: 800;
    font-size: 13.5px;
    min-width: 24px;
}

/* =================================================================
   27. Step-6 additions: address / payment / track / support pages
   ================================================================= */

/* Pages with a sticky CTA at the bottom need extra padding. */
.page-address,
.page-payment,
.page-track,
.page-support { padding-bottom: 96px; }

/* ---- Section heading inside a content card (h2 not h3) ---- */
.card-section {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}
.card-section h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-section h2 .num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

/* ---- Disabled button (used on Save Address & Proceed) ----- */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Payment options --------------------------------------- */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.payment-option {
    background: var(--color-white);
    border: 2px solid var(--color-border-light);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}
.payment-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-secondary);
}
.payment-option__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}
.payment-option.is-selected .payment-option__radio { border-color: var(--color-primary); }
.payment-option.is-selected .payment-option__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-primary);
}
.payment-option__body { flex: 1; min-width: 0; }
.payment-option__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.payment-option__desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.payment-option__icons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.payment-option__icons span {
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 10.5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid var(--color-border);
    letter-spacing: .3px;
}
.payment-option.is-selected .payment-option__icons span {
    background: var(--color-white);
    border-color: var(--color-primary);
}

/* ---- Order summary card (payment + track pages) ----------- */
.order-summary-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--color-border-light);
    margin-bottom: 14px;
}
.order-summary-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.order-summary-card__head strong {
    font-size: 14px;
    color: var(--color-primary);
}
.order-summary-card__head .count {
    font-size: 12px;
    color: var(--color-text-muted);
}
.order-summary-card__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}
.order-summary-card__row.total {
    font-weight: 800;
    color: var(--color-primary);
    border-top: 1px dashed var(--color-border);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 16px;
}

/* ---- Address preview chip (payment page) ------------------ */
.address-preview {
    background: var(--color-secondary);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
}
.address-preview__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 700;
}
.address-preview__type {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .3px;
}
.address-preview__body { font-size: 13px; color: var(--color-text); line-height: 1.5; }
.address-preview__change {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 600;
}

/* ---- Track order ------------------------------------------- */
.track-search {
    display: flex;
    gap: 8px;
    background: var(--color-white);
    padding: 12px;
    border-radius: 12px;
    margin: 16px 0;
    border: 1px solid var(--color-border-light);
}
.track-search input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    font-size: 14px;
    background: var(--color-white);
}
.track-search input:focus {
    outline: 0;
    border-color: var(--color-primary);
}
.track-search button {
    padding: 11px 18px;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.track-search button:hover { background: var(--color-primary-dark); }

.order-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--color-border-light);
    margin-bottom: 14px;
    box-shadow: 0 2px 8px var(--color-shadow);
}
.order-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 12px;
}
.order-card__num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--color-primary);
    font-size: 15px;
}
.order-card__date {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.order-card__total {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
}
.order-card__pay {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 2px;
}

/* Visual step indicator */
.status-steps {
    display: flex;
    align-items: flex-start;
    margin: 18px 0 6px;
    position: relative;
}
.status-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 10px;
    color: var(--color-text-light);
    min-width: 0;
}
.status-step__dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-border);
    margin: 0 auto 6px;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 1px var(--color-border);
    position: relative;
    z-index: 2;
}
.status-step.is-done .status-step__dot,
.status-step.is-current .status-step__dot {
    background: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.status-step.is-current .status-step__dot::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: rgba(102, 54, 0, .18);
    z-index: -1;
}
.status-step__label {
    font-size: 10px;
    color: var(--color-text-light);
    padding: 0 2px;
    line-height: 1.2;
    word-break: break-word;
}
.status-step.is-done .status-step__label,
.status-step.is-current .status-step__label {
    color: var(--color-primary);
    font-weight: 700;
}
.status-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(50% + 10px);
    right: calc(-50% + 10px);
    top: 7px;
    height: 2px;
    background: var(--color-border);
    z-index: 1;
}
.status-step.is-done:not(:last-child)::after {
    background: var(--color-primary);
}
.status-cancelled-banner {
    background: rgba(192, 57, 43, .08);
    color: var(--color-danger);
    border: 1px solid rgba(192, 57, 43, .25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
}

.order-items-mini {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: 10px;
    padding: 4px 0;
    scrollbar-width: none;
}
.order-items-mini::-webkit-scrollbar { display: none; }
.order-items-mini__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-secondary);
    border-radius: 8px;
    padding: 6px 10px 6px 6px;
    flex-shrink: 0;
    font-size: 12px;
    max-width: 220px;
}
.order-items-mini__item img {
    width: 36px; height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.order-items-mini__name {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-items-mini__qty {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ---- Support / policies ----------------------------------- */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0 6px;
}
.policy-btn {
    background: var(--color-white);
    border: 1.5px solid var(--color-border-light);
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.policy-btn:hover { border-color: var(--color-primary); }
.policy-btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.policy-btn__ic {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.policy-btn.is-active .policy-btn__ic {
    background: rgba(255, 255, 255, .15);
    color: var(--color-white);
}
.policy-btn__label { line-height: 1.2; }

.policy-content {
    margin-top: 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 20px;
}
.policy-content h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-primary);
    margin: 0 0 14px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.policy-content p {
    color: var(--color-text);
    line-height: 1.65;
    margin-bottom: 12px;
    font-size: 14px;
}
.policy-content ul {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}
.policy-content ul li { margin-bottom: 4px; }
.policy-content .faq-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}
.policy-section { display: none; }
.policy-section.is-active { display: block; }

/* ---- Address page form polish ----------------------------- */
.page-address .form__field input[readonly],
.page-address .form__field input:invalid {
    /* nothing extra — defaults already pleasant */
}
.form__field .hint {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.form__field input[aria-invalid="true"],
.form__field select[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .10);
}

/* Inline error text rendered below a field by the address-form JS.
   Keep the size small and the line tight — it sits between fields. */
.form__field__error {
    display: block;
    color: var(--color-danger);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 4px;
}

/* Custom <select> chevron — native chevrons get clipped on the right
   on Android Chrome at narrow viewports (the user's "state dropdown
   looks broken from the right" report). Strip the native UI and draw
   our own SVG arrow with comfortable right-padding so the longest
   state names ("Arunachal Pradesh") never collide with the icon. */
.form__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23663600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    text-overflow: ellipsis;
    cursor: pointer;
}
.form__field select::-ms-expand { display: none; } /* IE/old Edge */

/* On phones <480px the 2-column City / State row is too tight for
   "Andhra Pradesh" + chevron + padding — stack it so each field gets
   the full content width. */
@media (max-width: 479px) {
    .form__row { grid-template-columns: 1fr; }
}

/* =================================================================
   28. Admin panel
   ================================================================= */
body.admin-page {
    background: var(--color-secondary);
    padding-bottom: 30px;            /* override site-wide bottom-nav padding */
    min-height: 100vh;
}

/* Top bar */
.admin-header {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px var(--color-shadow);
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 12px;
}
.admin-header__brand {
    color: var(--color-white);
    font-family: 'Plus Jakarta Sans', serif;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}
.admin-header__brand:hover { color: var(--color-white); }
.admin-header__brand .mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--color-white);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-header__brand .text {
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-header__brand .text .sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .8;
}
.admin-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.admin-header__link {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease;
}
.admin-header__link.is-active,
.admin-header__link:hover {
    background: rgba(255,255,255,.15);
    color: var(--color-white);
}
.admin-header__logout {
    background: rgba(255,255,255,.18);
    color: var(--color-white);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.admin-header__logout:hover {
    background: rgba(255,255,255,.3);
    color: var(--color-white);
}

/* Page title row */
.admin-page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-primary);
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
}
.admin-page-sub {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 0 0 20px;
}

/* Stat cards */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .admin-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.admin-stat {
    background: var(--color-white);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 10px var(--color-shadow);
    position: relative;
    overflow: hidden;
}
.admin-stat::before {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: var(--color-secondary);
    opacity: .7;
}
.admin-stat__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-bottom: 10px;
    position: relative;
}
.admin-stat__label {
    font-size: 11.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    margin-bottom: 4px;
    position: relative;
}
.admin-stat__value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    position: relative;
}
@media (min-width: 768px) {
    .admin-stat__value { font-size: 26px; }
}

/* Section heading row */
.admin-section { margin-bottom: 24px; }
.admin-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.admin-section__head h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: var(--color-text);
    margin: 0;
    font-weight: 700;
}
.admin-section__head .btn { padding: 8px 14px; font-size: 12.5px; }

/* Table */
.admin-table-wrap {
    background: var(--color-white);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 2px 10px var(--color-shadow);
    -webkit-overflow-scrolling: touch;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    min-width: 600px;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}
.admin-table th,
.admin-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}
.admin-table th {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 11.5px;
    letter-spacing: .4px;
    font-weight: 700;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}
.admin-table tbody tr:hover { background: var(--color-surface-alt); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .order-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--color-primary);
}
.admin-table .amount {
    font-weight: 800;
    color: var(--color-primary);
}

/* Status pills */
.admin-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}
.admin-status--pending     { background: rgba(243,156,18,.15);  color: #8a5400; }
.admin-status--confirmed   { background: rgba(41,128,185,.15);  color: #1c6093; }
.admin-status--packed      { background: rgba(102,54,0,.12);    color: var(--color-primary); }
.admin-status--shipped     { background: rgba(41,128,185,.18);  color: #1c6093; }
.admin-status--out         { background: rgba(231,76,60,.15);   color: #9c2e21; }
.admin-status--delivered   { background: rgba(46,139,87,.18);   color: #1c633a; }
.admin-status--cancelled   { background: rgba(192,57,43,.15);   color: #872d22; }

/* Empty-data card */
.admin-empty {
    background: var(--color-white);
    border-radius: 12px;
    padding: 36px 16px;
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
}
.admin-empty__icon { font-size: 38px; margin-bottom: 8px; }

/* Login card */
.admin-card__brand {
    text-align: center;
    margin-bottom: 22px;
}
.admin-card__brand-mark {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin-bottom: 12px;
    box-shadow: 0 8px 18px var(--color-shadow);
}
.admin-card__brand h1 {
    margin: 0;
    font-size: 22px;
    color: var(--color-primary);
    font-family: 'Plus Jakarta Sans', serif;
}
.admin-card__brand small {
    color: var(--color-text-muted);
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.admin-error,
.admin-success {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid;
}
.admin-error {
    background: rgba(192,57,43,.08);
    color: var(--color-danger);
    border-color: rgba(192,57,43,.2);
}
.admin-success {
    background: rgba(46,139,87,.1);
    color: var(--color-success);
    border-color: rgba(46,139,87,.25);
}

.admin-card__hint {
    background: var(--color-secondary);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}
.admin-card__hint code {
    background: var(--color-white);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--color-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}

/* =================================================================
   29. UI overhaul: header restructure + search-pill + side-menu redesign
   ================================================================= */

/* ---- Brown action bar at top of header --------------------- */
.app-header__top {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    min-height: 48px;
}
.app-header__top-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Hamburger and action icons share .icon-btn (already white-on-brown) */
.app-header__top .icon-btn {
    width: 38px;
    height: 38px;
}

/* ---- White logo bar ---------------------------------------- */
.app-header__logo-bar {
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 0;
}
.logo-mark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 3px 10px var(--color-shadow);
    overflow: hidden;
}
.logo-mark svg { display: block; }
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
}
.logo-text__name {
    font-family: 'Plus Jakarta Sans', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logo-text__tagline {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Search pill ------------------------------------------- */
.app-header__search {
    background: var(--color-white);
    padding: 0 16px 12px;
    max-width: 1200px;
    margin: 0 auto;
}
.search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1ede5;                       /* neutral light beige on white page */
    border: 1px solid #e7e2d8;
    border-radius: 999px;
    padding: 5px 5px 5px 16px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-pill:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 54, 0, .08);
}
.search-pill__icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.search-pill__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 9px 0;
    font-size: 14px;
    outline: 0;
    color: var(--color-text);
}
.search-pill__input::placeholder { color: var(--color-text-light); }
.search-pill__submit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.search-pill__submit:hover  { background: var(--color-primary-dark); }
.search-pill__submit:active { transform: scale(.96); }

/* ---- Slide-in side menu (full redesign) -------------------- */
.side-menu__panel {
    width: min(330px, 88vw);
    background: var(--color-secondary);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 6px 0 30px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.side-menu.is-open .side-menu__panel { transform: translateX(0); }

/* Top: brown gradient with avatar + greeting */
.side-menu__head {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 26px 20px 24px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}
.side-menu__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 0;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.side-menu__close:hover { background: rgba(255, 255, 255, .3); }

.side-menu__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.side-menu__greet {
    font-family: 'Plus Jakarta Sans', serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-white);
}
.side-menu__badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    color: var(--color-white);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
}

/* Scrollable nav region */
.side-menu__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px;
    background: var(--color-secondary);
}
.side-menu__nav::-webkit-scrollbar { width: 5px; }
.side-menu__nav::-webkit-scrollbar-thumb {
    background: rgba(102, 54, 0, .2);
    border-radius: 999px;
}

.side-menu__section { margin-bottom: 18px; }
.side-menu__section:last-child { margin-bottom: 6px; }
.side-menu__section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 1.5px;
    padding: 0 4px;
    margin-bottom: 8px;
}

.side-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 6px;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid transparent;
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    min-width: 0;
}
.side-menu__item:last-child { margin-bottom: 0; }
.side-menu__item:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 10px var(--color-shadow);
    color: var(--color-text);
}
.side-menu__item:active { transform: scale(.985); }

.side-menu__item-ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.side-menu__item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    overflow: hidden;
}
.side-menu__item-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-menu__item-text small {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-menu__arrow {
    color: var(--color-text-light);
    flex-shrink: 0;
}

/* Footer: store name */
.side-menu__foot {
    padding: 16px;
    text-align: center;
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.side-menu__foot strong {
    font-family: 'Plus Jakarta Sans', serif;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 700;
    display: block;
}
.side-menu__foot small {
    font-size: 10.5px;
    color: var(--color-text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ---- Product-card refinements ------------------------------ */
.product-card { box-shadow: 0 2px 10px var(--color-shadow); border-color: transparent; }
.product-card__media { background: var(--color-white); }
.product-card__media img { object-fit: contain; padding: 8px; }

.product-card__free {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-success);
    color: var(--color-white);
    border: 0;
}
.product-card__rating {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
}
.product-card__btn--add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1.5px;
    border-radius: 10px;
    padding: 11px 10px;
}
.product-card__btn--add svg { stroke-width: 2.5; }

/* ---- Bottom-nav cart badge red dot ------------------------- */
.bottom-nav__item .cart-badge {
    background: var(--color-badge);
    border-color: var(--color-white);
}

/* ---- Overflow safeguards for the new header classes ------ */
.app-header,
.app-header__top,
.app-header__logo-bar,
.app-header__search { max-width: 100%; }
.logo-text,
.logo-text__name,
.logo-text__tagline,
.search-pill,
.search-pill__input { min-width: 0; }

/* =================================================================
   30. Reference-design v2 update
   – Plus Jakarta Sans typography
   – Single white header (NO brown top bar)
   – Cart icon as a rounded white card
   – Marquee with INFO white pill on the left
   – Product card with a soft top-strip (FREE DELIVERY + % OFF)
   – Category chips with product image
   – Bottom-nav active pill state
   ================================================================= */

/* ---- Headings: same font, but bold weight + tight tracking - */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -.2px;
}

/* ---- Hide the legacy brown action bar entirely ------------- */
.app-header__top { display: none !important; }

/* ---- New single white header row --------------------------- */
.app-header__logo-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;                       /* match .container padding */
    max-width: 1200px;
    margin: 0 auto;
}

/* Hamburger (now on white, brown icon) */
.app-header__menu {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: transparent;
    color: var(--color-primary);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.app-header__menu:hover { background: var(--color-secondary); }

/* Logo mark: small rounded-square card with circular brand inside */
.logo-mark {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border-light);
    box-shadow: 0 2px 6px var(--color-shadow);
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.logo-mark svg { width: 100%; height: 100%; }

/* Brand block (link wrapping the mark + text) */
.app-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Cart icon on the right – rounded white card */
.app-header__cart-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border-light);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--color-shadow);
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s ease, transform .1s ease;
}
.app-header__cart-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.app-header__cart-btn:active { transform: scale(.96); }
.app-header__cart-btn .cart-badge {
    top: -4px; right: -4px;
    border-color: var(--color-white);
}

/* ---- Marquee: INFO pill on the left ------------------------ */
.marquee {
    position: relative;
    overflow: hidden;
    padding-left: 66px;
}
.marquee::before {
    content: 'INFO';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
    color: var(--color-primary);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.marquee::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 64px;
    background: linear-gradient(90deg, var(--color-primary) 70%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* ---- "Available Products" heading in a white card ---------- */
.page-home .section-head,
.page-products .section-head {
    background: var(--color-white);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px var(--color-shadow);
}

/* ---- Category chips with product images (4-col grid) -------- */
.cat-strip__item {
    min-width: 0;                              /* shrinks inside grid cell */
    padding: 0 0 10px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-white);
}
.cat-strip__ic {
    width: 100%;
    aspect-ratio: 1 / 1;                       /* always square, scales with width */
    height: auto;
    margin: 0 0 6px;
    border-radius: 0;
    background: var(--color-white);
    display: block;
    overflow: hidden;
}
.cat-strip__ic img,
.cat-strip__ic svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block;
}
.cat-strip__name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text);
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-strip__item.is-active {
    border-color: var(--color-primary);
    border-width: 2px;
}
.cat-strip__item.is-active .cat-strip__name { color: var(--color-primary); }

@media (min-width: 480px) {
    .cat-strip { gap: 12px; }
    .cat-strip__name { font-size: 13px; }
}

/* ---- Product card: top strip (FREE DELIVERY + % OFF) ------ */
.product-card__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: linear-gradient(90deg, rgba(245, 230, 215, .35) 0%, rgba(255, 220, 220, .35) 100%);
    border-bottom: 1px solid var(--color-border-light);
    min-height: 30px;
}
.strip__free {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}
.strip__free svg { color: var(--color-primary); }
.strip__discount {
    color: var(--color-badge);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* Hide the old floating badges since we use the strip now */
.product-card__free,
.product-card__badge { display: none !important; }

/* Image area: white, contained */
.product-card__media {
    background: var(--color-surface-alt);
    padding: 8px;
}
.product-card__media img {
    object-fit: contain;
    padding: 4px;
}

/* ---- Bottom nav active pill state -------------------------- */
.bottom-nav {
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav__item {
    margin: 2px;
    border-radius: 16px;
    padding: 8px 4px 7px;
    transition: background .15s ease, color .15s ease;
}
.bottom-nav__item.is-active {
    background: var(--color-secondary);
    color: var(--color-primary);
}
.bottom-nav__item.is-active svg { stroke: var(--color-primary); }

/* ---- Hero slider: image-backed slides --------------------- */
.hero-slider__slide {
    background-color: var(--color-primary);  /* fallback if image fails */
}
.hero-slider__slide::after {
    background: linear-gradient(180deg, rgba(102, 54, 0, .1) 0%, rgba(74, 39, 0, .75) 100%);
}
.hero-slider__kicker {
    background: linear-gradient(135deg, #f5a623 0%, #c4881b 100%);
    box-shadow: 0 2px 8px rgba(245, 166, 35, .35);
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* ---- Category banner: stronger image-backed look ----------- */
.cat-banner {
    min-height: 150px;
    background-size: cover;
    background-position: center;
}
.cat-banner::before,
.cat-banner::after { display: none; }
.cat-banner__content {
    background: linear-gradient(135deg, rgba(102, 54, 0, .55) 0%, rgba(74, 39, 0, .85) 100%);
    padding: 20px 22px;
    min-height: 150px;
}
.cat-banner h3 {
    color: var(--color-white);
    font-size: 26px;
    font-weight: 800;
}

/* ---- Body font + heading polish --------------------------- */
body {
    font-feature-settings: 'cv11', 'ss03';
    letter-spacing: -.1px;
}
.logo-text__name { letter-spacing: -.3px; }

/* =================================================================
   FINAL — enforce 16px gutter on every content block.
   Header (.app-header, .back-bar) and footer (.bottom-nav, .site-footer)
   stay full-bleed; EVERYTHING else sits 16px from both screen edges.

   This block lives at the END of the file so it wins the cascade.
   If you ever see a content block running edge-to-edge again, the rule
   you want is HERE, not buried earlier in the file.
   ================================================================= */

/* The two outliers that aren't inside .container.
   Marquee + page-hero are coloured bars; we use *margin* (not padding)
   so the cream page background shows on both sides. */
.marquee,
.page-hero {
    margin-left: 16px !important;
    margin-right: 16px !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow);
}

.marquee  { margin-top: 12px !important; }
.page-hero {
    border-radius: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
    /* Override the earlier width:100% (line ~1408): with border-box
       and 16px side margins, width:100% pushes the element 32px past
       its parent and overflow-x:clip on .app-main hides the right
       gutter — making the banner look flush to the right edge.
       width:auto lets the margins reserve real space on both sides. */
    width: auto;
}

/* On desktop, centre them and cap at 1168px (1200 - 32 gutter). */
@media (min-width: 1232px) {
    .marquee,
    .page-hero {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1168px;
    }
}

/* Belt-and-braces: any direct child of <main> that isn't .container
   gets the same gutter. (Catches future block additions.) */
.app-main > *:not(.container):not(section.container) {
    box-sizing: border-box;
}

/* Make sure .container itself respects the same gutter and doesn't
   somehow get its padding stripped by a stray rule. */
.container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* =================================================================
   FINAL — Category chip restructure
   The white rounded box is ONLY around the image.
   The category title sits OUTSIDE the box, as plain text below.
   No ellipsis — names wrap to 2 lines if needed.
   ================================================================= */
.cat-strip__item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: pointer;
    overflow: visible !important;
}

.cat-strip__ic {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(102, 54, 0, .08) !important;
    overflow: hidden;
    transition: border-color .15s ease, transform .1s ease;
}
.cat-strip__ic img,
.cat-strip__ic svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
    display: block !important;
}

.cat-strip__name {
    display: block !important;
    text-align: center !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    line-height: 1.2 !important;
    padding: 0 2px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word;
}

/* Active state: brown border on the image box, brown text below */
.cat-strip__item.is-active .cat-strip__ic {
    border-color: var(--color-primary) !important;
}
.cat-strip__item.is-active .cat-strip__name {
    color: var(--color-primary) !important;
}

/* Hover on the image box only */
.cat-strip__item:hover .cat-strip__ic {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 54, 0, .12) !important;
}

/* =================================================================
   FINAL — Mini cart bar (slides up when cart has items)
   ================================================================= */
.mini-cart {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 82px;                              /* above the bottom-nav */
    z-index: 55;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: 14px;
    padding: 11px 12px 11px 18px;
    box-shadow: 0 12px 28px rgba(102, 54, 0, .35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.mini-cart.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mini-cart__info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.mini-cart__count {
    font-size: 11px;
    font-weight: 600;
    opacity: .9;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.mini-cart__total {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
}
.mini-cart__btn {
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .1s ease;
}
.mini-cart__btn:hover  { color: var(--color-primary); background: var(--color-white); }
.mini-cart__btn:active { transform: scale(.97); }

/* Hide the mini cart on pages that already have their own cart UI */
.page-cart .mini-cart,
.page-address .mini-cart,
.page-payment .mini-cart,
.page-track .mini-cart,
.page-support .mini-cart,
.page-product-detail .mini-cart { display: none !important; }

/* Push body content up so the mini cart doesn't cover anything */
body.has-mini-cart { padding-bottom: 168px; }

/* =================================================================
   FINAL — Tighter hero ↔ Available Products spacing + polished card
   ================================================================= */
.page-home #products.section,
.page-products #products.section {
    padding-top: 6px !important;
}

.page-home main > section.container:first-of-type {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
}

.page-home .section-head,
.page-products .section-head {
    background: linear-gradient(135deg, #ffffff 0%, #fdfaf5 100%) !important;
    border: 1px solid #f3ece1;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin-top: 6px !important;
    margin-bottom: 14px !important;
    box-shadow:
        0 6px 22px rgba(102, 54, 0, .07),
        0 1px 3px rgba(0, 0, 0, .04) !important;
}

.section-title { font-size: 19px !important; font-weight: 800 !important; }
.section-title__icon {
    width: 32px !important; height: 32px !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 10px rgba(102, 54, 0, .28);
}
.section-head__count {
    background: #faf6ee;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

@media (min-width: 480px) {
    .cat-strip__name { font-size: 13px !important; }
}

/* =================================================================
   FINAL — ADD TO CART "+" glyph (text, not SVG, per the reference)
   ================================================================= */
.product-card__btn--add {
    /* display:flex (not inline-flex) so the button is block-level and
       fills the action row — otherwise the click target collapses to
       the width of the "Add to Cart" text and the surrounding padding
       feels dead on tap. */
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.product-card__btn-plus {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
.product-card__btn:hover .product-card__btn-plus { color: inherit; }

/* =================================================================
   FINAL — Single-button qty stepper after ADD TO CART
   (Blinkit / Zepto / Swiggy Instamart style: one solid brown button
   with white "− N +" inside.  NOT three separate buttons.)
   ================================================================= */
.product-card__qty {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between;
    background: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(102, 54, 0, .15);
}
.product-card__qty button {
    flex: 0 0 38%;
    background: transparent !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .12s ease;
}
.product-card__qty button:hover  { background: rgba(255, 255, 255, .12) !important; }
.product-card__qty button:active { background: rgba(255, 255, 255, .22) !important; }
.product-card__qty span {
    flex: 1;
    color: var(--color-white) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-align: center;
    align-self: center;
    min-width: 0 !important;
    line-height: 1 !important;
}

/* =================================================================
   FINAL FIX — only ONE button visible at a time
   The display:flex / inline-flex !important rules above were
   overriding the state-based hide. These selectors below win
   because they are equally !important and come later in the file.
   ================================================================= */
.product-card__action[data-state="add"] .product-card__qty       { display: none !important; }
.product-card__action[data-state="qty"] .product-card__btn--add  { display: none !important; }

/* =================================================================
   FINAL — Marquee right-side gutter + faster scroll
   ================================================================= */
.marquee {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
}

@media (min-width: 1232px) {
    .marquee {
        max-width: 1168px !important;
    }
}

/* Scroll about 2× faster (28s → 14s) */
.marquee__track {
    animation: dfb-marquee 14s linear infinite !important;
}

/* =================================================================
   FINAL — Cart / Checkout page (v2 reference design)
   ================================================================= */

/* Background of the checkout page — light off-white, not pure white */
body.page-cart { background: #f6f5f1 !important; }

/* Hide the legacy back-bar (we now use .checkout-head) */
.page-cart .back-bar { display: none !important; }

/* Big "Checkout" header row with circle back arrow */
.page-cart .checkout-head {
    background: transparent;
    padding: 20px 16px 12px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}
.page-cart .checkout-head__back {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    border: 1px solid #efece5;
}
.page-cart .checkout-head__title h1 {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -.3px;
}
.page-cart .checkout-head__title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Every white card on the checkout page */
.page-cart .checkout-card {
    background: var(--color-white);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    text-decoration: none;
    color: var(--color-text);
    display: block;
}
.page-cart .checkout-card__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 12px;
}

/* 1. Delivery-address card */
.page-cart .checkout-address {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}
.page-cart .checkout-address__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eef3fc;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-cart .checkout-address__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.page-cart .checkout-address__body strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
}
.page-cart .checkout-address__body span {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.35;
}
.page-cart .checkout-address__cta {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    flex-shrink: 0;
}

/* 2. Cart items — 3-column row */
.page-cart .cart-item {
    display: grid !important;
    grid-template-columns: 70px 1fr auto !important;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #f0eee9;
    margin: 0;
    background: transparent;
    border-radius: 0;
}
.page-cart .cart-item:first-child { padding-top: 0; }
.page-cart .cart-item:last-child  { padding-bottom: 0; border-bottom: 0; }

.page-cart .cart-item__img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 10px;
    object-fit: contain;
    background: #fafafa;
    padding: 4px;
    border: 1px solid #f0eee9;
}
.page-cart .cart-item__details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-cart .cart-item__name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--color-text);
    line-height: 1.3;
}
.page-cart .cart-item__weight {
    font-size: 12px;
    color: var(--color-text-muted);
}
.page-cart .cart-item__price {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text);
    margin-top: 2px;
}

.page-cart .cart-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 110px;
}
.page-cart .cart-item__qty {
    display: inline-flex !important;
    align-items: center;
    background: var(--color-primary);
    border-radius: 8px;
    padding: 0;
    width: 110px;
    height: 36px;
    overflow: hidden;
}
.page-cart .cart-item__qty button {
    flex: 0 0 36px;
    height: 36px;
    background: transparent !important;
    border: 0;
    color: var(--color-white) !important;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none;
}
.page-cart .cart-item__qty button:hover  { background: rgba(255, 255, 255, .12) !important; }
.page-cart .cart-item__qty button:active { background: rgba(255, 255, 255, .2) !important; }
.page-cart .cart-item__qty span {
    flex: 1;
    text-align: center;
    color: var(--color-white) !important;
    font-weight: 800;
    font-size: 14px;
}
.page-cart .cart-item__total {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text);
}
.page-cart .cart-item__remove {
    background: transparent;
    border: 0;
    color: #e74c3c;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.page-cart .cart-item__remove:hover { color: #c0392b; }

/* 3. Offers Available — inset light cards */
.page-cart .cart-offer-item {
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.page-cart .cart-offer-item:last-child { margin-bottom: 0; }
.page-cart .cart-offer-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-cart .cart-offer-item__body strong {
    color: var(--color-text) !important;
    font-size: 14.5px;
    font-weight: 800;
    margin-bottom: 2px;
}
.page-cart .cart-offer-item__body span {
    color: var(--color-text-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
}
.page-cart .cart-offer-item__lock {
    background: transparent !important;
    color: var(--color-primary) !important;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.page-cart .cart-offer-item.is-unlocked {
    background: var(--color-success-light) !important;
    border-color: var(--color-success) !important;
}
.page-cart .cart-offer-item.is-unlocked .cart-offer-item__lock { color: var(--color-success) !important; }

/* 4. Bill Details */
.page-cart .bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
    color: var(--color-text);
}
.page-cart .bill-row--brown {
    color: var(--color-primary);
    font-weight: 700;
}
.page-cart .bill-row--total {
    border-top: 1px dashed #e5e0d8;
    margin-top: 6px;
    padding-top: 12px;
    font-size: 17px;
    font-weight: 800;
}

/* Sticky bottom CTA — full-width brown bar */
.page-cart .checkout-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    background: linear-gradient(135deg, #6b3a05 0%, #4a2700 100%);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 28px rgba(102, 54, 0, .35);
    max-width: 1200px;
    margin: 0 auto;
}
.page-cart .checkout-cta strong {
    color: var(--color-white);
    font-size: 19px;
    font-weight: 800;
}
.page-cart .checkout-cta__btn {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.page-cart .checkout-cta__btn:hover { color: var(--color-white); }

/* Hide bottom-nav on the checkout page so the CTA can sit at the bottom edge */
.page-cart .bottom-nav { display: none !important; }
.page-cart { padding-bottom: 110px !important; }

/* =================================================================
   FINAL — Side menu: remove the dark overlay
   Per reference design the page underneath stays clearly visible
   when the drawer slides in.
   ================================================================= */
.side-menu__scrim { background: transparent !important; z-index: 1 !important; }

/* The panel MUST stack above the scrim — otherwise the transparent
   scrim sitting on top would swallow every click and the user could
   neither scroll the nav nor tap a menu item. */
.side-menu__panel {
    z-index: 2 !important;
    position: absolute !important;
}

/* Make sure the nav region itself scrolls (head + foot are pinned). */
.side-menu__nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;          /* lets flex children with overflow shrink */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* =================================================================
   FINAL — Product detail page (v2 reference design)
   Minimalist slider on top, white card sections below, sticky
   cart-stepper CTA at the bottom.
   ================================================================= */

body.page-product-detail { background: #f6f5f1 !important; }

/* 1. Minimalist gallery */
.pd__gallery { background: transparent !important; padding: 14px 16px 0 !important; }
.pd__main {
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 16px !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.pd__main img { padding: 14px; object-fit: contain !important; }

.pd__nav {
    width: 34px !important; height: 34px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--color-text) !important;
    border: 1px solid #f0eee9 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06) !important;
}
.pd__nav:hover { background: var(--color-white) !important; color: var(--color-primary) !important; }
.pd__nav--prev { left: 8px !important; }
.pd__nav--next { right: 8px !important; }

/* Remove the heavy badges overlaying the image — info already shown below */
.pd__badge-discount,
.pd__badge-delivery { display: none !important; }

.pd__thumbs { background: transparent !important; padding: 12px 16px !important; gap: 10px !important; }
.pd__thumb {
    flex: 0 0 68px !important;
    aspect-ratio: 1 / 1;
    background: var(--color-white) !important;
    border: 1.5px solid #f0eee9 !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 6px;
}
.pd__thumb img { object-fit: contain !important; padding: 0 !important; }
.pd__thumb.is-active { border-color: var(--color-primary) !important; }

/* 2. Title + chips card */
.pd__header {
    background: var(--color-white) !important;
    margin: 12px 16px 14px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    border: 1px solid #f0eee9;
}
.pd__chips { gap: 6px !important; margin-bottom: 10px !important; }
.pd__chips .chip {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .3px;
}
.pd__chips .chip--cat { font-size: 10.5px !important; letter-spacing: .8px; }
.pd__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-text) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
}
.pd__weight {
    font-size: 13.5px !important;
    color: var(--color-text-muted) !important;
    margin: 0 !important;
}
.pd__sep { margin: 0 6px; color: var(--color-text-light); }

/* 3. Special price card */
.pd__price-box {
    margin: 0 16px 14px !important;
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 14px !important;
    padding: 18px !important;
}
.pd__price-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted) !important;
    margin-bottom: 6px !important;
}
.pd__price-row { gap: 12px !important; align-items: baseline; flex-wrap: wrap; }
.pd__price-row .sale {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
}
.pd__price-row .mrp { font-size: 15px !important; color: var(--color-text-light) !important; }
.pd__price-row .save {
    color: var(--color-success) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.pd__price-tax {
    margin-top: 10px !important;
    font-size: 12px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.5 !important;
}

/* 4. Three trust cards */
.pd__icon-row { margin: 0 16px 14px !important; gap: 10px !important; }
.pd__icon-row .item {
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 12px !important;
    padding: 14px 6px !important;
}
.pd__icon-row .ic {
    color: var(--color-primary) !important;
    font-size: 22px !important;
    margin-bottom: 6px !important;
}
.pd__icon-row .lbl {
    font-size: 11.5px !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
}

/* 5. Available offers card */
.pd__offers {
    margin: 0 16px 14px !important;
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 14px !important;
    padding: 16px !important;
}
.pd__offers h4 {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14.5px !important;
    color: var(--color-text) !important;
    font-weight: 800 !important;
    margin: 0 0 12px !important;
}
.pd__offers h4 svg { color: var(--color-primary); }
.pd__offers ul { gap: 10px !important; padding: 0; list-style: none; }
.pd__offers li {
    font-size: 13px !important;
    color: var(--color-text) !important;
    padding-left: 0 !important;
    line-height: 1.45;
}
.pd__offers li::before { display: none !important; content: '' !important; }
.pd__offers li strong { color: var(--color-primary); font-weight: 800; }

/* 6. Return & refund card */
.pd__support {
    margin: 0 16px 14px !important;
    background: var(--color-white) !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.pd__support svg {
    color: var(--color-primary) !important;
    width: 34px !important;
    height: 34px !important;
    background: #f3ede0;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 7. Sticky CTA — "N in cart" label */
.pd__cta-bar {
    background: transparent !important;
    border-top: 0 !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
}
.pd__cta-action {
    background: transparent;
    box-shadow: 0 8px 24px rgba(102, 54, 0, .25);
    border-radius: 12px;
}
.pd__cta-qty {
    background: var(--color-primary) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    height: 52px;
    overflow: hidden;
}
.pd__cta-qty button {
    width: 56px !important; height: 52px !important;
    background: transparent !important;
    color: var(--color-white) !important;
    font-size: 22px !important;
    border-radius: 0 !important;
}
.pd__cta-qty button:hover { background: rgba(255, 255, 255, .12) !important; }
.pd__cta-qty span {
    flex: 1;
    color: var(--color-white) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-align: center;
}
.pd__cta-qty span::after {
    content: ' in cart';
    font-weight: 600;
    opacity: .92;
}
.pd__cta-add {
    height: 52px;
    border-radius: 12px !important;
    font-size: 14px !important;
}

/* =================================================================
   FINAL — Payment Options page (v2 reference design)
   ================================================================= */

body.page-payment { background: #f6f5f1 !important; }
.page-payment .back-bar { display: none !important; }
.page-payment .bottom-nav { display: none !important; }
.page-payment .mini-cart { display: none !important; }
.page-payment { padding-bottom: 100px !important; }

/* Header */
.pay-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-white);
    border-bottom: 1px solid #f0eee9;
}
.pay-head__back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f4f1ec;
    color: var(--color-text);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}
.pay-head__title h1 {
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -.2px;
}
.pay-head__title p {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Free delivery alert */
.pay-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #e6f4ec 0%, #f1faf3 100%);
    border: 1px solid rgba(46, 139, 87, .25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.pay-alert__icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(46, 139, 87, .15);
    color: var(--color-success);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pay-alert__body { line-height: 1.3; }
.pay-alert__body strong {
    display: block;
    font-size: 14px;
    color: var(--color-success);
    font-weight: 800;
}
.pay-alert__body span { font-size: 12px; color: #1d6b3f; }

/* Generic card */
.pay-card {
    background: var(--color-white);
    border: 1px solid #f0eee9;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.pay-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pay-card__head h2 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text);
    display: flex; align-items: center; gap: 8px;
}
.pay-card__head h2 svg { color: var(--color-primary); }
.pay-card__link {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

/* Bank & Wallet offer mini-cards */
.pay-offers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pay-offer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #f0eee9;
    border-radius: 10px;
}
.pay-offer__brand {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 11.5px;
}
.pay-offer__brand--upi  { background: #ede4f0; color: #5f259f; }
.pay-offer__brand--card { background: #fef0e6; color: #c2410c; }
.pay-offer__body { min-width: 0; line-height: 1.3; }
.pay-offer__body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 2px;
}
.pay-offer__body span {
    font-size: 10.5px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Section labels */
.pay-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: .8px;
    margin: 16px 0 8px;
    padding: 0 2px;
}

/* Payment option rows */
.pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    border: 1.5px solid #f0eee9;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pay-option:hover { border-color: rgba(102, 54, 0, .3); }
.pay-option.is-selected {
    border-color: var(--color-primary);
    background: #fdfaf5;
}
.pay-option.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    background: #f9f7f2;
}
.pay-option.is-disabled:hover { border-color: #f0eee9; }

.pay-option__brand {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
}
.pay-option__body { flex: 1; min-width: 0; line-height: 1.3; }
.pay-option__body strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 2px;
}
.pay-option__body span { font-size: 12px; color: var(--color-text-muted); }
.pay-option__badge {
    background: #fef3e7;
    color: #b45309;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 4px;
    letter-spacing: .3px;
}
.pay-option__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #d3cec3;
    flex-shrink: 0;
    position: relative;
}
.pay-option.is-selected .pay-option__radio { border-color: var(--color-primary); }
.pay-option.is-selected .pay-option__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Bill details inside .pay-card */
.pay-bill-title {
    margin: 0 0 10px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text);
}
.pay-bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--color-text);
}
.pay-bill-row--brown { color: var(--color-primary); font-weight: 700; }
.pay-bill-row--total {
    border-top: 1px dashed #e5e0d8;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 800;
}

/* Policy + secure + brand footer */
.pay-policy {
    background: var(--color-white);
    border: 1px solid #f0eee9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 14px;
}
.pay-policy p {
    margin: 0;
    font-size: 11.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: flex; gap: 6px; align-items: flex-start;
}
.pay-policy p svg { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.pay-policy p strong { color: var(--color-text); font-weight: 800; }

.pay-secure {
    text-align: center;
    margin: 14px 0 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-secure svg { color: var(--color-success); }

.pay-brand {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 14px 0;
}
.pay-brand .logo-mark { width: 44px; height: 44px; padding: 3px; }
.pay-brand__text { line-height: 1.15; }
.pay-brand__text strong {
    display: block;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.pay-brand__text span {
    font-size: 9.5px;
    color: var(--color-text-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Sticky bottom CTA — full-width brown button */
.pay-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    max-width: 1200px;
    margin: 0 auto;
}
.pay-cta button {
    width: 100%;
    background: linear-gradient(135deg, #6b3a05 0%, #4a2700 100%);
    border: 0;
    color: var(--color-white);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(102, 54, 0, .35);
    transition: transform .1s ease;
}
.pay-cta button:disabled { opacity: .55; cursor: not-allowed; }
.pay-cta button:active:not(:disabled) { transform: scale(.99); }

/* Brand-logo container for external PNG/SVG logos (PhonePe / Paytm) */
.pay-option__brand--logo {
    background: var(--color-white) !important;
    border: 1px solid #f0eee9;
    padding: 4px;
}
.pay-option__brand--logo img,
.pay-option__brand--logo svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

/* =================================================================
   FINAL — Whole product card is clickable
   ================================================================= */
.product-card { cursor: pointer; }
.product-card [data-card-action] { cursor: default; }

/* =================================================================
   FINAL — Side menu: white + brown card redesign (matches reference)
   White panel throughout. The header is a clean white strip with the
   brown avatar on the LEFT and "Hey, <name>" + "Premium Member" stacked
   to the right. Each menu item is a rounded white card containing the
   icon + 2-line text + chevron, all vertically centred so the arrow
   never drops below the title.
   ================================================================= */

/* Panel + nav body → solid white */
.side-menu__panel { background: var(--color-white); }
.side-menu__nav   { background: var(--color-white); padding: 8px 14px 16px; }

/* Header: white strip, avatar-on-left flex row */
.side-menu__head {
    background: var(--color-white) !important;
    color: var(--color-text);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 60px 18px 18px;  /* right room for the close X */
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
}

/* Brown solid circle, white user icon, sits inline next to the name */
.side-menu__avatar {
    width: 50px !important;
    height: 50px !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.side-menu__avatar svg { width: 26px; height: 26px; }

/* Name + badge stack on the right of the avatar */
.side-menu__user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.side-menu__greet {
    color: var(--color-text) !important;
    font-size: 19px;
    font-weight: 800;
    margin: 0 !important;
    line-height: 1.2;
}
.side-menu__greet [data-side-menu-name] {
    display: inline-block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
.side-menu__badge {
    background: transparent !important;
    color: var(--color-primary) !important;
    padding: 2px 0 !important;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 0 !important;
    align-self: flex-start;
}

/* Close X: light grey on white head */
.side-menu__close {
    background: var(--color-secondary) !important;
    color: var(--color-text-muted) !important;
    top: 50% !important;
    transform: translateY(-50%);
}
.side-menu__close:hover { background: #e8dfd0 !important; }

/* Section labels: muted small caps */
.side-menu__section { margin-bottom: 8px; }
.side-menu__section-label {
    color: var(--color-text-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    padding: 14px 6px 8px;
    margin-bottom: 0;
}

/* CARD ITEMS — white rounded cards with a soft border, 2-line text,
   everything vertically centred so the chevron stays on the right
   instead of dropping under the title. */
.side-menu__item {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03) !important;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: none;
}
.side-menu__item:hover,
.side-menu__item:focus-visible {
    background: var(--color-white) !important;
    border-color: var(--color-primary-light) !important;
    box-shadow: 0 4px 14px var(--color-shadow) !important;
    transform: none;
}
.side-menu__item:active { transform: scale(.99); }

/* Icon: cream square with brown SVG */
.side-menu__item-ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Two-line text */
.side-menu__item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 2px;
}
.side-menu__item-text strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-menu__item-text small {
    font-size: 12.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron: brown, vertically centred (align-self stops it from sliding
   to the top when an item happens to have no subtitle). */
.side-menu__arrow {
    color: var(--color-primary);
    opacity: .55;
    flex-shrink: 0;
    align-self: center;
}

/* Footer brand sits on white with a hair-line border on top */
.side-menu__foot {
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    padding: 14px 16px 16px;
}

/* =================================================================
   FINAL — Global polish (smooth scroll, focus rings, tap, motion)
   ================================================================= */

/* Smooth scroll for in-page anchors (e.g. "Shop Now" → #products) */
html { scroll-behavior: smooth; }

/* Honour [hidden] regardless of any later display: flex/grid rule */
[hidden] { display: none !important; }

/* Kill the iOS grey flash on tap so our own :active states are the
   only feedback the user sees. Also opt every interactive element into
   "manipulation" so the 300ms click-delay is gone on touch devices. */
a, button, [role="button"], summary, label,
input, select, textarea,
.product-card, .pay-option, .side-menu__item, .cat-strip__item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Keyboard-focus ring (brown, brand-tinted) on every interactive
   surface — only when the user is keyboard-navigating, not on click. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.product-card:focus-visible,
.pay-option:focus-visible,
.side-menu__item:focus-visible,
.cat-strip__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Lazy-loaded images fade in once they're ready instead of popping
   into place — quietly nicer scroll experience. */
img { transition: opacity .2s ease; }

/* Body subtle entrance — masks the unstyled flash on slow networks
   and gives the whole site a softer "land" on first paint. */
body { animation: dfb-body-in .25s ease both; }
@keyframes dfb-body-in {
    from { opacity: .85; }
    to   { opacity: 1; }
}

/* Respect users who set "Reduce motion" in their OS — turn off the
   scroll-smoothing and the entrance animation, drop animation/
   transition durations to near-zero. Accessibility table-stakes. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body { animation: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}