/*
 * The website's own CSS (public/index.html links it; the server adds ?v=<hash> and caches it a year).
 * 1. React Native Web's page reset (was inline in Expo's default index.html — no inline style here).
 * 2. Hind Siliguri, subset WOFF2 (tools/subset-fonts.py): Bangla and Latin parts, only the part a page
 *    uses is downloaded, text shows at once in the phone's font and swaps when the font arrives.
 *    Family names = the app's (tailwind.config.js fontFamily), so the app uses these files on the web.
 * 3. The server's first view (#ssr, server/views.ts) — colours only from the theme variables the
 *    server writes (/web/theme-<hash>.css, made by src/theme/palette.ts).
 * 4. The hand-over: while the first view is up the app draws hidden underneath; when its screen is
 *    ready it adds html.app-ready (src/lib/web/handoff.ts) and the first view goes — no jump.
 */

/* 1 */
html,
body {
  height: 100%;
}
body {
  overflow: hidden;
  margin: 0;
}
#root {
  display: flex;
  height: 100%;
  flex: 1;
}

/* 2 */
@font-face {
  font-family: 'HindSiliguri_400Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-siliguri-400-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'HindSiliguri_400Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'HindSiliguri_500Medium';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-siliguri-500-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'HindSiliguri_500Medium';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'HindSiliguri_600SemiBold';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-siliguri-600-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'HindSiliguri_600SemiBold';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'HindSiliguri_700Bold';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-siliguri-700-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'HindSiliguri_700Bold';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The first view's own family: the SAME files, but font-display: optional — if the font is not there
 * at first paint (it is preloaded, so usually it is) the phone's font stays for this view: text never
 * jumps (layout shift) while the shopper reads. The app's families above swap as usual.
 */
@font-face {
  font-family: 'ShopFirstView';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/hind-siliguri-400-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'ShopFirstView';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ShopFirstView';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/hind-siliguri-700-bn.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'ShopFirstView';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 4 */
html.ssr:not(.app-ready) #root {
  visibility: hidden;
}
html.app-ready #ssr {
  display: none;
}

/* 3 */
.ssr {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: 'ShopFirstView', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
/* plan 18 #203(গ): `div.ssr` — the page's <html> carries the class "ssr" too; these must never reach the app's own
   h1 / links (the product name was 20 px after a refresh, 23 px when opened inside the app). */
div.ssr a {
  color: inherit;
  text-decoration: none;
}
div.ssr h1,
div.ssr h2,
div.ssr b {
  font-weight: 700;
}
div.ssr h1 {
  font-size: 20px;
  line-height: 1.35;
  margin: 8px 0 6px;
}
div.ssr h2 {
  font-size: 17px;
  margin: 20px 0 10px;
}
/* #7: the same headers as the app (phone: HomeHeader / ProductTopBar / brand bar; computer: DesktopHeader + DesktopHero). */
.ssr-top,
.ssr-ptop {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  background: rgb(var(--brand));
  color: rgb(var(--on-brand));
}
.ssr-top {
  justify-content: space-between;
  height: 56px;
  padding: 0 8px 0 16px;
}
.ssr-ptop {
  gap: 4px;
  height: 54px;
  padding: 0 6px;
}
.ssr-htop {
  padding: 10px 16px 16px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)));
  color: rgb(var(--on-brand));
}
.ssr-htop .ssr-brand {
  margin-bottom: 12px;
}
.ssr-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ssr-logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  object-fit: contain;
}
.ssr-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgb(var(--on-brand));
  color: rgb(var(--brand));
  font-weight: 700;
  font-size: 18px;
}
.ssr-name {
  font-weight: 700;
  font-size: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssr-actions {
  display: flex;
  gap: 4px;
}
.ssr-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.ssr-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgb(var(--surface));
  color: rgb(var(--muted));
  box-shadow: 0 2px 6px rgb(var(--scrim) / 0.12);
  white-space: nowrap;
  overflow: hidden;
}
.ssr-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssr-pill-sm {
  flex: 1;
  min-width: 0;
  height: 36px;
  margin: 0 4px;
  padding: 0 12px;
  font-size: 14px;
  box-shadow: none;
}
.ssr-pill-sm svg {
  width: 16px;
  height: 16px;
}
.ssr-dtop,
.ssr-hero {
  display: none;
}
.ssr-dbar {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  height: 68px;
  margin: 0 auto;
  padding: 0 16px;
}
.ssr-dcat {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.ssr-dsearch,
.ssr-hsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgb(var(--surface));
  color: rgb(var(--muted));
  border-radius: 999px;
}
.ssr-dsearch {
  flex: 1;
  min-width: 0;
  max-width: 620px;
  height: 44px;
  padding: 0 16px;
}
.ssr-dsearch input,
.ssr-hsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgb(var(--text));
  font: inherit;
}
.ssr-dgrow {
  flex: 1;
}
.ssr-dnav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.ssr-dact {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
}
.ssr-hero-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.ssr-hsearch {
  width: 100%;
  max-width: 720px;
  height: 56px;
  padding: 0 20px;
  font-size: 17px;
}
.ssr-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.ssr-crumbs {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 0 2px;
  font-size: 13px;
  color: rgb(var(--muted));
}
.ssr-crumbs i {
  font-style: normal;
}
.ssr-product {
  display: block;
}
.ssr-gallery {
  margin: 0 -16px;
  aspect-ratio: 1 / 1;
  background: rgb(var(--surface-2));
  overflow: hidden;
}
.ssr-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssr-price {
  margin: 6px 0;
  font-size: 15px;
}
.ssr-price b {
  font-size: 22px;
  color: rgb(var(--price));
}
.ssr-price s {
  color: rgb(var(--muted));
  margin-left: 6px;
}
.ssr-off {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgb(var(--deal) / 0.15);
  color: rgb(var(--deal));
  font-size: 13px;
}
.ssr-stock,
.ssr-cod,
.ssr-muted {
  margin: 4px 0;
  color: rgb(var(--muted));
  font-size: 14px;
}
.ssr-stock {
  color: rgb(var(--success));
}
.ssr-options {
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.ssr-short,
.ssr-desc,
.ssr-text {
  overflow-wrap: anywhere;
}
.ssr-desc {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgb(var(--border));
}
.ssr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
.ssr-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
}
.ssr-card img,
.ssr-noimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgb(var(--surface-2));
}
.ssr-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 8px 0;
  font-size: 14px;
  line-height: 1.4;
  min-height: 2.8em;
}
.ssr-card .ssr-price {
  margin: 2px 8px 8px;
}
.ssr-card .ssr-off {
  display: none;
}
.ssr-card .ssr-price b {
  font-size: 16px;
}
.ssr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.ssr-chips a {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  font-size: 14px;
}
.ssr-banner {
  display: block;
  margin: 12px 0 4px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 720 / 300;
  background: rgb(var(--surface-2));
}
.ssr-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssr-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.ssr-pager a {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  color: rgb(var(--link));
}
/* Sohel 29 Oct (refresh jump): the Categories page = the app's Categories screen (server/categories-first-screen.ts).
   Sizes follow the app on the web (1rem = 16px): TopBar h-14, CategoryRail w-[92px] / h-11 / text 10.5,
   CategoryGroup p-4 gap-6 / "See all" Button light sm, CategoryTile h-14 rounded-xl / text 11.5. */
