/* Self-hosted webfonts (Hind Siliguri + Roboto).
   Subset to bengali / latin / latin-ext; cyrillic, greek, devanagari and
   vietnamese faces dropped as the storefront never renders those ranges.
   font-display:swap keeps text visible while the face loads. */

/* Metric-matched fallback for Hind Siliguri.
   font-display:swap paints the system fallback first and re-lays out when the
   webfont arrives. Hind Siliguri has an unusually tall box (ascent 1.116em,
   descent 0.501em) and a narrow mean advance (0.513em), so an unadjusted
   fallback made text visibly wider and shifted layout once the real face
   loaded. These overrides, measured from the shipped woff2, make the fallback
   occupy the same space, so the swap is a no-op.
   Values are ignored by browsers without size-adjust support, which simply
   fall through to the next family in the stack as before. */
@font-face {
  font-family: 'Hind Siliguri Fallback';
  src: local('Roboto'), local('Helvetica Neue'), local('Arial'),
       local('Liberation Sans'), local('DejaVu Sans'), local('Noto Sans');
  size-adjust: 94%;
  ascent-override: 111.6%;
  descent-override: 50.1%;
  line-gap-override: 0%;
}

/* bengali */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-400-bengali.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* latin-ext */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* bengali */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-500-bengali.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* latin-ext */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* bengali */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-600-bengali.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* latin-ext */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* bengali */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-700-bengali.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

/* latin-ext */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/hind-siliguri-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/google/roboto-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*!
 * Font Awesome Free 6.5.1 trimmed to the icon classes this theme uses.
 * Regenerate with tools/fa_font_subset.py + tools/fa_css_subset.py.
 * Pristine copy: resources/assets/fontawesome/fontawesome.full.css
 */

/*!
 * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}
.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}
.fa-1x{font-size:1em}
.fa-2x{font-size:2em}
.fa-3x{font-size:3em}
.fa-4x{font-size:4em}
.fa-5x{font-size:5em}
.fa-6x{font-size:6em}
.fa-7x{font-size:7em}
.fa-8x{font-size:8em}
.fa-9x{font-size:9em}
.fa-10x{font-size:10em}
.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}
.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}
.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}
.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}
.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}
.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}
.fa-fw{text-align:center;width:1.25em}
.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}
.fa-ul>li{position:relative}
.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}
.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}
.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}
.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}
.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}
.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}
.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}
.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}
.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}
.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}
.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}
.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}
.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}
.fa-spin-reverse{--fa-animation-direction:reverse}
.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}
.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}
0%,90%{-webkit-transform:scale(1);transform:scale(1)}
45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}
0%,90%{-webkit-transform:scale(1);transform:scale(1)}
45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}
0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}
30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}
50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}
57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}
64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}
30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}
50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}
57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}
64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}
50%{opacity:var(--fa-fade-opacity,.4)}
50%{opacity:var(--fa-fade-opacity,.4)}
0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}
50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}
0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}
50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}
50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}
50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}
0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}
12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}
16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}
20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}
32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}
36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}
40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}
12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}
16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}
20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}
32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}
36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}
40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}
.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}
.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}
.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}
.fa-stack-1x{line-height:inherit}
.fa-stack-2x{font-size:2em}
.fa-inverse{color:var(--fa-inverse,#fff)}
.fa-at:before{content:"\40"}
.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}
.fa-comment-alt:before{content:"\f27a"}
.fa-file-alt:before,.fa-file-lines:before{content:"\f15c"}
.fa-calendar-alt:before{content:"\f073"}
.fa-sign-out-alt:before{content:"\f2f5"}
.fa-hand-point-right:before{content:"\f0a4"}
.fa-file-csv:before{content:"\f6dd"}
.fa-comments:before{content:"\f086"}
.fa-truck-loading:before{content:"\f4de"}
.fa-user-check:before{content:"\f4fc"}
.fa-blog:before{content:"\f781"}
.fa-motorcycle:before{content:"\f21c"}
.fa-users-slash:before{content:"\e073"}
.fa-bars:before{content:"\f0c9"}
.fa-film:before{content:"\f008"}
.fa-lightbulb:before{content:"\f0eb"}
.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}
.fa-flag:before{content:"\f024"}
.fa-check-square:before{content:"\f14a"}
.fa-list:before{content:"\f03a"}
.fa-cart-plus:before{content:"\f217"}
.fa-lock:before{content:"\f023"}
.fa-edit:before{content:"\f044"}
.fa-share-alt:before{content:"\f1e0"}
.fa-hourglass-half:before{content:"\f252"}
.fa-shopping-bag:before{content:"\f290"}
.fa-users:before{content:"\f0c0"}
.fa-eye-slash:before{content:"\f070"}
.fa-plug:before{content:"\f1e6"}
.fa-chevron-up:before{content:"\f077"}
.fa-angle-right:before{content:"\f105"}
.fa-money-bill:before{content:"\f0d6"}
.fa-folder:before{content:"\f07b"}
.fa-user:before{content:"\f007"}
.fa-key:before{content:"\f084"}
.fa-globe:before{content:"\f0ac"}
.fa-location-arrow:before{content:"\f124"}
.fa-money-bill-wave:before{content:"\f53a"}
.fa-ban:before{content:"\f05e"}
.fa-star:before{content:"\f005"}
.fa-repeat:before{content:"\f363"}
.fa-box:before{content:"\f466"}
.fa-file-invoice-dollar:before{content:"\f571"}
.fa-server:before{content:"\f233"}
.fa-crown:before{content:"\f521"}
.fa-user-friends:before{content:"\f500"}
.fa-fire:before{content:"\f06d"}
.fa-folder-open:before{content:"\f07c"}
.fa-headset:before{content:"\f590"}
.fa-store-slash:before{content:"\e071"}
.fa-gift:before{content:"\f06b"}
.fa-image:before{content:"\f03e"}
.fa-undo-alt:before{content:"\f2ea"}
.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}
.fa-user-tie:before{content:"\f508"}
.fa-box-open:before{content:"\f49e"}
.fa-address-card:before{content:"\f2bb"}
.fa-cloud-upload-alt:before{content:"\f0ee"}
.fa-palette:before{content:"\f53f"}
.fa-arrows-alt-h:before{content:"\f337"}
.fa-sort-amount-down:before{content:"\f160"}
.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}
.fa-sync:before{content:"\f021"}
.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}
.fa-layer-group:before{content:"\f5fd"}
.fa-money-check-alt:before{content:"\f53d"}
.fa-filter:before{content:"\f0b0"}
.fa-question:before{content:"\3f"}
.fa-star-half-alt:before{content:"\f5c0"}
.fa-code:before{content:"\f121"}
.fa-leaf:before{content:"\f06c"}
.fa-chart-pie:before{content:"\f200"}
.fa-chart-line:before{content:"\f201"}
.fa-arrow-right:before{content:"\f061"}
.fa-heart:before{content:"\f004"}
.fa-circle:before{content:"\f111"}
.fa-mobile-alt:before{content:"\f3cd"}
.fa-volume-up:before{content:"\f028"}
.fa-wallet:before{content:"\f555"}
.fa-file-image:before{content:"\f1c5"}
.fa-question-circle:before{content:"\f059"}
.fa-phone-alt:before{content:"\f879"}
.fa-tags:before{content:"\f02c"}
.fa-terminal:before{content:"\f120"}
.fa-shopping-basket:before{content:"\f291"}
.fa-eye:before{content:"\f06e"}
.fa-user-slash:before{content:"\f506"}
.fa-pen:before{content:"\f304"}
.fa-save:before{content:"\f0c7"}
.fa-comment-dots:before{content:"\f4ad"}
.fa-hand-holding-usd:before{content:"\f4c0"}
.fa-redo:before{content:"\f01e"}
.fa-phone:before{content:"\f095"}
.fa-calendar-times:before{content:"\f273"}
.fa-user-cog:before{content:"\f4fe"}
.fa-sort-numeric-up:before{content:"\f163"}
.fa-trash:before{content:"\f1f8"}
.fa-cubes:before{content:"\f1b3"}
.fa-arrow-left:before{content:"\f060"}
.fa-ruler:before{content:"\f545"}
.fa-external-link-alt:before{content:"\f35d"}
.fa-th-large:before{content:"\f009"}
.fa-tag:before{content:"\f02b"}
.fa-envelope:before{content:"\f0e0"}
.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}
.fa-camera:before{content:"\f030"}
.fa-calendar-check:before{content:"\f274"}
.fa-truck:before{content:"\f0d1"}
.fa-check-double:before{content:"\f560"}
.fa-undo:before{content:"\f0e2"}
.fa-list-alt:before{content:"\f022"}
.fa-minus:before{content:"\f068"}
.fa-cog:before{content:"\f013"}
.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}
.fa-clock:before{content:"\f017"}
.fa-mobile-screen:before{content:"\f3cf"}
.fa-piggy-bank:before{content:"\f4d3"}
.fa-coins:before{content:"\f51e"}
.fa-sliders-h:before{content:"\f1de"}
.fa-network-wired:before{content:"\f6ff"}
.fa-map-pin:before{content:"\f276"}
.fa-ellipsis-v:before{content:"\f142"}
.fa-power-off:before{content:"\f011"}
.fa-calculator:before{content:"\f1ec"}
.fa-download:before{content:"\f019"}
.fa-id-card:before{content:"\f2c2"}
.fa-home:before,.fa-house:before{content:"\f015"}
.fa-redo-alt:before{content:"\f2f9"}
.fa-upload:before{content:"\f093"}
.fa-bolt:before{content:"\f0e7"}
.fa-angle-down:before{content:"\f107"}
.fa-credit-card:before{content:"\f09d"}
.fa-bell:before{content:"\f0f3"}
.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}
.fa-arrow-down:before{content:"\f063"}
.fa-inbox:before{content:"\f01c"}
.fa-gauge-high:before{content:"\f625"}
.fa-envelope-open-text:before{content:"\f658"}
.fa-link:before{content:"\f0c1"}
.fa-play:before{content:"\f04b"}
.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}
.fa-receipt:before{content:"\f543"}
.fa-chevron-down:before{content:"\f078"}
.fa-arrow-up:before{content:"\f062"}
.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}
.fa-user-circle:before{content:"\f2bd"}
.fa-user-shield:before{content:"\f505"}
.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}
.fa-clapperboard:before{content:"\e131"}
.fa-project-diagram:before{content:"\f542"}
.fa-copy:before{content:"\f0c5"}
.fa-plus:before{content:"\2b"}
.fa-times:before{content:"\f00d"}
.fa-ruler-combined:before{content:"\f546"}
.fa-rocket:before{content:"\f135"}
.fa-photo-film:before{content:"\f87c"}
.fa-store:before{content:"\f54e"}
.fa-arrow-trend-up:before{content:"\e098"}
.fa-bell-slash:before{content:"\f1f6"}
.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-percent:before{content:"\25"}
.fa-truck-moving:before{content:"\f4df"}
.fa-sync-alt:before{content:"\f2f1"}
.fa-spinner:before{content:"\f110"}
.fa-cogs:before{content:"\f085"}
.fa-ticket-alt:before{content:"\f3ff"}
.fa-building:before{content:"\f1ad"}
.fa-qrcode:before{content:"\f029"}
.fa-history:before{content:"\f1da"}
.fa-pen-nib:before{content:"\f5ad"}
.fa-hashtag:before{content:"\23"}
.fa-plus-circle:before{content:"\f055"}
.fa-border-all:before{content:"\f84c"}
.fa-user-plus:before{content:"\f234"}
.fa-check:before{content:"\f00c"}
.fa-briefcase:before{content:"\f0b1"}
.fa-user-tag:before{content:"\f507"}
.fa-exclamation-triangle:before,.fa-triangle-exclamation:before{content:"\f071"}
.fa-exchange-alt:before{content:"\f362"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-life-ring:before{content:"\f1cd"}
.fa-calendar-minus:before{content:"\f272"}
.fa-circle-xmark:before,.fa-times-circle:before{content:"\f057"}
.fa-id-card-alt:before{content:"\f47f"}
.fa-search-plus:before{content:"\f00e"}
.fa-thumbs-up:before{content:"\f164"}
.fa-file-invoice:before{content:"\f570"}
.fa-sticky-note:before{content:"\f249"}
.fa-print:before{content:"\f02f"}
.fa-dollar-sign:before{content:"\24"}
.fa-university:before{content:"\f19c"}
.fa-video:before{content:"\f03d"}
.fa-graduation-cap:before{content:"\f19d"}

.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fontawesome/fa-brands-400.woff2) format("woff2")}
.fa-brands,.fab{font-weight:400}
.fa-cc-visa:before{content:"\f1f0"}
.fa-google:before{content:"\f1a0"}
.fa-cc-mastercard:before{content:"\f1f1"}
.fa-facebook-f:before{content:"\f39e"}
.fa-instagram:before{content:"\f16d"}
.fa-facebook:before{content:"\f09a"}
.fa-whatsapp:before{content:"\f232"}
.fa-youtube:before{content:"\f167"}
.fa-twitter:before{content:"\f099"}
:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fontawesome/fa-regular-400.woff2) format("woff2")}
.fa-regular,.far{font-weight:400}
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2")}
.fa-solid,.fas{font-weight:900}
@font-face{font-family:"Font Awesome 5 Brands";font-display:swap;font-weight:400;src:url(../fonts/fontawesome/fa-brands-400.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-weight:900;src:url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-weight:400;src:url(../fonts/fontawesome/fa-regular-400.woff2) format("woff2")}
@font-face{font-family:"FontAwesome";font-display:swap;src:url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2")}
@font-face{font-family:"FontAwesome";font-display:swap;src:url(../fonts/fontawesome/fa-brands-400.woff2) format("woff2")}
@font-face{font-family:"FontAwesome";font-display:swap;src:url(../fonts/fontawesome/fa-regular-400.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}
@font-face{font-family:"FontAwesome";font-display:swap;src:url(../fonts/fontawesome/fa-v4compatibility.woff2) format("woff2");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
/* =============================================
   Lichu Template — lichu.borbila.net style
   HTML: index.html  |  CSS: css/style.css
   ============================================= */

