/* ==========================================================================
   CoreNcore — storefront theme
   Tokens live-site (corencore.com) se liye gaye hain. Design ki pehchaan:
   cream background, charcoal text, light-weight headings, sharp corners,
   shadows bilkul nahi. Kuch bhi round/bold karne se pehle DESIGN-SPEC.md dekho.
   ========================================================================== */

:root {
    --bg: #fdfbf8;
    --fg: #2e2e2e;
    --fg-soft: rgba(46, 46, 46, .75);
    --fg-mute: rgba(46, 46, 46, .55);
    --line: rgba(46, 46, 46, .12);
    --line-soft: rgba(46, 46, 46, .07);
    --tan: #e1c295;
    --tan-soft: #f5ead9;
    --teal: #108474;
    --btn: #000;
    --btn-fg: #fff;
    --sale: #b42318;

    --page: 1200px;
    --gap: 16px;

    /* Buttons/inputs/cards sab sharp hain — sirf badges aur variant pills round. */
    --r-pill: 40px;
    --ease: cubic-bezier(0, 0, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg-soft);
    font-family: Assistant, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* Jis inline SVG pe width/height attribute nahi hai wo apne container ki poori
   chaudai le leta hai — track page pe ek 24px ka box icon 600px ka ban gaya tha.
   Ye default use text ke saath scale kar deta hai.
   JAAN-BOOJH KE yahan upar rakha hai: iski specificity (0,1,1) hai, jo
   `.icon-btn svg` jaisi rules ke barabar hai — neeche rakhte to ye unhe hara
   deta. Upar hone se source order me wo jeetti hain. */
svg:not([width]) { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    color: var(--fg);
    font-weight: 400;      /* live site pe headings light hain, bold nahi */
    line-height: 1.25;
    margin: 0 0 .5em;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 20px; }

.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head p { color: var(--fg-soft); margin: 0; }

/* ============================ Buttons ============================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 30px;
    border: 1px solid var(--btn);
    border-radius: 0;
    background: var(--btn);
    color: var(--btn-fg);
    font: inherit;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity .2s var(--ease);
}

.btn:hover { opacity: .82; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--outline:hover { background: var(--fg); color: #fff; opacity: 1; }

.btn--full { width: 100%; }
.btn--lg { min-height: 52px; font-size: 16px; }

/* ---- PayPal express button ----
   Rang PayPal ke brand guidelines se hain (gold #ffc439, navy #003087,
   cyan #009cde). Inhe theme ke hisaab se badalna nahi chahiye — customer
   ise pehchan ke hi dabata hai, aur PayPal apni branding badalne nahi deta.
   Isliye ye ek matra button hai jo cream/charcoal palette se bahar hai. */
.btn--paypal {
    background: #ffc439;
    border-color: #ffc439;
    color: #003087;
    letter-spacing: .2px;
}

.btn--paypal:hover { background: #f2ba33; border-color: #f2ba33; opacity: 1; }

.btn--paypal .pp-mark { font-weight: 700; font-style: italic; font-size: 17px; letter-spacing: -.3px; }
.btn--paypal .pp-mark .pp-a { color: #003087; }
.btn--paypal .pp-mark .pp-b { color: #009cde; }

/* ============================ Announcement ============================ */

.announcement {
    background: var(--fg);
    color: #fff;
    font-size: 13.5px;
    letter-spacing: .4px;
    text-align: center;
    padding: 9px 20px;
}

/* ============================ Header ============================ */

.header {
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 40;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 20px;
    max-width: var(--page);
    margin: 0 auto;
}

.header__logo img { width: 118px; height: auto; }

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

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    color: var(--fg);
    font-size: 14px;
    background: none;
    border: 0;
    cursor: pointer;
}

.icon-btn:hover { opacity: .65; }
.icon-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

.u-hide-sm { display: inline; }

.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--fg);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* ---- Nav ---- */

.nav { border-bottom: 1px solid var(--line-soft); background: var(--bg); }

.nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 26px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 11px 20px;
    list-style: none;
}

.nav__list a {
    color: var(--fg);
    font-size: 14.5px;
    letter-spacing: .3px;
    padding: 3px 0;
    border-bottom: 1px solid transparent;
}

.nav__list a:hover,
.nav__list a.is-active { border-bottom-color: var(--fg); }

/* ---- Shop dropdown ---- */

.nav__has-menu { position: relative; }

.nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--fg);
    font: inherit;
    font-size: 14.5px;
    letter-spacing: .3px;
    cursor: pointer;
}