.ssr-tbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: content-box;
  height: 56px;
  padding: 0 12px;
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
}
div.ssr .ssr-tbar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16.5px;
  line-height: 23px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssr-tbar nav {
  display: flex;
}
.ssr-ibtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.ssr-categories .ssr-main {
  padding: 0;
}
.ssr-catcols {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 57px);
}
.ssr-crail {
  flex: none;
  width: 92px;
  padding-bottom: 112px;
  background: rgb(var(--surface-2));
}
.ssr-crail a {
  display: flex;
  align-items: stretch;
}
.ssr-crail a.on {
  background: rgb(var(--surface));
}
.ssr-crail i {
  flex: none;
  width: 3px;
  margin: 8px 0;
  border-radius: 0 999px 999px 0;
}
.ssr-crail a.on i {
  background: rgb(var(--brand));
}
.ssr-crail a > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
}
.ssr-crail img,
.ssr-crail b {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.ssr-crail img {
  object-fit: cover;
  background: rgb(var(--surface-2));
}
.ssr-crail b {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
}
.ssr-crail small,
.ssr-cgtiles span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  text-align: center;
}
.ssr-crail small {
  font-size: 10.5px;
  line-height: 14px;
}
.ssr-crail a.on small {
  font-weight: 700;
  color: rgb(var(--brand));
}
.ssr-cgroups {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 16px 112px;
}
.ssr-cgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ssr-cghead {
  display: flex;
  align-items: center;
  gap: 8px;
}
div.ssr .ssr-cghead h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssr-seeall {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid rgb(var(--border));
  border-radius: 8px;
  background: rgb(var(--surface));
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.ssr-seeall svg {
  color: rgb(var(--link));
}
.ssr-cgtiles {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
}
.ssr-cgtiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 33.3333%;
  font-size: 11.5px;
  line-height: 16px;
}
.ssr-cgtiles img,
.ssr-cgtiles em,
.ssr-cgtiles b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.ssr-cgtiles img,
.ssr-cgtiles em {
  object-fit: cover;
  background: rgb(var(--surface-2));
}
.ssr-cgtiles b {
  font-size: 19px;
  line-height: 26px;
}
/* a letter tile's tone (theme/tones TONE_CLASSES: the colour at 15 %, the letter in the colour) */
.ssr-tone-amber {
  background: rgb(var(--amber) / 0.15);
  color: rgb(var(--amber));
}
.ssr-tone-rose {
  background: rgb(var(--rose) / 0.15);
  color: rgb(var(--rose));
}
.ssr-tone-violet {
  background: rgb(var(--violet) / 0.15);
  color: rgb(var(--violet));
}
.ssr-tone-sky {
  background: rgb(var(--sky) / 0.15);
  color: rgb(var(--sky));
}
.ssr-tone-mint {
  background: rgb(var(--mint) / 0.15);
  color: rgb(var(--mint));
}
.ssr-tone-clay {
  background: rgb(var(--clay) / 0.15);
  color: rgb(var(--clay));
}
@media (min-width: 1024px) {
  .ssr-catcols {
    min-height: 0;
  }
  .ssr-cgtiles a {
    width: 16.6667%;
  }
}
.ssr-404 {
  padding: 40px 0;
  text-align: center;
}
.ssr-search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 18px auto;
}
.ssr-search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--text));
  font: inherit;
}
.ssr-search button {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--buy));
  color: rgb(var(--on-buy));
  font: inherit;
}
.ssr-foot {
  max-width: 1240px;
  margin: 24px auto 0;
  padding: 16px 16px 32px;
  border-top: 1px solid rgb(var(--border));
  color: rgb(var(--muted));
  font-size: 13px;
}
.ssr-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.ssr-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (min-width: 640px) {
  .ssr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* plan 18 #184: buy from the first view — colour / size chips and Order Now (phone: the bottom bar like the app's dock). */
.ssr-vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.ssr-vars-name {
  width: 100%;
  color: rgb(var(--muted));
  font-size: 14px;
}
.ssr-var {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  font-size: 14px;
}
.ssr-var-out {
  color: rgb(var(--muted));
  text-decoration: line-through;
}
div.ssr a.ssr-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgb(var(--buy));
  color: rgb(var(--on-buy));
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
article.ssr-product {
  padding-bottom: 64px;
}

/* plan 18 #203(ছ): the product page's delivery block, design C (DeliveryCard): one line + the promise badges. */
.ssr-dlv {
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid rgb(var(--border));
  border-radius: 14px;
  background: rgb(var(--surface));
}
.ssr-dlv-line {
  display: flex;
  align-items: center;
  gap: 11.25px;
  padding: 11.25px 13.125px;
}
.ssr-dlv-line > svg:first-child {
  flex: none;
  color: rgb(var(--buy));
}
.ssr-dlv-line > svg:last-child {
  flex: none;
  color: rgb(var(--muted));
}
.ssr-dlv-words {
  flex: 1;
  min-width: 0;
}
.ssr-dlv-words b {
  display: block;
  font-size: 14px;
  line-height: 20px;
}
.ssr-dlv-words span {
  display: block;
  margin-top: 1.875px;
  color: rgb(var(--muted));
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-dlv-badges {
  display: flex;
  border-top: 1px solid rgb(var(--border));
}
.ssr-dlv-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.625px;
  padding: 11.25px 7.5px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
}
.ssr-dlv-badge + .ssr-dlv-badge {
  border-left: 1px solid rgb(var(--border));
}
.ssr-dlv-badge svg {
  color: rgb(var(--success));
}
.ssr-dlv-n1 .ssr-dlv-badge {
  flex-direction: row;
  justify-content: center;
}

/* plan 18 #153: the phone Home's hero (PhoneHero) — first banner 4:3 edge to edge, the Theme colour behind it. */
.ssr-phero {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgb(var(--brand));
}
.ssr-phero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssr-phero img.ssr-whole {
  object-fit: contain;
}
.ssr-phero-top {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 24px;
  background: linear-gradient(rgb(var(--scrim) / 0.55), rgb(var(--scrim) / 0));
}
/* #155: the glass search box on a picture — light white + blur, the strength from Theme (--glass). */
.ssr-pill-glass {
  background: rgb(var(--surface) / var(--glass, 0.7));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgb(var(--text));
}
.ssr-ptabs {
  display: flex;
  gap: 16px;
  overflow: hidden;
  padding: 6px 2px;
  white-space: nowrap;
  color: rgb(var(--on-deal));
  font-size: 15px;
}
.ssr-ptabs .on {
  font-weight: 700;
  border-bottom: 2px solid rgb(var(--on-deal));
}
.ssr-dk {
  display: none;
}

/* Sohel 28 Oct (refresh jump): the phone Home's first screen as the app draws it — server/home-first-screen.ts.
   Sizes follow the app (TrustRow, QuickIcons, SeasonStrip, ServicesRow, CollectionGrid); icons come with the app. */
.ssr-pdots {
  position: absolute;
  inset: auto 0 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ssr-pdots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgb(var(--on-deal) / 0.5);
}
.ssr-pdots i.on {
  width: 18px;
  background: rgb(var(--on-deal));
}
.ssr-trust,
.ssr-quick,
.ssr-season,
.ssr-services,
.ssr-tiles {
  margin: 0 -16px;
}
/* Sohel 29 Oct: ONE line like the app's TrustRow (same 16 px line, 10 px above) — still and centred when it fits; a
   slow ticker (28 px a second, the app's speed) when the words are wider than the screen. The first HTML cannot
   measure: the server guesses the words' width (lib/ticker) and adds .ssr-tw-N = "moves on a screen narrower than
   N px" (-max = always); three copies, the track moves by one. Held while pressed; reduce motion = it never moves,
   the finger scrolls it. */
.ssr-trust {
  overflow: hidden;
  container-type: inline-size;
  padding: 10px 16px 0;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.ssr-trust-track {
  display: flex;
  width: max-content;
  margin: 0 auto;
}
.ssr-trust p {
  display: flex;
  gap: 12px;
  margin: 0;
}
.ssr-trust p + p {
  display: none;
}
.ssr-trust span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -3px;
}
@keyframes ssr-tick {
  to {
    transform: translateX(-33.3333%);
  }
}
@container (max-width: 279.98px) {
  .ssr-tw-280 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 11.1s linear infinite;
  }
  .ssr-tw-280 p {
    padding-right: 32px;
  }
  .ssr-tw-280 p + p {
    display: flex;
  }
}
@container (max-width: 299.98px) {
  .ssr-tw-300 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 11.9s linear infinite;
  }
  .ssr-tw-300 p {
    padding-right: 32px;
  }
  .ssr-tw-300 p + p {
    display: flex;
  }
}
@container (max-width: 319.98px) {
  .ssr-tw-320 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 12.6s linear infinite;
  }
  .ssr-tw-320 p {
    padding-right: 32px;
  }
  .ssr-tw-320 p + p {
    display: flex;
  }
}
@container (max-width: 339.98px) {
  .ssr-tw-340 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 13.3s linear infinite;
  }
  .ssr-tw-340 p {
    padding-right: 32px;
  }
  .ssr-tw-340 p + p {
    display: flex;
  }
}
@container (max-width: 359.98px) {
  .ssr-tw-360 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 14.0s linear infinite;
  }
  .ssr-tw-360 p {
    padding-right: 32px;
  }
  .ssr-tw-360 p + p {
    display: flex;
  }
}
@container (max-width: 379.98px) {
  .ssr-tw-380 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 14.7s linear infinite;
  }
  .ssr-tw-380 p {
    padding-right: 32px;
  }
  .ssr-tw-380 p + p {
    display: flex;
  }
}
@container (max-width: 399.98px) {
  .ssr-tw-400 .ssr-trust-track {
    margin: 0;
    animation: ssr-tick 15.4s linear infinite;
  }
  .ssr-tw-400 p {
    padding-right: 32px;
  }
  .ssr-tw-400 p + p {
    display: flex;
  }
}
.ssr-tw-max .ssr-trust-track {
  margin: 0;
  animation: ssr-tick 16s linear infinite;
}
.ssr-tw-max p {
  padding-right: 32px;
}
.ssr-tw-max p + p {
  display: flex;
}
.ssr-trust:active .ssr-trust-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ssr-trust {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ssr-trust .ssr-trust-track {
    animation: none;
  }
  .ssr-trust p + p {
    display: none;
  }
}
.ssr-quick,
.ssr-services nav,
.ssr-tiles div {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.ssr-quick {
  gap: 8px;
  padding: 12px 16px 0;
}
.ssr-quick a,
.ssr-services a {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 66px;
  font-size: 10.5px;
  line-height: 14px;
  text-align: center;
}
.ssr-quick i,
.ssr-services i {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.ssr-q-coins {
  background: rgb(var(--gold) / 0.15);
}
.ssr-q-flash {
  background: rgb(var(--deal) / 0.15);
}
.ssr-q-offers {
  background: rgb(var(--buy) / 0.15);
}
.ssr-q-coupons {
  background: rgb(var(--price) / 0.15);
}
.ssr-q-gifts {
  background: rgb(var(--rose) / 0.15);
}
.ssr-q-club {
  background: rgb(var(--violet) / 0.15);
}
.ssr-season {
  margin-top: 12px;
  margin-left: 0;
  margin-right: 0;
  padding: 12px;
  border: 1px solid rgb(var(--border));
  border-radius: 12px;
  background: rgb(var(--surface));
}
.ssr-season p {
  margin: 0;
  padding-left: 28px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
}
.ssr-season div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ssr-season a {
  padding: 6px 14px;
  border: 1px solid rgb(var(--border));
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
}
.ssr-services {
  padding: 12px 16px 0;
}
.ssr-services p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
}
.ssr-services nav {
  gap: 12px;
}
.ssr-services a {
  width: 68px;
}
.ssr-services i {
  background: rgb(var(--surface));
}
.ssr-tiles {
  padding-top: 16px;
}
.ssr-tiles h2 {
  margin: 0 16px 10px;
  font-size: 16.5px;
  line-height: 23px;
}
.ssr-tiles div {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: 78px;
  gap: 12px 4px;
  padding: 0 12px;
}
.ssr-tiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 16px;
  text-align: center;
}
.ssr-tiles img,
.ssr-tiles b {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}
.ssr-tiles b {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--brand-soft));
  font-size: 20px;
}
@media (min-width: 1024px) {
  .ssr-top,
  .ssr-ptop,
  .ssr-tbar,
  .ssr-htop,
  .ssr-phero,
  .ssr-ph {
    display: none;
  }
  .ssr-tiles div {
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr);
  }
  .ssr-banner.ssr-dk {
    display: block;
  }
  .ssr-chips.ssr-dk {
    display: flex;
  }
  .ssr-dtop {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgb(var(--brand));
    color: rgb(var(--on-brand));
    box-shadow: 0 2px 8px rgb(var(--scrim) / 0.15);
  }
  .ssr-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 220px;
    padding: 0 24px;
    background: rgb(var(--brand));
    color: rgb(var(--on-brand));
  }
  .ssr-crumbs {
    display: flex;
  }
  /* #184: the article only — the page's root also carries ssr-product (its kind), which must not become the grid. */
  article.ssr-product {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 32px;
    margin-top: 12px;
    padding-bottom: 0;
  }
  div.ssr a.ssr-buy {
    position: static;
    display: inline-block;
    margin: 10px 0;
    padding: 12px 40px;
    border-radius: 12px;
  }
  .ssr-gallery {
    margin: 0;
    border-radius: 16px;
  }
  .ssr-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/*
 * #45 (plan/18): a text box is ONE box — the app draws the outer one (components/checkout/FormField); the
 * browser's own focus ring, inner background and autofill colours are turned off for every input in the app.
 * plan 18 #165: sheets (district search, coupon, filters) are drawn OUTSIDE #root — React Native Web's Modal is a
 * portal on <body> — so the reset covers them too ([aria-modal="true"]); no inner black border / ring there.
 */