:root {
    --border: #dedfde;
    --text: #111311;
    --muted: #666;
    --white: #fff;
    --container: 1240px;
    --notice-height: 38px;
}

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

body {
    font-family: 'Hind Siliguri', 'Hind Siliguri Fallback', 'Roboto', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.5;
}

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

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

.container {
    width: min(var(--container), 94%);
    margin: 0 auto;
}

/* ---------- Scrolling Notice Topbar ---------- */
.notice-ticker {
    display: flex;
    align-items: center;
    background: var(--primary);
    color: var(--white);
    height: var(--notice-height);
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 260;
}

.notice-ticker.is-hidden {
    display: none;
}

body.notice-closed {
    --notice-height: 0px;
}

body.no-notice {
    --notice-height: 0px;
}

.notice-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 100%;
    padding: 0 18px 0 12px;
    background: var(--secondary);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.notice-badge i {
    font-size: 12px;
    color: var(--white);
}

.notice-track-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 8px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 8px), transparent 100%);
}

.notice-track {
    display: flex;
    width: max-content;
    animation: notice-scroll 28s linear infinite;
}

.notice-track:hover {
    animation-play-state: paused;
}

.notice-text {
    flex-shrink: 0;
    padding-right: 60px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.notice-close {
    flex-shrink: 0;
    width: 38px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: background 0.2s, opacity 0.2s;
}

.notice-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

@keyframes notice-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notice-track {
        animation: none;
    }
}

/* ---------- Top Bar (legacy) ---------- */
.top-bar {
    background: var(--primary);
    color: var(--white);
    font-size: 14px;
    padding: 9px 0;
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.top-bar a {
    color: var(--white);
    font-weight: 600;
}

.top-bar a i {
    margin-right: 4px;
}

/* ---------- Header ---------- */
.site-header {
    background: var(--white);
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: var(--notice-height);
    z-index: 200;
    overflow: visible;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    position: relative;
}

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

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    overflow: visible;
}

.main-nav a {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--primary);
}

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

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cart-wrap {
    position: relative;
}

.cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: var(--white);
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

/* ---------- Mini Cart Dropdown ---------- */
.cart-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 340px;
    max-width: 92vw;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    overflow: hidden;
}

.cart-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    left: 0;
    height: 14px;
}

.cart-dropdown::after {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: var(--white);
    transform: rotate(45deg);
    box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.06);
}

.cart-wrap:hover .cart-dropdown,
.cart-wrap.open .cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.cart-dropdown-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.cart-dropdown-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 3px 10px;
    border-radius: 20px;
}

.cart-dropdown-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}

.cart-dropdown-body::-webkit-scrollbar {
    width: 6px;
}

.cart-dropdown-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.mini-cart-item:hover {
    background: #fafafa;
}

.mini-cart-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    background: #fff;
}

.mini-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-info {
    flex: 1;
    min-width: 0;
}

.mini-cart-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    margin-bottom: 3px;
}

.mini-cart-name:hover {
    color: var(--primary);
}

.mini-cart-meta {
    font-size: 12px;
    color: #888;
}

.mini-cart-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.mini-cart-line {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.mini-cart-remove {
    border: none;
    background: transparent;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}

.mini-cart-remove:hover {
    color: #e53935;
}

.mini-cart-empty {
    text-align: center;
    padding: 34px 16px;
    color: #999;
}

.mini-cart-empty i {
    font-size: 34px;
    color: #e0e0e0;
    margin-bottom: 10px;
}

.mini-cart-empty p {
    font-size: 14px;
    margin: 0;
}

.cart-dropdown-foot {
    padding: 14px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fcfcfc;
}

.mini-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.mini-cart-total-amt {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary);
}

.mini-cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mini-cart-view,
.mini-cart-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    transition: all 0.18s;
}

.mini-cart-view {
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}

.mini-cart-view:hover {
    background: var(--primary-soft);
}

.mini-cart-checkout {
    background: var(--primary);
    color: var(--white);
    border: 1.5px solid var(--primary);
}

.mini-cart-checkout:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}


.mobile-bottom-nav .nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e41e3f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(228, 30, 63, .25);
}
.mobile-bottom-nav .nav-home {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    width: 64px;
}
.mobile-bottom-nav .nav-home i {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-primary-135, linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb, 223, 45, 77), .28), 0 4px 10px rgba(15, 23, 42, .12);
}
.mobile-bottom-nav .nav-home::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 28px;
    border-radius: 56px 56px 0 0;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.4) 70%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.mobile-bottom-nav .nav-home span {
    margin-top: 4px;
}



/* Premium restyle for old 4-item bottom nav */
.mobile-bottom-nav a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #4b5563;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.mobile-bottom-nav a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
}
.mobile-bottom-nav a span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    color: inherit;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a.active i,
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus-visible {
    color: var(--primary);
}
.mobile-bottom-nav a.active {
    background-color: rgba(var(--primary-rgb, 223, 45, 77), .12);
}
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus-visible {
    background-color: rgba(var(--primary-rgb, 223, 45, 77), .08);
}
.mobile-bottom-nav .nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e41e3f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(228, 30, 63, .25);
}

@media (max-width: 900px) {
    .cart-dropdown {
        display: none;
    }
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary);
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 17px;
    transition: background 0.2s;
}

.profile-btn:hover {
    background: var(--primary-dark);
}

.btn-track {
    background: var(--primary);
    color: var(--white);
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--primary);
    cursor: pointer;
    padding: 4px;
}

/* Mobile search — hidden on desktop by default */
.header-search,
.mobile-search {
    display: none;
    position: relative;
    flex: 1;
    min-width: 0;
}

.header-search input,
.mobile-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    min-width: 0;
}

.header-search .search-submit,
.mobile-search .search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
    transition: background 0.2s;
}

.header-search .search-submit:hover,
.mobile-search .search-submit:hover {
    background: var(--primary-dark);
}

/* ক্যাটাগরি বার — মোবাইলে লুকানো, ডেস্কটপে দেখাবে */
.header-category-bar {
    display: none;
}

/* Desktop header search + category bar */
@media (min-width: 901px) {
    .header-inner {
        gap: 20px;
    }

    .header-search,
    .mobile-search {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        width: 100%;
        min-width: 320px;
        max-width: 720px;
        margin: 0 auto;
        background: #f7f7f7;
        border: 1.5px solid #e8e8e8;
        border-radius: 10px;
        padding: 5px 6px 5px 18px;
        height: 52px;
    }

    .header-search:focus-within,
    .mobile-search:focus-within {
        border-color: var(--primary);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

    .header-search input,
    .mobile-search input {
        font-size: 16px;
    }

    .header-search .search-submit,
    .mobile-search .search-submit {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        font-size: 15px;
    }

    .main-nav {
        display: none !important;
    }

    .site-header {
        border-bottom: none;
        overflow: visible;
        z-index: 500;
    }

    .header-category-bar {
        display: block;
        background: var(--primary);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        overflow: visible;
        position: relative;
        z-index: 501;
    }

    .header-category-bar .container {
        overflow: visible;
    }

    .header-category-inner {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        overflow: visible;
    }

    .header-category-inner > .header-cat-link,
    .header-category-inner > .header-cat-item {
        flex-shrink: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header-category-inner > .header-cat-link:last-child,
    .header-category-inner > .header-cat-item:last-child {
        border-right: none;
    }

    .header-cat-item {
        position: relative;
    }

    .header-cat-link {
        display: inline-flex;
        align-items: center;
        padding: 13px 22px;
        color: var(--white);
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease;
        height: 100%;
    }

    .header-cat-item.has-children > .header-cat-link {
        gap: 6px;
    }

    .header-cat-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.92);
        transition: transform 0.2s ease;
    }

    .header-cat-item.has-children:hover .header-cat-chevron,
    .header-cat-item.has-children:focus-within .header-cat-chevron {
        transform: rotate(180deg);
    }

    .header-cat-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: var(--white);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        padding: 8px 0;
        z-index: 10050;
        overflow: visible;
    }

    .header-cat-dropdown::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    .header-cat-item.has-children:hover > .header-cat-dropdown,
    .header-cat-item.has-children:focus-within > .header-cat-dropdown {
        display: block;
    }

    .header-cat-dropdown .header-sub-link,
    .header-cat-dropdown a {
        color: #333;
    }

    .header-sub-item {
        position: relative;
        overflow: visible;
    }

    .header-sub-link {
        display: block;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
    }

    .header-sub-item.has-children > .header-sub-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .header-sub-link:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .header-sub-arrow {
        font-size: 11px;
        color: var(--primary);
        flex-shrink: 0;
    }

    .header-child-dropdown {
        display: none;
        position: absolute;
        top: 0;
        left: calc(100% + 4px);
        right: auto;
        min-width: 200px;
        background: var(--white);
        border-radius: 8px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
        padding: 8px 0;
        z-index: 10060;
    }

    .header-child-dropdown::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        width: 8px;
    }

    .header-sub-item.has-children:hover > .header-child-dropdown,
    .header-sub-item.has-children:focus-within > .header-child-dropdown {
        display: block;
    }

    /* শুধু ডান পাশে জায়গা না থাকলে বামে খুলবে (শেষ ক্যাটাগরি) */
    .header-category-inner > .header-cat-item:last-child .header-child-dropdown {
        left: auto;
        right: calc(100% + 4px);
    }

    .header-category-inner > .header-cat-item:last-child .header-child-dropdown::before {
        left: auto;
        right: -8px;
        width: 8px;
    }

    .header-child-dropdown a {
        display: block;
        padding: 9px 18px;
        font-size: 13.5px;
        font-weight: 500;
        color: #444 !important;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
    }

    .header-child-dropdown a:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .header-cat-link:hover,
    .header-cat-link.active {
        background: rgba(0, 0, 0, 0.14);
        color: var(--white);
    }
}

/* Live search results dropdown */
.mobile-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 620;
}

.mobile-search-results.show {
    display: block;
}

.mobile-search-results .search_product ul {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.mobile-search-results .search_product a {
    display: block;
    border-radius: 8px;
    transition: background 0.15s;
}

.mobile-search-results .search_product a:hover {
    background: #fafafa;
}

.mobile-search-results .search_product li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.mobile-search-results .search_product a:last-child li {
    border-bottom: none;
}

.mobile-search-results .search_img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    background: #fff;
}

.mobile-search-results .search_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-search-results .search_content {
    flex: 1;
    min-width: 0;
}

.mobile-search-results .search_content .name {
    font-size: 13.5px;
    font-weight: 600;
    color: #333;
    margin: 0 0 3px;
    line-height: 1.35;
}

.mobile-search-results .search_content .price {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.mobile-search-results .search_content .price del {
    font-size: 12px;
    font-weight: 500;
    color: #999;
    margin-left: 6px;
}

.mobile-search-state {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

.drawer-head {
    display: none;
}

.drawer-links {
    display: contents;
}

.drawer-links a > i {
    display: none;
}

.drawer-links a.drawer-only {
    display: none;
}

/* Dynamic category navigation */
.nav-cat-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    justify-content: center;
}

.nav-cat-link {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: color 0.2s;
}

.nav-cat-link:hover,
.nav-cat-link.active {
    color: var(--primary);
}

.nav-cat-link.active {
    font-weight: 600;
}

.nav-cat-item {
    position: relative;
}

.nav-cat-item.has-children > .nav-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-cat-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: var(--primary);
    opacity: 1;
    transition: transform 0.2s;
}

.nav-cat-chevron i {
    display: inline-block;
}

.nav-cat-item.has-children:hover .nav-cat-chevron,
.nav-cat-item.has-children:focus-within .nav-cat-chevron {
    transform: rotate(180deg);
}

.nav-sub-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 210px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 500;
}

.nav-sub-dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-cat-item.has-children:hover .nav-sub-dropdown,
.nav-cat-item.has-children:focus-within .nav-sub-dropdown {
    display: block;
}