.nav__trigger svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav__trigger:hover,
.nav__trigger.is-active,
.nav__trigger[aria-expanded="true"] { border-bottom-color: var(--fg); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    min-width: 208px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    /* Bina is transform ke menu trigger ke baayein kinare se lagta hai */
    transform: translate(-50%, 6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}

/* Hover se bhi khule aur click/keyboard se bhi — touch devices pe hover nahi hota */
.nav__has-menu:hover .nav__menu,
.nav__has-menu:focus-within .nav__menu,
.nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav__menu li { width: 100%; }

.nav__menu a {
    display: block;
    padding: 9px 18px;
    border-bottom: 0;
    white-space: nowrap;
    font-size: 14.5px;
}

.nav__menu a:hover { background: var(--bg); border-bottom: 0; }
.nav__menu a.is-active { background: var(--tan-soft); border-bottom: 0; }

/* ---- Mobile nav toggle ---- */

.nav-toggle { display: none; }

.search-bar { border-bottom: 1px solid var(--line-soft); background: var(--bg); display: none; }
.search-bar.is-open { display: block; }
.search-bar form { display: flex; gap: 0; max-width: var(--page); margin: 0 auto; padding: 14px 20px; }
.search-bar input { flex: 1; }

/* ============================ Forms ============================ */

.field { margin-bottom: 16px; }

.field label {
    display: block;
    margin-bottom: 6px;
    color: var(--fg);
    font-size: 14px;
}

/* Yahan pehle `input[type=text], input[type=email], ...` likha tha. Attribute
   selector tabhi match karta hai jab attribute markup me sach me ho — aur
   `<input name="city">` (bina type ke) text input hi hota hai par is selector
   se chhoot jata tha. Nateeja: checkout pe email 337px chauda aur city 177px.
   Isliye ab sab inputs pakdo aur sirf wo chhodo jinki width 100% nahi honi.

   :not() ke andar comma wali list ZAROORI hai — chain karke likhne se
   (`:not(a):not(b):not(c)`) har ek ki specificity jud jaati hai aur ye rule
   itna bhaari ho jata hai ki `.qty input` jaisi component styling bhi haar
   jaati hai (quantity stepper pe do border aur spinner arrows aa gaye the).
   List wale form ki specificity sirf ek attribute selector jitni hoti hai. */
input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=reset]),
select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid rgba(46, 46, 46, .55);
    border-radius: 0;
    background: #fff;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
}

textarea { min-height: 120px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(46, 46, 46, .5);
    outline-offset: 2px;
}

.field__error { color: var(--sale); font-size: 13px; margin-top: 5px; }

/* ============================ Hero ============================ */

.hero { position: relative; background: var(--tan-soft); }

.hero__media img { width: 100%; height: clamp(360px, 52vw, 620px); object-fit: cover; }

.hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 40px 24px;
}

.hero__content h1 {
    color: #fff;
    font-size: clamp(30px, 4.4vw, 54px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
    margin: 0 0 10px;
}

.hero__content p {
    max-width: 620px;
    color: #fff;
    font-size: clamp(15px, 1.5vw, 18px);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .34);
    margin: 0 0 22px;
}

.hero__content .btn { background: #fff; color: var(--fg); border-color: #fff; }
.hero__content .btn:hover { opacity: .88; }

/* ============================ Icon columns ============================ */

.cols { display: grid; gap: 34px 26px; }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }

.col-item { text-align: center; }
.col-item__icon { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.col-item h3 { font-size: 18px; margin-bottom: 6px; }
.col-item p { font-size: 14.5px; color: var(--fg-soft); margin: 0; }

/* ============================ Product grid & card ============================ */

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { position: relative; text-align: left; }

.card__media {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(46, 46, 46, .05);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.card:hover .card__media img { transform: scale(1.04); }

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    background: var(--fg);
    color: #fff;
    font-size: 12px;
    letter-spacing: .4px;
}

.badge--sale { background: var(--sale); }
.badge--soldout { background: var(--fg-mute); }

.card__body { padding: 12px 2px 0; }

.card__title {
    font-size: 15px;
    line-height: 1.4;
    color: var(--fg);
    margin: 0 0 6px;
}

.card__title a:hover { text-decoration: underline; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.price__now { color: var(--fg); }
.price__was { color: var(--fg-mute); text-decoration: line-through; font-size: 14px; }
.price__from { color: var(--fg-mute); font-size: 13px; }

.stars { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-mute); margin-bottom: 5px; }
.stars__on { color: var(--teal); letter-spacing: 1px; }

/* ============================ Product page ============================ */

.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 44px 0; }

.gallery__main {
    background: #fff;
    border: 1px solid rgba(46, 46, 46, .05);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

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

.gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }

.gallery__thumbs button {
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
}

.gallery__thumbs button.is-active { border-color: var(--fg); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.trust-chip {
    padding: 4px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--tan-soft);
    color: var(--fg);
    font-size: 12.5px;
}

.product__title { font-size: 30px; margin-bottom: 10px; }

.product__price { display: flex; align-items: baseline; gap: 10px; font-size: 22px; margin-bottom: 18px; }
.product__price .price__was { font-size: 18px; }

.product__blurb { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-bottom: 18px; }
.product__blurb strong { color: var(--fg); font-weight: 400; }

/* ---- Variant pills ---- */