#root input,
#root textarea,
[aria-modal="true"] input,
[aria-modal="true"] textarea {
  outline: none;
  border: 0;
  background-color: transparent;
}
#root input::-webkit-search-decoration,
#root input::-webkit-search-cancel-button,
[aria-modal="true"] input::-webkit-search-decoration,
[aria-modal="true"] input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#root input:-webkit-autofill,
#root input:-webkit-autofill:hover,
#root input:-webkit-autofill:focus,
[aria-modal="true"] input:-webkit-autofill,
[aria-modal="true"] input:-webkit-autofill:hover,
[aria-modal="true"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--text));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--surface)) inset;
  caret-color: rgb(var(--text));
  transition: background-color 9999s ease-out 0s;
}

/*
 * plan 18 #202: no scroll bar anywhere in the shop (rows, sheets, pages) — a mouse drags the sideways rows
 * (hooks/useDragScroll.web), the wheel / trackpad / finger still scroll everything. While a row is dragged the page
 * carries html.shop-dragging: no text gets painted (selected) and the hand shows "grabbing".
 */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
html.shop-dragging,
html.shop-dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: grabbing !important;
}

/*
 * plan 18 #203(খ, গ) — Sohel 28 Oct: the wide header logo, and on a computer the first HTML = the app's first desktop
 * render (server/desktop-parts.ts): DesktopHeader, Home's hero inside the page, the season strip and services before the
 * banner, the product page's two columns (gallery + info, the right column's place), the category's name bar / top row /
 * sort row / six a row, product cards like ProductCard. Sizes = the app's (its units are 3.75 px). Phone parts first,
 * the computer's in the media block below. Corners: --radius (theme-css.ts, the site's "Corners").
 */
.ssr-wlogo {
  display: flex;
  align-items: center;
  flex: none;
  width: 170px;
  height: 36px;
}
.ssr-wlogo img {
  display: block;
  width: 170px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}