.nav-sub-dropdown a,
.nav-sub-link {
    display: block;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

.nav-sub-dropdown a:hover,
.nav-sub-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.nav-sub-item {
    position: relative;
}

.nav-sub-item.has-children > .nav-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.drawer-links a > i.nav-sub-arrow {
    display: inline-block;
}

.nav-sub-arrow {
    font-size: 12px;
    color: var(--primary);
    margin-left: auto;
}

.nav-child-dropdown {
    display: none;
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 190px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 510;
}

.nav-sub-item.has-children:hover > .nav-child-dropdown,
.nav-sub-item.has-children:focus-within > .nav-child-dropdown {
    display: block;
}

.nav-child-dropdown a {
    display: block;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
}

.nav-child-dropdown a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.nav-cat-mobile,
.drawer-only-block {
    display: none;
}

.side-cat-icon {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ---------- Hero Banner ---------- */
.hero-banner {
    margin-top: 8px;
    margin-bottom: 4px;
}

.hero-layout {
    display: block;
}

.hero-layout-main {
    min-width: 0;
}

.hero-layout.has-side-banners {
    --hero-row-h: 420px;
}

.hero-slide a {
    display: block;
    height: 100%;
}

.hero-layout-side {
    display: none;
}

.hero-side-banner {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-side-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.hero-side-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #f8f8f8;
    transition: height 0.35s ease;
}

.hero-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hero-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    display: block;
}

.hero-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 3px;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    vertical-align: top;
}

@media (min-width: 901px) {
    .hero-layout.has-side-banners {
        display: grid;
        grid-template-columns: minmax(0, 58fr) minmax(300px, 42fr);
        gap: 12px;
        align-items: start;
    }

    .hero-layout.has-side-banners .hero-layout-main,
    .hero-layout.has-side-banners .hero-layout-side {
        height: var(--hero-row-h);
    }

    .hero-layout.has-side-banners .hero-layout-side {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-height: 0;
    }

    .hero-layout.has-side-banners .hero-layout-side--1 {
        grid-template-rows: 1fr;
    }

    .hero-layout.has-side-banners .hero-side-banner {
        min-height: 0;
        height: 100%;
    }

    .hero-layout.has-side-banners .hero-slider {
        height: 100%;
        max-height: none;
    }

    .hero-layout.has-side-banners .hero-track {
        height: 100%;
        align-items: stretch;
    }

    .hero-layout.has-side-banners .hero-slide {
        height: 100%;
    }

    .hero-layout.has-side-banners .hero-img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    .hero-slider {
        max-height: 480px;
    }

    .hero-img {
        max-height: 480px;
        object-fit: cover;
    }
}

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.25s, background 0.2s;
    z-index: 2;
}

.hero-slider:hover .hero-nav,
.hero-slider:focus-within .hero-nav {
    opacity: 1;
}

.hero-nav:hover {
    background: var(--white);
}

.hero-prev {
    left: 10px;
}

.hero-next {
    right: 10px;
}

.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.25s, background 0.25s, border-radius 0.25s;
}

.hero-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--white);
}

/* ---------- Top Categories (Home) ---------- */
.top-categories-section {
    padding: 22px 0 18px;
    background: var(--white);
}

.top-categories-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
}

.top-cat-line {
    flex: 1;
    max-width: 220px;
    height: 2px;
    background: #2b2118;
    border-radius: 2px;
}

.top-categories-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #2b2118;
    line-height: 1.1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.top-categories-panel {
    padding: 8px 0 0;
}

.category-menu-slider {
    position: relative;
}