.variant { margin-bottom: 18px; }
.variant__label { display: block; margin-bottom: 8px; color: var(--fg); font-size: 14px; }
.variant__label span { color: var(--fg-mute); }
.variant__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
    padding: 8px 16px;
    border: 1px solid rgba(46, 46, 46, .55);
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.pill:hover { border-color: var(--fg); }
.pill.is-active { background: var(--fg); color: #fff; border-color: var(--fg); }
.pill.is-out { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* ---- Quantity ---- */

/* Height buttons ke barabar (52px) — warna stepper unke saath line me nahi
   baithta aur adhoora dikhta hai. */
.qty {
    display: inline-flex;
    align-items: stretch;
    height: 52px;
    border: 1px solid rgba(46, 46, 46, .55);
    background: #fff;
}

.qty button {
    width: 46px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--fg);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.qty button:first-child { border-right: 1px solid var(--line); }
.qty button:last-child  { border-left: 1px solid var(--line); }
.qty button:hover { background: var(--bg); }
.qty button:active { background: var(--tan-soft); }

.qty input {
    width: 58px;
    min-height: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
    font-size: 16px;
}

.qty input:focus { outline: none; }

/* Number input ke chhote teer (spinners) hata do — humare apne +/- hain */
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input { -moz-appearance: textfield; appearance: textfield; }

/* Add to cart ke neeche PayPal — isliye column, side by side nahi */
.buy-row { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

/* ---- Rich content below the fold ---- */

.rich { border-top: 1px solid var(--line-soft); padding: 44px 0; }
.rich h2 { text-align: center; margin-bottom: 28px; }
.rich__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.rich__col h3 { font-size: 17px; margin-bottom: 10px; }
.rich__col ul { margin: 0; padding-left: 18px; }
.rich__col li { margin-bottom: 7px; font-size: 15px; }

/* ============================ Cart / Checkout ============================ */

.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 44px 0; }

.cart-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cart-row__img { background: #fff; border: 1px solid rgba(46, 46, 46, .05); aspect-ratio: 1/1; overflow: hidden; }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__title { color: var(--fg); font-size: 15px; margin-bottom: 4px; }
.cart-row__meta { color: var(--fg-mute); font-size: 13px; }

.summary { border: 1px solid var(--line); padding: 24px; align-self: start; background: #fff; }
.summary h3 { font-size: 19px; margin-bottom: 16px; }
.summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.summary__row--total {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 14px;
    color: var(--fg);
    font-size: 18px;
}

.empty { text-align: center; padding: 80px 20px; }
.empty h2 { margin-bottom: 8px; }

/* ============================ Checkout ============================ */

.checkout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; padding: 8px 0 56px; }

/* Breadcrumb — customer ko pata rahe ki kitna bacha hai */
.co-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    font-size: 13.5px;
    color: var(--fg-mute);
}

.co-steps .on { color: var(--fg); }
.co-steps .sep { opacity: .5; }

/* Numbered section heads */
.co-step { margin-bottom: 30px; }

.co-step__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.co-step__n {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--fg);
    border-radius: 50%;
    font-size: 13px;
    color: var(--fg);
}

.co-step__head h3 { margin: 0; font-size: 18px; }

.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Payment method box */
.co-pay {
    border: 1px solid var(--line);
    background: #fff;
    padding: 18px;
}

.co-pay__title { display: flex; align-items: center; gap: 9px; color: var(--fg); }
.co-pay__title .pp-mark { font-weight: 700; font-style: italic; letter-spacing: -.3px; }
.co-pay__title .pp-a { color: #003087; }
.co-pay__title .pp-b { color: #009cde; }
.co-pay p { margin: 8px 0 0; font-size: 14px; }

/* Summary — desktop pe scroll ke saath chipka rehta hai, taaki total aur
   Pay button hamesha saamne rahein */
.summary--sticky { position: sticky; top: 92px; }

.co-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.co-item__img {
    position: relative;
    background: #fff;
    border: 1px solid var(--line-soft);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.co-item__img img { width: 100%; height: 100%; object-fit: cover; }

.co-item__qty {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--fg);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.co-item__name { color: var(--fg); font-size: 14px; line-height: 1.35; }
.co-item__opt { color: var(--fg-mute); font-size: 12.5px; margin-top: 2px; }
.co-item__price { color: var(--fg); font-size: 14px; white-space: nowrap; }

.co-free { color: var(--teal); }

/* Trust row — pay button ke neeche, jhijhak kam karne ke liye */
.co-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--fg-mute);
}

.summary__link {
    font-size: 13px;
    text-decoration: underline;
    color: var(--fg-mute);
}

.summary__link:hover { color: var(--fg); }

@media (max-width: 1000px) {
    .checkout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    /* Mobile pe sticky ulta padta hai — summary poori screen kha leti hai */
    .summary--sticky { position: static; }
}

@media (max-width: 560px) {
    .co-row { grid-template-columns: 1fr; }
}

/* ============================ Alerts ============================ */

.alert { padding: 13px 16px; border: 1px solid var(--line); margin-bottom: 18px; font-size: 14.5px; }
.alert--ok { background: #f0f7f5; border-color: var(--teal); color: #0c6355; }
.alert--err { background: #fdf3f2; border-color: var(--sale); color: #8a1b12; }

/* ============================ Footer ============================ */

.footer { border-top: 1px solid var(--line-soft); margin-top: 40px; padding: 52px 0 26px; }
.footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.footer__logo img { width: 122px; margin-bottom: 14px; }
.footer p { font-size: 14px; color: var(--fg-soft); max-width: 300px; }
.footer h4 { font-size: 15px; color: var(--fg); margin-bottom: 12px; }
.footer__cols a { display: block; padding: 4px 0; font-size: 14px; color: var(--fg-soft); }
.footer__cols a:hover { color: var(--fg); text-decoration: underline; }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    margin-top: 36px;
    padding-top: 20px;
    font-size: 13.5px;
    color: var(--fg-mute);
}

.footer__bottom a { text-decoration: underline; }

/* ============================ Toast ============================ */

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    padding: 14px 16px;
    background: var(--fg);
    color: #fff;
    font-size: 14.5px;
    animation: toast-in .3s var(--ease);
}

.toast a { text-decoration: underline; white-space: nowrap; }
.toast.out { opacity: 0; transition: opacity .3s; }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================ Reveal on scroll ============================ */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ Responsive ============================ */

@media (max-width: 1000px) {
    .product { grid-template-columns: 1fr; gap: 32px; }
    .cart-layout { grid-template-columns: 1fr; gap: 28px; }
    .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    :root { --gap: 8px; }

    h1 { font-size: 32px; }
    h2 { font-size: 26px; }

    .section { padding: 44px 0; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        background: none;
        border: 0;
        padding: 8px 10px;
        color: var(--fg);
        cursor: pointer;
    }

    .nav-toggle svg { width: 22px; height: 22px; }

    .nav__list {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 6px 20px 14px;
    }

    .nav__list.is-open { display: flex; }
    .nav__list li { width: 100%; }
    .nav__list a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); width: 100%; }
    .nav__list a:hover, .nav__list a.is-active { border-bottom-color: var(--line-soft); text-decoration: underline; }

    /* Mobile pe dropdown float nahi karta — jagah hi nahi hoti. Accordion ki
       tarah usi list me khulta hai. Hover bhi nahi hota, isliye sirf click. */
    .nav__trigger {
        width: 100%;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .nav__menu {
        position: static;
        transform: none;
        min-width: 0;
        border: 0;
        background: none;
        padding: 0 0 0 14px;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    /* Hover/focus-within mobile pe galat khulta hai — sirf is-open maano.
       .is-open wale rule ki specificity in dono ke barabar rakhni ZAROORI hai
       (teen class), warna ye jeet jaate hain aur menu khulta hi nahi: tap karte
       hi button ko focus milta hai, :focus-within match hota hai, aur
       display:none .is-open ko daba deta hai. */
    .nav__has-menu:hover .nav__menu,
    .nav__has-menu:focus-within .nav__menu { display: none; }
    /* transform: none yahan dobara likhna zaroori hai. Upar .nav__menu par
       likha hua hai, par khulne wala rule (.nav__menu.is-open) desktop ke liye
       translate(-50%, 0) set karta hai aur uski specificity zyada hai — mobile
       pe menu apni aadhi width jitna baayein khisak kar screen se bahar chala
       jaata tha. */
    .nav__has-menu .nav__menu.is-open { display: block; transform: none; }

    .nav__menu a { padding: 9px 0; }

    .product-grid, .product-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .cols--4 { grid-template-columns: repeat(2, 1fr); }
    .cols--3 { grid-template-columns: 1fr; }
    .rich__grid { grid-template-columns: 1fr; gap: 24px; }

    .gallery__thumbs { grid-template-columns: repeat(5, 1fr); }

    .header__logo img { width: 96px; }
    .product__title { font-size: 24px; }
    .u-hide-sm { display: none; }
}

/* hero.png 2:1 hai (1774x887) aur uska subject — maa aur baby — right side me
   hai; left ka aadha hissa jaan-boojh ke khaali wall hai taaki desktop par
   heading uske upar baithe.

   Phone par height 360px ke floor par ruk jaati hai jabki width 375px reh jaati
   hai, yaani box lagbhag square. object-fit: cover tab image ko 720px chauda
   kar ke beech ka hi hissa dikhata tha — maa ka chehra aur bun dono kat jaate
   the. Isliye yahan crop ko subject ki taraf shift kar rahe hain. */
@media (max-width: 700px) {
    .hero__media img { object-position: 92% center; }
    .hero__content { padding: 32px 20px; }
}

/* Yahan se neeche crop itna gehra ho jaata hai ki text khaali wall par nahi,
   seedha maa aur baby ke upar aata hai. Akela text-shadow is halke, detail-bhare
   background par kam padta hai — isliye halka scrim. Tablet par nahi lagaya,
   wahan text abhi bhi khaali hisse par hi rehta hai. */
@media (max-width: 560px) {
    .hero__content::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, .34));
    }

    /* Scrim background me rahe, text uske upar */
    .hero__content > * { position: relative; }
}

@media (max-width: 520px) {
    .footer__cols { grid-template-columns: 1fr; }
    .cart-row { grid-template-columns: 72px 1fr; }
    .cart-row > :last-child { grid-column: 2; }
    .toast { left: 20px; right: 20px; max-width: none; }
}