.ssr-wlogo .ssr-wl-d {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme='light']) .ssr-wlogo .ssr-wl-l {
    display: none;
  }
  :root:not([data-scheme='light']) .ssr-wlogo .ssr-wl-d {
    display: block;
  }
}
:root[data-scheme='dark'] .ssr-wlogo .ssr-wl-l {
  display: none;
}
:root[data-scheme='dark'] .ssr-wlogo .ssr-wl-d {
  display: block;
}
.ssr-gone {
  display: none !important;
}
/* the cart / search pages: the computer's header only — a phone sees the app as before */
@media (max-width: 1023.98px) {
  .ssr-donly {
    display: none;
  }
  html:has(.ssr-donly) #root {
    visibility: visible;
  }
}
.ssr-lensbtn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: rgb(var(--link));
}

/* the season strip (ramadan line + festival card) and the services' icons — phone and computer */
.ssr-seasons {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  padding-top: 11.25px;
}
.ssr-seasons .ssr-season {
  position: relative;
  margin: 0;
  padding: 11.25px;
  border-radius: var(--radius, 11.25px);
}
.ssr-season > svg {
  position: absolute;
  left: 11.25px;
  top: 11.25px;
  color: rgb(var(--brand));
}
.ssr-seasons .ssr-season p {
  min-height: 20px;
  padding-left: 27.5px;
  line-height: 20px;
}
.ssr-seasons .ssr-season div {
  gap: 7.5px;
  margin-top: 7.5px;
}
.ssr-seasons .ssr-season a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11.25px;
  border-radius: 7.5px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 700;
}
.ssr-ramadan {
  display: flex;
  align-items: center;
  gap: 11.25px;
  padding: 11.25px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius, 11.25px);
  background: rgb(var(--surface));
}
.ssr-ramadan > svg:first-child {
  flex: none;
  color: rgb(var(--brand));
}
.ssr-ramadan > svg:last-child {
  flex: none;
  color: rgb(var(--muted));
}
.ssr-ramadan span {
  flex: 1;
  min-width: 0;
}
.ssr-ramadan b {
  display: block;
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-ramadan small {
  display: block;
  color: rgb(var(--muted));
  font-size: 10.5px;
  line-height: 14px;
}
.ssr-services i {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--surface));
  color: rgb(var(--brand));
}
.ssr-services em {
  position: absolute;
  right: 1.875px;
  top: 1.875px;
  width: 9.375px;
  height: 9.375px;
  border-radius: 50%;
  background: rgb(var(--danger));
}

/*
 * plan 18 #98 (Sohel 29 Oct, no jump): the "from an ad" card (AdFirstCard) — mt-3, p-3, gap-2, a 20×20 (75 px) picture
 * with gap-3, name sm semibold (2 lines), price md bold, two small buttons (h-8) — the app's sizes (3.75 px units).
 */
.ssr-adfirst {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  margin-top: 11.25px;
  padding: 11.25px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius, 11.25px);
  background: rgb(var(--surface));
}
.ssr-adfirst small {
  color: rgb(var(--muted));
  font-size: 10.5px;
  line-height: 14px;
}
.ssr-adf-p {
  display: flex;
  gap: 11.25px;
}
.ssr-adf-p img,
.ssr-adf-p i {
  flex: none;
  width: 75px;
  height: 75px;
  border-radius: var(--radius, 11.25px);
  background: rgb(var(--surface-2));
  object-fit: cover;
}
.ssr-adf-p > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3.75px;
  min-width: 0;
}
.ssr-adf-p b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
}
.ssr-adf-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7.5px;
}
.ssr-adf-price strong {
  color: rgb(var(--price));
  font-size: 14px;
  line-height: 20px;
}
.ssr-adf-price s,
.ssr-adf-price em {
  font-size: 11.5px;
  line-height: 16px;
  font-style: normal;
}
.ssr-adf-price s {
  color: rgb(var(--muted));
}
.ssr-adf-price em {
  color: rgb(var(--deal));
  font-weight: 600;
}
.ssr-adf-btns {
  display: flex;
  gap: 7.5px;
}
.ssr-adf-btns a,
.ssr-adf-btns span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11.25px;
  border: 1px solid rgb(var(--buy));
  border-radius: 7.5px;
  background: rgb(var(--buy));
  color: rgb(var(--on-buy));
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
}
.ssr-adf-btns span {
  border-color: rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--text));
}

/* the product card (ProductCard): square picture, one line of name, the price line, chips, "N sold", "only N left" */
.ssr-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius, 11.25px);
}
.ssr-cpic {
  position: relative;
  display: block;
}
.ssr-cwish,
.ssr-cadd {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(var(--surface) / 0.9);
}
.ssr-cwish {
  right: 5.625px;
  top: 5.625px;
  width: 30px;
  height: 30px;
  color: rgb(var(--muted));
}
.ssr-cadd {
  right: 5.625px;
  bottom: 5.625px;
  width: 33.75px;
  height: 33.75px;
  border: 2px solid rgb(var(--brand-soft));
  background: rgb(var(--surface));
  color: rgb(var(--brand-soft));
  box-shadow: 0 1px 2px rgb(var(--scrim) / 0.05);
}
.ssr-cout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--surface) / 0.4);
}
.ssr-cout i {
  padding: 3.75px 11.25px;
  border-radius: 999px;
  background: rgb(var(--scrim) / 0.7);
  color: rgb(var(--on-deal));
  font-size: 11.5px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
}
.ssr-cbody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.875px;
  padding: 5.625px 7.5px 7.5px;
}
.ssr-card .ssr-card-name {
  display: block;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ssr-cprice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5.625px;
}
.ssr-cprice b {
  color: rgb(var(--brand-soft));
  font-size: 16.5px;
  line-height: 23px;
}
.ssr-cprice s,
.ssr-cprice em {
  font-size: 11.5px;
  line-height: 16px;
  font-style: normal;
}
.ssr-cprice s {
  color: rgb(var(--muted));
}
.ssr-cprice em {
  color: rgb(var(--deal));
  font-weight: 700;
}
.ssr-cbadges,
.ssr-cchips {
  display: flex;
  flex-wrap: wrap;
  gap: 3.75px;
}
.ssr-cbadges i,
.ssr-cchips i {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 3.75px;
  border-radius: 3.75px;
  font-size: 10.5px;
  line-height: 14px;
  font-style: normal;
  font-weight: 700;
}
.ssr-cchips i {
  height: 18.75px;
  padding: 0 5.625px;
  border-radius: 5.625px;
}
.ssr-cb-free,
.ssr-cc-free_delivery {
  background: rgb(var(--success) / 0.15);
  color: rgb(var(--success));
}
.ssr-cb-coins,
.ssr-cc-cashback,
.ssr-cc-mix_match,
.ssr-cc-bundle {
  background: rgb(var(--gold) / 0.15);
  color: rgb(var(--gold));
}
.ssr-cc-gift {
  background: rgb(var(--violet) / 0.15);
  color: rgb(var(--violet));
}
.ssr-cc-bogo,
.ssr-cc-group_buy {
  background: rgb(var(--deal) / 0.15);
  color: rgb(var(--deal));
}
.ssr-cc-app,
.ssr-cc-tier {
  background: rgb(var(--link) / 0.15);
  color: rgb(var(--link));
}
.ssr-cc-own {
  border: 1px dashed rgb(var(--price) / 0.6);
  color: rgb(var(--price));
}
.ssr-cstats {
  display: flex;
  align-items: center;
  gap: 3.75px;
  overflow: hidden;
  color: rgb(var(--muted));
  font-size: 11.5px;
  line-height: 16px;
  white-space: nowrap;
}
.ssr-cstats svg {
  color: rgb(var(--gold));
}
.ssr-cstats b {
  color: rgb(var(--text));
}
.ssr-cleft {
  color: rgb(var(--deal));
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
}