.category-menu-viewport {
    /* The viewport is the horizontal scroll box: the track inside is exactly as
       wide as its tiles (width:max-content), so scrollLeft has to live here or
       there is nothing to scroll. */
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-menu-viewport::-webkit-scrollbar { display: none; }

/* The viewport stays a scroll box so a hand can slide the strip: the marquee's
   transform and a scroll offset simply add up, and because fit() in
   category-menu-slider.js keeps the track at least half its own width wider
   than the container, the covered range holds at any offset - no hole opens up
   in the loop while the strip is pulled to one side.
   No touch-action override on purpose, so a finger swipe scrolls the strip
   natively (momentum included) while a vertical swipe still scrolls the page. */

.category-menu-viewport.is-dragging {
    cursor: grabbing;
}

.category-menu-track {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: max-content;
    will-change: transform;
    transition: transform 0.08s linear;
}

.category-menu-track.is-dragging {
    transition: none;
    animation-play-state: paused;
}

.category-menu-track.is-marquee {
    animation: catMarquee var(--cat-marquee-duration, 28s) linear infinite;
    will-change: transform;
}
.category-menu-track.is-marquee.is-paused {
    animation-play-state: paused;
}

.top-cat-item {
    flex: 0 0 140px;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.top-cat-item:hover {
    transform: translateY(-4px);
}

.top-cat-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.top-cat-item:hover .top-cat-circle {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.2);
}

.top-cat-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.top-cat-name {
    display: block;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-cat-item:hover .top-cat-name {
    color: var(--primary);
}

/* Flash / Combo Deals items inside Top Categories */
.top-cat-circle--flash {
    background: linear-gradient(135deg, #ff8a00, #ff2d78);
    border-color: rgba(255, 210, 122, .9);
}

.top-cat-circle--combo {
    background: linear-gradient(135deg, #1d1b1b, #3d3d3d);
    border-color: #1d1b1b;
}

.top-cat-circle i[class*="fa-"] {
    font-size: 44px;
    line-height: 1;
    color: #fff;
}

.top-cat-item:hover .top-cat-circle--flash {
    border-color: #fff;
    box-shadow: 0 6px 18px rgba(255, 45, 120, .35);
}

.top-cat-item:hover .top-cat-circle--combo {
    border-color: #fff;
    box-shadow: 0 6px 18px rgba(29, 27, 27, .35);
}

@media (max-width: 900px) {
    .top-categories-section {
        padding: 16px 0 12px;
    }

    .top-categories-heading {
        gap: 12px;
        margin-bottom: 12px;
    }

    .top-cat-line {
        max-width: 80px;
    }

    .top-categories-title {
        font-size: 18px;
        letter-spacing: 0.8px;
    }

    .top-categories-panel {
        padding: 6px 0 0;
    }

    .category-menu-track {
        gap: 22px;
    }

    .top-cat-item {
        flex: 0 0 112px;
        width: 112px;
        gap: 10px;
    }

    .top-cat-circle {
        width: 100px;
        height: 100px;
    }

    .top-cat-name {
        font-size: 12px;
    }
}

@media (max-width: 520px) {
    .top-cat-line {
        max-width: 40px;
    }

    .top-categories-title {
        font-size: 16px;
    }

    .top-cat-item {
        flex: 0 0 96px;
        width: 96px;
    }

    .top-cat-circle {
        width: 86px;
        height: 86px;
    }
}

/* ---------- Category Promo Banners (Home) ---------- */
.category-promo-section {
    padding: 8px 0 18px;
}

.category-promo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.category-promo-card {
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.category-promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 900px) {
    .category-promo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .category-promo-section {
        padding: 6px 0 14px;
    }

    .category-promo-grid {
        gap: 10px;
    }

    .category-promo-card {
        border-radius: 8px;
    }
}

/* ---------- Home Brands Section ---------- */
.home-brands-section {
    padding: 8px 0 18px;
    background: var(--white);
}

.home-brands-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
}

.home-brands-line {
    flex: 1;
    max-width: 220px;
    height: 2px;
    background: #2b2118;
    border-radius: 2px;
}

.home-brands-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #2b2118;
    line-height: 1.1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-brands-panel {
    background: #f5f5f5;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    padding: 20px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.brand-slider {
    position: relative;
}

.brand-slider-viewport {
    overflow: hidden;
    min-width: 0;
}

.brand-slider-track {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: max-content;
    will-change: transform;
}

.brand-slider-track.is-marquee {
    animation: brandMarquee var(--brand-marquee-duration, 28s) linear infinite;
}

.brand-slider-track.is-marquee.is-paused {
    animation-play-state: paused;
}


@keyframes catMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes brandMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.home-brand-item {
    flex: 0 0 148px;
    width: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 12px;
    background: var(--white);
    border: 1px solid #ececec;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.home-brand-item:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.home-brand-logo {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-brand-logo img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    display: block;
    filter: grayscale(35%);
    opacity: 0.88;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.home-brand-item:hover .home-brand-logo img {
    filter: none;
    opacity: 1;
    transform: scale(1.04);
}

.home-brand-name {
    display: block;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-brand-item:hover .home-brand-name {
    color: var(--primary);
}

@media (max-width: 900px) {
    .home-brands-section {
        padding: 6px 0 14px;
    }

    .home-brands-heading {
        gap: 12px;
        margin-bottom: 12px;
    }

    .home-brands-line {
        max-width: 80px;
    }

    .home-brands-title {
        font-size: 18px;
        letter-spacing: 0.8px;
    }

    .home-brands-panel {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .brand-slider-track {
        gap: 12px;
    }

    .home-brand-item {
        flex: 0 0 128px;
        width: 128px;
        padding: 12px 10px 10px;
    }

    .home-brand-logo {
        height: 54px;
    }

    .home-brand-logo img {
        max-height: 54px;
    }
}

@media (max-width: 520px) {
    .home-brands-line {
        max-width: 40px;
    }

    .home-brands-title {
        font-size: 16px;
    }

    .home-brand-item {
        flex: 0 0 112px;
        width: 112px;
    }

    .home-brand-logo {
        height: 48px;
    }

    .home-brand-logo img {
        max-height: 48px;
    }

    .home-brand-name {
        font-size: 11px;
    }
}

/* ---------- Hot Deal & Flash Sale Sections ---------- */
.deal-offer-section {
    padding: 22px 0 16px;
}

.deal-offer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
}

.deal-offer-line {
    flex: 1;
    max-width: 220px;
    height: 2px;
    background: #2b2118;
    border-radius: 2px;
}

.deal-offer-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #2b2118;
    line-height: 1.1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.deal-offer-panel {
    background: #f5f5f5;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.deal-offer-panel--flash {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
}

.deal-offer-panel--hot {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
}

.deal-offer-panel--flash .deal-promo-bar,
.deal-offer-panel--hot .deal-promo-bar {
    border-radius: 12px;
}

.deal-offer-panel--page {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    margin-bottom: 16px;
}

.deal-offer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0e0e0;
}

.deal-promo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 18px;
    border: none;
    border-bottom: none;
    border-radius: 11px 11px 0 0;
    box-shadow: none;
}

.deal-offer-panel--flash:has(> .deal-promo-bar),
.deal-offer-panel--hot:has(> .deal-promo-bar) {
    padding-top: 0;
    overflow: visible;
    border-top: none;
}

.deal-promo-bar--flash {
    background: var(--gradient-primary);
}

.deal-promo-bar--hot {
    background: var(--gradient-secondary);
}

.deal-promo-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.deal-promo-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.deal-promo-bar--flash .deal-promo-icon {
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
}

.deal-promo-bar--hot .deal-promo-icon {
    background: #fff;
    color: var(--secondary-dark, #c43e00);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.deal-promo-bar--hot .deal-promo-icon i {
    color: inherit;
}

.deal-promo-text {
    min-width: 0;
}

.deal-promo-title {
    margin: 0 0 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.deal-promo-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}

.deal-promo-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-left: auto;
}

.deal-timer-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.deal-promo-bar .deal-timer-heading {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
}

.deal-promo-bar .deal-countdown {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 6px;
}

.deal-promo-bar .deal-countdown .timer-box {
    min-width: 52px;
    padding: 8px 6px 6px;
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.deal-promo-bar--flash .deal-countdown .timer-box b {
    color: var(--primary-dark);
}

.deal-promo-bar--hot .deal-countdown .timer-box b {
    color: var(--secondary-dark);
}

.deal-promo-bar .deal-countdown .timer-box b {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.deal-promo-bar .deal-countdown .timer-box small {
    font-size: 9px;
    margin-top: 4px;
    color: #888;
    text-transform: none;
}

.deal-promo-bar .deal-countdown .timer-colon {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 0;
    align-self: center;
    opacity: 1;
}

.deal-promo-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.deal-promo-bar--flash .deal-promo-viewall {
    background: var(--secondary);
    color: var(--white);
}

.deal-promo-bar--hot .deal-promo-viewall {
    background: #ffd54a;
    color: #4a2c00;
}

.deal-promo-viewall:hover {
    color: var(--white);
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.deal-promo-bar--flash .deal-promo-viewall:hover {
    background: var(--secondary-dark);
}

.deal-promo-bar--hot .deal-promo-viewall:hover {
    background: #ffca28;
    color: #3d2400;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

.deal-offer-panel--page .deal-promo-bar {
    margin-bottom: 0;
    border-radius: 12px;
}

.deal-offer-panel--page .deal-offer-toolbar {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.deal-offer-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.deal-offer-subtitle i {
    margin-right: 6px;
}

.deal-offer-panel--flash .deal-offer-subtitle i {
    color: var(--primary);
}

.deal-offer-panel--hot .deal-offer-subtitle i {
    color: var(--secondary);
}

.deal-offer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

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

.deal-countdown .timer-label {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    margin-right: 4px;
}

.deal-countdown .timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    min-width: 44px;
    padding: 5px 4px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.deal-countdown .timer-box b {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.deal-countdown .timer-box small {
    font-size: 9.5px;
    color: #888;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.deal-countdown .timer-colon {
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
    align-self: flex-start;
    margin-top: 4px;
}

.deal-offer-panel--hot .deal-countdown .timer-box b,
.deal-offer-panel--hot .deal-countdown .timer-colon {
    color: var(--secondary-dark);
}

.deal-offer-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.deal-offer-panel--hot .deal-offer-viewall {
    background: var(--secondary);
}

.deal-offer-viewall:hover {
    color: var(--white);
    transform: translateY(-1px);
}

.deal-offer-panel--hot .deal-offer-viewall:hover {
    background: var(--secondary-dark);
}

.deal-product-grid {
    gap: 16px;
}

.deal-product-card {
    background: var(--white);
    border: 1px solid #efefef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.deal-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.deal-product-card .product-body {
    background: var(--white);
}

.deal-product-card .product-title a {
    color: #222;
}

.deal-product-card .product-price {
    color: var(--primary);
}

.deal-offer-panel--hot .deal-product-card:hover {
    border-color: rgba(255, 109, 0, 0.35);
}

.deal-offer-title--bn {
    text-transform: none;
    letter-spacing: 0.3px;
    font-size: 21px;
}

.deal-offer-panel--category {
    border-top: 3px solid var(--primary);
}

.deal-offer-panel--merchant {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
}

.deal-offer-panel--merchant .deal-offer-toolbar {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 14px;
}

.deal-offer-panel--merchant .deal-offer-subtitle i {
    color: var(--primary);
}

.deal-offer-panel--merchant .deal-offer-viewall {
    background: var(--primary);
    color: var(--white);
}

.deal-offer-panel--merchant .deal-offer-viewall:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.deal-offer-panel--merchant .vendor-badge-verified {
    background: var(--primary);
}

.home-cat-section {
    padding: 22px 0 16px;
}

.home-cat-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding-top: 4px;
}

.home-cat-loadmore .btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.home-cat-loadmore .btn-load-more:hover {
    transform: translateY(-1px);
}

.home-cat-loadmore .btn-load-more.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.merchant-section {
    padding: 22px 0 16px;
}

.merchant-vendor-grid {
    gap: 14px;
}

.merchant-vendor-card {
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.merchant-vendor-card:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.merchant-vendor-card .vendor-banner {
    height: 82px;
    border-radius: 12px 12px 0 0;
}

.merchant-vendor-card .vendor-avatar {
    width: 58px;
    height: 58px;
    margin-top: -29px;
    border-width: 3px;
}

.merchant-vendor-card .vendor-body {
    padding: 0 12px 12px;
}

.merchant-vendor-card .vendor-visit-btn {
    background: #fff;
    border: 1px solid #e8e8e8;
}

.merchant-vendor-card:hover .vendor-visit-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ============================================================
   Our Brands / Our Businesses
   Standalone section. The card markup reuses the Merchant Shop
   classes (vendor-card / merchant-vendor-card / vendor-banner /
   vendor-avatar / vendor-body / vendor-visit-btn) so it looks
   exactly the same. Only the description line is brand specific.
   Nothing in the Merchant Shop block above is changed.
   ============================================================ */
.ourbrand-section {
    padding: 22px 0 16px;
}

.ourbrand-grid {
    gap: 14px;
}

.ourbrand-card {
    display: flex;
    flex-direction: column;
    color: inherit;
}

.ourbrand-card .vendor-avatar {
    flex: none;
}

.ourbrand-desc {
    font-size: 11px;
    line-height: 1.5;
    color: #aaa;
    margin: 0 0 10px;
    min-height: 33px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ourbrand-body .vendor-visit-btn {
    margin-top: auto;
}

@media (max-width: 900px) {
    .ourbrand-section {
        padding: 16px 0 12px;
    }

    .ourbrand-logo-panel {
        height: 78px;
    }

    .ourbrand-logo-panel img {
        max-height: 52px;
    }
}

@media (max-width: 900px) {
    .home-cat-section,
    .merchant-section {
        padding: 16px 0 12px;
    }

    .deal-offer-title--bn {
        font-size: 18px;
    }

    .merchant-vendor-grid {
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .deal-offer-title--bn {
        font-size: 16px;
    }
}

.hot-deal-badge {
    background: var(--gradient-secondary-135);
}

.flash-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--gradient-flash-badge);
}

.flash-progress {
    height: 7px;
    background: var(--primary-muted);
    border-radius: 20px;
    overflow: hidden;
    margin: 2px 0 5px;
}

.flash-progress-bar {
    height: 100%;
    border-radius: 20px;
    background: var(--gradient-flash-progress);
    transition: width 0.4s ease;
}

.flash-sold-text {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #777;
    margin-bottom: 8px;
}

.flash-sold-text i {
    color: var(--secondary);
    margin-right: 2px;
}

@media (max-width: 900px) {
    .deal-offer-section {
        padding: 16px 0 12px;
    }

    .deal-offer-heading {
        gap: 12px;
        margin-bottom: 12px;
    }

    .deal-offer-line {
        max-width: 70px;
    }

    .deal-offer-title {
        font-size: 18px;
    }

    .deal-offer-panel {
        padding: 14px 12px 16px;
        border-radius: 12px;
    }

    .deal-offer-panel--merchant {
        padding: 6px 0 0;
    }

    .deal-offer-panel--flash,
    .deal-offer-panel--hot {
        padding: 6px 0 0;
    }

    .deal-offer-toolbar {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .deal-promo-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
    }

    .deal-promo-title {
        font-size: 22px;
    }

    .deal-promo-controls {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .deal-timer-wrap {
        flex-wrap: wrap;
        gap: 8px;
    }

    .deal-promo-bar .deal-countdown .timer-box {
        min-width: 44px;
        padding: 6px 4px 5px;
    }

    .deal-promo-bar .deal-countdown .timer-box b {
        font-size: 18px;
    }

    .deal-offer-subtitle {
        width: 100%;
        font-size: 13px;
    }

    .deal-offer-actions {
        width: 100%;
        justify-content: space-between;
    }

    .deal-offer-panel .deal-countdown .timer-label,
    .deal-countdown .timer-label {
        display: none;
    }

    .deal-offer-viewall {
        padding: 8px 14px;
        font-size: 12px;
    }
}

@media (max-width: 520px) {
    .deal-offer-line {
        max-width: 36px;
    }

    .deal-offer-title {
        font-size: 16px;
        letter-spacing: 0.6px;
    }

    .deal-promo-title {
        font-size: 20px;
    }

    .deal-promo-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .deal-timer-wrap {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .deal-promo-bar .deal-countdown {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .deal-promo-viewall {
        justify-content: center;
        width: 100%;
    }

    .deal-offer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .deal-offer-viewall {
        justify-content: center;
    }
}

/* ---------- Flash Sale: compact 2-row header (mobile only) ---------- */
@media (max-width: 900px) {
    .deal-offer-section--flash {
        padding-top: 14px;
        padding-bottom: 10px;
    }

    .deal-offer-section--flash .deal-offer-heading {
        gap: 10px;
        margin-bottom: 8px;
    }

    .deal-offer-section--flash .deal-offer-line {
        max-width: 60px;
    }

    .deal-offer-section--flash .deal-offer-title {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .deal-offer-section--flash .deal-offer-panel--flash {
        padding-top: 0;
    }

    .deal-offer-section--flash .deal-promo-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .deal-offer-section--flash .deal-promo-controls {
        display: contents;
    }

    .deal-offer-section--flash .deal-promo-brand {
        grid-column: 1;
        grid-row: 1;
        gap: 10px;
        min-width: 0;
    }

    .deal-offer-section--flash .deal-promo-viewall {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin-left: 0;
        padding: 10px 18px;
        font-size: 14px;
        gap: 6px;
        justify-content: center;
        flex-shrink: 0;
    }

    .deal-offer-section--flash .deal-timer-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        padding-left: 50px;
    }

    .deal-offer-section--flash .deal-promo-icon {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        font-size: 17px;
    }

    .deal-offer-section--flash .deal-promo-title {
        margin: 0;
        font-size: 20px;
        letter-spacing: 0.8px;
        white-space: nowrap;
    }

    .deal-offer-section--flash .deal-promo-desc {
        font-size: 12px;
        line-height: 1.3;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-timer-heading {
        display: none;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 5px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box {
        min-width: 42px;
        padding: 6px 5px 5px;
        border-radius: 8px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box b {
        font-size: 18px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box small {
        font-size: 9px;
        margin-top: 3px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-colon {
        margin-top: 0;
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .deal-offer-section--flash {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .deal-offer-section--flash .deal-offer-heading {
        gap: 8px;
        margin-bottom: 6px;
    }

    .deal-offer-section--flash .deal-offer-line {
        max-width: 34px;
    }

    .deal-offer-section--flash .deal-offer-title {
        font-size: 16px;
        letter-spacing: 0.7px;
    }

    .deal-offer-section--flash .deal-promo-bar {
        gap: 8px 12px;
        padding: 12px;
    }

    .deal-offer-section--flash .deal-timer-wrap {
        padding-left: 45px;
    }

    .deal-offer-section--flash .deal-promo-brand {
        gap: 9px;
    }

    .deal-offer-section--flash .deal-promo-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 16px;
    }

    .deal-offer-section--flash .deal-promo-title {
        font-size: 18px;
    }

    .deal-offer-section--flash .deal-promo-desc {
        font-size: 11px;
        line-height: 1.25;
    }

    .deal-offer-section--flash .deal-promo-viewall {
        padding: 10px 16px;
        font-size: 13px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box {
        min-width: 38px;
        padding: 5px 4px 4px;
        border-radius: 7px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box b {
        font-size: 17px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-box small {
        font-size: 8.5px;
        margin-top: 2px;
    }

    .deal-offer-section--flash .deal-promo-bar .deal-countdown .timer-colon {
        font-size: 15px;
    }
}

/* ---------- Product Section ---------- */
.product-section {
    padding: 20px 0 10px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--primary);
    border-radius: 10px 10px 0 0;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.section-head h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
}

.btn-view-all {
    background: var(--primary);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.product-card {
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
}

.product-card:hover {
    border-color: var(--primary);
}

.product-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fafafa;
}

.deal-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.4;
}

.deal-stockout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: var(--white);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 15px;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.product-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

.product-title {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 4px;
    min-height: 36px;
}

.product-title a:hover {
    color: var(--primary);
}

.product-price {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.product-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
}

.btn-order {
    flex: 1;
    background: var(--primary);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    transition: background 0.2s;
}

.btn-order:hover {
    background: var(--primary-dark);
}

.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 5px;
    transition: background 0.2s, color 0.2s;
}

.btn-cart:hover {
    background: var(--primary);
    color: var(--white);
}

/* Cart/order forms inside product actions behave as flex items */
.product-actions form {
    display: contents;
}

button.btn-order {
    border: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

button.btn-cart {
    background: transparent;
    cursor: pointer;
}

.product-price del {
    color: #999;
    font-weight: 500;
    font-size: 13px;
    margin-right: 4px;
}

.section-cta {
    text-align: center;
    margin: 24px 0 10px;
}

.btn-load-more {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 5px;
}

/* ══════════════════════════════════════
   Brand Section
══════════════════════════════════════ */
.brand-section { padding: 20px 0 10px; }

.brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.brand-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-3px);
}

.brand-card-img {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-card-img img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter .2s;
}

.brand-card:hover .brand-card-img img { filter: none; }

.brand-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

/* ══════════════════════════════════════
   Vendor / Merchant Shop Section
══════════════════════════════════════ */
.vendor-section { padding: 20px 0 16px; }

.vendor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.vendor-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    border: 1.5px solid transparent;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    position: relative;
}

.vendor-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 32px rgba(0,0,0,.13);
    transform: translateY(-5px);
}

/* gradient banner */
.vendor-banner {
    height: 90px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent;
    position: relative;
}

.vendor-banner--no-img {
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb,var(--primary) 60%,#000 40%) 100%);
}

.vendor-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.22));
    pointer-events: none;
}

/* verified badge on banner */
.vendor-badge-verified {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    background: #1877f2;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vendor-body {
    padding: 0 14px 14px;
    text-align: center;
    position: relative;
}

.vendor-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,.14);
    overflow: hidden;
    margin: -32px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.vendor-avatar img { width: 100%; height: 100%; object-fit: cover; }

.vendor-avatar-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    background: var(--primary);
}

.vendor-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.vendor-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 10px;
}

.vendor-stars i { font-size: 12px; color: #f5b301; }
.vendor-stars .far.fa-star { color: #e0e0e0; }
.vendor-review-count { font-size: 11px; color: #aaa; margin-left: 4px; }

.vendor-visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: #f7f7f7;
    border-radius: 8px;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: background .2s, color .2s;
}

.vendor-card:hover .vendor-visit-btn {
    background: var(--primary);
    color: #fff;
}

.vendor-visit-btn i { font-size: 11px; transition: transform .2s; }
.vendor-card:hover .vendor-visit-btn i { transform: translateX(3px); }

/* ══════════════════════════════════════
   Blog Section
══════════════════════════════════════ */
.blog-section { padding: 20px 0 16px; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.blog-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border: 1.5px solid #f0f0f0;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.blog-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    transform: translateY(-6px);
}

.blog-card-img {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    display: block;
}

.blog-card:hover .blog-card-img img { transform: scale(1.07); }

.blog-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.blog-card-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-meta {
    font-size: 12px;
    color: #bbb;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.blog-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card-meta i { color: var(--primary); }

.blog-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--primary); }

.blog-card-excerpt {
    font-size: 13px;
    color: #777;
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
    margin-top: auto;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    padding: 6px 14px;
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    transition: background .2s, color .2s;
}

.blog-read-more:hover {
    background: var(--primary);
    color: #fff;
}

.blog-read-more i { font-size: 11px; }

.blog-read-time {
    font-size: 11px;
    color: #bbb;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .brand-grid  { grid-template-columns: repeat(4, 1fr); }
    .vendor-grid { grid-template-columns: repeat(4, 1fr); }
    .blog-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .mobile-bottom-nav .nav-home {
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: 64px;
    }
}

@media (max-width: 767px) {
    .brand-grid  { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .vendor-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .blog-grid   { grid-template-columns: 1fr; gap: 16px; }

        .app-home .mobile-bottom-nav {
        display: flex;
        max-width: none;
        border-radius: 0;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -1px 0 #e5e5ea, 0 -4px 24px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.95);
    }
    .app-home .mobile-bottom-nav .nav-home i {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .app-home .mobile-bottom-nav .nav-home::before {
        width: 52px;
        height: 26px;
        top: -8px;
    }

}

@media (max-width: 480px) {
    .brand-grid  { grid-template-columns: repeat(2, 1fr); }
    .vendor-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Promo Banner ---------- */
.promo-section {
    padding: 15px 0;
}

.promo-banner {
    min-height: 0;
    border-radius: 5px;
    overflow: hidden;
}

.promo-banner-img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 5px;
}

@media (max-width: 900px) {
    .promo-banner {
        min-height: 0;
        height: auto;
        overflow: visible;
    }

    .promo-banner-img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        object-fit: contain;
    }
}

/* ---------- Features Bar ---------- */
.features-bar {
    background: var(--primary);
    color: var(--white);
    padding: 28px 0;
    margin-top: 10px;
}

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

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.feature-item i {
    font-size: 28px;
    flex-shrink: 0;
    margin-top: 4px;
    opacity: 0.9;
}

.feature-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-item p {
    font-size: 13px;
    opacity: 0.9;
}

/* ---------- Mobile Bottom Menu ---------- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid #dbeafe;
    padding: 10px 0;
    z-index: 300;
    justify-content: space-around;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.mobile-bottom-nav a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #4b5563;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}


.mobile-bottom-nav a span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    color: inherit;
}
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus-visible {
    color: var(--primary);
    background-color: rgba(var(--primary-rgb, 223, 45, 77), .08);
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:active {
    color: var(--primary);
    background-color: rgba(var(--primary-rgb, 223, 45, 77), .12);
}
.mobile-bottom-nav a.active i,
.mobile-bottom-nav a:active i {
    color: var(--primary);
}
.mobile-bottom-nav a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
}

.mobile-bottom-nav a.active i {
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #eee;
        z-index: 100;
    }

    .main-nav.open {
        display: flex;
    }

    /* app-home — left side drawer */
    .app-home .main-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: min(300px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding: 0;
        background: var(--white);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.15);
        border-top: none;
        z-index: 350;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0.3s ease;
        overflow: hidden;
    }

    .app-home .main-nav.open {
        display: flex;
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* মেনু খোলা থাকলে header + drawer overlay-র উপরে থাকবে */
    .app-home.menu-open .site-header {
        z-index: 360;
    }

    .app-home .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        background: var(--primary);
        color: var(--white);
        flex-shrink: 0;
    }

    .app-home .drawer-title {
        font-size: 18px;
        font-weight: 700;
    }

    .app-home .drawer-close {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-home .drawer-links {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        padding: 8px 0 24px;
    }

    .app-home .drawer-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #222;
        border-bottom: 1px solid #f3f3f3;
    }

    .app-home .drawer-links a i {
        width: 22px;
        color: var(--primary);
        text-align: center;
        font-size: 15px;
    }

    .app-home .drawer-links a:active,
    .app-home .drawer-links a:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .app-home .nav-cat-desktop {
        display: none;
    }

    .app-home .nav-cat-mobile {
        display: block;
        width: 100%;
    }

    .app-home .mobile-cat-group {
        border-bottom: 1px solid #f3f3f3;
    }

    .app-home .mobile-cat-row {
        display: flex;
        align-items: stretch;
    }

    .app-home .mobile-cat-parent {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        padding: 14px 12px 14px 20px;
        font-size: 16px;
        font-weight: 600;
        color: #222;
        border-bottom: none;
    }

    .app-home .mobile-cat-parent i {
        width: 22px;
        color: var(--primary);
        text-align: center;
        font-size: 15px;
    }

    .app-home .mobile-sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: var(--primary);
        font-size: 15px;
        cursor: pointer;
    }

    .app-home .mobile-sub-toggle i {
        transition: transform 0.25s ease;
    }

    .app-home .mobile-cat-group.has-children.is-open .mobile-sub-toggle i {
        transform: rotate(180deg);
    }

    .app-home .mobile-cat-group.has-children .drawer-sub-links {
        display: none;
    }

    .app-home .mobile-cat-group.has-children.is-open .drawer-sub-links {
        display: flex;
        flex-direction: column;
        background: #fafafa;
        padding: 4px 0 8px;
    }

    .app-home .drawer-sub-links {
        display: flex;
        flex-direction: column;
        background: #fafafa;
        padding: 4px 0 8px;
    }

    .app-home .drawer-sub-links a {
        display: block;
        padding: 10px 20px 10px 54px;
        font-size: 14px;
        font-weight: 500;
        color: #444;
        border-bottom: none;
    }

    .app-home .drawer-sub-links a:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .app-home .drawer-sub-row {
        display: flex;
        align-items: stretch;
    }

    .app-home .drawer-sub-links .drawer-sub-parent {
        flex: 1;
        font-weight: 600;
        color: #333;
    }

    .app-home .drawer-child-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: var(--primary);
        font-size: 13px;
        cursor: pointer;
    }

    .app-home .drawer-child-toggle i {
        transition: transform 0.25s ease;
    }

    .app-home .drawer-sub-group.has-children.is-open .drawer-child-toggle i {
        transform: rotate(180deg);
    }

    .app-home .drawer-sub-group.has-children .drawer-child-links {
        display: none;
    }

    .app-home .drawer-sub-group.has-children.is-open .drawer-child-links {
        display: flex;
    }

    .app-home .drawer-child-links {
        display: flex;
        flex-direction: column;
    }

    .app-home .drawer-child-links a {
        padding: 8px 20px 8px 74px;
        font-size: 13px;
        font-weight: 500;
        color: #666;
        position: relative;
    }

    .app-home .drawer-child-links a::before {
        content: "\2013";
        position: absolute;
        left: 60px;
        color: var(--primary);
    }

    .app-home .drawer-links .drawer-only-block {
        display: block;
        width: 100%;
    }

    .app-home .mobile-search,
    .app-home .header-search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--white);
        border: 1.5px solid var(--primary);
        border-radius: 8px;
        padding: 0 4px 0 12px;
        height: 40px;
        min-width: 0;
    }

    .app-home .mobile-search input,
    .app-home .header-search input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: var(--text);
        min-width: 0;
        order: 1;
    }

    .app-home .mobile-search .search-submit,
    .app-home .header-search .search-submit {
        order: 2;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .app-home .mobile-search input::placeholder,
    .app-home .header-search input::placeholder {
        color: #999;
    }

    .app-home .header-inner {
        padding: 8px 14px;
        display: grid;
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "menu logo actions"
            "search search search";
        align-items: center;
        gap: 10px 8px;
    }

    .app-home .menu-toggle {
        grid-area: menu;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-soft);
        border-radius: 10px;
        font-size: 20px;
    }

    .app-home .logo {
        grid-area: logo;
        justify-self: center;
    }

    .app-home .logo img {
        height: 46px;
        width: auto;
        max-width: 180px;
    }

    .app-home .header-actions {
        grid-area: actions;
    }

    .app-home .mobile-search,
    .app-home .header-search {
        grid-area: search;
    }

    .app-home .header-actions .profile-btn,
    .app-home .header-actions .btn-track {
        display: none;
    }

    .app-home .cart-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .app-home .drawer-links a i {
        display: inline-block;
    }

    .app-home .drawer-links a.drawer-only {
        display: flex;
    }

    .app-home .header-actions {
        gap: 8px;
    }

    .app-home .cart-btn .cart-amount {
        display: none;
    }

    .app-home .cart-btn .fa-shopping-basket {
        margin: 0;
    }

    .app-home .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 340;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .app-home .nav-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .menu-toggle {
        display: block;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: 980px;
        margin: 0 auto;
        padding: 10px 0;
        background: rgba(255, 255, 255, .80);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        backdrop-filter: blur(18px) saturate(180%);
        border-top: 1px solid #dbeafe;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 12px 34px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
        justify-content: space-around;
        align-items: center;
    }

    body {
        padding-bottom: 80px;
    }

    .app-home {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    .app-home .site-footer {
        width: 100%;
        max-width: 100%;
        padding-bottom: 0;
        overflow: visible;
    }

    .app-home .site-footer .footer-grid {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .site-footer {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .features-bar {
        display: none !important;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .section-head h2 {
        font-size: 17px;
    }

    .btn-view-all {
        font-size: 13px;
        padding: 5px 8px;
    }

    .product-title {
        font-size: 12px;
        min-height: 28px;
    }

    .product-price {
        font-size: 12px;
    }

    .btn-order {
        font-size: 12px;
        padding: 8px 0;
    }

    .promo-banner {
        min-height: 0;
        height: auto;
    }

    .promo-banner-img {
        min-height: 0;
        height: auto;
        object-fit: contain;
    }

    .hero-img {
        max-height: none;
        object-fit: contain;
    }

    .cart-btn .cart-amount {
        display: none;
    }
}

/* ---------- Shop Page (All Products) ---------- */
.shop-page {
    padding: 24px 0 48px;
    background: #f8f8f8;
}

/* Toolbar: breadcrumb + sort + count */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--white);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.shop-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.shop-breadcrumb a {
    color: var(--muted);
}

.shop-breadcrumb a:hover {
    color: var(--primary);
}

.shop-breadcrumb strong {
    color: var(--text);
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-count {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.shop-sort select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    background: var(--white);
    color: var(--text);
    outline: none;
    cursor: pointer;
}

.shop-filter-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Shop layout: sidebar + grid */
.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
    overflow: visible;
}

/* Sidebar */
.shop-sidebar {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    align-self: start;
}

/* JS-driven sticky — class added by script */
/* position: sticky (not fixed) so the sidebar stays a grid item and
   the 240px track is preserved — the products column never collapses. */
.shop-sidebar.is-sticky {
    position: sticky;
    width: 240px;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    z-index: 50;
}
.shop-sidebar::-webkit-scrollbar { width: 4px; }
.shop-sidebar::-webkit-scrollbar-track { background: transparent; }
.shop-sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* placeholder to hold space when sidebar is fixed */
.shop-sidebar-placeholder {
    width: 240px;
    flex-shrink: 0;
    display: none;
}
.shop-sidebar-placeholder.is-active {
    display: block;
}

.shop-sidebar-head {
    background: var(--primary);
    color: var(--white);
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-sidebar-close {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.shop-sidebar-section {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px;
}

.shop-sidebar-section:last-child {
    border-bottom: none;
}

.shop-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shop-sidebar-title i {
    color: var(--primary);
    font-size: 12px;
}

.shop-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-cat-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
    padding: 5px 8px;
    border-radius: 6px;
    transition: 0.15s;
}

.shop-cat-list li a:hover,
.shop-cat-list li a.active {
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
}

.shop-cat-list li a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
}

.shop-cat-list li a:hover::before,
.shop-cat-list li a.active::before {
    background: var(--primary);
}

/* Price range */
.shop-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}

.shop-price-inputs input {
    width: 70px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    text-align: center;
    background: #f9f9f9;
}

.shop-price-sep {
    color: var(--muted);
    font-size: 11px;
}

.shop-price-slider {
    margin-bottom: 14px;
}

.shop-filter-apply {
    width: 100%;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.shop-filter-apply:hover {
    background: var(--primary-dark);
}

/* Shop product grid */
.product-grid--shop {
    grid-template-columns: repeat(4, 1fr);
}

/* Pagination */
.shop-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.shop-pagination .pagination {
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
}

.shop-pagination .page-link {
    border-radius: 8px !important;
    border-color: var(--border);
    color: var(--text);
    font-size: 14px;
    padding: 6px 14px;
}

.shop-pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.shop-pagination .page-link:hover {
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary);
    border-color: var(--primary);
}

/* Empty state */
.shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.shop-empty i {
    font-size: 48px;
    margin-bottom: 14px;
    color: #ccc;
    display: block;
}

.shop-empty p {
    font-size: 15px;
}

/* Sidebar overlay (mobile) */
.shop-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
}

.shop-sidebar-overlay.is-open {
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-grid--shop {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .shop-filter-toggle {
        display: flex;
    }

    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100dvh;
        z-index: 200;
        overflow-y: auto;
        border-radius: 0;
        transition: left 0.3s;
    }

    .shop-sidebar.is-open {
        left: 0;
    }

    .shop-sidebar-close {
        display: block;
    }

    .product-grid--shop {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Category Page ---------- */
.category-banner {
    background: var(--primary);
    color: var(--white);
    padding: 28px 0;
    margin-bottom: 8px;
}

.category-banner h1 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    text-align: center;
}

.category-banner h1 span {
    font-weight: 700;
}

.category-page {
    padding: 24px 0 40px;
    background: #f8f8f8;
}

.product-grid--category {
    grid-template-columns: repeat(4, 1fr);
}

.product-rating {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 6px;
}

.product-rating i {
    color: #f5b301;
    font-size: 11px;
}

.product-rating--detail {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.product-rating--detail i {
    font-size: 14px;
}

.product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.product-meta-row .product-price {
    margin-bottom: 0;
    text-align: left;
}

.product-views {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .product-grid--category {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .product-grid--category {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Product Detail Page ---------- */
.product-detail-page {
    padding: 20px 0 40px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 24px;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb span:last-child {
    color: var(--text);
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.product-detail-image {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}

.product-detail-image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Product Gallery */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.gallery-main {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    position: relative;
    aspect-ratio: 1;
}

.gallery-zoom-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #fafafa;
}

.gallery-zoom-viewport[hidden] {
    display: none;
}

.gallery-hover-zoom {
    cursor: zoom-in;
}

.gallery-zoom-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.gallery-zoom-controls[hidden] {
    display: none;
}

.gallery-zoom-toggle,
.gallery-zoom-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e6e6e6;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-zoom-toggle:hover,
.gallery-zoom-action-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gallery-zoom-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.gallery-zoom-controls.is-open .gallery-zoom-toggle {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gallery-zoom-actions {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.gallery-zoom-controls.is-open .gallery-zoom-actions {
    display: flex;
}

.gallery-main img.gallery-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-main img.gallery-media.is-hover-zoomed {
    cursor: zoom-in;
}

.gallery-main img.gallery-media[hidden] {
    display: none;
}

.gallery-disc-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    z-index: 2;
    pointer-events: none;
}

.gallery-video-wrap {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
}

.gallery-video-wrap[hidden] {
    display: none;
}

.gallery-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.gallery-main img.is-fading {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.gallery-thumbs-wrap {
    width: 100%;
}

.gallery-thumbs-wrap.is-scrollable {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 4px;
}

.gallery-thumbs.is-scrollable {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    padding-bottom: 6px;
}

.gallery-thumbs.is-scrollable::-webkit-scrollbar {
    display: block;
    height: 5px;
}

.gallery-thumbs.is-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 99px;
}

.gallery-thumbs.is-scrollable .gallery-thumb {
    scroll-snap-align: start;
}

.gallery-thumbs-nav {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s, color 0.2s;
}

.gallery-thumbs-nav:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.gallery-thumbs-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gallery-thumb.active,
.gallery-thumb:hover {
    border-color: var(--primary);
}

.gallery-thumb--video {
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
}

.video-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.video-thumb-inner i {
    font-size: 18px;
    color: #fff;
}

.product-attrs {
    list-style: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.product-attrs li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 5px 0;
}

.product-attrs li + li {
    border-top: 1px dashed #eee;
    margin-top: 4px;
    padding-top: 9px;
}

.attr-label {
    color: var(--muted);
    min-width: 72px;
    flex-shrink: 0;
}

.attr-value {
    color: var(--text);
    font-weight: 500;
}

.product-brand {
    color: var(--primary);
    font-weight: 600;
}

.product-brand:hover {
    text-decoration: underline;
}

.in-stock {
    color: #1a8f4c;
    font-weight: 600;
}

.in-stock i {
    margin-right: 4px;
}

.rating-count {
    font-size: 14px;
    color: var(--muted);
    margin-left: 8px;
    font-weight: 400;
}

.product-rating--detail .rating-count {
    font-size: 13px;
}

.product-detail-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-detail-short {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.product-detail-price {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.product-option-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

/* ── Color Swatches ── */
.pro-color { margin-bottom: 16px; }

.color-selector { display: flex; flex-wrap: wrap; gap: 10px; }

.color-swatch-item {
    position: relative;
    display: inline-block;
}

/* hide native radio but keep it accessible & clickable via label */
.color-swatch-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    margin: 0;
}

.color-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    outline: 2px solid rgba(0,0,0,0.15);
    outline-offset: 0px;
    cursor: pointer;
    transition: transform 0.18s, outline-color 0.18s, outline-width 0.18s;
    user-select: none;
}

.color-swatch:hover {
    transform: scale(1.1);
    outline-color: var(--primary);
    outline-width: 2.5px;
}

.color-swatch-item input[type="radio"]:checked + .color-swatch {
    border-color: #fff;
    outline-color: #222;
    outline-width: 3px;
    transform: scale(1.12);
}

.color-swatch-check {
    display: none;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    pointer-events: none;
}

.color-swatch-item input[type="radio"]:checked + .color-swatch .color-swatch-check {
    display: block;
}

.weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.weight-btn {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.weight-btn:hover,
.weight-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

.btn-clear-option {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-bottom: 20px;
}

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

.product-qty-row {
    margin-bottom: 24px;
}

.product-qty-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .05);
}

.product-qty-line .btn-add-cart {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    border: none;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(var(--primary-rgb), .45);
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}

.product-qty-line .btn-add-cart:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -3px rgba(var(--primary-rgb), .55);
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e9ec;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f8f9fa;
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.2s, color 0.2s;
}

.qty-btn:hover {
    background: #eef1f4;
}

.qty-input {
    width: 50px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.btn-add-cart,
.btn-buy-now {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 14px 24px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.btn-add-cart {
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-add-cart:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-buy-now {
    background: var(--primary);
    color: var(--white);
}

.btn-buy-now:hover {
    background: var(--primary-dark);
}

.product-contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.contact-btn {
    flex: 1;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 5px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: filter 0.2s, transform 0.2s;
}

.contact-btn i {
    font-size: 16px;
}

.contact-btn:hover {
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.product-delivery-info {
    border: 1px dashed var(--border);
    background: var(--primary-soft);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.product-delivery-info-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 8px;
}

.product-delivery-info-head i {
    color: var(--primary);
}

.product-delivery-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}

.product-delivery-info-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
}

.product-delivery-info-list li span {
    color: var(--muted);
}

.product-delivery-info-list li strong {
    color: var(--text);
    font-weight: 700;
}

.product-delivery-info-list li.delivery-free strong {
    color: #198754;
}

.product-share {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    margin-top: 6px;
    flex-wrap: wrap;
}

.product-share h3 {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
    margin: 0;
}

.share-links {
    display: flex;
    gap: 8px;
}

.share-links a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.share-links a[aria-label="Facebook"] { background: #1877f2; }
.share-links a[aria-label="Twitter"]  { background: #1da1f2; }
.share-links a[aria-label="WhatsApp"] { background: #25d366; }

.share-links a:hover { opacity: 0.82; color: #fff; }

/* ── Product Description Card ── */
.product-description {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}

.product-description > h2,
.product-description .pd-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary);
    display: block;
}

/* Prose – WYSIWYG / Summernote content */
.product-description p,
.pd-content p   { font-size: 14px; color: #555; line-height: 1.8; margin: 0 0 12px; }
.pd-content h1  { font-size: 20px; color: #1a1a2e; font-weight: 700; margin: 0 0 10px; }
.pd-content h2  { font-size: 17px; color: #1a1a2e; font-weight: 700; margin: 0 0 10px; border: none; padding: 0; }
.pd-content h3  { font-size: 15px; color: #1a1a2e; font-weight: 700; margin: 0 0 8px; }
.pd-content h4, .pd-content h5, .pd-content h6 { color: #1a1a2e; font-weight: 700; margin: 0 0 8px; }
.pd-content ul, .pd-content ol { padding-left: 20px; margin: 0 0 12px; color: #555; font-size: 14px; line-height: 1.8; }
.pd-content li  { margin-bottom: 4px; }
.pd-content strong, .pd-content b { font-weight: 700; color: #333; }
.pd-content a   { color: var(--primary); text-decoration: underline; }
.pd-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; display: block; }
.pd-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.pd-content table th,
.pd-content table td { border: 1px solid #e0e0e0; padding: 8px 12px; }
.pd-content table th { background: #f5f5f5; font-weight: 700; }
.pd-content blockquote { border-left: 4px solid var(--primary); margin: 12px 0; padding: 10px 16px; background: #fef9f9; color: #555; font-style: italic; }

/* ── Product Reviews Card ── */
/* Product Reviews */
.product-reviews {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}

.reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.reviews-head h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.btn-write-review {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    white-space: nowrap;
    transition: filter 0.2s;
    background: var(--primary);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-write-review:hover {
    filter: brightness(0.9);
    color: #fff;
}

.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 24px;
    align-items: center;
}

.reviews-score-box {
    text-align: center;
    min-width: 120px;
    flex-shrink: 0;
}

.reviews-score {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1;
    margin-bottom: 8px;
}

.reviews-score-box .product-rating {
    justify-content: center;
    margin-bottom: 6px;
}

.reviews-total {
    font-size: 13px;
    color: var(--muted);
}

.reviews-bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}

.review-bar-row > span {
    width: 28px;
    flex-shrink: 0;
}

.review-bar-row em {
    width: 20px;
    text-align: right;
    font-style: normal;
    font-size: 12px;
}

.review-bar {
    flex: 1;
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.review-bar span {
    display: block;
    height: 100%;
    background: #f5b301;
    border-radius: 4px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.review-item {
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: var(--white);
}

.review-item-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.review-author {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.review-date {
    margin-left: auto;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.review-text {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}

.review-form {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
}

.review-form h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}

.review-star-input {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.star-input-btn {
    border: none;
    background: none;
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
}

.star-input-btn.active,
.star-input-btn:hover {
    color: #f5b301;
}

.star-input-btn:active {
    transform: scale(1.1);
}

.review-input,
.review-textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 14px;
    background: var(--white);
}

.review-input:focus,
.review-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.review-textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-submit-review {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--white);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit-review:hover {
    background: var(--primary-dark);
}

/* Review Modal Popup */
.review-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.review-modal[hidden] {
    display: none;
}

.review-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.review-modal-box {
    position: relative;
    width: min(480px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.review-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
}

.review-modal-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
}

.review-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: #f5f5f5;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-modal-close:hover {
    background: #eee;
    color: var(--primary);
}

.review-form--modal {
    border: none;
    border-radius: 0;
    background: var(--white);
    padding: 18px;
}

.related-products {
    padding-bottom: 20px;
}

.related-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 4px solid var(--primary);
}

@media (max-width: 900px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .product-detail-actions {
        flex-direction: column;
    }

    .btn-add-cart,
    .btn-buy-now {
        width: 100%;
    }

    .product-contact-buttons {
        flex-direction: column;
    }

    .contact-btn {
        min-width: 0;
    }
}

/* ---------- Search Page ---------- */
.search-page {
    padding: 20px 0 32px;
}

.search-page-head {
    margin-bottom: 16px;
}

.search-page-head h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.search-results-count {
    font-size: 13px;
    color: var(--muted);
}

.search-page-form {
    margin-bottom: 20px;
}

.search-page-input-wrap {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    overflow: hidden;
    height: 46px;
}

.search-page-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    min-width: 0;
}

.search-page-submit {
    width: 48px;
    height: 100%;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

.search-empty i {
    font-size: 36px;
    color: #ccc;
    margin-bottom: 12px;
}

.search-empty p {
    font-size: 14px;
    line-height: 1.6;
}

/* =============================================
   Mobile App UI — index.html (body.app-home)
   ============================================= */
.mobile-category-scroll,
.nav-overlay {
    display: none;
}

@media (max-width: 767px) {
    .app-home {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        overscroll-behavior-y: contain;
        overflow-x: hidden;
        background: #f2f2f7;
    }

    .app-home .container {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Notice topbar — compact on mobile */
    .notice-ticker {
        height: 34px;
    }

    body.app-home {
        --notice-height: 34px;
    }

    body.app-home.notice-closed {
        --notice-height: 0px;
    }

    body.app-home.no-notice {
        --notice-height: 0px;
    }

    .notice-badge {
        font-size: 9px;
        padding: 0 14px 0 8px;
        gap: 4px;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    }

    .notice-badge i {
        font-size: 10px;
    }

    .notice-text {
        font-size: 11px;
        padding-right: 40px;
    }

    .notice-close {
        width: 32px;
        font-size: 12px;
    }

    /* App header */
    .app-home .site-header {
        position: sticky;
        top: var(--notice-height);
        z-index: 240;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        border-bottom: none;
    }

    .app-home .site-header.is-scrolled {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Category chips — horizontal scroll */
    .app-home .mobile-category-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 14px;
        background: var(--white);
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 86px;
        z-index: 230;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-home .mobile-category-scroll::-webkit-scrollbar {
        display: none;
    }

    .app-home .category-chip {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #f2f2f7;
        color: #333;
        font-size: 13px;
        font-weight: 500;
        border-radius: 20px;
        white-space: nowrap;
        transition: background 0.2s, color 0.2s;
    }

    .app-home .category-chip:active,
    .app-home .category-chip.active {
        background: var(--primary);
        color: var(--white);
    }

    /* Main content */
    .app-home .app-main {
        padding-bottom: 8px;
    }

    .app-home .hero-banner {
        margin-top: 6px;
        margin-bottom: 4px;
        padding: 0;
    }

    .app-home .hero-layout-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

    .app-home .hero-side-banner {
        aspect-ratio: 16 / 10;
        border-radius: 8px;
    }

    .app-home .hero-slider {
        border-radius: 8px;
        background: #f8f8f8;
    }

    .app-home .hero-img {
        max-height: none;
        border-radius: 8px;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .app-home .hero-nav {
        width: 32px;
        height: 32px;
        font-size: 12px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.85);
    }

    .app-home .hero-prev {
        left: 8px;
    }

    .app-home .hero-next {
        right: 8px;
    }

    .app-home .hero-dots {
        bottom: 10px;
    }

    .app-home .hero-dot {
        width: 7px;
        height: 7px;
    }

    .app-home .hero-dot.active {
        width: 18px;
    }

    .app-home .product-section {
        padding: 16px 0;
        background: var(--white);
        margin-bottom: 8px;
        border-radius: 16px 16px 0 0;
    }

    .app-home .product-section + .product-section {
        border-radius: 0;
        margin-top: 8px;
    }

    .app-home .section-head {
        border-bottom: none;
        margin-bottom: 14px;
        padding-bottom: 0;
    }

    .app-home .section-head h2 {
        font-size: 18px;
        text-transform: none;
    }

    .app-home .btn-view-all {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 20px;
    }

    .app-home .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .app-home .product-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .app-home .product-thumb img {
        border-radius: 12px 12px 0 0;
    }

    .app-home .product-body {
        padding: 10px 8px 12px;
    }

    .app-home .product-title {
        font-size: 12px;
        min-height: 32px;
        line-height: 1.35;
    }

    .app-home .product-price {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .app-home .product-actions {
        gap: 6px;
    }

    .app-home .btn-order {
        font-size: 11px;
        padding: 10px 4px;
        border-radius: 8px;
        font-weight: 600;
    }

    .app-home .btn-cart {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .app-home .promo-section {
        padding: 8px 0;
        background: #f2f2f7;
    }

    .app-home .promo-section .container {
        padding: 0 14px;
    }

    .app-home .promo-banner {
        min-height: 0;
        height: auto;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow: visible;
    }

    .app-home .promo-banner-img {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
        border-radius: 14px;
    }

    .app-home .section-cta {
        margin: 16px 0 4px;
    }

    .app-home .btn-load-more {
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        font-size: 14px;
    }

    /* Features — compact horizontal cards */
    .app-home .features-bar {
        margin-top: 0;
        padding: 16px 0;
        border-radius: 16px 16px 0 0;
    }

    .app-home .features-grid {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 0 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-home .features-grid::-webkit-scrollbar {
        display: none;
    }

    .app-home .feature-item {
        flex: 0 0 200px;
        background: rgba(255, 255, 255, 0.12);
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .app-home .feature-item i {
        font-size: 22px;
        margin-top: 0;
    }

    .app-home .feature-item h4 {
        font-size: 14px;
    }

    .app-home .feature-item p {
        font-size: 11px;
    }

    /* Footer — minimal app style */
    .app-home .site-footer {
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
        margin-left: 0;
        margin-right: 0;
        border-radius: 16px 16px 0 0;
        padding-bottom: 0;
        overflow: visible;
    }

    .app-home .site-footer .footer-grid {
        width: 100%;
        max-width: 100%;
        padding: 28px 16px 24px;
        gap: 24px;
        box-sizing: border-box;
    }

    .app-home .footer-about p {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .app-home .footer-logo {
        height: 48px;
    }

    .app-home .footer-grid h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .app-home .footer-grid ul a {
        font-size: 13px;
        display: block;
        line-height: 1.5;
        word-wrap: break-word;
    }

    .app-home .footer-grid ul li {
        margin-bottom: 12px;
    }

    .app-home .footer-bottom {
        font-size: 13px;
        padding: 10px 14px 12px;
        line-height: 1.6;
    }

    /* Bottom tab bar — native app feel */
    .app-home .mobile-bottom-nav {
        display: flex;
        max-width: none;
        border-radius: 0;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 12px 34px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
        background: rgba(255, 255, 255, .80);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        backdrop-filter: blur(18px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .9);
        border-top: 1px solid rgba(255, 255, 255, .9);
    }

    .app-home .mobile-bottom-nav a {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin: 0;
        padding: 0 2px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -.01em;
        color: #4b5563;
        text-align: center;
        text-decoration: none;
        border-radius: 16px;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background-color .18s ease, transform .18s ease;
    }


    .app-home .mobile-bottom-nav a span {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: inherit;
        font-weight: inherit;
        line-height: 1.2;
        color: inherit;
    }
    .app-home .mobile-bottom-nav a:hover,
    .app-home .mobile-bottom-nav a:focus-visible {
        color: var(--primary);
        background-color: rgba(var(--primary-rgb, 223, 45, 77), .08);
    }
    .app-home .mobile-bottom-nav a.active,
    .app-home .mobile-bottom-nav a:active {
        color: var(--primary);
        background-color: rgba(var(--primary-rgb, 223, 45, 77), .12);
    }
    .app-home .mobile-bottom-nav a.active i,
    .app-home .mobile-bottom-nav a:active i {
        color: var(--primary);
    }
    .app-home .mobile-bottom-nav a i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: inherit;
        font-size: 20px;
        line-height: 1;
    }

    .app-home .mobile-bottom-nav a.active {
        color: var(--primary);
        font-weight: 600;
    }

    .app-home .mobile-bottom-nav a.active i {
        box-shadow: none;
    }

    .app-home .nav-badge {
        position: absolute;
        top: -2px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--primary);
        color: var(--white);
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--white);
    }

    /* Category, Search & Product Detail — app pages */
    .app-home .category-banner {
        padding: 18px 0;
        margin-bottom: 8px;
    }

    .app-home .category-banner h1 {
        font-size: 16px;
    }

    .app-home .category-page {
        padding: 16px 0 24px;
        background: var(--white);
        margin-bottom: 8px;
        border-radius: 16px 16px 0 0;
    }

    .app-home .category-page .product-rating {
        margin-bottom: 4px;
    }

    .app-home .category-page .product-rating i {
        font-size: 9px;
    }

    .app-home .category-page .product-meta-row {
        margin-bottom: 8px;
    }

    .app-home .category-page .product-views {
        font-size: 10px;
    }

    .app-home .product-detail-page {
        padding: 16px 0 32px;
        background: #f5f5f5;
        margin-bottom: 0;
        border-radius: 0;
    }

    .app-home .breadcrumb {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .app-home .product-detail-title {
        font-size: 20px;
    }

    .app-home .product-detail-short {
        font-size: 14px;
    }

    .app-home .product-detail-price {
        font-size: 20px;
    }

    .app-home .product-detail-image {
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .app-home .product-attrs {
        padding: 10px 12px;
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .app-home .product-attrs li {
        font-size: 13px;
    }

    .app-home .review-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .app-home .review-modal-box {
        border-radius: 16px 16px 0 0;
        max-height: 85dvh;
    }

    .app-home .review-form {
        display: none;
    }

    .app-home .review-form--modal {
        display: block;
    }

    .app-home .gallery-main {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .app-home .gallery-thumb {
        width: 64px;
        height: 64px;
        border-radius: 10px;
    }

    .app-home .gallery-thumbs-nav {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .app-home .product-reviews {
        background: #fff;
        border-radius: 14px;
        padding: 22px;
        margin-bottom: 20px;
        border-top: none;
    }

    .app-home .reviews-head h2 {
        font-size: 16px;
        color: #1a1a2e;
    }

    .app-home .reviews-summary {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 18px;
        gap: 20px;
    }

    .app-home .reviews-score {
        font-size: 36px;
    }

    .app-home .review-item {
        padding: 14px;
        border-radius: 12px;
    }

    .app-home .review-item-head {
        flex-wrap: wrap;
    }

    .app-home .review-date {
        width: 100%;
        margin-left: 52px;
        margin-top: -4px;
    }

    .app-home .review-form {
        border-radius: 12px;
        padding: 16px;
    }

    .app-home .review-form h3 {
        font-size: 15px;
    }

    .app-home .related-title {
        font-size: 16px;
        text-transform: none;
    }

    .app-home .product-description {
        background: #fff;
        border-radius: 14px;
        padding: 22px;
        margin-bottom: 20px;
        border-top: none;
    }

    .app-home .product-description > h2,
    .app-home .product-description .pd-section-title {
        font-size: 16px;
        border-bottom-width: 2px;
    }

    .app-home .product-description p {
        font-size: 14px;
    }

    .app-home .search-page {
        padding: 16px 0 24px;
        background: var(--white);
        border-radius: 16px 16px 0 0;
    }

    .app-home .search-page-head h1 {
        font-size: 17px;
    }

    .app-home .mobile-category-scroll {
        top: calc(var(--notice-height) + 52px);
    }

    /* 58px matches the bar exactly: 6 top padding + 26 icon (22px at
       line-height 1.2) + 3 gap + 15 label (10px at 1.5) + 6 bottom padding. */
    .app-home {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
}

/* Tablet: show bottom nav but keep desktop header */
@media (min-width: 768px) and (max-width: 900px) {
    .app-home .mobile-category-scroll {
        display: none;
    }
}

/* =============================================
   Auth Pages — login.html & register.html
   ============================================= */
.auth-page,
.service-page {
    background: #f2f2f7;
}

.auth-page .mobile-category-scroll,
.service-page .mobile-category-scroll {
    display: none !important;
}

.auth-main {
    padding: 24px 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell {
    width: min(440px, 100%);
    margin: 0 auto;
}

.auth-card {
    background: var(--white);
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

.auth-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.auth-banner {
    display: none !important;
}

.auth-card-head {
    text-align: center;
    margin-bottom: 24px;
}

.auth-card-head h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.auth-card-head p {
    font-size: 14px;
    color: var(--muted);
}

.auth-field {
    margin-bottom: 16px;
}

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

.auth-field label em {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
}

.auth-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    height: 48px;
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.auth-input-wrap > i {
    color: #aaa;
    font-size: 15px;
    flex-shrink: 0;
}

.auth-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    background: transparent;
    min-width: 0;
}

.auth-input-wrap input.is-invalid {
    color: var(--text);
}

.auth-toggle-pass {
    border: none;
    background: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.auth-toggle-pass:hover {
    color: var(--primary);
}

.auth-error {
    display: block;
    font-size: 12px;
    color: #d32f2f;
    margin-top: 5px;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.auth-error.is-visible {
    opacity: 1;
    min-height: 16px;
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.auth-check-block {
    margin-bottom: 4px;
}

.auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.auth-check a {
    color: var(--primary);
    font-weight: 500;
}

.auth-link {
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: var(--white);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.auth-submit:hover {
    background: var(--primary-dark);
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: #aaa;
    font-size: 13px;
}

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

.auth-social {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.auth-social-btn:hover {
    border-color: #ccc;
    background: #fafafa;
}

.auth-social-btn {
    text-decoration: none;
    color: inherit;
}

.auth-social-fb i {
    color: #1877f2;
}

/* Google official "Sign in with Google" button */
.auth-social-google {
    background-color: #ffffff;
    border: 1px solid #747775;
    border-radius: 20px;
    color: #1f1f1f;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    height: 40px;
    min-width: 0;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.auth-social-google span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.auth-social-google.auth-social-btn:hover {
    border-color: #747775;
    background-color: #f7f7f7;
    color: #1f1f1f;
}

.auth-social-google.auth-social-btn:active {
    background-color: #e8e8e8;
}

.auth-social-google .auth-google-g {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .auth-social {
        grid-template-columns: 1fr;
    }

    .auth-social-google {
        height: 44px;
        font-size: 15px;
    }
}

.auth-switch {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: var(--muted);
}

.auth-switch a {
    color: var(--primary);
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .auth-main {
        padding: 16px 14px 24px;
        align-items: flex-start;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .auth-card-head h1 {
        font-size: 20px;
    }
}

/* =============================================
   Service Pages — order-tracking & complaint
   ============================================= */
.page-hero {
    background: var(--primary);
    color: var(--white);
    padding: 28px 0;
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.page-hero p {
    font-size: 14px;
    opacity: 0.92;
}

.service-page-section {
    padding: 24px 0 32px;
}

.service-card {
    background: var(--white);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    max-width: 520px;
    margin: 0 auto;
}

.service-form .auth-submit i {
    margin-right: 8px;
}

.auth-select-wrap select {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    min-width: 0;
}

.service-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--white);
    border-radius: 12px;
    font-size: 14px;
    color: var(--muted);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.service-help i {
    color: var(--primary);
    font-size: 18px;
}

.service-help a {
    color: var(--primary);
    font-weight: 600;
}

/* Order Tracking Result */
.track-result {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.track-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.track-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
}

.track-result-head strong {
    font-size: 18px;
    color: var(--text);
}

.track-status-badge {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.track-product {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 20px;
}

.track-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.track-step {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

.track-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: #e8e8e8;
}

.track-step.done:not(:last-child)::before {
    background: var(--primary);
}

.track-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: var(--white);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

.track-step.done .track-dot {
    border-color: var(--primary);
    background: var(--primary);
}

.track-step.active .track-dot {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: inset 0 0 0 4px var(--primary);
}

.track-step strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.track-step small {
    font-size: 12px;
    color: var(--muted);
}

.track-empty {
    text-align: center;
    padding: 32px 16px;
    margin-top: 20px;
    color: var(--muted);
}

.track-empty i {
    font-size: 40px;
    color: #ccc;
    margin-bottom: 12px;
}

.track-empty p {
    font-size: 14px;
    line-height: 1.6;
}

.service-card-wide {
    max-width: 720px;
}

.track-order-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-bottom: 20px;
}

.track-order-card:last-child {
    margin-bottom: 0;
}

.track-order-head {
    background: var(--primary);
    color: var(--white);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.track-order-id {
    font-size: 17px;
    font-weight: 700;
}

.track-order-date {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
}

.track-order-body {
    padding: 20px;
}

.track-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.track-meta-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.track-meta-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.track-meta-item h6 {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.4px;
}

.track-meta-item p {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.track-meta-item small {
    font-size: 13px;
    color: var(--muted);
}

.track-items-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.track-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
}

.track-item-row:last-child {
    border-bottom: none;
}

.track-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.track-item-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f8f8f8;
    flex-shrink: 0;
}

.track-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.track-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
}

.track-item-meta span {
    font-size: 11px;
    color: var(--muted);
    background: #f3f3f3;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}

.track-item-price {
    text-align: right;
    flex-shrink: 0;
}

.track-item-price strong {
    display: block;
    font-size: 15px;
    color: var(--text);
}

.track-item-price small {
    font-size: 12px;
    color: var(--muted);
}

.track-order-summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.track-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}

.track-summary-row.total {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 8px;
    margin-bottom: 0;
}

.track-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.track-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.track-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.track-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.track-btn-primary:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.track-cancelled {
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 576px) {
    .track-order-head {
        flex-direction: column;
    }

    .track-order-meta {
        grid-template-columns: 1fr;
    }

    .track-item-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .track-item-price {
        text-align: left;
        padding-left: 60px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .page-hero,
    .track-actions,
    .service-help,
    .notice-ticker,
    .track-screen-only {
        display: none !important;
    }

    .track-print-only {
        display: block !important;
    }
}

/* Complaint Success */
.complaint-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 56px;
    color: #1a8f4c;
    margin-bottom: 16px;
}

.complaint-success h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}

.complaint-success p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}

.complaint-success .success-note {
    margin-bottom: 20px;
}

.success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    max-width: 240px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .page-hero {
        padding: 22px 0;
    }

    .page-hero h1 {
        font-size: 18px;
    }

    .service-card {
        padding: 20px 16px;
        border-radius: 14px;
    }
}

@media (min-width: 768px) {
    .auth-page .auth-header-inner {
        width: min(var(--container), 94%);
        margin: 0 auto;
    }
}

/* =============================================
   Mobile Header style — selected in Admin → General Settings
   body.mobile-header-compact  → compact app bar
     (logo + search / wishlist / cart / menu icons)
   body.mobile-header-classic  → previous mobile header
   Desktop (>=901px) is untouched (icons hidden).
   ============================================= */
.mob-icon-btn {
    display: none;
}

@media (max-width: 900px) {
    body.mobile-header-compact.app-home .mob-icon-btn,
    body.mobile-header-compact.app-home .mobile-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.2s, color 0.2s, transform 0.15s;
    }

    body.mobile-header-compact.app-home .mob-icon-btn:active {
        transform: scale(0.94);
    }

    body.mobile-header-compact.app-home .mob-icon-btn.active {
        background: var(--primary);
        color: var(--white);
    }

    body.mobile-header-classic.app-home .mob-icon-btn {
        display: none;
    }

    body.mobile-header-compact.app-home .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        width: 100%;
        grid-template-columns: initial;
        grid-template-areas: initial;
    }

    body.mobile-header-compact.app-home .header-inner .logo {
        order: 0;
        margin-right: auto;
        justify-self: auto;
        min-width: 0;
    }

    body.mobile-header-compact.app-home .header-inner .logo img {
        height: 42px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
    }

    body.mobile-header-compact.app-home .header-inner .mobile-search-toggle {
        order: 1;
    }

    body.mobile-header-compact.app-home .header-inner .header-actions {
        order: 3;
        margin: 0;
        gap: 8px;
    }

    body.mobile-header-compact.app-home .header-inner .menu-toggle {
        order: 4;
        border-radius: 50%;
    }

    body.mobile-header-compact.app-home .header-inner .mobile-search {
        order: 5;
        flex: 1 1 100%;
        max-width: none;
        display: none;
        margin-top: 2px;
        grid-area: auto;
    }

    body.mobile-header-compact.app-home .header-inner.search-open .mobile-search {
        display: flex;
    }

    body.mobile-header-compact.app-home .cart-wrap .cart-count {
        background: var(--secondary);
        color: var(--white);
        border-color: var(--secondary);
    }

    body.mobile-header-compact.app-home .cart-btn {
        background: var(--primary-soft);
        color: var(--primary);
    }

    body.mobile-header-compact.app-home .cart-btn:hover {
        background: var(--primary);
        color: var(--white);
    }
}

@media (max-width: 480px) {
    body.mobile-header-compact.app-home .header-inner {
        gap: 6px;
        padding: 8px 10px;
    }

    body.mobile-header-compact.app-home .header-inner .logo img {
        height: 38px;
        max-width: 110px;
    }

    body.mobile-header-compact.app-home .header-inner .mob-icon-btn,
    body.mobile-header-compact.app-home .header-inner .menu-toggle,
    body.mobile-header-compact.app-home .header-inner .cart-btn {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    body.mobile-header-compact.app-home .header-inner .header-actions {
        gap: 6px;
    }
}

/* ═══════════════════ Home Quick-Access Deals Strip ═══════════════════ */
.deals-strip {
    padding: 14px 0 0;
}

.deals-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.deals-strip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    position: relative;
}

.deals-strip-card:hover,
.deals-strip-card:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.deals-strip-card--flash { background: linear-gradient(120deg, #c62828, var(--secondary)); }
.deals-strip-card--combo { background: linear-gradient(120deg, #212121, var(--primary-dark)); }
.deals-strip-card--new   { background: linear-gradient(120deg, #f59e0b, #f97316); }

.deals-strip-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 18px;
}

.deals-strip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.deals-strip-text strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

.deals-strip-text small {
    font-size: 12px;
    opacity: .85;
}

.deals-strip-arrow {
    margin-left: auto;
    font-size: 14px;
    opacity: .8;
}

.deals-strip-card::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

@media (max-width: 900px) {
    .deals-strip {
        padding: 10px 0 0;
    }
    .deals-strip-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px;
        min-height: 88px;
    }
    .deals-strip-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .deals-strip-text strong {
        font-size: 13px;
    }
    .deals-strip-arrow {
        position: absolute;
        right: 12px;
        bottom: 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .deals-strip-grid {
        gap: 8px;
    }
    .deals-strip-card {
        padding: 10px;
        min-height: 82px;
    }
    .deals-strip-text small {
        display: none;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--footer-bg, var(--primary-dark));
    color: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding: 48px 16px 36px;
}

.footer-logo {
    height: 60px;
    width: auto;
    margin-bottom: 16px;
}

.footer-about p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 20px;
}

.footer-grid h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

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

.footer-grid ul li {
    margin-bottom: 10px;
}

.footer-grid ul a {
    font-size: 14px;
    opacity: 0.9;
}

.footer-grid ul a:hover {
    opacity: 1;
    text-decoration: underline;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ---------- Footer Newsletter ---------- */
.footer-newsletter p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.7;
    margin-bottom: 16px;
}

.newsletter-form {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    max-width: 340px;
}

.newsletter-form input[type="email"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    padding: 12px 14px;
    font-size: 14px;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
    border: none;
    cursor: pointer;
    padding: 0 18px;
    background: var(--white);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
}

.newsletter-form button:hover {
    background: var(--primary-softer);
}

.newsletter-note {
    margin-top: 10px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.newsletter-note.is-success {
    color: #b7f7c8;
}

.newsletter-note.is-error {
    color: #ffd0d0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--copyright-bg, transparent);
    padding: 18px 16px;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
}

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.footer-credit .fa-heart {
    color: #ef4444;
    font-size: 12px;
}

.footer-bottom a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* ---------- Footer responsive ---------- */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .newsletter-form {
        flex-wrap: wrap;
    }

    .newsletter-form input[type="email"] {
        flex: 1 0 100%;
    }

    .newsletter-form button {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/* ── আমাদের অঙ্গপ্রতিষ্ঠানসমূহ (homepage) ─────────────────────────────
   The section reuses the MERCHANT SHOPS card classes end to end; only
   the description line is specific to it. */
.ourbiz-card .ourbiz-desc {
    font-size: 11.5px;
    color: #6b6b6b;
    line-height: 1.45;
    margin: -2px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ourbiz-card--plain {
    cursor: default;
}

.ourbiz-card--plain:hover {
    transform: none;
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.08);
}

/* The description is optional, so a brand without one would otherwise show
   its Visit Site button higher up than the brands that have one. Push the
   button to the bottom of the card so they all line up on one baseline. */
.ourbiz-card {
    display: flex;
    flex-direction: column;
    /* Accent edge follows the admin Theme Appearance primary colour so this
       section recolours together with the rest of the site. Declared after
       .merchant-vendor-card so it wins the cascade at equal specificity. */
    border: 0.75px solid var(--primary);
}

.ourbiz-card:hover {
    border-color: var(--primary-dark);
}

.ourbiz-card .vendor-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ourbiz-card .vendor-visit-btn {
    margin-top: auto;
}

/* Visit Site — solid black pill with white text (merchant cards keep their
   white button, so this is scoped to our own cards). */
.ourbiz-card .vendor-visit-btn,
.ourbiz-card:hover .vendor-visit-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ourbiz-card:hover .vendor-visit-btn {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* =========================================================================
   Product listing fixes — responsive grid, uniform cards, horizontal
   pagination. Appended last so it wins the cascade over earlier rules.
   ========================================================================= */

/* --- Grid: let every card stretch to fill its cell evenly --- */
.product-grid {
    align-items: stretch;
}

.product-grid > .product-card {
    height: 100%;
}

.product-grid--shop,
.product-grid--category {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
}

/* --- Card: fixed 2-line title + aligned action buttons --- */
.product-card .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    max-height: 2.4em;
}

.product-card .btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.product-card .btn-cart {
    align-self: stretch;
    height: auto;
    min-height: 40px;
    width: 42px;
}

/* --- Pagination: horizontal & centered even without Bootstrap CSS --- */
.shop-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 28px;
}

.shop-pagination nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.pagination .page-item {
    display: block;
    list-style: none;
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.pagination .page-item.disabled .page-link {
    color: #bbb;
    background: #f7f7f7;
    border-color: var(--border);
    cursor: default;
}

@media (hover: hover) {
    .pagination .page-link:hover {
        background: rgba(var(--primary-rgb), 0.07);
        color: var(--primary);
        border-color: var(--primary);
    }
}

/* --- Responsive breakpoints --- */
@media (max-width: 1100px) {
    .product-grid--shop,
    .product-grid--category {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .product-grid {
        gap: 10px;
    }

    .product-grid--shop,
    .product-grid--category {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card .btn-order {
        min-height: 34px;
        font-size: 12px;
    }

    .product-card .btn-cart {
        min-height: 34px;
        width: 38px;
    }

    .shop-pagination {
        margin-top: 20px;
    }

    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 13px;
    }
}

@media (max-width: 900px) {
    .mobile-bottom-nav > a,
    .mobile-bottom-nav > a.nav-home {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 46px;
        margin: 0;
        padding: 0 2px;
        order: 0;
    }

    .mobile-bottom-nav > a.nav-home::before {
        display: none;
    }

    .mobile-bottom-nav > a.nav-home i,
    .app-home .mobile-bottom-nav > a.nav-home i {
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
}