/* the category page (CategoryScreen): name, "which one is for you", top row, sort row, count */
.ssr-cname h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ssr-pick {
  display: flex;
  align-items: center;
  gap: 7.5px;
  margin-top: 11.25px;
  padding: 11.25px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius, 11.25px);
  background: rgb(var(--surface));
}
.ssr-pick > svg:first-child {
  flex: none;
  color: rgb(var(--brand));
}
.ssr-pick > svg:last-child {
  flex: none;
  color: rgb(var(--muted));
}
.ssr-pick b {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-toprow {
  padding: 15px 0 7.5px;
}
.ssr .ssr-toprow h2 {
  margin: 0 0 9.375px;
  font-size: 16.5px;
  line-height: 23px;
}
.ssr-rail {
  position: relative;
  margin: 0 -16px;
}
.ssr-rail ul {
  display: flex;
  gap: 9.375px;
  margin: 0;
  padding: 0 16px;
  overflow: hidden;
  list-style: none;
}
.ssr-rail li {
  flex: none;
  width: 156px;
}
.ssr-rarrow {
  display: none;
}
.ssr-sorts {
  display: flex;
  gap: 7.5px;
  margin: 0 -16px;
  padding: 9.375px 16px;
  overflow: hidden;
  white-space: nowrap;
}
.ssr-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5.625px;
  height: 34px;
  padding: 0 13.125px;
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  background: rgb(var(--surface));
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-chip.on {
  border-color: rgb(var(--link));
  background: rgb(var(--link) / 0.1);
}
.ssr .ssr-count {
  margin: 0;
  padding-bottom: 5.625px;
  font-size: 12.5px;
  line-height: 18px;
}

/* the product page: the price card / description wrappers are plain on a phone */
.ssr-pcard,
.ssr-pmain {
  display: contents;
}
.ssr-pblock {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ssr-gbig {
  height: 100%;
}
.ssr-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--surface-2));
}
.ssr-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--gold));
}
.ssr-meter .w0 { width: 0; }
.ssr-meter .w5 { width: 5%; }
.ssr-meter .w10 { width: 10%; }
.ssr-meter .w15 { width: 15%; }
.ssr-meter .w20 { width: 20%; }
.ssr-meter .w25 { width: 25%; }
.ssr-meter .w30 { width: 30%; }
.ssr-meter .w35 { width: 35%; }
.ssr-meter .w40 { width: 40%; }
.ssr-meter .w45 { width: 45%; }
.ssr-meter .w50 { width: 50%; }
.ssr-meter .w55 { width: 55%; }
.ssr-meter .w60 { width: 60%; }
.ssr-meter .w65 { width: 65%; }
.ssr-meter .w70 { width: 70%; }
.ssr-meter .w75 { width: 75%; }
.ssr-meter .w80 { width: 80%; }
.ssr-meter .w85 { width: 85%; }
.ssr-meter .w90 { width: 90%; }
.ssr-meter .w95 { width: 95%; }
.ssr-meter .w100 { width: 100%; }

/* the search pill keeps its own colour inside a coloured bar (div.ssr a inherits the bar's white otherwise) */
div.ssr .ssr-pill {
  color: rgb(var(--muted));
}
div.ssr .ssr-pill-glass {
  color: rgb(var(--text));
}
/* the product page's parts the phone and the computer share (ProductPhone / ProductDesktop) */
.ssr-flash {
  display: flex;
  flex-direction: column;
  gap: 3.75px;
  padding: 7.5px 15px;
  background: linear-gradient(90deg, rgb(var(--deal)), rgb(var(--deal-2)));
  color: rgb(var(--on-deal));
}
.ssr-fhead {
  display: flex;
  align-items: center;
  gap: 7.5px;
  min-height: 24px;
}
.ssr-fhead b {
  font-size: 16.5px;
  line-height: 23px;
}
.ssr-fclock {
  display: flex;
  align-items: center;
  gap: 3.75px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
}
.ssr-fclock i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  border-radius: 5px;
  background: rgb(var(--scrim) / 0.3);
  font-size: 12.5px;
  font-style: normal;
}
.ssr-fsold {
  display: flex;
  align-items: center;
  gap: 7.5px;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 700;
}
.ssr-fsold .ssr-meter {
  flex: 1;
}
.ssr-pblock .ssr-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5.625px;
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-pblock .ssr-price > b:first-child {
  width: 100%;
  margin-bottom: 0;
  font-size: 32px;
  line-height: 40px;
}
.ssr-pblock .ssr-price s {
  margin: 0;
}
.ssr-pblock .ssr-off {
  display: none;
}
.ssr-offd {
  display: inline;
  padding: 0 5px;
  border-radius: 5px;
  background: rgb(var(--deal));
  color: rgb(var(--on-deal));
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 700;
}
.ssr-saved,
.ssr-pblock .ssr-price .ssr-saved {
  display: inline;
  color: rgb(var(--success));
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-pcoins {
  display: flex;
}
.ssr-pcoins i {
  display: inline-flex;
  align-items: center;
  gap: 3.75px;
  height: 18.75px;
  padding: 0 7px;
  border-radius: 5.625px;
  background: rgb(var(--gold) / 0.15);
  color: rgb(var(--gold));
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}
.ssr-bis {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  padding: 9.375px 11.25px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius, 11.25px);
  background: rgb(var(--surface));
}
.ssr-bis.ssr-bis-all {
  border-color: rgb(var(--warning) / 0.4);
  background: rgb(var(--warning) / 0.1);
}
.ssr .ssr-bis p {
  display: flex;
  align-items: center;
  gap: 7.5px;
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-bis p svg {
  color: rgb(var(--muted));
}
.ssr-bis div {
  display: flex;
  flex-wrap: wrap;
  gap: 7.5px;
}
.ssr-bis div span,
.ssr-pdrop {
  display: inline-flex;
  align-items: center;
  gap: 5.625px;
  height: 33.75px;
  padding: 0 11.25px;
  border: 1px solid rgb(var(--link) / 0.3);
  border-radius: 999px;
  background: rgb(var(--link) / 0.05);
  color: rgb(var(--link));
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 700;
}
.ssr-pdrop {
  align-self: flex-start;
  height: 30px;
  border-color: rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--muted));
  font-size: 11.5px;
  line-height: 16px;
}
.ssr-stars {
  display: flex;
  align-items: center;
  gap: 3.75px;
  font-size: 12.5px;
  line-height: 18px;
}
.ssr-stars svg {
  color: rgb(var(--gold));
}
.ssr-stars span {
  color: rgb(var(--muted));
}
.ssr-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  color: rgb(var(--muted));
}
.ssr-vgroup p {
  margin: 0 0 7.5px;
  font-size: 14px;
  line-height: 20px;
}
.ssr-vgroup p span {
  color: rgb(var(--muted));
}
.ssr-vgroup div {
  display: flex;
  flex-wrap: wrap;
  gap: 7.5px;
}
.ssr-vtile {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 2px solid rgb(var(--border));
  border-radius: 10px;
  background: rgb(var(--surface-2));
}
.ssr-vtile.on {
  border-color: rgb(var(--link));
}
.ssr-vtile.out {
  opacity: 0.55;
}
.ssr-vtile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ssr-vtile em {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 3.75px;
  border-radius: 0 5px 0 0;
  background: rgb(var(--scrim) / 0.6);
  color: rgb(var(--on-deal));
  font-size: 10.5px;
  line-height: 14px;
  font-style: normal;
  font-weight: 700;
}
.ssr-vchip {
  display: inline-flex;
  align-items: center;
  height: 37.5px;
  padding: 0 15px;
  border: 1.5px solid rgb(var(--border));
  border-radius: 10px;
  background: rgb(var(--surface));
  font-size: 14px;
}
.ssr-vchip.on {
  border-color: rgb(var(--link));
}
.ssr-vchip.out {
  color: rgb(var(--muted));
  text-decoration: line-through;
}
@media (min-width: 1024px) {
  /* DesktopHeader */
  .ssr-dbar {
    gap: 18.75px;
    height: 68px;
    padding: 0 15px;
  }
  .ssr-dtop .ssr-brand {
    flex: none;
    gap: 7.5px;
  }
  .ssr-dtop .ssr-logo,
  .ssr-dtop .ssr-mark {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
  .ssr-dtop .ssr-mark {
    font-size: 16.5px;
    line-height: 23px;
  }
  .ssr-dtop .ssr-name {
    font-size: 19px;
    line-height: 26px;
  }
  .ssr-dtop .ssr-wlogo,
  .ssr-dtop .ssr-wlogo img {
    width: 220px;
    height: 40px;
  }
  .ssr-dcat {
    flex: none;
    height: 41.25px;
    gap: 7.5px;
    padding: 0 9.375px;
    border-radius: 11.25px;
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 700;
  }
  .ssr-dsbox {
    flex: 1;
    min-width: 0;
    max-width: 620px;
  }
  .ssr-dsearch {
    width: 100%;
    max-width: none;
    height: 41.25px;
    padding: 0 3.75px 0 15px;
    gap: 3.75px;
    box-shadow: 0 1px 2px rgb(var(--scrim) / 0.05);
  }
  .ssr-dsearch input,
  .ssr-hsearch input {
    height: 100%;
    margin-left: 5.625px;
    font-size: 15px;
  }
  .ssr-dsearch > svg:first-child,
  .ssr-hsearch > svg:first-child {
    flex: none;
  }
  .ssr-lang {
    display: flex;
    flex: none;
    align-items: center;
    height: 30px;
    padding: 1.875px;
    border-radius: 999px;
    background: rgb(var(--on-brand) / 0.15);
  }
  .ssr-lang span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26.25px;
    padding: 0 7.5px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 700;
  }
  .ssr-lang .on {
    background: rgb(var(--on-brand));
    color: rgb(var(--brand));
  }
  .ssr-dnav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 3.75px;
    margin-left: auto;
  }
  .ssr-dact {
    display: flex;
    align-items: center;
    gap: 7.5px;
    height: 41.25px;
    padding: 0 9.375px;
    border-radius: 11.25px;
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 700;
  }
  .ssr-dact svg {
    flex: none;
  }

  /* the page: the app's 1240 (px-4) */
  .ssr-main {
    padding: 0 15px 24px;
  }

  /* Home: DesktopHero inside the page, season strip + services, the banner 4:1 with ‹ › and dots */
  .ssr-hero {
    position: relative;
    overflow: hidden;
    height: 220px;
    margin: 0 -15px;
    padding: 0 22.5px;
  }
  .ssr-hero::before,
  .ssr-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
  }
  .ssr-hero::before {
    right: -90px;
    top: -105px;
    width: 300px;
    height: 300px;
    background: rgb(var(--on-brand) / 0.1);
  }
  .ssr-hero::after {
    left: -60px;
    bottom: -120px;
    width: 270px;
    height: 270px;
    background: rgb(var(--on-brand) / 0.05);
  }
  .ssr-hero-title {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
    font-size: 23px;
    line-height: 31px;
  }
  .ssr-hsearch {
    position: relative;
    z-index: 1;
    height: 52.5px;
    padding: 0 3.75px 0 18.75px;
    gap: 3.75px;
    box-shadow: 0 1px 2px rgb(var(--scrim) / 0.05);
  }
  .ssr-hsearch input {
    font-size: 17px;
  }
  .ssr-seasons,
  .ssr-services {
    margin: 0;
  }
  .ssr-services {
    display: block;
    padding: 11.25px 0 0;
  }
  .ssr-services p {
    margin: 0 0 7.5px;
    padding: 0;
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 700;
  }
  .ssr-services nav {
    gap: 11.25px;
    padding: 0;
  }
  .ssr-services a {
    width: 68px;
    gap: 3.75px;
  }
  .ssr-bslider {
    position: relative;
    margin-top: 15px;
  }
  .ssr-bslider.ssr-dk {
    display: block;
  }
  .ssr-bslider .ssr-banner {
    display: block;
    width: calc(100% - 2px);
    margin: 0;
    aspect-ratio: 4 / 1;
    border-radius: var(--radius, 11.25px);
  }
  .ssr-dk > .ssr-rarrow,
  .ssr-rail .ssr-rarrow,
  .ssr-bslider .ssr-rarrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 999px;
    background: rgb(var(--surface));
    color: rgb(var(--text));
    box-shadow: 0 2px 6px rgb(var(--scrim) / 0.15);
  }
  .ssr-bslider .ssr-rprev {
    left: -11px;
  }
  .ssr-bslider .ssr-rnext {
    right: -14px;
  }
  .ssr-bdots.ssr-dk,
  .ssr-bdots {
    display: flex;
    justify-content: center;
    gap: 5.625px;
    margin-top: 7.5px;
  }
  .ssr-bdots i {
    width: 5.625px;
    height: 5.625px;
    border-radius: 999px;
    background: rgb(var(--text) / 0.2);
  }
  .ssr-bdots i.on {
    width: 18px;
    background: rgb(var(--link));
  }
  .ssr-chips.ssr-dk {
    display: none;
  }

  /* the product page (ProductDesktop) */
  .ssr-product-page-crumbs,
  .ssr-crumbs {
    align-items: center;
    gap: 5.625px;
    padding: 15px 0 0;
    font-size: 12.5px;
    line-height: 18px;
  }
  .ssr-crumbs svg {
    flex: none;
  }
  .ssr-crumbs span {
    overflow: hidden;
    color: rgb(var(--text));
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ssr-pmain {
    display: flex;
    align-items: flex-start;
    gap: 22.5px;
    margin-top: 15px;
  }
  .ssr-pmain > article.ssr-product {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 600px minmax(0, 1fr);
    column-gap: 33.75px;
    row-gap: 15px;
    margin: 0;
    padding: 0;
  }
  .ssr-dright {
    display: none;
  }
  .ssr-pmain .ssr-gallery {
    display: flex;
    align-items: flex-start;
    gap: 13.125px;
    width: 600px;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .ssr-thumbs {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 9.375px;
    width: 77px;
    max-height: 510px;
    overflow: hidden;
  }
  .ssr-thumb {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 2px solid rgb(var(--border));
    border-radius: 10px;
    background: rgb(var(--surface-2));
  }
  .ssr-thumb.on {
    border-color: rgb(var(--link));
  }
  .ssr-gallery .ssr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ssr-thumb b {
    position: absolute;
    right: 3px;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgb(var(--link));
    color: rgb(var(--surface));
  }
  .ssr-thumb-video {
    border: 0;
    background: rgb(var(--scrim) / 0.8);
    color: rgb(var(--on-deal));
  }
  .ssr-gbig {
    position: relative;
    flex: none;
    width: 510px;
    height: 510px;
    overflow: hidden;
    border: 1px solid rgb(var(--border));
    border-radius: 18px;
    background: rgb(var(--surface));
  }
  .ssr-gallery .ssr-gbig > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ssr-gbtns.ssr-dk {
    display: block;
  }
  .ssr-garrow,
  .ssr-gzoom {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .ssr-garrow {
    top: 50%;
    width: 37.5px;
    height: 37.5px;
    margin-top: -18.75px;
    border: 1px solid rgb(var(--border));
    background: rgb(var(--surface) / 0.9);
    color: rgb(var(--text));
    box-shadow: 0 4px 6px rgb(var(--scrim) / 0.1);
  }
  .ssr-gprev {
    left: 11.25px;
  }
  .ssr-gnext {
    right: 11.25px;
  }
  .ssr-gzoom {
    right: 13.125px;
    top: 13.125px;
    width: 38px;
    height: 38px;
    background: rgb(var(--scrim) / 0.4);
    color: rgb(var(--on-deal));
  }
  .ssr-pmain .ssr-info {
    display: flex;
    flex-direction: column;
    gap: 13.125px;
    min-width: 0;
  }
  .ssr .ssr-pmain .ssr-info h1 {
    margin: 0;
    font-size: 23px;
    line-height: 31px;
  }
  .ssr-prate {
    display: flex;
    align-items: center;
    gap: 9.375px;
    height: 34px;
    margin-top: -7.5px;
  }
  .ssr-vpick {
    display: flex;
    flex-direction: column;
    gap: 11.25px;
  }
  .ssr-pmain .ssr-pcard {
    display: block;
    overflow: hidden;
    border: 1px solid rgb(var(--border));
    border-radius: var(--radius, 11.25px);
    background: rgb(var(--surface));
  }
  .ssr-pmain .ssr-pblock {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9.375px 15px;
  }
  .ssr-gapline.ssr-dk {
    display: block;
    height: 0;
  }
  .ssr-pmain .ssr-stock,
  .ssr-pmain .ssr-vars,
  .ssr-pmain .ssr-options,
  .ssr-pmain .ssr-cod,
  .ssr .ssr-pmain a.ssr-buy {
    display: none;
  }
  .ssr-offercard.ssr-dk {
    display: flex;
    flex-direction: column;
    gap: 9.375px;
    padding: 11.25px;
    border: 1px solid rgb(var(--buy) / 0.35);
    border-radius: var(--radius, 11.25px);
    background: rgb(var(--buy) / 0.05);
  }
  .ssr-free {
    display: flex;
    align-items: center;
    gap: 7.5px;
    font-size: 12.5px;
    line-height: 18px;
  }
  .ssr-free > svg {
    flex: none;
    color: rgb(var(--buy));
  }
  .ssr-free > span {
    flex: 1;
  }
  .ssr-free b {
    color: rgb(var(--success));
  }
  .ssr-free em {
    padding: 3px 9.375px;
    border: 1.5px solid rgb(var(--buy));
    border-radius: 999px;
    background: rgb(var(--surface));
    color: rgb(var(--buy));
    font-size: 11.5px;
    line-height: 16px;
    font-style: normal;
    font-weight: 700;
  }
  .ssr-fmeter {
    margin-top: -1.875px;
  }
  .ssr-fmeter i {
    background: rgb(var(--buy));
  }
  .ssr-tiles2 {
    display: flex;
    gap: 5.625px;
  }
  .ssr-tiles2 span {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 7.5px 3.75px;
    border: 1.5px solid rgb(var(--border));
    border-radius: 10px;
    background: rgb(var(--surface));
  }
  .ssr-tiles2 .on {
    border-color: rgb(var(--buy));
    background: rgb(var(--buy));
    color: rgb(var(--on-buy));
  }
  .ssr-tiles2 .soon {
    border-style: dashed;
    border-color: rgb(var(--buy));
    background: rgb(var(--buy) / 0.1);
  }
  .ssr-tiles2 b {
    font-size: 14px;
    line-height: 20px;
  }
  .ssr-tiles2 small {
    font-size: 11.5px;
    line-height: 16px;
  }
  .ssr .ssr-oneoffer {
    margin: 0;
    color: rgb(var(--muted));
    font-size: 11.5px;
    line-height: 16px;
  }
  .ssr-dbuy.ssr-dk {
    display: flex;
    align-items: stretch;
    gap: 9.375px;
  }
  .ssr-qty {
    display: flex;
    flex: none;
    height: 54px;
    overflow: hidden;
    border: 1px solid rgb(var(--border));
    border-radius: 11.25px;
  }
  .ssr-qty i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41.25px;
    background: rgb(var(--surface-2));
  }
  .ssr-qty b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border-left: 1px solid rgb(var(--border));
    border-right: 1px solid rgb(var(--border));
    background: rgb(var(--surface));
    font-size: 14px;
  }
  .ssr-dadd,
  .ssr-dorder,
  .ssr-dwish {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 11.25px;
  }
  .ssr-dadd {
    gap: 7.5px;
    padding: 0 18.75px;
    background: rgb(var(--second));
    color: rgb(var(--on-second));
    font-size: 14px;
  }
  .ssr-dorder {
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0 11.25px;
    background: linear-gradient(90deg, rgb(var(--buy)), rgb(var(--buy) / 0.72));
    color: rgb(var(--on-buy));
    white-space: nowrap;
  }
  .ssr-dorder b {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
  }
  .ssr-dorder small {
    max-width: 100%;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 16px;
    text-overflow: ellipsis;
  }
  .ssr-dwish {
    flex: none;
    width: 52px;
    border: 1px solid rgb(var(--border));
    background: rgb(var(--surface));
  }
  .ssr-pmain .ssr-dlv {
    margin: 0;
    border-radius: var(--radius, 11.25px);
  }
  .ssr-pdesc {
    grid-column: 1 / -1;
    width: calc(50% - 7.5px);
  }
  .ssr-pdesc .ssr-desc {
    margin-top: 0;
  }

  /* the category page: name bar, "which one", the top row (210 wide cards, › on it), sort row, six a row */
  .ssr-cname {
    margin: 0 -15px;
    padding: 11.25px 15px;
    border-bottom: 1px solid rgb(var(--border));
    background: rgb(var(--surface));
  }
  .ssr .ssr-cname h1 {
    margin: 0;
    font-size: 23px;
    line-height: 31px;
  }
  .ssr-toprow .ssr-rail {
    margin: 0 -15px;
  }
  .ssr-toprow .ssr-rail ul {
    padding: 0 15px;
  }
  .ssr-rail li {
    width: 210px;
  }
  .ssr-rail .ssr-rnext {
    right: 3px;
  }
  .ssr-sorts {
    margin: 0 -15px;
    padding: 9.375px 15px;
  }
  .ssr .ssr-count {
    padding: 0 0 5.625px;
  }
  .ssr-grid.ssr-grid6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11.25px;
    margin: 5.625px -15px;
    padding: 0 5.625px;
  }
}
@media (min-width: 1024px) {
  /* the phone-only parts of the product page (#203 গ phone) */
  .ssr-pwish,
  .ssr-gribbon,
  .ssr-gcount,
  .ssr-dock,
  .ssr-vhint {
    display: none;
  }
  .ssr-psheet,
  .ssr-palerts {
    display: contents;
  }
}
/*
 * plan 18 #203(গ) phone (coordinator 29 Oct): the product page's first HTML = ProductPhone's first screen — ProductTopBar,
 * the square picture with its marks, the white colour sheet over it, the campaign ribbon, the price section (price, name,
 * ★ · ♡ · share, alerts), delivery C, and BuyDock fixed at the bottom. The same HTML as the computer's; the order is here.
 */
@media (max-width: 1023.98px) {
  .ssr-ptop {
    gap: 3.75px;
    height: 54px;
    padding: 0 5.625px;
  }
  .ssr-ptop .ssr-btn {
    width: 37.5px;
    height: 37.5px;
    border-radius: 50%;
  }
  .ssr-ptop .ssr-pill-sm {
    gap: 7.5px;
    height: 33.75px;
    margin: 0 3.75px;
    padding: 0 11.25px;
    font-size: 12.5px;
    line-height: 18px;
  }
  .ssr-pmain .ssr-gallery {
    background: rgb(var(--surface));
  }
  .ssr-gbig {
    position: relative;
  }
  .ssr-gbadges > span {
    position: absolute;
    display: flex;
    align-items: center;
  }
  .ssr-greal {
    left: 9.375px;
    top: 9.375px;
    height: 22.5px;
    padding: 0 7.5px;
    border-radius: 999px;
    background: rgb(var(--surface) / 0.9);
    color: rgb(var(--success));
    font-size: 11.5px;
    font-weight: 700;
  }
  .ssr-gribbon {
    left: 0;
    bottom: 9.375px;
  }
  .ssr-gribbon i {
    display: flex;
    align-items: center;
    height: 22.5px;
    padding: 0 7.5px;
    border-radius: 0 5.625px 5.625px 0;
    background: rgb(var(--deal));
    color: rgb(var(--on-deal));
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
  }
  .ssr-gribbon i + i {
    margin-left: 3.75px;
    border-radius: 5.625px;
    background: rgb(var(--buy));
    color: rgb(var(--on-buy));
  }
  .ssr-gcount {
    right: 9.375px;
    bottom: 9.375px;
    height: 22.5px;
    padding: 0 9.375px;
    border-radius: 999px;
    background: rgb(var(--scrim) / 0.4);
    color: rgb(var(--on-deal));
    font-size: 11.5px;
    font-weight: 700;
  }
  /* #203 phone product order */
  .ssr-info {
    display: flex;
    flex-direction: column;
    margin: 0 -16px;
  }
  .ssr-info > * {
    order: 8;
  }
  .ssr-info > .ssr-psheet {
    order: 1;
  }
  .ssr-pcard > .ssr-flash {
    order: 2;
  }
  .ssr-pcard > .ssr-pblock {
    order: 3;
  }
  .ssr-info > h1 {
    order: 4;
  }
  .ssr-info > .ssr-prate {
    order: 5;
  }
  .ssr-info > .ssr-palerts {
    order: 6;
  }
  .ssr-info > .ssr-dlv {
    order: 7;
  }
  /* #203 phone product order end */
  .ssr-psheet {
    position: relative;
    z-index: 1;
    margin-top: -15px;
    padding: 11px 0 11.25px 13.125px;
    border-radius: 18px 18px 0 0;
    background: rgb(var(--surface));
  }
  .ssr-vgroup p {
    display: flex;
    align-items: baseline;
    gap: 5.625px;
    padding-right: 15px;
  }
  .ssr-vhint {
    margin-left: auto;
    color: rgb(var(--muted));
    font-size: 11.5px;
    line-height: 16px;
    white-space: nowrap;
  }
  .ssr-vgroup div {
    flex-wrap: nowrap;
    gap: 9px;
    overflow: hidden;
  }
  .ssr-vtile {
    flex: none;
    width: 62px;
    height: 62px;
  }
  .ssr-flash {
    padding: 7.5px 15px;
  }
  .ssr-pblock {
    padding: 7.5px 15px 0;
    background: rgb(var(--surface));
  }
  div.ssr .ssr-info > h1 {
    margin: 0;
    padding: 5.625px 15px 0;
    background: rgb(var(--surface));
    font-size: 16.5px;
    line-height: 23px;
  }
  .ssr-prate {
    display: flex;
    align-items: center;
    gap: 7.5px;
    min-height: 33.75px;
    padding: 5.625px 15px 0;
    background: rgb(var(--surface));
  }
  .ssr-prate .ssr-stars svg {
    width: 14px;
    height: 14px;
  }
  .ssr-pwish,
  .ssr-prate .ssr-share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.75px;
    height: 33.75px;
    color: rgb(var(--muted));
  }
  .ssr-pwish {
    margin-left: auto;
  }
  .ssr-prate .ssr-share {
    margin-left: 0;
  }
  .ssr-palerts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5.625px;
    padding: 5.625px 15px 7.5px;
    background: rgb(var(--surface));
  }
  .ssr-palerts > .ssr-pdrop {
    order: 1;
  }
  .ssr-palerts > .ssr-bis {
    order: 2;
    align-self: stretch;
  }
  .ssr-info > .ssr-dlv {
    margin: 11.25px 11.25px 0;
    border-radius: var(--radius, 11.25px);
  }
  .ssr-info > .ssr-stock,
  .ssr-info > .ssr-vars,
  .ssr-info > .ssr-vars-none,
  .ssr-info > .ssr-options,
  .ssr-info > .ssr-cod {
    display: none;
  }
  article.ssr-product {
    padding-bottom: 112px;
  }
  /* BuyDock: one strip over Chat · Cart · Order Now, the tab bar's frame */
  .ssr-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid rgb(var(--border));
    background: rgb(var(--surface));
    box-shadow: 0 10px 15px rgb(var(--scrim) / 0.1), 0 4px 6px rgb(var(--scrim) / 0.1);
  }
  .ssr-ostrip {
    display: flex;
    flex-direction: column;
    gap: 5.625px;
    padding: 7.5px 11.25px 5.625px;
    background: rgb(var(--deal) / 0.05);
  }
  .ssr-ostrip > span:first-child {
    display: flex;
    align-items: center;
    gap: 7.5px;
    font-size: 12.5px;
    line-height: 18px;
  }
  .ssr-ostrip > span:first-child > svg:first-child {
    color: rgb(var(--deal));
  }
  .ssr-ostrip > span:first-child > svg:last-child {
    margin-left: auto;
    color: rgb(var(--muted));
  }
  .ssr-ostrip b {
    color: rgb(var(--deal));
  }
  .ssr-ostrip em {
    color: rgb(var(--success));
    font-style: normal;
    font-weight: 700;
  }
  .ssr-fstrip {
    border-top: 1px solid rgb(var(--buy) / 0.35);
    background: rgb(var(--buy) / 0.1);
  }
  .ssr-fstrip .ssr-meter {
    height: 3.75px;
    border-radius: 0;
  }
  .ssr-fline {
    display: flex;
    align-items: center;
    gap: 7.5px;
    height: 33.75px;
    padding: 0 11.25px;
    font-size: 12.5px;
  }
  .ssr-fline > svg {
    color: rgb(var(--buy));
  }
  .ssr-fline > span {
    flex: 1;
  }
  .ssr-fline b {
    color: rgb(var(--success));
  }
  .ssr-fline em {
    padding: 3px 9.375px;
    border: 1.5px solid rgb(var(--buy));
    border-radius: 999px;
    background: rgb(var(--surface));
    color: rgb(var(--buy));
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
  }
  .ssr-bar {
    display: flex;
    height: 58px;
  }
  .ssr-bchat,
  div.ssr .ssr-bcart,
  div.ssr a.ssr-buy,
  .ssr-border {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .ssr-bchat {
    flex: none;
    gap: 1.875px;
    width: 54px;
    border-right: 1px solid rgb(var(--border));
    font-size: 10.5px;
    line-height: 14px;
  }
  div.ssr .ssr-bcart {
    flex: 0 0 34%;
    gap: 1px;
    background: rgb(var(--second));
    color: rgb(var(--on-second));
  }
  .ssr-bcart b {
    display: flex;
    align-items: center;
    gap: 5.625px;
    font-size: 16.5px;
    line-height: 23px;
  }
  .ssr-bcart small,
  .ssr-buy small,
  .ssr-border small {
    font-size: 11.5px;
    line-height: 16px;
    white-space: nowrap;
  }
  .ssr-bcart small {
    opacity: 0.75;
  }
  div.ssr a.ssr-buy,
  .ssr-border {
    position: static;
    flex: 1;
    padding: 0 7.5px;
    background: linear-gradient(90deg, rgb(var(--buy)), rgb(var(--buy) / 0.72));
    color: rgb(var(--on-buy));
    text-align: center;
  }
  .ssr-buy b,
  .ssr-border b {
    font-size: 16.5px;
    line-height: 23px;
  }
}
@media (min-width: 1360px) {
  /* ProductDesktop's right column (switch productRightColumn): the page grows to 1440 */
  .ssr-main:has(.ssr-rc) {
    max-width: 1440px;
  }
  .ssr-rc > .ssr-dright {
    display: block;
    flex: none;
    width: 232px;
    min-height: 1px;
  }
}