/* ==========================================================================
   ChaiBD — storefront stylesheet
   --------------------------------------------------------------------------
   PREVIEW BUILD.
   Concatenated from the numbered parts in _inspect/css-parts/ by
   assemble-css.py. Edit the parts and re-run that script, or edit this file
   directly if you are taking the stylesheet over from here.

   This build needs no JavaScript:
     * [data-n] values are printed with  content: attr(data-n)
     * [data-i18n] elements show the Bengali text already inside them
     * light mode follows the operating system until js/app.js sets data-theme
   ========================================================================== */


/* ####################  01-core.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 1 of N: tokens, reset, shared components
   --------------------------------------------------------------------------
   Written so the pages can be previewed with CSS alone:
     * every [data-n] value is printed by CSS  (content: attr(data-n))
     * every [data-i18n] element shows the Bengali text already inside it
   No JavaScript is required for any of this.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #130b0c;
  --bg-2: #190e10;
  --card: #1d1315;
  --card-2: #241719;
  --card-b: #33191b;

  --ink: #f7eeee;
  --ink-soft: #a08d8d;

  --red: #ff4655;
  --red-dim: #c81f2e;
  --red-deep: #8f1620;
  --amber: #ffb020;
  --violet: #8b6bff;

  --ok: #34c47c;
  --info: #5b9dff;
  --warn: #ffb020;
  --bad: #ff4655;

  --white: #fff;
  --on-accent: #fff;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 15px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  --shadow-1: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-2: 0 20px 50px -22px rgba(0, 0, 0, .85);
  --ring: 0 0 0 3px color-mix(in srgb, var(--red) 28%, transparent);

  --wrap: 1200px;
  --gap: 14px;
  --sec-y: 38px;

  --t: .2s ease;

  /* product image placeholders — no photos exist yet, so each product gets
     its own gradient. Replace a value with `url(...)` when real images land. */
  --ph-product-earbuds: linear-gradient(135deg, #3a1b21, #6d2b33 55%, #1a0d10);
  --ph-product-watch: linear-gradient(135deg, #241a3d, #4b3a7d 55%, #120d1f);
  --ph-product-lamp: linear-gradient(135deg, #3d2c0c, #7d5a17 55%, #1c1406);
  --ph-product-powerbank: linear-gradient(135deg, #232a31, #46525e 55%, #101418);
  --ph-product-backpack: linear-gradient(135deg, #3a1f2a, #6d3a4d 55%, #1a0e13);
  --ph-product-serum: linear-gradient(135deg, #3d1b2b, #7d3a58 55%, #1c0d14);
  --ph-product-gamepad: linear-gradient(135deg, #241a3d, #4b3a7d 55%, #120d1f);
  --ph-product-handbag: linear-gradient(135deg, #3d2c0c, #7d5a17 55%, #1c1406);
  --ph-product-cookware: linear-gradient(135deg, #3a1b21, #6d2b33 55%, #1a0d10);
  --ph-product-tshirt: linear-gradient(135deg, #232a31, #46525e 55%, #101418);
  --ph-product-jacket: linear-gradient(135deg, #241a3d, #4b3a7d 55%, #120d1f);
  --ph-product-watch-nf: linear-gradient(135deg, #3d2c0c, #7d5a17 55%, #1c1406);
  --ph-product: linear-gradient(135deg, #2a1a1d, #4a2b31 55%, #150c0e);
}

html[data-theme="light"] {
  --bg: #fdf8f6;
  --bg-2: #f6eeeb;
  --card: #ffffff;
  --card-2: #faf3f1;
  --card-b: #eee0dd;

  --ink: #221415;
  --ink-soft: #7c6968;

  --red: #e3171b;
  --red-dim: #c31316;
  --red-deep: #ffe8e6;
  --amber: #c9840f;
  --violet: #6a4fe0;

  --ok: #0e8a4f;
  --info: #2563eb;
  --warn: #b5730a;
  --bad: #d32029;

  --on-accent: #fff;
  --shadow-1: 0 10px 28px -20px rgba(60, 20, 20, .45);
  --shadow-2: 0 20px 46px -26px rgba(60, 20, 20, .5);
  --ring: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent);

  --ph-product-earbuds: linear-gradient(135deg, #ffd9dd, #ffb3bc 55%, #ffecee);
  --ph-product-watch: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff);
  --ph-product-lamp: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5);
  --ph-product-powerbank: linear-gradient(135deg, #dde5ec, #c2cfda 55%, #eff4f8);
  --ph-product-backpack: linear-gradient(135deg, #ffd9e3, #ffb8ca 55%, #ffeef2);
  --ph-product-serum: linear-gradient(135deg, #ffd9e8, #ffb3d1 55%, #ffeef5);
  --ph-product-gamepad: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff);
  --ph-product-handbag: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5);
  --ph-product-cookware: linear-gradient(135deg, #ffd9dd, #ffb3bc 55%, #ffecee);
  --ph-product-tshirt: linear-gradient(135deg, #dde5ec, #c2cfda 55%, #eff4f8);
  --ph-product-jacket: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff);
  --ph-product-watch-nf: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5);
  --ph-product: linear-gradient(135deg, #ffe3e6, #ffc7cd 55%, #fff1f2);
}

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

* { margin: 0; padding: 0; }

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

body {
  font-family: 'Hind Siliguri', 'Noto Sans SC', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background .25s, color .25s;
}

h1, h2, h3, h4, .disp {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  line-height: 1.25;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

/* ------------------------------------------------------------------- icons */
.i {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.i.fill { fill: currentColor; stroke: none; }

.i.chev { width: 14px; height: 14px; }

/* --------------------------------------------------- numbers without JS */
/* every value lives in a data-n attribute; CSS prints it so the preview is
   readable before js/app.js exists. Delete this rule once app.js runs. */
[data-n]::after { content: attr(data-n); }

/* empty state kept for the cart / wishlist templates */
template { display: none; }

/* --------------------------------------------------------------- surfaces */
.card,
.form-card,
.account-block,
.hours-card,
.side-card,
.rate-card,
.advance-card,
.steps-card,
.track-hero,
.track-status,
.help-card,
.summary,
.order-summary,
.cart-summary,
.auth-card,
.auth-side,
.quote-card,
.value-card,
.service-card,
.office-card,
.benefit,
.plan-card,
.tier-card,
.stat-card,
.how-card,
.tl-item,
.contact-card,
.address-card,
.pdp-media,
.pdp-info,
.filters,
.map-box,
.empty-state {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
}

/* the surfaces above only get their skin; these two also need their own box */
.order-summary {
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 90px;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}

.btn .i { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--red-dim); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dim); }

.btn-ghost {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-color: var(--card-b);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

.btn-block { display: flex; width: 100%; }

.link-btn {
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- badges */
.badge,
.off,
.tier-badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.badge { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.off { background: var(--red); color: #fff; border-radius: var(--r-xs); }
.tier-badge { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }

.status { font-size: 11px; padding: 4px 10px; }
.status.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.status.info { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.status.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.status.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* --------------------------------------------------------------- sections */
.section { padding: var(--sec-y) 0; position: relative; z-index: 1; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sec-head h2 { font-size: 21px; font-weight: 700; }
.sec-head .sub { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

.sec-head .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-weight: 600;
  font-size: 13px;
}
.sec-head .more .i { width: 15px; height: 15px; }
.sec-head .more:hover { text-decoration: underline; }

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 18px 0 4px;
}
.crumb a:hover { color: var(--red); }
.crumb .i { width: 13px; height: 13px; opacity: .6; }
.crumb span[aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; }

.field label,
.field > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  background: color-mix(in srgb, var(--card-2) 80%, var(--bg));
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13.5px;
  transition: border-color var(--t), box-shadow var(--t);
}

textarea { min-height: 104px; resize: vertical; line-height: 1.6; }

input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: var(--ring);
}

.form-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.form-note .i { width: 15px; height: 15px; color: var(--amber); }
.form-note a { color: var(--red); font-weight: 600; }

fieldset { border: none; }
legend {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* checkbox / radio rows */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
  padding: 5px 0;
}
.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  flex: 0 0 auto;
}
.check em { margin-left: auto; font-style: normal; color: var(--ink-soft); font-size: 11.5px; }
.check .stars { display: inline-flex; gap: 1px; color: var(--amber); }
.check .stars .i { width: 13px; height: 13px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }

/* custom select with chevron */
.select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  padding: 0 12px;
}
.select select {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 22px 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.select select:focus { box-shadow: none; }
.select .i { color: var(--ink-soft); }
.select .i.chev { position: absolute; right: 10px; pointer-events: none; }

/* ------------------------------------------------------------- quantities */
.qty {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  overflow: hidden;
}
.qty button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background var(--t), color var(--t);
}
.qty button:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.qty button .i { width: 15px; height: 15px; }
.qty input {
  width: 46px;
  text-align: center;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 0;
}
.qty input:focus { box-shadow: none; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------------------ tabs */
.tabs { display: flex; flex-direction: column; gap: 18px; }

.tab-btns {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--card-b);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-btns::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 11px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
}
.tab-btn em { font-style: normal; font-size: 11.5px; opacity: .8; }
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ----------------------------------------------------------------- table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  background: var(--card);
  scrollbar-width: thin;
}

table.table,
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 13px;
}

.table thead th {
  text-align: left;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 13px 16px;
  background: color-mix(in srgb, var(--card-2) 70%, transparent);
  border-bottom: 1px solid var(--card-b);
  white-space: nowrap;
}

.table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-b) 60%, transparent);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: color-mix(in srgb, var(--card-2) 55%, transparent); }
.table th[scope="row"] { color: var(--ink-soft); font-weight: 600; text-align: left; }

/* -------------------------------------------------------------- summary */
.sum-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--card-b);
}

.sum-row,
.ot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 7px 0;
}
.sum-row b, .ot-row b { color: var(--ink); font-weight: 600; }

.sum-total,
.ot-row.grand {
  border-top: 1px dashed var(--card-b);
  margin-top: 8px;
  padding-top: 13px;
  font-size: 15px;
  color: var(--ink);
}
.sum-total b, .ot-row.grand b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--red);
}

.sum-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
}
.sum-note .i { width: 15px; height: 15px; color: var(--amber); margin-top: 2px; }

/* ------------------------------------------------------------------ faq */
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item[open] { border-color: color-mix(in srgb, var(--red) 45%, var(--card-b)); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--red);
  transition: transform var(--t);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
  padding: 0 18px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ------------------------------------------------------------ stat cards */
.stats,
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.stat-card {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform var(--t), border-color var(--t);
}
.stat-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--red) 45%, var(--card-b)); }
.stat-card .i { width: 22px; height: 22px; color: var(--red); margin-bottom: 4px; }
.stat-card b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.sc-label,
.stat-card > span { font-size: 12px; color: var(--ink-soft); }
.sc-sub { font-size: 11px; color: var(--ink-soft); opacity: .8; }

/* --------------------------------------------------------- steps / how-to */
.how-grid {
  display: grid;
  /* pages carry 4 or 5 cards, so let the track count adapt */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap);
}

.how-card {
  padding: 22px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t), border-color var(--t);
}
.how-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--red) 45%, var(--card-b)); }
.how-card h3 { font-size: 14.5px; font-weight: 700; }
.how-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.how-card .ic { color: var(--red); }

.how-num,
.step-num {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 13%, transparent);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}

.steps-list { display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.steps-list li b { color: var(--ink); }

/* ---------------------------------------------------------------- cta band */
.cta-band {
  background: linear-gradient(120deg, color-mix(in srgb, var(--red) 16%, var(--bg)), color-mix(in srgb, var(--violet) 14%, var(--bg)));
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--card-b));
  border-radius: var(--r-2xl);
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.cta-band p { font-size: 13.5px; color: var(--ink-soft); max-width: 620px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ empty state */
.empty-state {
  padding: 56px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty-state .i { width: 46px; height: 46px; color: var(--ink-soft); opacity: .5; }
.empty-state h3 { font-size: 17px; }
.empty-state p { font-size: 13px; color: var(--ink-soft); max-width: 360px; }

/* --------------------------------------------------------- trust strip */
.trust-item {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--t), transform var(--t);
}
.trust-item:hover { border-color: color-mix(in srgb, var(--red) 40%, var(--card-b)); }
.trust-item .ic {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}
.trust-item .ic .i { width: 20px; height: 20px; }
.trust-item .t { font-weight: 600; font-size: 13.5px; }
.trust-item .s { font-size: 11.5px; color: var(--ink-soft); }

/* the full-width trust strip on the homepage: <section class="trust"><div class="wrap"> */
.trust .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding-top: 10px;
  padding-bottom: 40px;
}

@media (max-width: 980px) {
  .trust .wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .trust .wrap { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ link grid */
.about-split,
.contact-layout,
.checkout-layout,
.cart-layout,
.shop-layout,
.sourcing-layout,
.account-layout,
.pdp {
  display: grid;
  gap: 22px;
  align-items: start;
}

/* -------------------------------------------------- allow-visible defaults */
/* No JS is present, so anything that would normally start hidden must not. */
.reveal-item,
[data-stagger] > *,
.tilt,
.lift,
.lift-s { opacity: 1; }

/* ------------------------------------------------- token tweaks per screen */
/* a wide desktop can carry a little more air, a phone needs a little less */
@media (min-width: 1500px) {
  :root { --wrap: 1320px; --gap: 18px; }
}
@media (max-width: 640px) {
  :root { --sec-y: 28px; }
}


/* ####################  02-shell-home.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 2: page shell + homepage
   ========================================================================== */

/* ------------------------------------------------------------------ glow */
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  opacity: .28;
}
.glow.g1 { width: 420px; height: 420px; background: var(--red); top: -160px; inset-inline-start: -100px; }
.glow.g2 { width: 380px; height: 380px; background: var(--violet); top: 120px; inset-inline-end: -140px; opacity: .18; }
html[data-theme="light"] .glow { opacity: .12; }

/* --------------------------------------------------------------- marquee */
.marquee {
  background: linear-gradient(90deg, var(--red-dim), var(--red));
  color: #fff;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.marquee .track { display: block; }

/* js/app.js is expected to clone .mq-set so the translateX(-50%) loop becomes
   seamless. Until then there is only ONE set, so animating it would scroll the
   bar empty and snap back. For the preview the single set is centred instead. */
.marquee .mq-set {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  animation: none;
}

.marquee .mq {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 26px;
}
.marquee .mq .i { width: 14px; height: 14px; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee .mq-set { animation: none; }
}

/* ---------------------------------------------------------------- header */
header.main {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-b);
  position: sticky;
  top: 0;
  z-index: 50;
}

header.main .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

.logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.5px;
  flex: 0 0 auto;
}
.logo span {
  background: linear-gradient(90deg, var(--red), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  overflow: hidden;
  padding-inline-start: 12px;
}
.search .i { color: var(--ink-soft); width: 17px; height: 17px; }
.search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 4px;
  font-size: 14px;
  border-radius: 0;
}
.search input:focus { box-shadow: none; }
.search button {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 20px;
  align-self: stretch;
  transition: background var(--t);
}
.search button:hover { background: var(--red-dim); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
}

.icon-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-soft);
  transition: color var(--t);
}
.icon-btn:hover,
.icon-btn.active { color: var(--red); }
.icon-btn > .i { width: 21px; height: 21px; }
.icon-btn .lbl { white-space: nowrap; }

.icon-btn .badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -10px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-toggle { display: none; }

/* ---------------------------------------------------------- theme toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--card-b);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: color var(--t), border-color var(--t);
}
.theme-toggle:hover { color: var(--red); border-color: var(--red); }
.theme-toggle .i { width: 17px; height: 17px; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: block; }

/* ------------------------------------------------------- language picker */
.lang { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color var(--t), color var(--t);
}
.lang-btn:hover { border-color: var(--red); color: var(--ink); }
.lang-btn .i { width: 16px; height: 16px; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 150px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 60;
  display: none;
}
.lang:hover .lang-menu,
.lang:focus-within .lang-menu,
.lang.open .lang-menu { display: block; }

.lang-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.lang-menu li:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.lang-menu li .i { width: 15px; height: 15px; opacity: 0; }
html[lang="bn"] .lang-menu li[data-lang="bn"] .i,
html[lang="en"] .lang-menu li[data-lang="en"] .i,
html[lang="zh"] .lang-menu li[data-lang="zh"] .i { opacity: 1; color: var(--red); }

/* --------------------------------------------------- mobile search strip */
.msearch {
  display: none;
  border-bottom: 1px solid var(--card-b);
  background: var(--bg-2);
}
.msearch form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 22px;
}
.msearch .i { color: var(--ink-soft); width: 17px; height: 17px; }
.msearch input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  border-radius: 0;
}
.msearch input:focus { box-shadow: none; }
.msearch button {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------- category nav */
nav.catnav {
  border-bottom: 1px solid var(--card-b);
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
nav.catnav .wrap {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.catnav .wrap::-webkit-scrollbar { display: none; }

nav.catnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 15px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
nav.catnav a:hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--red) 60%, transparent); }
nav.catnav a.hot { color: var(--red); font-weight: 600; }
nav.catnav a .i { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ hero */
.hero {
  padding: 64px 0 46px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-slider { position: absolute; inset: 0; z-index: 0; }

.hero .wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.slide.active { opacity: 1; }
.slide.s1 { background: linear-gradient(120deg, var(--red-deep), var(--red-dim) 55%, #3a0e14); }
.slide.s2 { background: linear-gradient(120deg, #3a2a06, var(--red-dim) 55%, #3a0e14); }
.slide.s3 { background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 60%, #1a1030), var(--red-dim) 60%, #3a0e14); }
html[data-theme="light"] .slide.s1 { background: linear-gradient(120deg, var(--red), var(--red-dim) 70%, #7a0f12); }
html[data-theme="light"] .slide.s2 { background: linear-gradient(120deg, var(--amber), #b3700a 70%, #7a4d00); }
html[data-theme="light"] .slide.s3 { background: linear-gradient(120deg, var(--violet), #4a35a8 70%, #2c1f6e); }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent), color-mix(in srgb, var(--bg) 72%, transparent));
  pointer-events: none;
}

.slide-dots {
  position: absolute;
  bottom: 16px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.slide-dots span {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .4);
  transition: .2s;
}
.slide-dots span.active { background: #fff; width: 20px; }

/* rotating cube cluster */
.scene3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 900px;
  opacity: .5;
}

.cube {
  position: absolute;
  width: 88px;
  height: 88px;
  transform-style: preserve-3d;
  animation: cube-spin 20s linear infinite;
}
.cube .f {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}
.cube .fr { transform: translateZ(44px); }
.cube .bk { transform: rotateY(180deg) translateZ(44px); }
.cube .rt { transform: rotateY(90deg) translateZ(44px); }
.cube .lf { transform: rotateY(-90deg) translateZ(44px); }
.cube .tp { transform: rotateX(90deg) translateZ(44px); }
.cube .bt { transform: rotateX(-90deg) translateZ(44px); }

.cube.ca { top: 12%; inset-inline-end: 14%; }
.cube.cb { bottom: 16%; inset-inline-end: 30%; width: 56px; height: 56px; animation-duration: 14s; animation-direction: reverse; }
.cube.cb .f { transform-origin: center; }
.cube.cb .fr { transform: translateZ(28px); }
.cube.cb .bk { transform: rotateY(180deg) translateZ(28px); }
.cube.cb .rt { transform: rotateY(90deg) translateZ(28px); }
.cube.cb .lf { transform: rotateY(-90deg) translateZ(28px); }
.cube.cb .tp { transform: rotateX(90deg) translateZ(28px); }
.cube.cb .bt { transform: rotateX(-90deg) translateZ(28px); }
.cube.cc { top: 52%; inset-inline-end: 6%; width: 44px; height: 44px; animation-duration: 26s; }
.cube.cc .fr { transform: translateZ(22px); }
.cube.cc .bk { transform: rotateY(180deg) translateZ(22px); }
.cube.cc .rt { transform: rotateY(90deg) translateZ(22px); }
.cube.cc .lf { transform: rotateY(-90deg) translateZ(22px); }
.cube.cc .tp { transform: rotateX(90deg) translateZ(22px); }
.cube.cc .bt { transform: rotateX(-90deg) translateZ(22px); }

@keyframes cube-spin {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

.ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  animation: cube-spin 30s linear infinite;
}
.ring.ra { width: 240px; height: 240px; top: 8%; inset-inline-end: 8%; }
.ring.rb { width: 380px; height: 380px; bottom: -12%; inset-inline-end: -6%; animation-duration: 44s; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .cube, .ring { animation: none; }
}

/* hero copy */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}
.eyebrow .i { width: 15px; height: 15px; }
html[data-theme="light"] .eyebrow { background: rgba(255, 255, 255, .22); }

.hero h1 {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.hero p {
  color: rgba(255, 255, 255, .88);
  font-size: 15.5px;
  max-width: 440px;
  margin-bottom: 26px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-cta .btn-primary { background: #fff; color: var(--red-dim); }
.hero-cta .btn-primary:hover { background: #f4e8e8; }
.hero-cta .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

.stat-row { display: flex; gap: 30px; flex-wrap: wrap; }
.stat-row > div b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 20px;
  font-weight: 700;
  display: block;
  color: #fff;
}
.stat-row > div b .i { color: var(--amber); width: 16px; height: 16px; }
.stat-row > div span { font-size: 12px; color: rgba(255, 255, 255, .78); }

/* floating product cards */
.hv { position: relative; height: 420px; }

.float-card {
  position: absolute;
  z-index: 3;
  width: 230px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: rgba(12, 6, 7, .55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: var(--shadow-2);
  color: #fff;
}
.float-card.c1 { top: 0; inset-inline-start: 20px; animation: float-a 5s ease-in-out infinite; }
.float-card.c2 { top: 140px; inset-inline-end: 0; animation: float-b 6s ease-in-out infinite; }
.float-card.c3 { bottom: 10px; inset-inline-start: 60px; animation: float-a 5.5s ease-in-out infinite reverse; }

@keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

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

.fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fc-ic {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--red), var(--red-dim));
  display: grid;
  place-items: center;
  color: #fff;
}
.fc-ic .i { width: 21px; height: 21px; }
.fc-off {
  background: rgba(255, 255, 255, .18);
  color: #ffd88a;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.fc-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.fc-price {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  color: #ffd88a;
  font-weight: 700;
  font-size: 15px;
}
.fc-price s { color: rgba(255, 255, 255, .6); font-weight: 400; font-size: 11.5px; margin-inline-start: 6px; }

/* ------------------------------------------------------ product cards */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.prod-card {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.prod-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--red) 45%, transparent);
}

.prod-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--card-b) 55%, var(--bg));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.prod-thumb .pi {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  color: var(--ink);
  opacity: .9;
}
.prod-thumb .pi .i { width: 26px; height: 26px; }

/* gradient stand-in for a product photo. When real images arrive, either
   replace the --ph-* token with url(...) and hide .pi, or drop .ph-clip. */
.prod-thumb .ph-clip,
.ph-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.ph {
  position: absolute;
  inset: 0;
  background-image: var(--ph, var(--ph-product));
  background-size: cover;
  background-position: center;
}

.prod-thumb .off { position: absolute; top: 9px; inset-inline-start: 9px; z-index: 3; }

.thumb-btn {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink-soft);
  transition: color var(--t), background var(--t);
}
.thumb-btn .i { width: 16px; height: 16px; }
.thumb-btn:hover,
.thumb-btn.active { color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); }

/* thumbnail tint variants */
.t-red .ph-clip { background: linear-gradient(135deg, #3a1b21, #6d2b33); }
.t-violet .ph-clip { background: linear-gradient(135deg, #241a3d, #4b3a7d); }
.t-amber .ph-clip { background: linear-gradient(135deg, #3d2c0c, #7d5a17); }
.t-slate .ph-clip { background: linear-gradient(135deg, #232a31, #46525e); }
.t-rose .ph-clip { background: linear-gradient(135deg, #3d1b2b, #7d3a58); }
html[data-theme="light"] .t-red .ph-clip { background: linear-gradient(135deg, #ffd9dd, #ffb3bc); }
html[data-theme="light"] .t-violet .ph-clip { background: linear-gradient(135deg, #ded6ff, #c3b6ff); }
html[data-theme="light"] .t-amber .ph-clip { background: linear-gradient(135deg, #ffe9c2, #ffd489); }
html[data-theme="light"] .t-slate .ph-clip { background: linear-gradient(135deg, #dde5ec, #c2cfda); }
html[data-theme="light"] .t-rose .ph-clip { background: linear-gradient(135deg, #ffd9e8, #ffb3d1); }

.prod-body { padding: 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.prod-body .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 39px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t);
}
a.name:hover { color: var(--red); }

.prod-body .price {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  color: var(--red);
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.prod-body .price s { color: var(--ink-soft); font-weight: 400; font-size: 11.5px; }

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: auto;
}
.rating .i { color: var(--amber); width: 14px; height: 14px; }
.rating em { font-style: normal; }

.prod-add,
.prod-remove { width: 100%; margin-top: 4px; padding: 10px 14px; font-size: 12.5px; }
.prod-actions { display: flex; gap: 8px; margin-top: 4px; }
.prod-actions .btn { flex: 1; padding: 10px 12px; font-size: 12px; }

/* ------------------------------------------------------- flash sale */
.flash {
  background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 14%, var(--bg)), var(--bg));
  border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--card-b));
  border-radius: var(--r-2xl);
  padding: 26px;
}

.flash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.flash-head h2 {
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--violet);
}
.flash-head h2 .i { width: 20px; height: 20px; }

.timer { display: flex; align-items: center; gap: 6px; }
.timer i { color: var(--violet); font-style: normal; font-weight: 700; }
.timer span {
  background: color-mix(in srgb, var(--violet) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
  color: var(--violet);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  min-width: 38px;
  text-align: center;
}

/* ----------------------------------------------------------- promo */
.promo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.promo-card {
  border-radius: var(--r-xl);
  padding: 26px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.promo-card.a {
  background: color-mix(in srgb, var(--red) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--card-b));
}
.promo-card.b {
  background: color-mix(in srgb, var(--amber) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--card-b));
}
.promo-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.promo-card p { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.promo-card .btn { align-self: flex-start; }
.promo-card.a .btn { background: var(--red); color: #fff; }
.promo-card.b .btn { background: var(--amber); color: #241a00; }

/* full-width page hero built on the promo card */
.page-hero { display: block; }
.page-hero .promo-card { min-height: 0; padding: 34px; border-radius: var(--r-2xl); }
.page-hero h1 { font-size: 32px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.page-hero p { font-size: 14px; color: var(--ink-soft); max-width: 720px; margin-bottom: 16px; }
.page-hero .eyebrow { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 30%, var(--card-b)); color: var(--red); }
.page-hero .hero-cta { margin-bottom: 0; }

/* ------------------------------------------------------ category grid */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }

.cat-card {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  padding: 22px 10px;
  text-align: center;
  transition: transform var(--t), border-color var(--t);
}
.cat-card:hover { border-color: var(--red); transform: translateY(-4px); }
.cat-card .ic {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  display: grid;
  place-items: center;
}
.cat-card .ic .i { width: 23px; height: 23px; }
.cat-card .t { font-size: 12.5px; font-weight: 600; }

/* -------------------------------------------------------- newsletter */
.news {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-2xl);
  padding: 38px;
  text-align: center;
}
.news h2 { font-size: 21px; margin-bottom: 8px; }
.news p { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 20px; }

.news-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--card-b);
  border-radius: var(--r-pill);
  padding-inline-start: 16px;
  overflow: hidden;
}
.news-form .i { color: var(--ink-soft); width: 17px; height: 17px; }
.news-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 0;
  border-radius: 0;
}
.news-form input:focus { box-shadow: none; }
.news-form button {
  background: var(--red);
  color: #fff;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 13px;
  transition: background var(--t);
}
.news-form button:hover { background: var(--red-dim); }

/* ------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--card-b);
  margin-top: 20px;
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}

footer .wrap {
  padding: 40px 22px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 30px;
}

footer h4 { font-size: 14px; margin-bottom: 14px; }
footer li { margin-bottom: 9px; font-size: 13px; color: var(--ink-soft); }
footer li a { transition: color var(--t); }
footer li a:hover { color: var(--red); }
footer li .i { width: 15px; height: 15px; margin-inline-end: 7px; vertical-align: -2px; color: var(--red); }

.flogo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 21px;
  margin-bottom: 10px;
}
.flogo span {
  background: linear-gradient(90deg, var(--red), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fdesc { font-size: 13px; color: var(--ink-soft); line-height: 1.7; max-width: 300px; }

.foot-bottom {
  border-top: 1px solid var(--card-b);
  padding: 16px 22px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

/* -------------------------------------------------- mobile bottom nav */
.mnav {
  display: none;
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--card-b);
  padding-bottom: env(safe-area-inset-bottom);
}

.mnav-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  font-size: 10.5px;
  color: var(--ink-soft);
  transition: color var(--t);
}
.mnav-item > .i { width: 21px; height: 21px; }
.mnav-item.active { color: var(--red); }
.mnav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 30%;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--red);
}

.mnav-badge {
  position: absolute;
  top: 4px;
  inset-inline-start: 50%;
  transform: translateX(4px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mnav-badge::after { content: attr(data-n); }

/* ========================================================================
   small screens — the shell swaps its own pieces
   ------------------------------------------------------------------------
   .search-toggle, .msearch and .mnav are display:none at the top of this file
   and have to be turned back ON somewhere, or a phone gets no search bar and
   no bottom navigation at all.
   ======================================================================== */
@media (max-width: 980px) {
  /* ONE row: logo, search bar, language, theme. The search bar stays in the
     header instead of dropping to a bar of its own underneath. */
  header.main .wrap { gap: 8px; min-height: 62px; }
  .header-actions { gap: 9px; }

  .search { display: flex; max-width: none; flex: 1 1 auto; padding-inline-start: 11px; gap: 5px; }

  /* the leading magnifier is redundant once the submit button is one */
  .search > .i { display: none; }

  .search button[type="submit"] { padding: 0 11px; }
  .search button[type="submit"] > .i { display: block; width: 18px; height: 18px; color: #fff; stroke: #fff; stroke-width: 2.4; }
  .search button[type="submit"] > span { display: none; }

  .icon-btn .lbl { display: none; }

  /* the bottom bar already carries cart and account, and the heart sits on
     every product card — so the header keeps only the logo, the search bar,
     the language picker and the theme switch */
  .header-actions > .icon-btn { display: none; }

  .mnav { display: flex; }
  footer { margin-bottom: 62px; }

  nav.catnav a { padding: 11px 12px; }
}

@media (max-width: 620px) {
  /* every pixel counts on a phone, so the language picker loses its word and
     its chevron and the logo tightens up */
  .logo { font-size: 17px; }
  .lang-btn span { display: none; }
  .lang-btn .chev { display: none; }
  .lang-btn { padding: 8px; }
  .theme-toggle { width: 34px; height: 34px; }
  .header-actions { gap: 7px; }
  .sec-head h2 { font-size: 18px; }
  .hero h1 { font-size: 30px; }
  .page-hero h1 { font-size: 24px; }
}


/* ####################  03-shop-product.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 3 of N: shop + product detail
   --------------------------------------------------------------------------
   Concatenated AFTER 01-core.css and 02-shell-home.css. Only the classes that
   belong to shop.html and product.html are styled here — card surfaces,
   buttons, badges, tabs, tables, selects and product cards already come from
   part 1 and are deliberately not restyled.
   There is no JavaScript on these pages: nothing starts hidden, and every
   figure stays in the markup for 01-core's [data-n]::after to print.
   ========================================================================== */

/* ------------------------------------------------------ shop: page grid */
.shop-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
}

/* -------------------------------------------------- shop: filter sidebar */
.filters {
  padding: 18px;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--card-b);
}

.filter-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.filter-head h3 .i { width: 16px; height: 16px; color: var(--red); }

.filter-group {
  padding: 13px 0;
  border-top: 1px solid color-mix(in srgb, var(--card-b) 65%, transparent);
}
/* the head already draws the divider above the first group */
.filter-head + .filter-group { border-top: none; }

.filter-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.filter-body { display: flex; flex-direction: column; gap: 2px; }

.range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.range-row input {
  width: 50%;
  min-width: 0;
  padding: 9px 6px;
  text-align: center;
  font-size: 12.5px;
}
.range-row i { flex: 0 0 auto; font-style: normal; color: var(--ink-soft); }

/* availability row, highlighted inside the sidebar */
.check.switch {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  padding: 9px 11px;
  border-radius: var(--r-md);
}

/* only used below 980px; the sidebar itself stays visible at every width */
.filter-toggle { display: none; }

/* ----------------------------------------------------- shop: results bar */
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
}

.result-count { font-size: 13px; color: var(--ink-soft); }
.result-count b { color: var(--ink); font-weight: 600; }

.shop-bar-right { display: flex; align-items: center; gap: 10px; }
/* the sort select keeps its natural width inside the bar */
.shop-bar-right .select { flex: 0 0 auto; align-self: center; }

.view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--card-2);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
}
.view-toggle .icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  gap: 0;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  transition: color var(--t), background var(--t);
}
.view-toggle .icon-btn .i { width: 18px; height: 18px; }
.view-toggle .icon-btn.active {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}

/* ------------------------------------------------------------ shop: pager */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.pager-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--card-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.pager-btn:hover { border-color: var(--red); color: var(--red); }
.pager-btn.active { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-btn .i { width: 15px; height: 15px; }
/* the sprite only ships a down chevron: turn it left / right */
.pager-btn:first-child .i { transform: rotate(90deg); }
.pager-btn.next .i { transform: rotate(-90deg); }

.pager-dots { align-self: center; padding: 0 2px; color: var(--ink-soft); }

/* -------------------------------------------------------- product: layout */
.pdp {
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: start;
}

/* ----------------------------------------------------- product: media side */
.pdp-media {
  padding: 18px;
  position: sticky; /* also the containing block for the .pdp-arrow buttons */
  top: 90px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}

/* square stage: the gradient clip and the placeholder icon share one cell */
.pdp-media > .ph-clip {
  grid-area: 1 / 1;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
}
.pdp-media > .pi {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--ink);
  opacity: .9;
}
.pdp-media > .pi .i { width: 32px; height: 32px; }

.pdp-thumbs { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }

.pdp-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--card-b);
  background: color-mix(in srgb, var(--card-b) 55%, var(--bg));
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.pdp-thumb:hover,
.pdp-thumb.active { border-color: var(--red); box-shadow: var(--ring); }

.pdp-arrow {
  grid-area: 1 / 1;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--card-b);
  color: var(--ink-soft);
  transform: translateY(-50%);
  transition: color var(--t), border-color var(--t);
}
.pdp-arrow.prev { inset-inline-start: 10px; inset-inline-end: auto; }
.pdp-arrow.next { inset-inline-end: 10px; }
.pdp-arrow.prev .i { transform: rotate(90deg); }
.pdp-arrow.next .i { transform: rotate(-90deg); }
.pdp-arrow:hover { color: var(--red); border-color: var(--red); }

/* --------------------------------------------------- product: buy column */
.pdp-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-info h1 { font-size: 27px; font-weight: 700; letter-spacing: -.4px; }

/* the short meta list and the full spec table share one table skeleton */
.pdp-meta,
.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.pdp-meta th,
.spec-table th { width: 42%; text-align: left; font-weight: 600; color: var(--ink-soft); padding: 7px 0; }
.pdp-meta td,
.spec-table td { color: var(--ink); padding: 7px 0; }
.pdp-meta tbody tr + tr th,
.pdp-meta tbody tr + tr td { border-top: 1px dashed var(--card-b); }

/* the spec table separates rows with alternating backgrounds instead */
.spec-table th,
.spec-table td { padding: 9px 12px; }
.spec-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--card-2) 60%, transparent); }

.pdp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* the two primary calls to action share the free width */
.pdp-actions > .btn { flex: 1 1 auto; }

.variant { display: flex; flex-direction: column; gap: 8px; }
.vtitle { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }

/* colour comes from the inline --sw custom property in the markup */
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--card-b);
  background: var(--sw, var(--card-2));
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.swatch:hover,
.swatch.active { border-color: var(--red); box-shadow: var(--ring); }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-width: 46px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  border: 1px solid var(--card-b);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.size:hover { border-color: var(--red); color: var(--red); }
.size.active { background: var(--red); border-color: var(--red); color: var(--on-accent); }

/* ---------------------------------------------------- product: tab panels */
/* no JS, so the first panel of the group must stay readable on its own */
.tab-panels > .tab-panel:first-child { display: block; }

.feature-list { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.feature-list li .i { width: 16px; height: 16px; margin-top: 2px; color: var(--red); }

/* --------------------------------------------------- product: rating block */
.rating-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
}

.rev-score { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rev-score > b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.rev-score > span { font-size: 12px; color: var(--ink-soft); }

.rev-bars { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }

/* one bar = number · star · track · count */
.rev-bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.rev-bar .i { width: 12px; height: 12px; color: var(--amber); }

.rev-track {
  display: block;
  height: 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card-b) 70%, transparent);
  overflow: hidden;
}
.rev-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber), var(--red));
  font-size: 0;
}

/* ------------------------------------------------------- product: reviews */
.review {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review + .review { margin-top: 12px; }

.review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-av {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--red) 16%, transparent);
  color: var(--red);
  font-weight: 700;
}
.review-name { font-size: 13px; font-weight: 600; }
.review-date { display: block; margin-inline-start: auto; font-size: 11.5px; color: var(--ink-soft); }
.review p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

.review-form {
  margin-top: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------------------- responsive */
/* the sidebar stops sticking and the product columns stack */
@media (max-width: 980px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; overflow: visible; }
  .filter-toggle { display: inline-flex; }

  .pdp { grid-template-columns: 1fr; gap: 22px; }
  .pdp-media { position: static; }

  .rating-summary { grid-template-columns: 1fr; gap: 16px; }
  .rev-bars { min-width: 0; }
}


/* ####################  04-cart-checkout-wishlist.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 4: cart + checkout + wishlist
   --------------------------------------------------------------------------
   Only the classes owned by cart.html / checkout.html / wishlist.html are
   styled here. Tokens, buttons, badges, fields, .qty, .ph-clip, .form-card,
   .sum-title, .sum-row, .sum-total, .sum-note, .prod-card and the rest of the
   shared visual language come from parts 01 and 02 and are not redefined.
   No JavaScript: nothing below starts hidden. <template id="cartEmpty"> and
   <template id="wishlistEmpty"> stay inert because core already keeps every
   <template> out of the render tree, so the classes inside them are styled
   but never revealed by this file.
   ========================================================================== */

/* =============================================================== cart page */

/* ------------------------------------------------------------- cart layout */
/* .cart-layout is already `display: grid` in core; only the tracks live here. */
.cart-layout {
  grid-template-columns: 1.6fr .9fr;
  gap: 22px;
  align-items: start;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------------------------------------------------------- cart row */
/* Tracks: thumb | info | qty + line total. The trailing remove button is
   placed in an implicit 4th `auto` track, so the three declared tracks stay
   exactly as specified while the row still reads left to right. */
.cart-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: border-color var(--t);
}
.cart-row:hover { border-color: color-mix(in srgb, var(--red) 45%, var(--card-b)); }

/* square swatch — the .ph-clip inside core is absolute and simply fills it */
.cart-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--card-b) 55%, var(--bg));
}

.cart-info {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.cart-info .name {
  font-size: 13.5px;
  font-weight: 600;
  transition: color var(--t);
}
.cart-info .name:hover { color: var(--red); }

/* the values sit in <span>s; the ":" and "/" separators are bare text nodes,
   so they keep the soft colour inherited from .cart-variant itself */
.cart-variant {
  font-size: 11.5px;
  color: var(--ink-soft);
}
.cart-variant span {
  color: var(--ink);
  font-weight: 600;
}

.cart-unit {
  font-size: 12px;
  color: var(--ink-soft);
}

/* --------------------------------------------------- quantity + line total */
.cart-qty {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-line {
  grid-column: 3;
  grid-row: 2;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: end;
}
.cart-line b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}

/* ----------------------------------------------------------- remove button */
.cart-remove {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: color var(--t), background var(--t);
}
/* icon strokes are currentColor, so this recolours the trash glyph too */
.cart-remove:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}

/* ------------------------------------------------------------ cart summary */
/* core already gives .cart-summary its card surface and radius */
.cart-summary {
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 90px;
}

.coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.coupon input {
  flex: 1;
  min-width: 0;
}
.coupon button { flex: 0 0 auto; }

.cart-summary .btn-block { margin-top: 10px; }

/* -------------------------------------------------------------- cart empty */
/* only ever rendered from inside <template id="cartEmpty"> */
.cart-empty {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* =========================================================== checkout page */

/* ------------------------------------------------------------ step tracker */
.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin-bottom: 22px;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline-end: 26px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* dashed connector drawn in the trailing gap of every step but the last */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  width: 15px;
  border-top: 1px dashed var(--card-b);
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--card-b);
  background: var(--card);
  display: grid;
  place-items: center;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.step.done .step-dot {
  background: var(--ok);
  border-color: transparent;
  color: var(--on-accent);
}

.step.active .step-dot {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent);
}

.step.active .step-label {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------- checkout layout */
/* .checkout-layout is already `display: grid` in core */
.checkout-layout {
  grid-template-columns: 1.6fr .9fr;
  gap: 22px;
  align-items: start;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-form .form-card { gap: 14px; }

/* ----------------------------------------------- shipping / payment picks */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.radio-card:hover { border-color: color-mix(in srgb, var(--red) 45%, var(--card-b)); }

/* the real radio stays focusable and clickable through the label, but is
   never painted */
.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card:has(input:checked),
.radio-card:focus-within {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--card));
}

.rc-title {
  font-size: 13.5px;
  font-weight: 600;
}

.rc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.rc-meta b {
  color: var(--red);
  font-weight: 700;
}

/* ------------------------------------------------------------------- terms */
.terms {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.terms input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}
.terms a {
  color: var(--red);
  font-weight: 600;
}

/* ------------------------------------------------------ summary line items */
.sum-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--card-b);
}

/* core's .ph-clip is absolute inset:0 — inside a summary row it needs a box */
.sum-item .ph-clip {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.sum-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.sum-item-info .name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sum-item-qty {
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* =========================================================== wishlist page */

/* -------------------------------------------------------------- filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
}

/* ------------------------------------------------------------ card actions */
/* core makes .prod-actions a flex row and stretches every .btn inside it;
   the icon-only remove button keeps its natural width instead */
.prod-actions .prod-remove {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 13px;
}

.prod-remove {
  color: var(--ink-soft);
  transition: color var(--t), border-color var(--t);
}
/* icon strokes are currentColor, so this recolours the trash glyph too */
.prod-remove:hover { color: var(--red); }

/* ============================================================== responsive */

@media (max-width: 980px) {
  /* cart + checkout: the summary drops under the item list */
  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; }

  .cart-summary { position: static; top: auto; }

  /* wishlist: 3 cards per row -> 2 */
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .prod-grid { grid-template-columns: 1fr; }

  /* stacked radio picks, then a cart row with the line total and the remove
     button on their own final row */
  .radio-cards { grid-template-columns: 1fr; }

  .cart-row {
    grid-template-columns: 68px 1fr auto;
    align-items: start;
    row-gap: 8px;
  }
  .cart-thumb { align-self: start; }
  .cart-qty { grid-row: 1 / span 2; }
  .cart-line {
    grid-column: 2;
    grid-row: 3;
    text-align: start;
  }
  .cart-remove {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
  }
}


/* ####################  05-auth-account.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 5: auth (login) + account
   --------------------------------------------------------------------------
   Only the classes owned by login.html / account.html are styled here.
   Tokens, buttons, forms, tables, tabs, badges, .avatar and the rest of the
   shared visual language come from parts 01 and 02 and are NOT redefined.
   No JavaScript: nothing starts hidden, and the first login tab panel is
   revealed below because core only shows .tab-panel when it has .active.
   ========================================================================== */

/* ============================================================== login page */

/* ------------------------------------------------------------------- auth */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 380px);
  gap: 26px;
  justify-content: center;
  align-items: start;
}

.auth-card {
  padding: 26px;
  border-radius: var(--r-xl);
}

.auth-side {
  padding: 26px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--red) 12%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--red) 28%, var(--card-b));
}

.auth-side h2,
.auth-side h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-side p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* --------------------------------------------------------------- auth form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 6px 0;
}

/* -------------------------------------------------------------- otp button */
.auth-otp {
  width: 100%;
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}

.auth-otp:hover {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: var(--red);
  color: var(--red);
}

/* ----------------------------------------------------------------- divider */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 12px;
  margin: 6px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--card-b);
}

/* ------------------------------------------------------------- benefit list */
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 14px;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.benefit-list li .i {
  width: 16px;
  height: 16px;
  color: var(--ok);
}

/* --------------------------------------------------------------- auth stats */
.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--card-b);
}

.auth-stats > div,
.stat-cards .stat-card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.auth-stats b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--red);
}

.auth-stats b .i { width: 15px; height: 15px; }

.auth-stats span {
  font-size: 11px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- tab spacing tune */
.auth-card .tabs { gap: 16px; margin-top: 16px; }
.auth-card .tab-btns { gap: 4px; }

/* tab-panel only renders with .active in core; no JS means the first login
   panel must be revealed by CSS so the form is visible in the preview. */
.auth-card .tab-panels > .tab-panel:first-of-type { display: block; }

/* ============================================================ account page */

/* ---------------------------------------------------------------- layout */
.account-layout {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ------------------------------------------------------------ side nav card */
.account-nav {
  padding: 18px;
  border-radius: var(--r-lg);
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--card-b);
}

.user-chip .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--violet));
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.user-chip b,
.user-chip span { display: block; }

.user-chip b {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.user-chip span {
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ account menu */
.account-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-soft);
  transition: background var(--t), color var(--t);
}

.account-menu a > .i {
  width: 17px;
  height: 17px;
}

.account-menu a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.account-menu a.active {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  font-weight: 600;
}

.account-menu .logout {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--card-b);
  color: var(--bad);
}

.account-menu .logout:hover {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

/* ---------------------------------------------------------------- main col */
.account-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* ------------------------------------------------------------------ blocks */
.account-block {
  padding: 20px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* the block/column gap already spaces each header from the content below */
.account-block .sec-head,
.account-main .sec-head { margin-bottom: 0; }

.account-block > h3,
.account-block > .sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-block > h3 {
  font-size: 16px;
  font-weight: 700;
}

.account-block > .sec-head h2 { font-size: 16px; }

/* core styles .table-wrap itself; keep it inside the grid column */
.account-block .table-wrap { min-width: 0; }

/* ------------------------------------------------------- stat card contents */
/* core sizes a direct .i inside .stat-card, but account.html wraps it in .ic */
.stat-cards .stat-card > .ic {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  margin-bottom: 6px;
}

.stat-cards .stat-card > .ic .i {
  width: 21px;
  height: 21px;
  color: var(--red);
}

/* grid tracks default to min-content, which lets a .stat-card push the
   account column wider than its track — clamp the inner block so it cannot */
.stat-cards .stat-card > div { min-width: 0; }

/* --------------------------------------------------------- thumb inside row */
.account-main .table .ph-clip {
  width: 38px;
  height: 38px;
  position: static;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------- account form */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ------------------------------------------------------------ address grid */
.address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.address-card {
  padding: 16px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-width: 0;
}

.addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.addr-head > b {
  font-size: 13.5px;
  font-weight: 600;
}

.addr-body {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.addr-body b,
.addr-body span { display: block; }

.addr-body b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ addr actions */
.addr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

.addr-actions .icon-btn {
  position: static;
  flex-direction: row;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--card-b);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}

.addr-actions .icon-btn > .i {
  width: 15px;
  height: 15px;
}

.addr-actions .icon-btn:hover {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* -------------------------------------------------------------- add address */
.addr-add {
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--card-b);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 600;
}

.addr-add:hover {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

/* ============================================================== responsive */

@media (max-width: 980px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-nav { position: static; top: auto; }
}

@media (max-width: 900px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 780px) {
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .address-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-card, .auth-side { padding: 20px; }
}


/* ####################  06-track-sourcing.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 6 of N: order tracking + sourcing
   --------------------------------------------------------------------------
   Concatenated after 01-core.css and 02-shell-home.css, so every shared
   component (cards, fields, buttons, tables, status pills, steps, FAQ, stat
   cards) is already defined up there and is NOT re-declared here. These rules
   only describe how track.html and sourcing.html arrange those components.
   There is no JavaScript, so nothing below starts hidden.
   ========================================================================== */


/* =========================================================== track.html == */

/* --------------------------------------------- track · search hero card */
.track-hero {
  padding: 26px;
  border-radius: var(--r-xl);
  background: linear-gradient(130deg, color-mix(in srgb, var(--red) 14%, var(--card)), var(--card));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* the markup uses h1 for the page question; h2 is kept for parity */
.track-hero h1,
.track-hero h2 {
  font-size: 22px;
  font-weight: 700;
}

.track-hero p {
  font-size: 13.5px;
  color: var(--ink-soft);
  max-width: 720px;
}

.track-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.track-form .field { flex: 1 1 200px; }
.track-form .btn { flex: 0 0 auto; }

/* ------------------------------------------------ track · status card */
.track-status {
  margin-top: 18px;
  padding: 24px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* the leading icon is a bare span.ic — core only paints .trust-item .ic */
.ts-head .ic {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}

.ts-head .ic .i { width: 22px; height: 22px; }
.ts-head > div { min-width: 0; }

.ts-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* inside the status head the same class carries the headline */
.ts-head .ts-label {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
}

.ts-eta {
  font-size: 13.5px;
  color: var(--ink);
}

.ts-eta > span { color: var(--ink-soft); }
.ts-eta b { font-weight: 600; }

/* core gives .stats four columns; this card carries three facts */
.track-status .stats { grid-template-columns: repeat(3, 1fr); }

.track-status .stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.track-status .stats b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.track-status .stats > div > span {
  font-size: 11.5px;
  color: var(--ink-soft);
}

.progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card-b) 70%, transparent);
  overflow: hidden;
  margin: 4px 0;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--amber));
  transition: width .4s ease;
}

/* --------------------------------------------- track · shipment timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-inline-start: 8px;
  margin-top: 8px;
}

/* .tl-item is a card in part 1; here it lays out as a timeline row */
.tl-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  position: relative;
}

/* connector: runs down the icon column, from under the icon to the next row */
.tl-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 32px;
  top: 48px;
  bottom: -10px;
  width: 2px;
  background: var(--card-b);
}

.tl-item:last-child::before { display: none; }

.tl-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card-2);
  border: 1px solid var(--card-b);
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}

.tl-ic .i { width: 16px; height: 16px; }

.tl-item.done .tl-ic {
  background: var(--ok);
  border-color: transparent;
  color: var(--white);
}

.tl-item.current .tl-ic {
  background: var(--red);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent);
}

.tl-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tl-t {
  font-size: 13.5px;
  font-weight: 600;
}

.tl-d {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* .tl-date is the grid's third child, so pin it under the body column */
.tl-date {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
}

.tl-item.current .tl-date {
  color: var(--red);
  font-weight: 600;
}

.tl-item.pending { opacity: .62; }

/* track.html: the ordered-products table puts a bare .ph inside the cell with
   no .prod-thumb wrapper, and the shared .ph rule is absolutely positioned —
   it would fill the whole .section. Kept inside the cell for now. */
.table td > .ph {
  position: static;
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  margin-inline-end: 10px;
}

/* --------------------------------------- track · totals + support card */
.order-totals {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  max-width: 440px;
  margin-inline-start: auto;
}

.help-card {
  padding: 20px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.help-card h2 {
  font-size: 16px;
  font-weight: 700;
}

/* .sub is only styled inside .sec-head in part 1 */
.help-card .sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 660px;
}

.help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* ======================================================== sourcing.html == */

/* ------------------------------------------ sourcing · two-column layout */
.sourcing-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr);
  gap: 22px;
  align-items: start;
}

.sourcing-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sourcing-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* hero stat strip: three facts, so three columns */
.page-hero .stat-cards { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------- sourcing · request form */
.sourcing-form > .form-card > h3,
.sourcing-side h3 {
  font-size: 15px;
  font-weight: 700;
}

/* heading that opens the "contact details" half of the form */
.sourcing-form > .form-card > h3 {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--card-b);
}

.sourcing-form .field textarea {
  min-height: 104px;
  line-height: 1.7;
}

/* ------------------------------------------ sourcing · shipping rates */
.rate-card {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sourcing-side h3 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sourcing-side h3 .i { width: 16px; height: 16px; color: var(--red); }

.rate-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--red) 34%, var(--card-b));
}

.rate-title .i { width: 15px; height: 15px; color: var(--red); }

/* the sea-freight block starts after the air-freight rows */
.rate-row + .rate-title { margin-top: 10px; }

.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--card-b);
}

.rate-row:last-child { border-bottom: none; }
.rate-row b { color: var(--ink); font-weight: 600; }

/* the "/কেজি" suffix */
.rate-row i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* ----------------------------------------- sourcing · advance payment */
.advance-card {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* declared after .sourcing-side h3 on purpose: these headings are smaller */
.advance-card h3,
.steps-card h3 {
  font-size: 14px;
  font-weight: 700;
}

.advance-card .sub {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.advance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.advance-row b {
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}

.tier {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  color: var(--violet);
  white-space: nowrap;
}

/* --------------------------------------------- sourcing · steps card */
.steps-card {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------- narrow screens */
@media (max-width: 980px) {
  .sourcing-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .track-status .stats { grid-template-columns: 1fr; }
  .help-actions .btn { flex: 1 1 auto; }
}


/* ####################  07-wholesale-reseller-about-contact.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 7: wholesale, reseller, about, contact
   --------------------------------------------------------------------------
   Only the classes owned by wholesale.html / reseller.html / about.html /
   contact.html are styled here. Tokens, buttons, forms, tables, badges,
   .tier-badge, .step-num, .steps-list, .trust-item, .faq-item, .stats,
   .page-hero and the rest of the shared visual language come from parts 01
   and 02 and are NOT redefined.
   No JavaScript is involved: nothing starts hidden, and every figure still
   comes from its [data-n] attribute, printed by core.
   ========================================================================== */

/* ============================================================= wholesale */

/* -------------------------------------------------------------- tier grid */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tier-card {
  padding: 24px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--red) 45%, var(--card-b));
}

/* the pill itself is core; here it is only anchored to the card corner */
.tier-card .tier-badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
}

.tier-card.is-popular {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-2);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 13%, var(--card)), var(--card) 58%);
}

.tier-card h3 { font-size: 19px; font-weight: 700; }
.tier-card > p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }

/* -------------------------------------------------------------- tier list */
.tier-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--card-b);
}

.tier-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.tier-list li .i { width: 15px; height: 15px; color: var(--ok); }
.tier-list li b { color: var(--ink); font-weight: 600; }
.tier-card .btn { width: 100%; margin-top: 6px; }

/* ============================================================== reseller */

/* -------------------------------------------------------------- plan grid */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.plan-card {
  padding: 24px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--red) 45%, var(--card-b));
}

.plan-card h3 { font-size: 19px; font-weight: 700; }

.plan-card .tier-badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
}

.plan-card.is-popular {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-2);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 13%, var(--card)), var(--card) 58%);
}

/* the plan fee: the 26px figure plus its small billing suffix */
.plan-card .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--red);
}

.plan-card .price span {
  font-family: 'Hind Siliguri', 'Noto Sans SC', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- plan list */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--card-b);
}

.plan-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.plan-list li .i { width: 15px; height: 15px; color: var(--ok); }
.plan-list li b { color: var(--ink); font-weight: 600; }
.plan-card .btn { width: 100%; }

/* core owns .step-num; it only needs to keep its width inside the step row */
.steps-list li .step-num { flex: 0 0 auto; }

/* --------------------------------------------------------------- benefits */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.benefit {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.benefit .ic { color: var(--red); }
.benefit .ic .i { width: 20px; height: 20px; }

.benefit .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- quotes */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.quote-card {
  padding: 22px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* decorative opening quote mark, purely presentational */
.quote-card::before {
  content: "\201C";
  font-family: 'Poppins', sans-serif;
  font-size: 42px;
  line-height: .6;
  color: var(--red);
  opacity: .35;
}

.quote-card blockquote { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.quote-card b { font-size: 13px; font-weight: 600; color: var(--ink); }
.quote-card figcaption span { font-size: 11.5px; color: var(--ink-soft); }

/* ================================================================= about */

/* ---------------------------------------------------------------- mission */
.about-split {
  grid-template-columns: 1.25fr .95fr;
  gap: 24px;
  align-items: start;
}

.about-split p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin-bottom: 14px;
}

.about-split p:last-child { margin-bottom: 0; }

.about-split .trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---------------------------------------------------------------- offices */
.office-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.office-card {
  padding: 20px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.office-card .ic { color: var(--red); }
.office-card .ic .i { width: 20px; height: 20px; }
.office-card h3 { font-size: 15px; font-weight: 700; }
.office-card div.s { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.office-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }

.office-card a.s {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: color var(--t);
}

.office-card a.s:hover { color: var(--red); }
.office-card a.s .i { width: 15px; height: 15px; }

/* --------------------------------------------------------------- services */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.service-card {
  padding: 20px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform var(--t), border-color var(--t);
}

.service-card:hover { transform: translateY(-4px); border-color: var(--red); }
.service-card .ic { color: var(--red); }
.service-card .ic .i { width: 22px; height: 22px; }
.service-card h3 { font-size: 14.5px; font-weight: 700; }
.service-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }

/* trailing "read more" link */
.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red);
}

.service-card a .i { width: 15px; height: 15px; }

/* ----------------------------------------------------------------- values */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.value-card {
  padding: 22px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.value-card .ic { color: var(--red); }
.value-card .ic .i { width: 22px; height: 22px; }
.value-card h3 { font-size: 15px; font-weight: 700; }
.value-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }

/* core stacks .stats four-up; on about.html the strip sits directly under the
   hero, so it keeps a little breathing room before it reflows. */
.page-hero + .stats { margin-top: 16px; }

/* =============================================================== contact */

/* ---------------------------------------------------------- contact cards */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.contact-card {
  padding: 20px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t), border-color var(--t);
}

.contact-card:hover { transform: translateY(-4px); border-color: var(--red); }
.contact-card .ic { color: var(--red); }
.contact-card .ic .i { width: 20px; height: 20px; }

.contact-card .t {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-card .s {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- two-column */
.contact-layout {
  grid-template-columns: 1.4fr .9fr;
  gap: 22px;
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-side { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------ office hours */
.hours-card {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hours-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-b);
}

.hours-card h3 .i { width: 16px; height: 16px; color: var(--red); }

.hours-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 6px 0;
}

.hours-card li + li { border-top: 1px dashed color-mix(in srgb, var(--card-b) 75%, transparent); }
.hours-card li b { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------- side cards */
.side-card {
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-card h3 {
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--card-b);
}

.side-card li a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 7px 0;
  transition: color var(--t);
}

.side-card li a:hover { color: var(--red); }
.side-card li a .i { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- social */
.social-row { display: flex; align-items: center; gap: 8px; padding-top: 4px; }

.social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--card-b);
  background: var(--card);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: color var(--t), border-color var(--t);
}

.social-row a:hover { color: var(--red); border-color: var(--red); }

/* ---------------------------------------------------------------- map box */
.map-box {
  min-height: 220px;
  background: var(--card);
  border: 1px dashed var(--card-b);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 26px;
  text-align: center;
}

.map-box .i { width: 30px; height: 30px; color: var(--red); }
.map-box > div { font-size: 13px; font-weight: 600; color: var(--ink); }
.map-box p { max-width: 420px; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* ============================================================ responsive */

@media (max-width: 980px) {
  .tier-grid,
  .plan-grid,
  .office-grid,
  .value-grid { grid-template-columns: 1fr; }

  .benefit-grid,
  .service-grid,
  .contact-grid { grid-template-columns: repeat(2, 1fr); }

  .about-split,
  .contact-layout { grid-template-columns: 1fr; }

  /* the stat strip sits inside or right after the hero on these pages */
  .page-hero .stats,
  .page-hero + .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .benefit-grid,
  .service-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .about-split .trust { grid-template-columns: 1fr; }
}


/* ####################  08-fixes.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 8: cross-part fixes
   --------------------------------------------------------------------------
   Scoped corrections for places where a rule in 01-core or 02-shell-home is
   correct for the homepage but does not reach an inner page. Each block says
   which page it repairs, so any of them can be dropped safely.
   ========================================================================== */

/* ---------------------------------------------------------- product.html */
/* core styles .price only inside .prod-body, so the PDP price row would fall
   back to plain body text */
.pdp-info .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
}
.pdp-info .price s { color: var(--ink-soft); font-size: 14px; font-weight: 400; }

/* core's .thumb-btn is absolutely positioned inside a product thumbnail; in
   the PDP action row it must simply be a button */
.pdp-actions .thumb-btn {
  position: static;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--card-b);
  background: var(--card);
}

/* the short description and the description tab carry no class */
.pdp-info > p,
.tab-panel > p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------------------------------------------------------- sourcing.html */
/* the sidebar step list is <b> + <span>, not the icon row core builds for, so
   the title and its description must stack instead of sitting side by side */
.steps-card .steps-list li {
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
}
.steps-card .steps-list li b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 1px;
}

/* --------------------------------------------------------- reseller.html */
/* step titles should read as titles, not as body copy */
.steps-list li .t { color: var(--ink); font-weight: 600; }
.steps-list li .s { color: var(--ink-soft); }

/* .pdp-info is a flex column, so every child stretches to full width — a badge
   is meant to hug its own text */
.pdp-info > .badge { align-self: flex-start; }


/* ####################  09-3d-polish.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 9: depth, glass and 3D polish
   --------------------------------------------------------------------------
   Purely additive. Delete this one file (and re-run assemble-css.py) to go
   back to the flat design.

   CSS only. Real mouse-following tilt would need JavaScript, so the 3D here is
   driven by :hover, and every hover effect sits inside @media (hover: hover)
   so a touch screen never gets stuck mid-transform.

   Contents
     1. drifting aurora background + film grain
     2. perspective grid floor in the hero
     3. glass panels
     4. 3D product cards: tilt, light sweep, gradient edge, deep shadow
     5. deeper hero cards and a richer cube scene
     6. buttons with a real pressed depth
     7. finishing touches
   ========================================================================== */

/* ------------------------------------------------- 1. aurora + film grain */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, color-mix(in srgb, var(--red) 30%, transparent), transparent 68%),
    radial-gradient(34% 34% at 82% 14%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 68%),
    radial-gradient(42% 42% at 62% 88%, color-mix(in srgb, var(--amber) 15%, transparent), transparent 70%);
  filter: blur(70px) saturate(130%);
  opacity: .75;
  animation: aurora-drift 26s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}

html[data-theme="light"] body::before { opacity: .45; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ------------------------------------------------ 2. hero perspective grid */
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  z-index: 2;
  pointer-events: none;
  opacity: .7;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: perspective(420px) rotateX(64deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 88%);
  mask-image: linear-gradient(to top, #000 5%, transparent 88%);
}

/* a soft glow where that floor meets the horizon. Kept gentle on purpose: the
   hero already sits on a saturated gradient slide, so a strong red here turns
   the whole band flat. */
.hero::after {
  background:
    radial-gradient(58% 34% at 50% 102%, color-mix(in srgb, var(--red) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 80%, transparent));
}

/* --------------------------------------------------------- 3. glass panels */
.filters,
.track-hero,
.track-status,
.help-card,
.rate-card,
.advance-card,
.steps-card,
.hours-card,
.side-card,
.map-box,
.form-card,
.order-summary,
.cart-summary,
.auth-card,
.auth-side,
.empty-state,
.news,
.flash,
.account-nav,
.account-block {
  background: color-mix(in srgb, var(--card) 74%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* the two big product-detail panels stay translucent but skip backdrop-filter:
   a blur layer that large is expensive and it leaves a visible seam along the
   column edge where the blurred and unblurred backdrop meet. */
.pdp-media,
.pdp-info {
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

/* the hairline gradient edge. These elements are all already positioned —
   .filters / .order-summary / .cart-summary / .account-nav / .pdp-media are
   sticky — so position is deliberately NOT restated here, or it would break
   them. */
.filters,
.order-summary,
.cart-summary,
.account-nav,
.pdp-media,
.account-block,
.track-hero,
.track-status,
.help-card,
.news,
.flash,
.pdp-info {
  border-color: transparent;
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

/* elements that still need to become a containing block */
.form-card,
.auth-card,
.auth-side { position: relative; }

.filters::before,
.form-card::before,
.order-summary::before,
.cart-summary::before,
.auth-card::before,
.auth-side::before,
.account-nav::before,
.account-block::before,
.news::before,
.flash::before,
.pdp-media::before,
.pdp-info::before,
.track-hero::before,
.track-status::before,
.help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--red) 45%, transparent),
    color-mix(in srgb, var(--card-b) 90%, transparent) 38%,
    color-mix(in srgb, var(--violet) 38%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------------------------------- 4. 3D product cards */
.prod-card {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .38s cubic-bezier(.2, .7, .3, 1),
    box-shadow .38s cubic-bezier(.2, .7, .3, 1),
    border-color .2s;
}

/* the light sweep that crosses the thumbnail */
.prod-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .32) 50%,
    transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.25, .7, .3, 1);
}

.prod-thumb .ph,
.prod-thumb .pi { transition: transform .6s cubic-bezier(.2, .7, .3, 1); }

@media (hover: hover) {
  .prod-card:hover {
    transform: perspective(1000px) rotateX(6deg) rotateY(-6deg) translateY(-8px) translateZ(24px);
    box-shadow:
      0 34px 60px -28px color-mix(in srgb, var(--red) 55%, transparent),
      0 10px 24px -18px rgba(0, 0, 0, .9);
  }
  .prod-card:hover .prod-thumb::after { transform: translateX(130%); }
  .prod-card:hover .ph { transform: scale(1.1); }
  .prod-card:hover .prod-thumb .pi { transform: translateZ(40px) scale(1.06); }

  .cat-card:hover {
    transform: perspective(800px) rotateX(8deg) translateY(-6px) translateZ(18px);
    box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--red) 55%, transparent);
  }
  .stat-card:hover {
    transform: perspective(800px) rotateX(6deg) translateY(-6px) translateZ(16px);
  }
  .how-card:hover,
  .service-card:hover,
  .value-card:hover,
  .plan-card:hover,
  .tier-card:hover,
  .office-card:hover,
  .contact-card:hover,
  .quote-card:hover {
    transform: perspective(900px) rotateX(5deg) rotateY(-4deg) translateY(-6px) translateZ(16px);
    box-shadow: 0 30px 52px -30px rgba(0, 0, 0, .9);
  }
}

/* ---------------------------------- 5. deeper hero cards + richer cube scene */
.hv { perspective: 1100px; transform-style: preserve-3d; }

.float-card {
  transform-style: preserve-3d;
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* the float animation owns `transform`, so the tilt is baked into the frames */
@keyframes float-a {
  0%, 100% { transform: rotateX(6deg) rotateY(-14deg) translateY(0) translateZ(0); }
  50%      { transform: rotateX(6deg) rotateY(-14deg) translateY(-14px) translateZ(26px); }
}
@keyframes float-b {
  0%, 100% { transform: rotateX(4deg) rotateY(16deg) translateY(0) translateZ(0); }
  50%      { transform: rotateX(4deg) rotateY(16deg) translateY(12px) translateZ(22px); }
}
@keyframes float-c {
  0%, 100% { transform: rotateX(8deg) rotateY(-10deg) translateY(0) translateZ(0); }
  50%      { transform: rotateX(8deg) rotateY(-10deg) translateY(10px) translateZ(20px); }
}

.float-card.c3 { animation-name: float-c; }

.cube .f {
  border-color: rgba(255, 255, 255, .45);
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--red) 35%, transparent);
}
.cube { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--red) 55%, transparent)); }

.ring {
  border-color: transparent;
  border-top-color: color-mix(in srgb, var(--amber) 65%, transparent);
  border-inline-start-color: color-mix(in srgb, var(--red) 45%, transparent);
  box-shadow: 0 0 30px -8px color-mix(in srgb, var(--violet) 55%, transparent);
}

/* --------------------------------------------------- 6. buttons with depth */
.btn {
  transform-style: preserve-3d;
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn-primary,
.btn-red {
  box-shadow:
    0 5px 0 -1px var(--red-dim),
    0 14px 26px -14px color-mix(in srgb, var(--red) 75%, transparent);
}
.btn-primary:hover,
.btn-red:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 -1px var(--red-dim),
    0 20px 34px -16px color-mix(in srgb, var(--red) 80%, transparent);
}
.btn-primary:active,
.btn-red:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 0 var(--red-dim),
    0 6px 14px -10px color-mix(in srgb, var(--red) 70%, transparent);
}

.btn-ghost { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); }
.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px -14px color-mix(in srgb, var(--red) 80%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.btn-ghost:active { transform: translateY(2px); }

.thumb-btn { transition: transform .25s cubic-bezier(.2, .7, .3, 1), color .2s, background .2s; }
.thumb-btn:hover { transform: scale(1.14) translateZ(20px); }

/* -------------------------------------------------- 7. finishing touches */
.sec-head h2 {
  background: linear-gradient(100deg, var(--ink), color-mix(in srgb, var(--red) 70%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero h1 { text-shadow: 0 3px 30px rgba(0, 0, 0, .45); }

header.main { box-shadow: 0 12px 34px -26px rgba(0, 0, 0, .95); }
.marquee { box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--red) 90%, transparent); }

/* the sticky bars must sit above the aurora */
header.main { z-index: 50; }
.catnav { z-index: 40; }
.lang-menu { z-index: 70; }


/* ####################  10-image-search.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 10: search by image
   --------------------------------------------------------------------------
   Two buttons sit inside the search bar:
     .imgsearch-camera   opens the camera app straight away
     .imgsearch-gallery  opens the phone's own photo picker
   and one .imgsearch-panel, which stays hidden until a picture has actually
   been taken or chosen. Nothing there is a drop zone the visitor has to work
   out — the camera button does what it says.

   Both inputs are real <input type="file">, so the whole thing still works
   with no JavaScript; js/app.js only wires the buttons to the inputs and
   shows the preview.
   ========================================================================== */

/* the search bar clips for its rounded corners, which would cut the panel off */
.search { overflow: visible; }

.search > button[type="submit"] {
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
}

/* --------------------------------------------------------- the two buttons */
.imgsearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

/* .search button and .msearch button are the search bar's own submit rules;
   they also match these two, so every property they set must be reset here. */
.search .imgsearch-btn,
.msearch .imgsearch-btn {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  align-self: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t), background var(--t), transform var(--t);
}

.search .imgsearch-btn:hover,
.msearch .imgsearch-btn:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}
.search .imgsearch-btn:active,
.msearch .imgsearch-btn:active { transform: scale(.92); }

/* the camera is the primary action, the gallery the secondary one. These need
   the same two-class weight as the rule above, or that one wins on colour. */
.search .imgsearch-camera,
.msearch .imgsearch-camera { color: var(--red); }

.imgsearch.has-image .imgsearch-camera { color: var(--ink); }

/* the real inputs stay reachable by keyboard, just not visible */
.imgsearch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------- the panel */
.imgsearch-panel {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 80;
  width: 340px;
  max-width: calc(100vw - 28px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: start;

  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--card-b);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  animation: img-panel-in .22s cubic-bezier(.2, .7, .3, 1);
}

/* an author `display` beats the browser's [hidden] rule, so restate it */
.imgsearch-panel[hidden],
.img-result[hidden],
.img-preview[hidden] { display: none; }

@keyframes img-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.imgsearch-head h3 { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.imgsearch-head .sub { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------- the picture */
.img-preview {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--card-b);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

/* --------------------------------------------------------------- actions */
.imgsearch-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.imgsearch-actions .btn { flex: 1; }
.imgsearch-actions .btn.searching { opacity: .65; pointer-events: none; }

.img-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.img-note .i { width: 14px; height: 14px; flex: 0 0 auto; color: var(--amber); margin-top: 1px; }

/* --------------------------------------------------------------- results */
.img-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px dashed var(--card-b);
}

.img-result-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.img-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.img-result-item:hover {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  border-color: color-mix(in srgb, var(--red) 35%, var(--card-b));
  transform: translateX(3px);
}

/* core makes .ph-clip absolutely positioned; here it needs a real box */
.img-result-item .ph-clip {
  position: relative;
  inset: auto;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.img-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.img-result-info b {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.img-result-info em {
  font-style: normal;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 420px) {
  .search .imgsearch-btn,
  .msearch .imgsearch-btn { width: 30px; height: 30px; }
}

@media (max-width: 700px) {
  .search .imgsearch-panel,
  .msearch .imgsearch-panel {
    position: fixed;
    inset-inline: 14px;
    top: auto;
    bottom: 76px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }
}


/* The magnifier inside the submit button is a small-screen affordance only.
   This must be scoped with a min-width, not left bare: part 02 already turns
   the icon ON below 980px, and this file is concatenated after it, so a bare
   rule here would win on equal specificity and leave the phone button blank. */
@media (min-width: 981px) {
  .search button[type="submit"] > .i { display: none; }
}


/* ####################  11-responsive.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 11: every screen size
   --------------------------------------------------------------------------
   The per-page parts each grew their own media query, but the HOMEPAGE grids
   never got one at all, and several layouts jump straight from four columns to
   one with nothing in between for a tablet. This part is the single, final
   pass that makes the whole site behave on a phone, a tablet and a desktop.

   It is last in the file, so it wins any tie with an earlier part.

   Breakpoints
     >= 1500px   wide desktop
     <= 1180px   small laptop / large tablet landscape
     <= 1024px   tablet landscape
     <= 900px    tablet portrait
     <= 640px    phone
     <= 420px    small phone
   ========================================================================== */

/* ---------------------------------------------------------- wide desktop */
@media (min-width: 1500px) {
  .wrap { max-width: var(--wrap); }
}

/* ------------------------------------------ small laptop / tablet landscape */
@media (max-width: 1180px) {
  .search { max-width: 340px; }
  .icon-btn .lbl { display: none; }

  .prod-row { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .how-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .stats, .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------- tablet landscape */
@media (max-width: 1024px) {
  .hero { padding: 48px 0 38px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hv { display: none; }                 /* the floating cards need the wide layout */
  .hero h1 { font-size: 36px; }
  .hero p { max-width: 560px; }

  .prod-row { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .promo { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; gap: 26px; }

  .flash { padding: 20px; }
  .news { padding: 30px 22px; }
  .cta-band { flex-direction: column; align-items: flex-start; }

  /* nothing should stay stuck to the top of a short screen */
  .filters,
  .order-summary,
  .cart-summary,
  .account-nav,
  .pdp-media { position: static; }

  .order-summary { padding: 20px; }
}

/* -------------------------------------------------------- tablet portrait */
@media (max-width: 900px) {
  .page-hero .promo-card { padding: 26px; }
  .page-hero h1 { font-size: 27px; }

  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-row { grid-template-columns: repeat(3, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .office-grid { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; gap: 20px; }

  .prod-actions { flex-direction: column; }
  .prod-actions .btn { width: 100%; }

  .sec-head { align-items: flex-start; }
  .help-actions { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }

  /* 16px stops iOS Safari zooming the page when a field is focused */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="date"],
  select,
  textarea { font-size: 16px; }

  /* comfortable tap targets */
  .icon-btn > .i { width: 23px; height: 23px; }
  .thumb-btn { width: 36px; height: 36px; }
  .mnav-item { padding: 10px 4px 9px; }
  .lang-menu li { padding: 11px; }
  .check { padding: 8px 0; }

  .hero { padding: 36px 0 30px; }
  .hero h1 { font-size: 27px; letter-spacing: -.4px; }
  .hero p { font-size: 14px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .stat-row { gap: 18px 22px; }
  .stat-row > div b { font-size: 18px; }

  .sec-head h2 { font-size: 18px; }
  .sec-head .sub { font-size: 12.5px; }
  .sec-head .more { font-size: 12.5px; }

  /* a dense phone grid, as asked: the flash row and the categories go four
     across, and the four trust badges sit on one line */
  .prod-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }

  .cat-card { padding: 12px 4px; border-radius: var(--r-md); }
  .cat-card .ic { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; }
  .cat-card .ic .i { width: 18px; height: 18px; }
  .cat-card .t { font-size: 10.5px; line-height: 1.3; }

  .prod-row .prod-thumb .pi { width: 30px; height: 30px; }
  .prod-row .prod-thumb .pi .i { width: 17px; height: 17px; }
  .prod-row .prod-body { padding: 7px; gap: 4px; }
  .prod-row .prod-body .name { font-size: 10px; min-height: 27px; line-height: 1.35; }
  .prod-row .prod-body .price { font-size: 11px; flex-wrap: wrap; gap: 2px; }
  .prod-row .prod-body .price s { display: none; }
  .prod-row .rating { font-size: 9.5px; }
  .prod-row .rating .i { width: 11px; height: 11px; }
  .prod-row .off { font-size: 9px; padding: 2px 5px; }

  .trust .wrap { grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 26px; }
  .trust-item { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 11px 5px; }
  .trust-item .ic { width: 34px; height: 34px; }
  .trust-item .ic .i { width: 17px; height: 17px; }
  .trust-item .t { font-size: 10.5px; line-height: 1.3; }
  .trust-item .s { display: none; }
  .stats, .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .address-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .prod-body { padding: 11px; }
  .prod-body .name { font-size: 12.5px; min-height: 36px; }
  .prod-body .price { font-size: 13.5px; }
  .prod-add, .prod-remove { padding: 10px 10px; font-size: 12px; }

  .flash { padding: 16px; border-radius: var(--r-xl); }
  .flash-head h2 { font-size: 16px; }
  .timer span { padding: 5px 8px; font-size: 12.5px; min-width: 32px; }
  .promo-card { padding: 20px; }
  .promo-card h3 { font-size: 17px; }
  .news { padding: 24px 18px; }
  .news-form { border-radius: var(--r-lg); padding-inline-start: 12px; }
  .news-form button { padding: 13px 16px; font-size: 12.5px; }

  footer .wrap { grid-template-columns: 1fr; gap: 22px; padding: 30px 16px 20px; }
  .fdesc { max-width: none; }

  .btn { padding: 12px 18px; font-size: 13px; }
  .tab-btn { padding: 10px 13px; font-size: 12.5px; }
  .table { min-width: 520px; font-size: 12.5px; }
  .table thead th, .table tbody td { padding: 11px 12px; }
  .pager-btn { width: 36px; height: 36px; }
  .qty button { width: 38px; height: 38px; }

  .cta-band { padding: 22px; }
  .cta-band h2 { font-size: 18px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1; }
}

/* ------------------------------------------------------------ small phone */
@media (max-width: 420px) {
  .logo { font-size: 19px; }
  .wrap { padding: 0 13px; }
  .hero h1 { font-size: 24px; }
  .page-hero h1 { font-size: 22px; }
  .page-hero .promo-card { padding: 20px; }
  .prod-row, .feat-grid, .prod-grid, .cat-grid { gap: 10px; }
  .stats, .stat-cards { gap: 10px; }
  .stat-card { padding: 15px 10px; }
  .stat-card b { font-size: 19px; }
  .sec-head { gap: 10px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* ------------------------------------------- short landscape screens */
@media (max-height: 460px) and (orientation: landscape) {
  .imgsearch-panel { max-height: 64vh; overflow-y: auto; }
  .hero { padding: 30px 0 26px; }
  .hero .wrap { grid-template-columns: 1fr 1fr; }
  .hv { display: none; }
}

/* -------------------------------------------------- touch niceties */
@media (hover: none) {
  /* no 3D tilt on a touch screen; a tap should feel immediate instead */
  .prod-card, .cat-card, .stat-card, .how-card, .service-card,
  .value-card, .plan-card, .tier-card, .office-card, .contact-card,
  .quote-card { transform: none; }
  .prod-thumb::after { content: none; }   /* the light sweep never lands */
}

/* ------------------------------------------------- never scroll sideways */
img, svg, video, canvas, table { max-width: 100%; }

.prod-body .name,
.imgsearch-head h3,
.addr-body,
.tl-t,
.tier-card h3,
.plan-card h3,
.office-card h3,
.contact-card b { overflow-wrap: anywhere; }


/* ####################  12-camera-view.css  #################### */

/* ==========================================================================
   ChaiBD — preview stylesheet, part 12: the camera view
   --------------------------------------------------------------------------
   A full-screen overlay opened by the camera button in the search bar: a live
   camera feed on top, a bottom sheet underneath holding the gallery / searched
   / viewed tabs, and a grab handle that grows the sheet to full height.

   The feed itself comes from js/app.js (getUserMedia). With no script the
   overlay simply stays hidden and the gallery button still works.
   ========================================================================== */

.camview {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #070405;
  animation: camview-in .2s ease;
}
.camview[hidden] { display: none; }

@keyframes camview-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------ the live feed */
.camview-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.camview-video,
.camview-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camview-video[hidden],
.camview-shot[hidden] { display: none; }

/* the picker behind the gallery tab — reachable, never seen */
.camview-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.camview-top {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  gap: 10px;
}

.camview-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background var(--t), color var(--t), transform var(--t);
}
.camview-icon:hover { background: rgba(0, 0, 0, .72); }
.camview-icon:active { transform: scale(.92); }
.camview-icon .i { width: 20px; height: 20px; }

.camview-torch.on { background: var(--amber); color: #241a00; }

.camview-hint {
  position: absolute;
  inset-inline: 0;
  bottom: 116px;
  z-index: 3;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .3s ease;
}
.camview.live .camview-hint { opacity: 1; }

.camview-error {
  position: absolute;
  inset-inline: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bad) 26%, rgba(0, 0, 0, .72));
  color: #fff;
  font-size: 12.5px;
  line-height: 1.6;
}
.camview-error[hidden] { display: none; }
.camview-error .i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

.camview-actions {
  position: absolute;
  inset-inline: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.camview-shutter {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .32), 0 0 0 10px rgba(0, 0, 0, .22);
  transition: transform .12s ease;
}
.camview-shutter:active { transform: scale(.9); }

.camview-use {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.camview-use[hidden] { display: none; }

/* ------------------------------------------------------------- bottom sheet */
.camview-sheet {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 41vh;
  background: var(--bg);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -16px 36px -24px rgba(0, 0, 0, .95);
  transition: max-height .32s cubic-bezier(.2, .7, .3, 1);
}
.camview.expanded .camview-sheet { max-height: 93vh; }

.camview-grab {
  padding: 9px 0 5px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.camview-grab:active { cursor: grabbing; }
.camview-grab span {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--card-b);
}

.camview-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--card-b);
  overflow-x: auto;
  scrollbar-width: none;
}
.camview-tabs::-webkit-scrollbar { display: none; }

.camview-tab {
  white-space: nowrap;
  padding: 11px 14px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
}
.camview-tab:hover { color: var(--ink); }
.camview-tab.active { color: var(--red); border-bottom-color: var(--red); }

.camview-panes {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.camview-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.camview-pane[hidden] { display: none; }

.camview-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.camview-note .i { width: 15px; height: 15px; flex: 0 0 auto; color: var(--amber); margin-top: 1px; }
.camview-none { justify-content: center; text-align: center; }
.camview-none[hidden] { display: none; }

.camview-open-gallery { align-self: flex-start; }

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

.camview-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  border: 1px solid var(--card-b);
  overflow: hidden;
  background: var(--card-2);
  background-size: cover;
  background-position: center;
  transition: border-color var(--t), transform var(--t);
}
.camview-thumb:hover { border-color: var(--red); transform: translateY(-2px); }
.camview-thumb .ph-clip { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 640px) {
  .camview-grid { grid-template-columns: repeat(3, 1fr); }
  .camview-actions { gap: 28px; }
  .camview-shutter { width: 64px; height: 64px; }
  .camview-hint { bottom: 104px; }
}

@media (max-width: 380px) {
  .camview-tab { padding: 10px 10px; font-size: 12.5px; }
  .camview-grid { gap: 6px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .camview-sheet { max-height: 54vh; }
  .camview.expanded .camview-sheet { max-height: 96vh; }
  .camview-hint { bottom: 88px; font-size: 12px; }
  .camview-actions { bottom: 10px; }
  .camview-shutter { width: 52px; height: 52px; }
}


/* ####################  operating-system light mode  #################### */

/* Generated from every html[data-theme="light"] rule above, so the page can
   be previewed in light mode with no JavaScript. Delete this block once
   js/app.js reliably sets data-theme on <html>. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) { --bg: #fdf8f6; --bg-2: #f6eeeb; --card: #ffffff; --card-2: #faf3f1; --card-b: #eee0dd; --ink: #221415; --ink-soft: #7c6968; --red: #e3171b; --red-dim: #c31316; --red-deep: #ffe8e6; --amber: #c9840f; --violet: #6a4fe0; --ok: #0e8a4f; --info: #2563eb; --warn: #b5730a; --bad: #d32029; --on-accent: #fff; --shadow-1: 0 10px 28px -20px rgba(60, 20, 20, .45); --shadow-2: 0 20px 46px -26px rgba(60, 20, 20, .5); --ring: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); --ph-product-earbuds: linear-gradient(135deg, #ffd9dd, #ffb3bc 55%, #ffecee); --ph-product-watch: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff); --ph-product-lamp: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5); --ph-product-powerbank: linear-gradient(135deg, #dde5ec, #c2cfda 55%, #eff4f8); --ph-product-backpack: linear-gradient(135deg, #ffd9e3, #ffb8ca 55%, #ffeef2); --ph-product-serum: linear-gradient(135deg, #ffd9e8, #ffb3d1 55%, #ffeef5); --ph-product-gamepad: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff); --ph-product-handbag: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5); --ph-product-cookware: linear-gradient(135deg, #ffd9dd, #ffb3bc 55%, #ffecee); --ph-product-tshirt: linear-gradient(135deg, #dde5ec, #c2cfda 55%, #eff4f8); --ph-product-jacket: linear-gradient(135deg, #ded6ff, #c3b6ff 55%, #f1edff); --ph-product-watch-nf: linear-gradient(135deg, #ffe9c2, #ffd489 55%, #fff6e5); --ph-product: linear-gradient(135deg, #ffe3e6, #ffc7cd 55%, #fff1f2); }
  html:not([data-theme="dark"]) .glow { opacity: .12; }
  html:not([data-theme="dark"]) .theme-toggle .ic-moon { display: none; }
  html:not([data-theme="dark"]) .theme-toggle .ic-sun { display: block; }
  html:not([data-theme="dark"]) .slide.s1 { background: linear-gradient(120deg, var(--red), var(--red-dim) 70%, #7a0f12); }
  html:not([data-theme="dark"]) .slide.s2 { background: linear-gradient(120deg, var(--amber), #b3700a 70%, #7a4d00); }
  html:not([data-theme="dark"]) .slide.s3 { background: linear-gradient(120deg, var(--violet), #4a35a8 70%, #2c1f6e); }
  html:not([data-theme="dark"]) .eyebrow { background: rgba(255, 255, 255, .22); }
  html:not([data-theme="dark"]) .t-red .ph-clip { background: linear-gradient(135deg, #ffd9dd, #ffb3bc); }
  html:not([data-theme="dark"]) .t-violet .ph-clip { background: linear-gradient(135deg, #ded6ff, #c3b6ff); }
  html:not([data-theme="dark"]) .t-amber .ph-clip { background: linear-gradient(135deg, #ffe9c2, #ffd489); }
  html:not([data-theme="dark"]) .t-slate .ph-clip { background: linear-gradient(135deg, #dde5ec, #c2cfda); }
  html:not([data-theme="dark"]) .t-rose .ph-clip { background: linear-gradient(135deg, #ffd9e8, #ffb3d1); }
  html:not([data-theme="dark"]) body::before { opacity: .45; }
}

/* ChaiBD logo: the mark in front of the name, "Chai" green and "BD" red as in the logo */
.logo, .flogo { display: inline-flex; align-items: center; color: #0b5c47; }
.logo-mark { height: 1.9em; width: auto; flex: 0 0 auto; margin-inline-end: 8px; }
.flogo .logo-mark { height: 2.2em; }
.logo span, .flogo span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #d40000; }
[data-theme="dark"] .logo, [data-theme="dark"] .flogo { color: #2fbf86; }
[data-theme="dark"] .logo span, [data-theme="dark"] .flogo span { color: #ff3b3b; }

/* The ChaiBD mark moves (pieces from src/lib/storefront/logo-svg.ts):
   on load the arrows sweep in from both sides, the pagoda and the map rise, the chains drop in and click together;
   then every few seconds the two arrows turn a full circle (China ⇄ Bangladesh), the chains swing, the lotus glows
   and a light passes over the mark. On hover the arrows spin and the chains shake. */
.lm { overflow: visible; }
.lm g[class^="lm-"] { transform-box: view-box; }
.lm .lm-arrowR, .lm .lm-arrowG { transform-origin: 200px 150px; }
.lm .lm-arrowR { animation: lm-in-r .9s cubic-bezier(.34,1.4,.64,1) both, lm-turn 9s 2.4s cubic-bezier(.7,0,.3,1) infinite; }
.lm .lm-arrowG { animation: lm-in-g .9s cubic-bezier(.34,1.4,.64,1) both, lm-turn 9s 2.4s cubic-bezier(.7,0,.3,1) infinite; }
.lm .lm-pagoda { transform-origin: 82px 210px; animation: lm-rise .7s .35s cubic-bezier(.34,1.56,.64,1) both; }
.lm .lm-map { transform-origin: 305px 215px; animation: lm-rise .7s .45s cubic-bezier(.34,1.56,.64,1) both; }
.lm .lm-chain2 { transform-origin: 219px 81px; animation: lm-drop .6s .6s cubic-bezier(.34,1.8,.64,1) both, lm-swing 9s 3.2s ease-in-out infinite; }
.lm .lm-chain { transform-origin: 187px 208px; animation: lm-drop-up .6s .75s cubic-bezier(.34,1.8,.64,1) both, lm-swing 9s 3.4s ease-in-out infinite reverse; }
.lm .lm-map path[fill="#f2b705"] { animation: lm-glow 3s 1.5s ease-in-out infinite; }
.lm .lm-shine { animation: lm-shine 9s 1.4s ease-in-out infinite; }
@keyframes lm-in-r { from { transform: rotate(-150deg) scale(.4); opacity: 0; } }
@keyframes lm-in-g { from { transform: rotate(150deg) scale(.4); opacity: 0; } }
@keyframes lm-rise { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes lm-drop { from { transform: translateY(-90px) rotate(-40deg); opacity: 0; } }
@keyframes lm-drop-up { from { transform: translateY(90px) rotate(40deg); opacity: 0; } }
@keyframes lm-turn { 0%, 72% { transform: rotate(0); } 90%, 100% { transform: rotate(360deg); } }
@keyframes lm-swing { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-14deg); } 82% { transform: rotate(9deg); } 87% { transform: rotate(-4deg); } 92% { transform: rotate(0); } }
@keyframes lm-glow { 50% { fill: #ffe066; filter: drop-shadow(0 0 6px #ffd23d); } }
@keyframes lm-shine { 0%, 8% { transform: translateX(0) skewX(-20deg); } 22%, 100% { transform: translateX(640px) skewX(-20deg); } }
.logo:hover .lm .lm-arrowR, .logo:hover .lm .lm-arrowG, .flogo:hover .lm .lm-arrowR, .flogo:hover .lm .lm-arrowG { animation: lm-spin .9s cubic-bezier(.7,0,.3,1); }
.logo:hover .lm .lm-chain2, .logo:hover .lm .lm-chain, .flogo:hover .lm .lm-chain2, .flogo:hover .lm .lm-chain { animation: lm-shake .5s ease-in-out 2; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-shake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
/* the name: letters "BD" shine now and then */
.logo span, .flogo span { background: linear-gradient(100deg, #d40000 40%, #ff8a7a 50%, #d40000 60%) 0 0/250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lm-bd 9s 1.6s ease-in-out infinite; }
[data-theme="dark"] .logo span, [data-theme="dark"] .flogo span { background-image: linear-gradient(100deg, #ff3b3b 40%, #ffd0c8 50%, #ff3b3b 60%); }
@keyframes lm-bd { 0%, 10% { background-position: 100% 0; } 25%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lm *, .logo span, .flogo span { animation: none !important; } }

/* Banners from the admin panel (Add Banner Slider) fill the hero as designed, at their own 1900×560 shape,
   and each one opens its link. The written hero and its 3D shapes step aside while banners are set. */
html .hero.has-banners { padding: 0 !important; aspect-ratio: 1900 / 560; min-height: 0 !important; height: auto !important; }
html .hero.has-banners .scene3d { display: none !important; }
/* the banner carries its own words; the three turning product cards stay on top of it */
html .hero.has-banners > .wrap { position: absolute; inset: 0; margin: 0 auto; pointer-events: none; }
html .hero.has-banners > .wrap > div:first-child { visibility: hidden; }
html .hero.has-banners .hv { pointer-events: auto; }
html .hero.has-banners::after, html .hero.has-banners::before { display: none !important; }
html .hero.has-banners .slide { background-size: cover !important; background-position: center !important; background-color: transparent !important; transform: none !important; filter: none !important; }
html .hero.has-banners .slide.active { z-index: 1; }
.hero .slide-link { position: absolute; inset: 0; z-index: 2; }
.hero.has-banners .slide-dots { z-index: 3; }
@media (max-width: 720px) { html .hero.has-banners { border-radius: 0; } }
.hero .slide:not(.active) .slide-link { pointer-events: none; }
@media (max-width: 1599px) { html .hero.has-banners .hv { zoom: .85; } }
@media (max-width: 1280px) { html .hero.has-banners .hv { zoom: .72; } }

/* hero floating cards show the product's picture when it has one */
.fc-ic.has-img { width: 64px; height: 64px; border-radius: 14px; background: #fff; padding: 0; overflow: hidden; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.fc-ic.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* flash sale icons burn: a fire-coloured flame / bolt that flickers */
.i:has(> use[href="#i-flame"]), .flash h2 .i {
  color: #ff5a1f; fill: #ff7a1a; stroke: #e8191c;
  filter: drop-shadow(0 0 4px rgba(255, 120, 20, .75)) drop-shadow(0 0 1px #ffd23d);
  transform-origin: 50% 90%; animation: fire-flicker 1.4s ease-in-out infinite;
}
.flash h2 .i { width: 1.15em; height: 1.15em; }
.flash h2 { color: #ff4d1f; }
@keyframes fire-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(255,120,20,.75)) drop-shadow(0 0 1px #ffd23d); }
  25% { transform: scale(1.08, 1.14) rotate(2deg); filter: drop-shadow(0 0 7px rgba(255,80,0,.9)) drop-shadow(0 0 2px #ffe066); }
  50% { transform: scale(.96, 1.04) rotate(-1deg); }
  75% { transform: scale(1.05, 1.1) rotate(1.5deg); filter: drop-shadow(0 0 6px rgba(255,140,0,.85)) drop-shadow(0 0 2px #ffd23d); }
}
@media (prefers-reduced-motion: reduce) { .i:has(> use[href="#i-flame"]), .flash h2 .i { animation: none; } }

/* Trust bar under the hero: each promise opens its page, arrives one by one, and its icon acts out the promise:
   the truck drives, the cash flips, the shield glows, the return arrow turns back. */
.trust-item.is-link { cursor: pointer; position: relative; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.trust-item.is-link:hover, .trust-item.is-link:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 30px -18px var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--card-b)); outline: none; }
.trust-item .ic { transition: background .3s, color .3s, transform .3s; }
.trust-item.is-link:hover .ic { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.06); }
.trust-item .go { margin-inline-start: auto; width: 16px; height: 16px; color: var(--red); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
.trust-item.is-link:hover .go, .trust-item.is-link:focus-visible .go { opacity: 1; transform: none; }
.trust.wait:not(.in) .trust-item { opacity: 0; transform: translateY(18px) scale(.96); }
.trust.in .trust-item { animation: trust-in .6s cubic-bezier(.34,1.4,.64,1) both; animation-delay: calc(var(--ti, 0) * 110ms); }
@keyframes trust-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.trust .ic .i:has(> use[href="#i-truck"]) { animation: tr-drive 2.6s ease-in-out infinite; }
.trust .ic .i:has(> use[href="#i-cash"]) { animation: tr-flip 3.2s ease-in-out infinite; }
.trust .ic .i:has(> use[href="#i-shield"]) { animation: tr-shield 2.4s ease-in-out infinite; }
.trust .ic .i:has(> use[href="#i-undo"]) { animation: tr-undo 3.4s cubic-bezier(.6,0,.3,1) infinite; }
/* RMB: the coin turns over; sourcing: the magnifier searches over the box */
.trust .ic .i:has(> use[href="#i-yuan"]) { animation: tr-coin 3s ease-in-out infinite; }
.trust .ic .i:has(> use[href="#i-src"]) { animation: tr-search 2.8s ease-in-out infinite; transform-origin: 70% 30%; }
@keyframes tr-drive { 0%, 100% { transform: translateX(-3px); } 45% { transform: translateX(3px) translateY(-1px); } 55% { transform: translateX(3px) translateY(1px); } }
@keyframes tr-flip { 0%, 60%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } }
@keyframes tr-shield { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--red) 70%, transparent)); } }
@keyframes tr-coin { 0%, 55%, 100% { transform: rotateY(0) scale(1); } 75% { transform: rotateY(180deg) scale(1.1); } }
@keyframes tr-search { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-8deg); } 50% { transform: translate(1px, 2px) rotate(0); } 75% { transform: translate(2px, -1px) rotate(8deg); } }
@keyframes tr-undo { 0%, 55%, 100% { transform: rotate(0); } 80% { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .trust .ic .i, .trust.in .trust-item { animation: none !important; } .trust.wait:not(.in) .trust-item { opacity: 1; transform: none; } }

/* Shop by category slides left and right (every design): one row of cards, arrows by the heading,
   swipe on phones, drag with the mouse, soft fade at the edge that has more */
html .cat-grid.cat-slider { display: flex !important; flex-wrap: nowrap !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 14px; margin: 0; grid-template-columns: none !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); }
html .cat-grid.cat-slider.at-start { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
html .cat-grid.cat-slider.at-end { -webkit-mask: linear-gradient(90deg, transparent, #000 24px); mask: linear-gradient(90deg, transparent, #000 24px); }
html .cat-grid.cat-slider.at-start.at-end { -webkit-mask: none; mask: none; }
html .cat-grid.cat-slider::-webkit-scrollbar { display: none; }
html .cat-grid.cat-slider > .cat-card { flex: 0 0 clamp(128px, calc((100% - 5 * 14px) / 5.4), 210px); scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
html .cat-grid.cat-slider.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
html .cat-grid.cat-slider.dragging > .cat-card { pointer-events: none; }
.cat-nav { display: flex; gap: 8px; margin-inline-start: 12px; }
.sec-head:has(.cat-nav) { align-items: flex-end; }
.sec-head .cat-nav { order: 3; }
.cat-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-b); background: var(--card); color: var(--red); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s, opacity .2s; }
.cat-arrow .i { width: 17px; height: 17px; }
.cat-arrow.prev .i { transform: rotate(180deg); }
.cat-arrow:hover:not(:disabled) { background: var(--red); color: #fff; transform: scale(1.08); }
.cat-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 720px) {
  html .cat-grid.cat-slider { gap: 10px; }
  html .cat-grid.cat-slider > .cat-card { flex-basis: 104px; }
  .cat-arrow { width: 32px; height: 32px; }
}
.sec-head:has(.cat-nav) > .more { margin-inline-start: auto; align-self: center; }

/* Flash sale slides left and right like the categories (slider() in chai-store.js) */
html .prod-row.prod-slider { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 10px; }
html .prod-row.prod-slider::-webkit-scrollbar { display: none; }
html .prod-row.prod-slider > * { flex: 0 0 calc((100% - 4 * 14px) / 4.5); min-width: 0; scroll-snap-align: start; }
html .prod-row.prod-slider.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
html .prod-row.prod-slider.dragging > * { pointer-events: none; }
html .prod-row.prod-slider:not(.at-start):not(.at-end) { -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); }
html .prod-row.prod-slider.at-start:not(.at-end) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
html .prod-row.prod-slider.at-end:not(.at-start) { -webkit-mask: linear-gradient(90deg, transparent, #000 24px); mask: linear-gradient(90deg, transparent, #000 24px); }
.flash-head .cat-nav { margin-inline-start: 12px; }
.flash-head:has(.cat-nav) .timer { margin-inline-start: auto; }
@media (max-width: 1024px) { html .prod-row.prod-slider > * { flex-basis: calc((100% - 2 * 14px) / 3.3); } }
@media (max-width: 720px) { html .prod-row.prod-slider { gap: 10px; } html .prod-row.prod-slider > * { flex-basis: 44%; } }
@media (max-width: 480px) { .flash-head .cat-nav { display: none; } }

/* slider arrows sit on the row, left and right, halfway down (not in the heading) */
.slide-box { position: relative; }
.slide-box > .cat-nav { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.slide-box > .cat-nav[hidden] { display: none; }
.slide-box .cat-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; pointer-events: auto; z-index: 3;
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 8px 22px -8px rgba(0,0,0,.35); border-color: color-mix(in srgb, var(--red) 25%, var(--card-b)); }
.slide-box .cat-arrow.prev { left: -14px; }
.slide-box .cat-arrow.next { right: -14px; }
.slide-box .cat-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.1); }
.slide-box .cat-arrow:disabled { opacity: 0; pointer-events: none; }
.flash-head .timer { margin-inline-start: auto; }
@media (max-width: 720px) {
  .slide-box .cat-arrow { width: 34px; height: 34px; }
  .slide-box .cat-arrow.prev { left: -6px; } .slide-box .cat-arrow.next { right: -6px; }
}
@media (max-width: 480px) { .slide-box > .cat-nav { display: block; } }

/* "More products" (in place of the two promo cards) */
.more-products .more-grid { margin-bottom: 4px; }
.more-foot { display: flex; justify-content: center; margin-top: 22px; }
.more-foot[hidden] { display: none; }
.more-load { min-width: 200px; justify-content: center; border-color: color-mix(in srgb, var(--red) 40%, var(--card-b)); color: var(--red); }
.more-load:hover { background: var(--red); color: #fff; }

/* Official partners: a strip of logos that keeps moving (grey until the pointer is on them), under the newsletter */
.partners .pt-strip { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners .pt-track { display: flex; gap: 8px; width: max-content; animation: pt-move calc(var(--n, 6) * 3.2s) linear infinite; }
.partners .pt-strip:hover .pt-track { animation-play-state: paused; }
@keyframes pt-move { to { transform: translateX(-50%); } }
.partners .pt-logo { flex: 0 0 auto; width: 96px; height: 42px; display: grid; place-items: center; padding: 6px 9px; border-radius: 10px; background: var(--card); border: 1px solid var(--card-b); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.partners .pt-logo { overflow: hidden; }
.partners .pt-logo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; transition: transform .3s; user-select: none; }
.partners .pt-logo:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--red) 40%, var(--card-b)); box-shadow: 0 14px 28px -16px var(--red); }
.partners .pt-logo:hover img { transform: scale(1.06); }
[data-theme="dark"] .partners .pt-logo { background: #fff; }
@media (max-width: 720px) { .partners .pt-logo { width: 80px; height: 36px; padding: 5px 7px; border-radius: 8px; } .partners .pt-track { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .partners .pt-track { animation: none; } .partners .pt-strip { overflow-x: auto; } }

.partners .sec-head { margin-bottom: 10px; }
.partners.section { padding-top: 24px; padding-bottom: 24px; }
/* each partner logo gets the card that suits it (chai-store.js partners()): light ink on dark, dark ink on light */
.partners .pt-logo.on-light { background: #fff; border-color: #ececf0; }
.partners .pt-logo.on-dark { background: linear-gradient(135deg, #1f2329, #2c323a); border-color: #2c323a; }
[data-theme="dark"] .partners .pt-logo.on-light { background: #f6f6f8; border-color: transparent; }
[data-theme="dark"] .partners .pt-logo.on-dark { background: linear-gradient(135deg, #2a2f36, #343b44); border-color: #3d444d; }

/* Footer background: quiet grey and white (scene in chai-store.js, .ft-scene). A soft white-to-grey wash, a faint
   chain pattern, the logo's pagoda and map as light grey outlines at the two ends, and a thin dotted route between
   them with a soft light moving along it. Dark mode: the same in dark greys. */
html body > footer { position: relative; overflow: hidden; isolation: isolate; margin-top: 40px; border-top: 0 !important; box-shadow: none !important;
  background: transparent !important; backdrop-filter: none !important; color: var(--ink); }
html body > footer > .wrap, html body > footer > .foot-bottom { position: relative; z-index: 2; }
html body > footer h4 { color: var(--ink); }
html body > footer h4::after { content: ""; display: block; width: 26px; height: 2px; border-radius: 2px; margin-top: 8px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
html body > footer a, html body > footer li, html body > footer .fdesc { color: color-mix(in srgb, var(--ink) 82%, var(--ink-soft)); font-weight: 500; }
html body > footer h4 { font-weight: 700; }
html body > footer .foot-bottom { color: color-mix(in srgb, var(--ink) 70%, var(--ink-soft)) !important; }
html body > footer a:hover { color: var(--ink); }
html body > footer li .i { color: color-mix(in srgb, var(--ink-soft) 80%, transparent); }
html body > footer .foot-bottom { color: var(--ink-soft); border-top: 1px solid color-mix(in srgb, var(--card-b) 40%, transparent); background: transparent; }
.ft-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(180deg, transparent, #000 30%); mask: linear-gradient(180deg, transparent, #000 30%); }
.ft-scene > * { position: absolute; }
.ft-scene::before { content: ""; position: absolute; inset: 0; opacity: .06; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.5' transform='rotate(-45 55 55)'%3E%3Crect x='26' y='45' width='32' height='20' rx='10'/%3E%3Crect x='52' y='45' width='32' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E") 0 0/110px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); }
.ft-pag, .ft-map { bottom: 0; height: 72%; opacity: .07; filter: grayscale(1) brightness(.4); }
.ft-pag { left: 1%; }
.ft-map { right: 1%; }
.ft-route { left: 0; top: 20px; width: 100%; height: calc(100% - 50px); }
.ft-route path { fill: none; vector-effect: non-scaling-stroke; }
.ft-route .d { stroke: #c4c8ce; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.ft-route .c { stroke: #9aa0a8; stroke-width: 2.5; stroke-dasharray: 80 1920; stroke-linecap: round; vector-effect: none; opacity: .6; animation: ft-comet 12s linear infinite; }
@keyframes ft-comet { from { stroke-dashoffset: 80; } to { stroke-dashoffset: -1000; } }
[data-theme="dark"] .ft-scene::before { filter: invert(1); }
[data-theme="dark"] .ft-pag, [data-theme="dark"] .ft-map { filter: grayscale(1) brightness(2.2); opacity: .06; }
[data-theme="dark"] .ft-route .d { stroke: #3a3e44; }
[data-theme="dark"] .ft-route .c { stroke: #8a8f97; }
@media (max-width: 720px) { .ft-route { display: none; } .ft-pag, .ft-map { height: 26%; } }
@media (prefers-reduced-motion: reduce) { .ft-route .c { animation: none; display: none; } }

/* footer, more motion — all in thin grey lines so it stays calm (elements from chai-store.js) */
.ft-scene { --ft-ink: #8f949b; --ft-soft: #c8ccd2; }
[data-theme="dark"] .ft-scene { --ft-ink: #8a8f97; --ft-soft: #3b3f45; }
/* a dot grid like a world map, slowly drifting */
.ft-dots { inset: 0; opacity: .5; background: radial-gradient(circle, var(--ft-soft) 1.1px, transparent 1.6px) 0 0/18px 18px; animation: ft-drift 40s linear infinite;
  -webkit-mask: radial-gradient(60% 80% at 50% 60%, #000, transparent); mask: radial-gradient(60% 80% at 50% 60%, #000, transparent); }
@keyframes ft-drift { to { background-position: 180px 0; } }
/* a slow compass ring in the middle */
.ft-ring { left: 50%; top: 52%; width: 300px; height: 300px; margin: -150px 0 0 -150px; }
.ft-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--ft-soft); animation: ft-spin 60s linear infinite; }
.ft-ring i + i { inset: 40px; border-style: solid; border-color: transparent var(--ft-soft); animation-duration: 24s; animation-direction: reverse; }
@keyframes ft-spin { to { transform: rotate(360deg); } }
/* the second route goes back from Bangladesh to China */
.ft-route .d2 { stroke-dasharray: 1 9; }
.ft-route .c2 { animation-duration: 15s; animation-delay: -6s; opacity: .45; }
/* a small plane flies the upper route, China → Bangladesh */
.ft-plane { left: 0; top: 0; width: 22px; color: var(--ft-ink); offset-rotate: auto; offset-anchor: 50% 50%; animation: ft-fly 14s ease-in-out infinite; opacity: 0; }
.ft-plane svg { display: block; width: 100%; fill: currentColor; }
@keyframes ft-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: .7; } 92% { opacity: .7; } 100% { offset-distance: 100%; opacity: 0; } }
/* location pins at both ends with ripples */
.ft-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--ft-ink); bottom: 40px; }
.ft-pin.a { left: 9%; } .ft-pin.b { right: 9%; }
.ft-pin i, .ft-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--ft-ink); animation: ft-ripple 3s ease-out infinite; }
.ft-pin::after { animation-delay: 1.5s; }
@keyframes ft-ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(4.5); opacity: 0; } }
/* parcels drift up and turn */
.ft-box { bottom: -30px; width: 20px; color: var(--ft-ink); opacity: 0; animation: ft-up 16s linear infinite; }
.ft-box svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
@keyframes ft-up { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .45; } 80% { opacity: .3; } 100% { transform: translateY(-340px) rotate(160deg); opacity: 0; } }
/* chain links draw themselves, hold, and fade */
.ft-link { width: 46px; color: var(--ft-ink); animation: ft-bob 6s ease-in-out infinite; }
.ft-link svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ft-link rect { stroke-dasharray: 80; stroke-dashoffset: 80; animation: ft-draw 7s ease-in-out infinite; animation-delay: inherit; }
.ft-link rect + rect { animation-delay: .6s; }
@keyframes ft-draw { 0% { stroke-dashoffset: 80; opacity: 0; } 15% { opacity: .5; } 40%, 70% { stroke-dashoffset: 0; opacity: .5; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ft-bob { 50% { transform: translateY(-6px); } }
/* the pagoda and the map breathe a little */
.ft-pag, .ft-map { animation: ft-breathe 8s ease-in-out infinite; transform-origin: 50% 100%; }
.ft-map { animation-delay: -4s; }
@keyframes ft-breathe { 50% { transform: scale(1.03); opacity: .1; } }
/* a light runs along the top border */
html body > footer::before { display: none; content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 30%; z-index: 3; background: linear-gradient(90deg, transparent, #9aa0a8, transparent); animation: ft-edge 9s ease-in-out infinite; }
@keyframes ft-edge { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
/* columns come up one by one; links slide on hover */
footer.ft-wait:not(.ft-in) > .wrap > * { opacity: 0; transform: translateY(18px); }
footer.ft-in > .wrap > * { animation: ft-col .7s cubic-bezier(.2,.8,.2,1) both; }
footer.ft-in > .wrap > :nth-child(2) { animation-delay: .1s; } footer.ft-in > .wrap > :nth-child(3) { animation-delay: .2s; } footer.ft-in > .wrap > :nth-child(4) { animation-delay: .3s; }
@keyframes ft-col { from { opacity: 0; transform: translateY(18px); } }
html body > footer ul a { display: inline-block; transition: transform .25s, color .25s; }
html body > footer ul a:hover { transform: translateX(5px); }
html body > footer h4::after { transition: width .4s; }
html body > footer .wrap > div:hover h4::after { width: 48px; }
html body > footer li .i { transition: transform .3s; }
html body > footer li:hover .i { transform: scale(1.2) rotate(-8deg); }
@media (max-width: 720px) { .ft-ring, .ft-plane, .ft-link:nth-of-type(n+3) { display: none; } .ft-pin { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .ft-scene *, html body > footer::before, footer.ft-in > .wrap > * { animation: none !important; } .ft-plane, .ft-box { display: none; } .ft-link rect { stroke-dashoffset: 0; opacity: .4; } }

/* footer: social icons under Contact, and the Apps column (built in chai-store.js) */
html body > footer .wrap { grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.1fr; }
.ft-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ft-social a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 70%, transparent) !important; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, box-shadow .25s; }
.ft-social a svg { width: 16px; height: 16px; fill: currentColor; }
.ft-social a:hover { transform: translateY(-4px) rotate(-6deg) !important; background: var(--c); color: #fff !important; border-color: transparent; box-shadow: 0 10px 20px -10px var(--c); }
footer.ft-in .ft-social a { animation: ft-pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.5s + var(--i) * 60ms); }
@keyframes ft-pop { from { opacity: 0; transform: scale(.4); } }
.ft-apps-p { font-size: 12.5px; margin: 0 0 12px; color: var(--ink-soft); }
.ft-store { display: flex !important; align-items: center; gap: 10px; width: 168px; padding: 7px 14px; margin-bottom: 9px; border-radius: 11px; background: #111; color: #fff !important; border: 1px solid #333;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; text-decoration: none; }
.ft-store svg { width: 22px; height: 22px; flex: none; fill: #fff; }
.ft-store.ft-googleplay svg { fill: #34a853; } .ft-store.ft-appgallery svg { fill: #c8102e; }
.ft-store span { display: flex; flex-direction: column; line-height: 1.1; }
.ft-store small { font-size: 9.5px; letter-spacing: .03em; opacity: .85; text-transform: uppercase; color: #fff; }
.ft-store b { font-size: 15px; font-weight: 600; color: #fff; }
.ft-store:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 22px -12px rgba(0,0,0,.6); }
[data-theme="dark"] .ft-store { background: #fff; border-color: #fff; }
[data-theme="dark"] .ft-store small, [data-theme="dark"] .ft-store b { color: #111; }
[data-theme="dark"] .ft-store svg { fill: #111; }
[data-theme="dark"] .ft-store.ft-googleplay svg { fill: #34a853; } [data-theme="dark"] .ft-store.ft-appgallery svg { fill: #c8102e; }

@media (max-width: 720px) { html body > footer .wrap { grid-template-columns: 1fr; } .ft-store { width: 100%; max-width: 220px; } }

/* footer brand block: logo and text centred in their column, level with the other columns */
html body > footer .wrap > div:first-child { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; align-self: center; }
html body > footer .wrap > div:first-child .flogo { justify-content: center; margin-bottom: 12px; }
html body > footer .wrap > div:first-child .fdesc { margin: 0 auto; max-width: 300px; }
html body > footer .flogo .logo-mark { height: 3em; }

/* footer logo: its own calm motion (the header keeps the build-up and turn): the two arrows circle slowly
   for ever, the chains pulse in turn, the pagoda and the map float up and down out of step, a soft halo breathes */
html body > footer .lm .lm-arrowR, html body > footer .lm .lm-arrowG { animation: lmf-rock 5s ease-in-out infinite; }
html body > footer .lm .lm-pagoda { animation: lmf-float 4s ease-in-out infinite; }
html body > footer .lm .lm-map { animation: lmf-float 4s 2s ease-in-out infinite; }
html body > footer .lm .lm-chain2 { animation: lmf-pulse 3s ease-in-out infinite; }
html body > footer .lm .lm-chain { animation: lmf-pulse 3s 1.5s ease-in-out infinite; }
html body > footer .lm .lm-shine { animation: lm-shine 6s ease-in-out infinite; }
html body > footer .lm { filter: drop-shadow(0 0 0 rgba(242,183,5,0)); animation: lmf-halo 4s ease-in-out infinite, lmf-flip 10s ease-in-out infinite; transform-style: preserve-3d; }
html body > footer .flogo:hover .lm { animation-duration: 4s, 1.6s; }
@keyframes lmf-rock { 50% { transform: rotate(10deg); } }
@keyframes lmf-flip { 0%, 80% { transform: perspective(400px) rotateY(0); } 90% { transform: perspective(400px) rotateY(180deg); } 100% { transform: perspective(400px) rotateY(360deg); } }
@keyframes lmf-float { 50% { transform: translateY(-8px); } }
@keyframes lmf-pulse { 50% { transform: scale(1.08); } }
@keyframes lmf-halo { 50% { filter: drop-shadow(0 0 8px rgba(242,183,5,.55)); } }
@media (prefers-reduced-motion: reduce) { html body > footer .lm, html body > footer .lm * { animation: none !important; } }
html body > footer .wrap > div:first-child { padding-inline-end: 60px; }
@media (max-width: 1100px) { html body > footer .wrap > div:first-child { padding-inline-end: 0; } }

/* Newsletter in the website's own style (decor built in chai-store.js, .news.nl2): the site's card with soft red
   glows drifting behind, a faint dot grid, outline envelopes floating up, paper planes with dotted trails, and a
   line envelope above the heading that opens and lets an offer card rise while small icons orbit it.
   The form is a glowing pill (a red-gold light runs round its edge) with a paper-plane button. */
html .news.nl2 { position: relative; overflow: hidden; isolation: isolate; padding: 30px 38px 30px; }
.news.nl2 > :not(.n2-deco) { position: relative; z-index: 2; }
.n2-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.n2-deco > * { position: absolute; }
.n2-glow { width: 340px; height: 340px; border-radius: 50%; filter: blur(70px); opacity: .22; background: var(--red); animation: n2-drift 14s ease-in-out infinite alternate; }
.n2-glow.a { left: -80px; top: -120px; } .n2-glow.b { right: -90px; bottom: -150px; background: var(--amber, #f2b705); opacity: .16; animation-delay: -7s; }
@keyframes n2-drift { to { transform: translate(120px, 60px) scale(1.15); } }
.n2-grid { inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--red) 30%, transparent) 1px, transparent 1.6px) 0 0/20px 20px; opacity: .35;
  -webkit-mask: radial-gradient(70% 90% at 50% 50%, transparent 35%, #000); mask: radial-gradient(70% 90% at 50% 50%, transparent 35%, #000); }
.n2-float { bottom: -40px; width: 26px; color: color-mix(in srgb, var(--red) 55%, transparent); opacity: 0; animation: n2-up 14s linear infinite; }
.n2-float svg, .n2-plane svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
@keyframes n2-up { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translateY(-340px) rotate(12deg); opacity: 0; } }
.n2-plane { left: 0; top: 0; width: 24px; color: var(--red); opacity: 0; }
.n2-plane::after { content: ""; position: absolute; right: 100%; top: 55%; width: 80px; border-top: 2px dotted color-mix(in srgb, var(--red) 35%, transparent); }
.n2-plane.p1 { animation: n2-fly1 12s ease-in-out infinite; } .n2-plane.p2 { animation: n2-fly2 15s ease-in-out infinite; animation-delay: -6s; width: 18px; }
@keyframes n2-fly1 { 0% { transform: translate(-60px, 170px) rotate(-8deg); opacity: 0; } 10% { opacity: .75; } 50% { transform: translate(45vw, 40px) rotate(0deg); } 90% { opacity: .75; } 100% { transform: translate(92vw, 110px) rotate(4deg); opacity: 0; } }
@keyframes n2-fly2 { 0% { transform: translate(-40px, 60px) rotate(6deg); opacity: 0; } 10% { opacity: .55; } 50% { transform: translate(40vw, 170px) rotate(0deg); } 90% { opacity: .55; } 100% { transform: translate(90vw, 30px) rotate(-8deg); opacity: 0; } }
/* the envelope above the heading */
.n2-env { width: 78px; height: 70px; margin: 0 auto 18px; position: relative; }
.n2-box { position: absolute; left: 7px; bottom: 0; width: 64px; overflow: visible; fill: var(--card); stroke: var(--red); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; z-index: 2; }
.n2-box .flap { fill: color-mix(in srgb, var(--red) 10%, var(--card)); transform-origin: 32px 18px; transform-box: view-box; animation: n2-flap 4.4s ease-in-out infinite; }
.n2-box .v { fill: none; }
@keyframes n2-flap { 0%, 15%, 85%, 100% { transform: scaleY(-1); } 35%, 65% { transform: scaleY(1); } }
.n2-card { position: absolute; left: 50%; bottom: 18px; z-index: 1; translate: -50% 0; font: 800 12px Poppins, sans-serif; color: #fff; background: linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 60%, #f2b705)); padding: 4px 9px; border-radius: 7px; box-shadow: 0 6px 14px -6px var(--red); animation: n2-card 4.4s ease-in-out infinite; }
@keyframes n2-card { 0%, 30% { transform: translateY(14px) scale(.7); opacity: 0; } 45%, 62% { transform: translateY(-26px) scale(1) rotate(-6deg); opacity: 1; } 75%, 100% { transform: translateY(14px) scale(.7); opacity: 0; } }
.n2-orbit { position: absolute; inset: -14px; animation: n2-spin 9s linear infinite; z-index: 3; }
.n2-orbit b { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--card); color: var(--red); box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); animation: n2-spin 9s linear infinite reverse; }
.n2-orbit b:nth-child(1) { left: -6px; top: 34%; } .n2-orbit b:nth-child(2) { right: -6px; top: 18%; font-size: 10px; } .n2-orbit b:nth-child(3) { left: 44%; bottom: -10px; color: #e3a400; }
@keyframes n2-spin { to { transform: rotate(360deg); } }
/* the form: a glowing pill with a light running round its edge */
@property --n2a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html .news.nl2 .news-form { max-width: 470px; padding: 5px 5px 5px 18px; border: 2px solid transparent; border-radius: 99px; overflow: visible;
  background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--n2a), color-mix(in srgb, var(--red) 25%, transparent), var(--red), #f2b705, color-mix(in srgb, var(--red) 25%, transparent) 40%, color-mix(in srgb, var(--red) 25%, transparent)) border-box;
  animation: n2-ring 5s linear infinite; box-shadow: 0 14px 32px -20px var(--red); transition: transform .3s, box-shadow .3s; }
@keyframes n2-ring { to { --n2a: 360deg; } }
html .news.nl2 .news-form:focus-within { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 12%, transparent), 0 18px 36px -20px var(--red); animation-duration: 1.8s; }
html .news.nl2 .news-form .i { color: var(--red); }
html .news.nl2 .news-form input { padding: 11px 0; font-size: 14px; }
html .news.nl2 .news-form button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 12px 20px 12px 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 80%, #ff7a59), var(--red) 55%, var(--red-dim)); box-shadow: 0 8px 18px -8px var(--red); transition: transform .25s, box-shadow .25s, padding .3s; }
html .news.nl2 .news-form button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); background-size: 250% 100%; animation: n2-shine 3.5s ease-in-out infinite; }
@keyframes n2-shine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
html .news.nl2 .news-form button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px var(--red); padding-right: 26px; }
.n2-pl { width: 17px; display: inline-block; transition: transform .45s cubic-bezier(.5,-.4,.3,1.4); }
.n2-pl svg { display: block; width: 100%; fill: rgba(255,255,255,.25); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
html .news.nl2 .news-form button:hover .n2-pl { transform: translate(5px, -3px) rotate(-10deg); }
.n2-note { margin: 12px 0 0 !important; font-size: 12px !important; color: var(--ink-soft); opacity: .85; }
/* sent: the button's plane takes off, the envelope closes with a pop */
.news.nl2.sent .n2-pl { animation: n2-away 1.2s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes n2-away { 40% { transform: translate(-6px, 4px); } 100% { transform: translate(260px, -160px) rotate(-20deg) scale(.6); opacity: 0; } }
.news.nl2.sent .n2-env { animation: n2-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes n2-pop { 50% { transform: scale(1.18); } }
@media (max-width: 720px) {
  html .news.nl2 { padding: 26px 16px; }
  html .news.nl2 .news-form { padding-left: 12px; }
  html .news.nl2 .news-form button { padding: 11px 14px; }
  .n2-plane.p2, .n2-float:nth-of-type(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .n2-deco *, .n2-env *, .news.nl2 .news-form, .news.nl2 .news-form button::before { animation: none !important; } .n2-plane, .n2-float, .n2-card { display: none; } }
/* the paper-plane icon points up-right; turn it so its nose leads along the flight */
.n2-plane svg { transform: rotate(23deg); transform-origin: 50% 50%; }
.slide-box .cat-arrow { top: var(--mid, 50%); }

/* Full-width website: every section uses the whole screen width, with side space that grows with the screen.
   Product grids take more cards per row on wide screens so cards keep a good size. */
:root { --wrap: 100%; --side: clamp(16px, 3.2vw, 64px); }
@media (min-width: 1500px) { :root { --wrap: 100%; } }
.wrap { padding-left: var(--side) !important; padding-right: var(--side) !important; }
.msearch form { max-width: none; padding-left: var(--side); padding-right: var(--side); }
@media (min-width: 1400px) { .feat-grid { grid-template-columns: repeat(6, 1fr); } .prod-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1800px) { .feat-grid { grid-template-columns: repeat(6, 1fr); } .prod-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1400px) { html .prod-row.prod-slider > * { flex-basis: calc((100% - 5 * 14px) / 5.5); } html .cat-grid.cat-slider > .cat-card { flex-basis: clamp(128px, calc((100% - 7 * 14px) / 7.4), 230px); } }
@media (min-width: 1800px) { html .prod-row.prod-slider > * { flex-basis: calc((100% - 6 * 14px) / 6.5); } }
/* popular products: one full row — 6 cards on wide screens, 4 elsewhere */
@media (max-width: 1399px) { .feat-grid:not(.more-grid) > :nth-child(n+5) { display: none; } }

/* Cards over the banners (chai-store.js heroCards; admin: General Settings → Banner Cards). Sizes follow the
   banner's width (cqw), so the cards keep the same place and proportion on every screen. */
html .hero.has-banners { container-type: inline-size; }
html .hero.has-banners .hv { display: none !important; }
.hcards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hcard { --w: calc(12.5cqw * var(--hs, 1) * var(--cs, 1)); position: absolute; left: var(--x); top: var(--y); width: var(--w); pointer-events: auto;
  padding: calc(var(--w) * .07); border-radius: calc(var(--w) * .085); color: #fff; text-decoration: none;
  background: rgba(14, 6, 8, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 calc(var(--w) * .12) calc(var(--w) * .2) calc(var(--w) * -.1) rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  animation: hc-float 5.5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
.hcards.still .hcard { animation: none; }
.hcard:nth-child(even) { animation-name: hc-float-b; animation-duration: 6.5s; }
@keyframes hc-float { 50% { transform: translateY(calc(var(--w) * -.06)) rotate(-1deg); } }
@keyframes hc-float-b { 50% { transform: translateY(calc(var(--w) * .05)) rotate(1deg); } }
.hcard:hover { animation-play-state: paused; transform: translateY(calc(var(--w) * -.05)) scale(1.05); box-shadow: 0 calc(var(--w) * .16) calc(var(--w) * .26) calc(var(--w) * -.1) rgba(0,0,0,.7), 0 0 0 2px rgba(255,210,61,.6); z-index: 2; }
.hc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: calc(var(--w) * .05); }
.hc-img { width: calc(var(--w) * .3); height: calc(var(--w) * .3); border-radius: calc(var(--w) * .06); background: #fff; overflow: hidden; flex: none; box-shadow: 0 4px 12px -6px rgba(0,0,0,.5); }
.hc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-img.e { background: linear-gradient(135deg, var(--red), #f2b705); }
.hc-badge { font: 800 calc(var(--w) * .062)/1 Poppins, sans-serif; color: #ffd88a; background: rgba(255,255,255,.16); padding: .35em .6em; border-radius: 99px; white-space: nowrap; }
.hc-name { font-weight: 700; font-size: calc(var(--w) * .066); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-line { margin-top: calc(var(--w) * .035); display: flex; align-items: baseline; gap: .5em; font-size: calc(var(--w) * .062); }
.hc-line b { font-family: Poppins, sans-serif; font-weight: 800; color: #ffd23d; font-size: 1.25em; }
.hc-line b.t { font-size: 1em; font-family: inherit; }
.hc-line s { opacity: .65; }
@media (max-width: 1024px) { .hcards { display: none; } }
@media (prefers-reduced-motion: reduce) { .hcard { animation: none; } }
/* banners are 1920 × 700; the trust bar sits a little lower under them */
html .hero.has-banners { aspect-ratio: 1920 / 700; }
html .trust { margin-top: 30px; }
@media (max-width: 720px) { html .trust { margin-top: 18px; } }

/* Popular and More products: two rows of five that slide left and right (slider() in chai-store.js) */
html .feat-grid.rows2 { display: grid !important; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 10px; }
html .feat-grid.rows2::-webkit-scrollbar { display: none; }
html .feat-grid.rows2 > * { display: block !important; min-width: 0; scroll-snap-align: start; }
html .feat-grid.rows2.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
html .feat-grid.rows2.dragging > * { pointer-events: none; }
@media (max-width: 1024px) { html .feat-grid.rows2 { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } }
@media (max-width: 720px) { html .feat-grid.rows2 { grid-auto-columns: calc((100% - 10px) / 2.15); gap: 10px; } }
/* the auto-gliding category row: no snapping (it would fight the glide), arrows always available */
html .cat-grid.cat-slider.auto { scroll-snap-type: none; scroll-behavior: auto; }
/* Shop by Category right under the banner, the trust bar after it */
html .hero + section .cat-grid { margin-top: 0; }
html section.trust { margin-top: 0; }
html .hero + section.section { padding-top: 34px; }
/* categories: the card that has just arrived at the front gives a little hop; hovering lifts a card and wakes its icon */
html .cat-grid.cat-slider .cat-card { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .35s; }
html .cat-grid.cat-slider .cat-card.hop .ic { animation: cat-hop .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes cat-hop { 30% { transform: translateY(-8px) rotate(-8deg) scale(1.12); } 60% { transform: translateY(0) rotate(4deg); } }
html .cat-grid.cat-slider .cat-card:hover { transform: translateY(-6px); border-color: var(--red); box-shadow: 0 16px 28px -18px var(--red); }
html .cat-grid.cat-slider .cat-card:hover .ic { background: var(--red); color: #fff; animation: cat-wiggle .6s ease; }
@keyframes cat-wiggle { 25% { transform: rotate(-10deg) scale(1.1); } 75% { transform: rotate(8deg) scale(1.1); } }
html .cat-grid.cat-slider .cat-card .ic { transition: background .3s, color .3s; }

/* ☰ menu next to the logo and its side panel (chai-store.js sideMenu), in the style of the admin panel's sidebar */
.sd-btn { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--card-b); background: var(--card); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; margin-inline-end: 10px; transition: border-color .25s, background .25s; }
.sd-btn i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s, width .3s, background .25s; }
.sd-btn i:nth-child(2) { width: 12px; }
.sd-btn:hover { border-color: var(--red); }
.sd-btn:hover i { background: var(--red); }
.sd-btn:hover i:nth-child(2) { width: 18px; }
.sd-btn.x { background: var(--red); border-color: var(--red); }
.sd-btn.x i { background: #fff; }
.sd-btn.x i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sd-btn.x i:nth-child(2) { opacity: 0; }
.sd-btn.x i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
html.sd-lock { overflow: hidden; }
.sd-wrap { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.sd-over { position: absolute; inset: 0; background: rgba(10,6,8,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.sd-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(310px, 86vw); background: var(--card); border-right: 1px solid var(--card-b); box-shadow: 20px 0 50px -20px rgba(0,0,0,.35);
  display: flex; flex-direction: column; transform: translateX(-105%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.sd-wrap.open { pointer-events: auto; }
.sd-wrap.open .sd-over { opacity: 1; }
.sd-wrap.open .sd-panel { transform: none; }
.sd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 14px; border-bottom: 1px solid var(--card-b); }
.sd-head .logo { font-size: 22px; }
.sd-x { width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; }
.sd-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sd-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.sd-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; flex: 1; }
.sd-list > li { opacity: 0; transform: translateX(-12px); }
.sd-wrap.open .sd-list > li { animation: sd-in .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.08s + var(--i) * 35ms); }
@keyframes sd-in { to { opacity: 1; transform: none; } }
.sd-a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: start; transition: background .2s, color .2s; }
.sd-a > svg:first-child { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.sd-a span { flex: 1; }
.sd-a:hover { background: color-mix(in srgb, var(--red) 7%, transparent); color: var(--red); }
.sd-a:hover > svg:first-child { transform: scale(1.12) rotate(-6deg); }
.sd-a.on { background: linear-gradient(90deg, color-mix(in srgb, var(--red) 14%, transparent), transparent); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.sd-chev { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.sd-g.open > .sd-a .sd-chev { transform: rotate(90deg); stroke: var(--red); }
.sd-g > ul { list-style: none; margin: 0; padding: 0 0 0 44px; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.sd-g.open > ul { max-height: 600px; }
.sd-s { display: block; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink-soft); position: relative; transition: background .2s, color .2s, padding .2s; }
.sd-s::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--card-b); transition: background .2s; }
.sd-s:hover, .sd-s.on { color: var(--red); background: color-mix(in srgb, var(--red) 6%, transparent); padding-left: 14px; }
.sd-s:hover::before, .sd-s.on::before { background: var(--red); }
.sd-foot { padding: 12px 18px 18px; border-top: 1px solid var(--card-b); font-size: 12.5px; color: var(--ink-soft); }
.sd-foot:empty { display: none; }
@media (max-width: 720px) { .sd-btn { width: 36px; height: 36px; margin-inline-end: 6px; } }

.sd-list > li.sd-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 12px 4px; opacity: 1; transform: none; animation: none !important; }
.sd-list > li.sd-h:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--card-b); padding-top: 14px; }
.sd-ci { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.sd-foot { padding: 12px 14px 16px; }
.sd-fh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.sd-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sd-apps .ft-store { width: auto; margin: 0; padding: 6px 9px; gap: 7px; border-radius: 9px; }
.sd-apps .ft-store svg { width: 18px; height: 18px; }
.sd-apps .ft-store small { font-size: 8px; } .sd-apps .ft-store b { font-size: 12.5px; }
.sd-apps .ft-store:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: start; min-width: calc(50% - 4px); }

/* Header search, livelier (chai-store.js): a soft pill with a red-gold edge that runs round when focused,
   a search icon that bounces, a button with an icon and a passing shine, and live results underneath */
@property --sxa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html form.search.sx { position: relative; border: 1.5px solid transparent; border-radius: 99px; padding-inline-start: 16px;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--card-b), var(--card-b)) border-box;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); transition: box-shadow .3s, transform .3s; }
html form.search.sx:hover { box-shadow: 0 10px 24px -14px var(--red); }
html form.search.sx:focus-within { transform: translateY(-1px);
  background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--sxa), var(--red), #f2b705, color-mix(in srgb, var(--red) 30%, transparent) 35%, color-mix(in srgb, var(--red) 30%, transparent) 65%, var(--red)) border-box;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 10%, transparent), 0 14px 30px -16px var(--red); animation: sx-ring 2.6s linear infinite; }
@keyframes sx-ring { to { --sxa: 360deg; } }
html form.search.sx > .i { transition: color .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
html form.search.sx:focus-within > .i { color: var(--red); transform: scale(1.18) rotate(-12deg); }
html form.search.sx input { font-size: 14.5px; }
html form.search.sx input::placeholder { color: color-mix(in srgb, var(--ink-soft) 85%, transparent); }
html form.search.sx > button[type="submit"] { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; margin: 4px; padding: 0 20px; border-radius: 99px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 80%, #ff7a59), var(--red) 55%, var(--red-dim)); box-shadow: 0 6px 14px -8px var(--red); transition: transform .25s, box-shadow .25s; }
html form.search.sx > button[type="submit"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); background-size: 250% 100%; animation: sx-shine 4s ease-in-out infinite; }
@keyframes sx-shine { 0%, 65% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
html form.search.sx > button[type="submit"]:hover { transform: scale(1.04); box-shadow: 0 10px 20px -8px var(--red); }
html form.search.sx > button[type="submit"] .i { width: 15px; height: 15px; color: #fff; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
html form.search.sx > button[type="submit"]:hover .i { transform: rotate(-15deg) scale(1.15); }
html form.search.sx .imgsearch-btn { border-radius: 50% !important; }
/* live results */
.sx-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 70; padding: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-b); box-shadow: 0 24px 50px -22px rgba(0,0,0,.35); animation: sx-in .25s cubic-bezier(.2,.8,.2,1); }
.sx-drop[hidden] { display: none; }
@keyframes sx-in { from { opacity: 0; transform: translateY(-6px); } }
html header.main:has(form.sx-open) { z-index: 80; position: relative; }
.sx-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); animation: sx-row .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 35ms); transition: background .2s; }
@keyframes sx-row { from { opacity: 0; transform: translateX(-8px); } }
.sx-item:hover { background: color-mix(in srgb, var(--red) 7%, transparent); }
.sx-pic { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--red) 8%, var(--card)); overflow: hidden; flex: none; }
.sx-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-name { flex: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-price { font: 700 13px Poppins, sans-serif; color: var(--red); }
.sx-all { display: block; text-align: center; padding: 9px; margin-top: 4px; border-top: 1px solid var(--card-b); font-size: 13px; font-weight: 600; color: var(--red); }
.sx-none { padding: 14px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.sx-load { display: flex; justify-content: center; gap: 5px; padding: 16px; }
.sx-load i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: sx-dot .9s ease-in-out infinite; }
.sx-load i:nth-child(2) { animation-delay: .15s; } .sx-load i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-dot { 50% { transform: translateY(-6px); opacity: .4; } }
@media (max-width: 720px) { html form.search.sx > button[type="submit"] { padding: 0 12px; } html form.search.sx > button[type="submit"] span { display: none; } }
@media (prefers-reduced-motion: reduce) { html form.search.sx, html form.search.sx *, .sx-drop * { animation: none !important; } }
/* header buttons counted from the right edge: account, cart, wishlist, language, light/dark */
header.main .header-actions > .search-toggle { order: 0; }
header.main .header-actions > .theme-toggle { order: 1; }
header.main .header-actions > .lang { order: 2; }
header.main .header-actions > a[href$="wishlist.html"] { order: 3; }
header.main .header-actions > a[href$="cart.html"] { order: 4; }
header.main .header-actions > a[href$="account.html"], header.main .header-actions > a[href="/admin"] { order: 5; }

/* Support button in the header (chai-store.js supportBtn): sits between wishlist and language */
header.main .header-actions > .sp-wrap { order: 2; position: relative; }
header.main .header-actions > .lang { order: 1; }
header.main .header-actions > .theme-toggle { order: 0; }
header.main .header-actions > .search-toggle { order: -1; }
.sp-btn { background: none; border: 0; cursor: pointer; font: inherit; }
.sp-ic { position: relative; display: block; width: 22px; height: 22px; }
.sp-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.sp-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--card); }
.sp-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: sp-ping 1.8s ease-out infinite; }
@keyframes sp-ping { to { transform: scale(2.6); opacity: 0; } }
.sp-btn:hover .sp-ic svg, .sp-wrap.open .sp-ic svg { transform: rotate(-12deg) scale(1.1); color: var(--red); }
.sp-wrap.open .sp-btn .lbl { color: var(--red); }
.sp-menu { position: absolute; right: -40px; top: calc(100% + 12px); z-index: 70; width: 280px; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-b); box-shadow: 0 24px 50px -20px rgba(0,0,0,.35); animation: sx-in .25s cubic-bezier(.2,.8,.2,1); }
.sp-menu[hidden] { display: none; }
html header.main:has(.sp-wrap.open) { z-index: 80; position: relative; }
.sp-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--card-b); margin-bottom: 6px; }
.sp-head b { display: block; font-size: 14px; } .sp-head small { font-size: 12px; color: var(--ink-soft); }
.sp-i { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px; color: var(--ink); animation: sx-row .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 35ms); transition: background .2s; }
.sp-i:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.sp-ri { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); transition: transform .3s, background .25s, color .25s; }
.sp-ri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-i:hover .sp-ri { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.06); }
.sp-i b { display: block; font-size: 13.5px; } .sp-i small { font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 1100px) { .sp-wrap { display: none; } }
/* Support button as a small glowing pill: red gradient, headset and label side by side, a soft pulse ring,
   the headset nods every few seconds, the online dot pings */
header.main .sp-btn { flex-direction: row !important; gap: 7px !important; padding: 7px 14px 7px 9px; border-radius: 99px; color: #fff !important; position: relative; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 75%, #ff7a59), var(--red) 55%, var(--red-dim)); box-shadow: 0 8px 18px -10px var(--red); transition: transform .25s, box-shadow .25s; }
header.main .sp-btn::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--red); opacity: 0; z-index: -1; animation: sp-ring 2.6s ease-out infinite; }
@keyframes sp-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.25); opacity: 0; } }
header.main .sp-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); background-size: 250% 100%; animation: sx-shine 4.5s ease-in-out infinite; pointer-events: none; }
header.main .sp-btn .lbl { color: #fff !important; font-weight: 700; font-size: 13px; }
header.main .sp-btn .sp-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
header.main .sp-btn .sp-ic svg { width: 16px; height: 16px; color: #fff !important; stroke-width: 2.1; animation: sp-nod 4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sp-nod { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
header.main .sp-btn .sp-dot { top: -1px; right: -1px; box-shadow: 0 0 0 2px var(--red); }
header.main .sp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px var(--red); }
header.main .sp-wrap.open .sp-btn { transform: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent); }
header.main .sp-wrap.open .sp-btn .lbl, header.main .sp-wrap.open .sp-ic svg { color: #fff !important; }
@media (prefers-reduced-motion: reduce) { header.main .sp-btn::before, header.main .sp-btn::after, header.main .sp-btn .sp-ic svg { animation: none; } }


/* ===================================================================== performance
   The page had ~180 animations running at once, a full-screen blended grain layer on top of everything, and many
   blurred glass layers. Effects that are not on screen now pause (chai-store.js marks them .is-off), the grain is
   gone, the aurora is cheaper, and glass blurs are smaller. */
body::after { display: none !important; }
body::before { will-change: transform; contain: strict; }
@media (max-width: 900px) { body::before { animation: none !important; filter: blur(48px) !important; } }
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.hcard { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.slide-box .cat-arrow { backdrop-filter: none !important; background: var(--card) !important; }
.hero .slide { will-change: opacity; }
.hero .slide:not(.active) { visibility: hidden; transition: opacity 1.1s ease, visibility 0s 1.1s; }
.hero .slide.active { visibility: visible; transition: opacity 1.1s ease; }

@media (max-width: 720px) {
  .hcard, .float-card, .news.nl2, .flash { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .ft-dots, .ft-ring, .n2-grid { display: none !important; }
}

/* ---- performance, part 2: the logo (inline SVG) and glow effects animate in short bursts instead of every frame.
   SVG parts and filter/glow changes are redrawn by the processor on every frame they animate, so a logo that
   "waits" inside an endless animation still costs as much as one that moves. Now the logo rests between bursts:
   chai-store.js adds .go to a visible logo every 8 seconds for 2.5 seconds. */
html .lm .lm-arrowR { animation: lm-in-r .9s cubic-bezier(.34,1.4,.64,1) both; }
html .lm .lm-arrowG { animation: lm-in-g .9s cubic-bezier(.34,1.4,.64,1) both; }
html .lm .lm-chain2 { animation: lm-drop .6s .6s cubic-bezier(.34,1.8,.64,1) both; }
html .lm .lm-chain { animation: lm-drop-up .6s .75s cubic-bezier(.34,1.8,.64,1) both; }
html .lm .lm-map path[fill="#f2b705"] { animation: none; }
html .lm .lm-shine { animation: none; transform: translateX(-200px); }
html .logo span, html .flogo span { animation: none; background-position: 0 0; }
html .lm.go .lm-arrowR, html .lm.go .lm-arrowG { animation: lmb-turn 1.6s cubic-bezier(.7,0,.3,1); }
html .lm.go .lm-chain2 { animation: lmb-swing 1.3s .35s ease-in-out; }
html .lm.go .lm-chain { animation: lmb-swing 1.3s .5s ease-in-out reverse; }
html .lm.go .lm-map path[fill="#f2b705"] { animation: lmb-glow 1.6s ease-in-out; }
html .lm.go .lm-shine { animation: lmb-shine 1.4s .2s ease-in-out; }
html .logo.go span, html .flogo.go span { animation: lmb-bd 1.4s ease-in-out; }
@keyframes lmb-turn { to { transform: rotate(360deg); } }
@keyframes lmb-swing { 30% { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
@keyframes lmb-glow { 50% { fill: #ffe066; } }
@keyframes lmb-shine { from { transform: translateX(-160px) skewX(-20deg); } to { transform: translateX(640px) skewX(-20deg); } }
@keyframes lmb-bd { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* the footer logo: still between bursts; a burst rocks the arrows, floats the pagoda and map, pulses the chains, turns once */
html body > footer .lm, html body > footer .lm * { animation: none !important; }
html body > footer .lm { filter: none; }
html body > footer .lm.go .lm-arrowR, html body > footer .lm.go .lm-arrowG { animation: lmb-rock 2.2s ease-in-out !important; }
html body > footer .lm.go .lm-pagoda { animation: lmb-float 2.2s ease-in-out !important; }
html body > footer .lm.go .lm-map { animation: lmb-float 2.2s .4s ease-in-out !important; }
html body > footer .lm.go .lm-chain2, html body > footer .lm.go .lm-chain { animation: lmb-pulse 1.2s ease-in-out 2 !important; }
html body > footer .lm.go .lm-shine { animation: lmb-shine 1.4s .3s ease-in-out !important; }
html body > footer .lm.go { animation: lmb-flip 1.4s .6s ease-in-out !important; }
@keyframes lmb-rock { 50% { transform: rotate(10deg); } }
@keyframes lmb-float { 50% { transform: translateY(-8px); } }
@keyframes lmb-pulse { 50% { transform: scale(1.08); } }
@keyframes lmb-flip { from { transform: perspective(400px) rotateY(0); } to { transform: perspective(400px) rotateY(360deg); } }
/* glows that changed a filter every frame now change only size (cheap); the glow itself stays still */
@keyframes fire-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.08, 1.14) rotate(2deg); } 50% { transform: scale(.96, 1.04) rotate(-1deg); } 75% { transform: scale(1.05, 1.1) rotate(1.5deg); } }
@keyframes tr-shield { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* light sweeps and running borders only while the pointer or the cursor is on them */
html .news.nl2 .news-form { animation: none; }
html .news.nl2 .news-form:focus-within, html .news.nl2 .news-form:hover { animation: n2-ring 2.4s linear infinite; }
html .news.nl2 .news-form button::before, html form.search.sx > button[type="submit"]::after, header.main .sp-btn::after { animation: none; background-position: 150% 0; }
html .news.nl2 .news-form button:hover::before, html form.search.sx > button[type="submit"]:hover::after, header.main .sp-btn:hover::after { animation: sx-shine 1.6s ease-in-out infinite; }
/* big soft glows move as layers of their own */
.n2-glow, .cl-bg i, .ft-dots { will-change: transform; }
img { content-visibility: visible; }
/* banner cards: a darker glass without the live blur (a blurred layer that also moves is redrawn every frame) */
html .hcard { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(20, 8, 10, .66); }
/* the banner picture sits in its own layer over whatever the website design paints on the slide */
html .hero .slide .slide-img { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; }
html .hero .slide video.slide-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* a video banner (chai-store.js) */
html .hero.has-banners .slide { background: none !important; animation: none !important; }
html .hero.has-banners .slide::before, html .hero.has-banners .slide::after { display: none !important; }
html .hero .slide .slide-link { z-index: 2; }

/* phones: two header rows — menu, logo, theme and language on top, the search bar the full width under them */
@media (max-width: 620px) {
  header.main .wrap { flex-wrap: wrap; row-gap: 8px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  header.main .wrap > .search { order: 10; flex: 1 1 100%; max-width: none; }
  header.main .header-actions { margin-inline-start: auto; }
  header.main .logo .logo-mark { height: 1.7em; }
  html form.search.sx input { padding: 9px 0; }
}

/* phone/tablet bottom bar: Home, Shop, Wishlist, Messages (raised red button in the middle), Cart, Account;
   the floating chat bubble is not needed there */
@media (max-width: 980px) {
  .cw-fab, .cw-tip { display: none !important; }
  .mnav .mnav-item { min-width: 0; }
  .mnav .mn-chat { border: 0; background: none; font: inherit; cursor: pointer; color: var(--red); font-weight: 600; }
  .mn-chat-ic { position: relative; width: 46px; height: 46px; margin: -22px 0 -2px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--red) 72%, #ffb347), var(--red) 60%, color-mix(in srgb, var(--red) 72%, #000)); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--red) 60%, transparent), 0 0 0 4px var(--bg); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .mn-chat-ic svg { width: 24px; height: 24px; fill: #fff; stroke: var(--red); stroke-width: 1.2; }
  .mn-chat:active .mn-chat-ic { transform: scale(.92); }
  .mn-chat-ic .cw-badge { top: -4px; right: -6px; }
  .mnav-item { font-size: 10px; }
}
@media (max-width: 360px) { .mnav-item { font-size: 9.5px; padding-left: 2px; padding-right: 2px; } }
@media (max-width: 980px) { .mnav .mn-chat { font-size: 10px !important; line-height: inherit; padding: 9px 4px 8px; } .mnav .mn-chat > span:last-child { font-size: 10px; } }

/* the bottom bar, dressed up: a floating rounded glass bar with seven buttons (Home, Shop, Wishlist, Messages, Track,
   Cart, Account); the current page sits in a soft red pill with its icon lifted, buttons spring when tapped */
@media (max-width: 980px) {
  html .mnav { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 4px 4px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--red) 14%, var(--card-b));
    background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 14px 34px -14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); align-items: flex-end; }
  html .mnav .mnav-item { padding: 7px 2px 6px; gap: 2px; border-radius: 16px; font-size: 10px; letter-spacing: -.1px; color: var(--ink-soft); transition: color .25s, background .25s; }
  html .mnav .mnav-item > .i { width: 21px; height: 21px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  html .mnav .mnav-item.active { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); font-weight: 700; }
  html .mnav .mnav-item.active::before { display: none; }
  html .mnav .mnav-item.active > .i { transform: translateY(-2px) scale(1.08); }
  html .mnav .mnav-item:active > .i { transform: scale(.85); }
  html .mnav .mn-chat { background: none !important; padding-top: 0; }
  html .mn-chat-ic { width: 50px; height: 50px; margin: -26px 0 1px; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--red) 65%, transparent), 0 0 0 5px var(--card); animation: mn-pulse 3s ease-in-out infinite; }
  @keyframes mn-pulse { 0%, 85%, 100% { transform: none; } 90% { transform: scale(1.08); } 95% { transform: scale(.97); } }
  html .mnav .mnav-badge { top: 2px; }
  html body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  html body > footer { margin-bottom: 0; }
}
@media (max-width: 380px) { html .mnav { left: 6px; right: 6px; } html .mnav .mnav-item { font-size: 9px; } html .mnav .mnav-item > .i { width: 19px; height: 19px; } html .mn-chat-ic { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { html .mn-chat-ic { animation: none; } }

/* banner cards wear the website design's own card style (they are .float-card too): colours, borders, corners,
   badges and motion come from the design; only their place and size stay ours so they never drift or overlap */
html .hero .hcards .hcard.float-card { position: absolute !important; left: var(--x) !important; top: var(--y) !important; right: auto !important; bottom: auto !important;
  width: var(--w) !important; height: auto !important; margin: 0 !important; padding: calc(var(--w) * .07) !important; z-index: 3; }
html .hero .hcards .hcard.float-card .fc-ic.hc-img { width: calc(var(--w) * .3) !important; height: calc(var(--w) * .3) !important; padding: 0 !important; background: #fff; }
html .hero .hcards .hcard.float-card .hc-name { font-size: calc(var(--w) * .066) !important; }
html .hero .hcards .hcard.float-card .hc-line { font-size: calc(var(--w) * .062) !important; }
html .hero .hcards .hcard.float-card .hc-badge { font-size: calc(var(--w) * .062) !important; }
html .hero .hcards .hcard.float-card .hc-line b { color: inherit; }
html:not([data-skin]) .hero .hcards .hcard.float-card .hc-line b, html[data-skin="classic"] .hero .hcards .hcard.float-card .hc-line b { color: #ffd23d; }
html .hero .hcards .hcard.float-card:hover { z-index: 5; }
html .hero .hcards .hcard.float-card { min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; grid-row: auto !important; grid-column: auto !important; }
/* whatever a design does to its own slides (Glass dims them), a banner shows at full strength */
html .hero.has-banners .slide.active { opacity: 1 !important; }
html .hero.has-banners .slide:not(.active) { opacity: 0 !important; }
/* glitches found by checking all 38 designs */
html .hero.has-banners .wrap::before, html .hero.has-banners .wrap::after { display: none !important; }   /* Zen's sun covered the banner */
html[data-skin="comic"] .sec-head h2 { color: #111 !important; -webkit-text-fill-color: #111 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }  /* Comic's heading ribbons had no text */
html .feat-grid.rows2 { grid-auto-flow: column !important; grid-template-rows: repeat(2, auto) !important; }
html .feat-grid.rows2 > .prod-card { grid-column: auto !important; grid-row: auto !important; }     /* Bento's big tiles broke the two-row sliders */
html .feat-grid.rows2 > .prod-card .prod-thumb { aspect-ratio: 1 / 1 !important; flex: none !important; }
/* the footer is see-through in every design, so its words must use the page's own ink (some designs made them white
   for a dark footer that is no longer there) */
html body > footer, html body > footer h4, html body > footer .flogo { color: var(--ink) !important; }
html body > footer a, html body > footer li, html body > footer li span, html body > footer .fdesc, html body > footer p { color: color-mix(in srgb, var(--ink) 82%, var(--ink-soft)) !important; }
html body > footer a:hover { color: var(--red) !important; }
html body > footer .foot-bottom { color: var(--ink-soft) !important; }
html body > footer .ft-store, html body > footer .ft-store * { color: #fff !important; }
[data-theme="dark"] body > footer .ft-store, [data-theme="dark"] body > footer .ft-store * { color: #111 !important; }
/* text on the design's accent colour uses the design's own "on accent" colour (Noir's accent is white) */
header.main .sp-btn, header.main .sp-btn .lbl, header.main .sp-wrap.open .sp-btn .lbl, header.main .sp-btn .sp-ic svg, header.main .sp-wrap.open .sp-ic svg { color: var(--on-accent, #fff) !important; }
header.main .sp-btn .sp-ic { background: color-mix(in srgb, var(--on-accent, #fff) 22%, transparent); }
html .mn-chat-ic svg { fill: var(--on-accent, #fff); }

/* ---- performance, part 3 (footer and newsletter): effects that repainted a whole wide picture every frame
   are still now — the dot grid no longer slides, the routes' running lights and the self-drawing chain links stay
   drawn; the plane, parcels, pins, rings, envelopes and planes still move (they move as layers of their own) */
html .ft-dots { animation: none !important; }
html .ft-route .c, html .ft-route .c2 { animation: none !important; opacity: 0 !important; }
html .ft-link rect { animation: none !important; stroke-dashoffset: 0 !important; opacity: .45 !important; }
html .cl-route .cm { animation-duration: 10s; }
.ft-box, .ft-link, .ft-plane, .ft-pin, .n2-float, .n2-plane, .pt-track { will-change: transform; }
/* header buttons from the right: account, cart, wishlist, support, feedback (chai-feedback.js), language, light/dark */
header.main .header-actions > .fb-btn { order: 1; }
header.main .header-actions > .lang { order: 0; }
header.main .header-actions > .theme-toggle { order: -1; }
header.main .header-actions > .search-toggle { order: -2; }
/* banner cards on tablets and phones: the same spots as on a computer (admin → Banner Cards, or the automatic
   places), so the banner looks the same on every screen, only smaller. The banner keeps one shape (1920 × 700)
   everywhere; the cards grow a little relative to it so they stay readable, and turn compact: picture, price,
   and the discount on the corner (the name too on tablets). */
@media (max-width: 620px) {
  html .hero.has-banners .hcards { display: block !important; }
  html .hero .hcards .hcard.float-card {
    --w: calc(17cqw * var(--hs, 1) * var(--cs, 1)) !important;
    left: min(var(--x), calc(98% - var(--w))) !important; top: clamp(7%, var(--y), 68%) !important;
    display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--w) * .07); row-gap: 0;
    padding: calc(var(--w) * .06) calc(var(--w) * .08) calc(var(--w) * .06) calc(var(--w) * .06) !important; border-radius: calc(var(--w) * .1) !important;
  }
  html .hero .hcards .hcard.float-card .hc-top { display: contents; }
  html .hero .hcards .hcard.float-card .fc-ic.hc-img { grid-column: 1; grid-row: 1 / span 2; width: calc(var(--w) * .34) !important; height: calc(var(--w) * .34) !important; flex: none; margin: 0 !important; }
  html .hero .hcards .hcard.float-card .hc-badge { position: absolute; top: calc(var(--w) * -.08); right: calc(var(--w) * -.06); margin: 0 !important; padding: .2em .5em; font-size: calc(var(--w) * .075) !important; background: var(--red, #d40000); color: var(--on-accent, #fff); z-index: 2; border-radius: 99px; }
  html .hero .hcards .hcard.float-card .hc-name { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; margin: 0 !important; font-size: calc(var(--w) * .08) !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  html .hero .hcards .hcard.float-card .hc-line { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; margin: 0 !important; font-size: calc(var(--w) * .1) !important; white-space: nowrap; }
  html .hero .hcards .hcard.float-card .hc-line s { display: none; }
}
@media (max-width: 620px) {
  html .hero .hcards .hcard.float-card { --w: calc(21cqw * var(--hs, 1) * var(--cs, 1)) !important; top: clamp(10%, var(--y), 64%) !important; }
  html .hero .hcards .hcard.float-card .hc-name { display: none !important; }
  html .hero .hcards .hcard.float-card .hc-line { grid-row: 1 / span 2; align-self: center; font-size: calc(var(--w) * .13) !important; }
  html .hero .hcards .hcard.float-card:nth-child(n+4) { display: none !important; }
}
/* phones: a taller banner (about 25% more height) so the cards have room inside it; the picture fills it
   from the left, so its words stay whole and only a strip of the far right is trimmed */
@media (max-width: 620px) {
  html .hero.has-banners { aspect-ratio: 1920 / 880 !important; }
  html .hero .slide .slide-img { background-position: 12% center; }
  html .hero .hcards .hcard.float-card { top: clamp(13%, var(--y), 70%) !important; left: min(var(--x), calc(97% - var(--w))) !important; }
}
/* banner cards on tablets and phones, made to hold their size whatever the phone does to text: a phone's
   larger-text setting and Chrome's automatic text enlarging could make the cards taller than planned, which pushed
   them out of the banner. Now each card has a fixed height (from its width), its words never grow it, and its top
   is kept so the whole card fits above the banner's bottom edge. */
@media (max-width: 620px) {
  html .hero .hcards { -webkit-text-size-adjust: none; text-size-adjust: none; }
  html .hero .hcards .hcard.float-card {
    height: calc(var(--w) * .48) !important; box-sizing: border-box !important; align-content: center;
    top: clamp(7%, var(--y), calc(96% - var(--w) * .48)) !important;
  }
  html .hero .hcards .hcard.float-card .hc-name, html .hero .hcards .hcard.float-card .hc-line { overflow: hidden; text-overflow: ellipsis; max-height: 100%; line-height: 1.2 !important; }
  html .hero.has-banners { overflow: hidden; }
}
@media (max-width: 620px) {
  html .hero .hcards .hcard.float-card { top: clamp(13%, var(--y), calc(95% - var(--w) * .48)) !important; }
}
/* phones: a smaller picture and slimmer padding leave the price its room (chai-store.js also shrinks a long price
   until it fits) */
@media (max-width: 620px) {
  html .hero .hcards .hcard.float-card { padding: calc(var(--w) * .05) !important; column-gap: calc(var(--w) * .05) !important; }
  html .hero .hcards .hcard.float-card .fc-ic.hc-img { width: calc(var(--w) * .28) !important; height: calc(var(--w) * .28) !important; }
  html .hero .hcards .hcard.float-card .hc-line { text-overflow: clip; }
}
/* top bar on screens too narrow for all its messages (chai-store.js adds .mq-one): one message at a time,
   centred, each sliding up into place every few seconds */
.marquee.mq-one .mq-set { display: grid !important; justify-content: center; justify-items: center; overflow: hidden; }
.marquee.mq-one .mq { grid-area: 1 / 1; margin: 0 12px; opacity: 0; transform: translateY(110%); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.marquee.mq-one .mq.on { opacity: 1; transform: none; }
.marquee.mq-one .mq.out { opacity: 0; transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) { .marquee.mq-one .mq { transition: opacity .3s; transform: none !important; } }
/* footer on tablets and phones: logo on top, then Company | Customer service, Contact | Social media,
   and the app buttons in the middle at the bottom */
html body > footer .ft-soc-col { display: none; }
@media (max-width: 720px) {
  html body > footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 22px !important; row-gap: 30px !important; }
  html body > footer .wrap > div:first-child { grid-column: 1 / -1; }
  html body > footer .wrap > div:not(:first-child):not(.ft-apps):not(.ft-soc-col) .ft-social { display: none !important; }
  html body > footer .ft-soc-col { display: block; }
  html body > footer .ft-soc-col .ft-soc-p { margin: -4px 0 12px; font-size: 13px; color: var(--ink-soft); }
  html body > footer .ft-soc-col .ft-social { display: grid !important; grid-template-columns: repeat(4, 36px); gap: 10px; margin-top: 0; justify-content: start; }
  html body > footer .ft-apps { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; }
  html body > footer .ft-apps .ft-store { width: auto; min-width: 0; max-width: none; }
  html body > footer .ft-apps h4::after { margin-inline: auto; }
}
@media (max-width: 720px) {
  html body > footer .ft-apps { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  html body > footer .ft-apps h4, html body > footer .ft-apps .ft-apps-p { flex-basis: 100%; }
  html body > footer .ft-soc-col .ft-social { grid-template-columns: repeat(3, 36px); }
}
/* footer picture on tablets and phones: exactly the computer's picture, made smaller. The scene keeps the
   computer's size (1351 x 390) and is scaled down to the footer's width (--fs, set by chai-store.js), sitting along
   the footer's bottom, so the pagoda, map, routes, pins and ring keep the same places relative to each other. */
@media (max-width: 720px) {
  html body > footer .ft-scene { inset: auto !important; left: 0 !important; bottom: 0 !important; width: 1351px !important; height: 390px !important; transform: scale(var(--fs, .3)); transform-origin: 0 100%; }
  html body > footer .ft-scene .ft-pag, html body > footer .ft-scene .ft-map { height: 72% !important; width: auto !important; max-width: none !important; bottom: 0 !important; }
  html body > footer .ft-scene .ft-pag { left: 1% !important; } html body > footer .ft-scene .ft-map { right: 1% !important; left: auto !important; }
  html body > footer .ft-scene .ft-route { display: block !important; left: 0 !important; top: 20px !important; bottom: auto !important; width: 100% !important; height: calc(100% - 50px) !important; }
  html body > footer .ft-scene .ft-pin { bottom: 40px !important; }
  html body > footer .ft-scene .ft-ring { display: block !important; left: 50% !important; top: 52% !important; bottom: auto !important; width: 300px !important; height: 300px !important; margin: -150px 0 0 -150px !important; }
  html body > footer .ft-scene .ft-ring i + i { inset: 40px !important; }
  html body > footer .ft-scene .ft-plane, html body > footer .ft-scene .ft-link, html body > footer .ft-scene .ft-dots { display: block !important; }
}
/* tablets: the computer's footer — logo, Company, Customer service, Contact with social icons, and Apps in one
   row — a little tighter */
@media (min-width: 721px) and (max-width: 1100px) {
  html body > footer .wrap { grid-template-columns: 1.25fr 1fr 1fr 1.15fr 1.1fr !important; column-gap: 18px !important; }
  html body > footer .wrap > div:first-child { padding-inline-end: 0; }
  html body > footer .wrap h4 { font-size: 14px; }
  html body > footer .wrap li, html body > footer .wrap li a, html body > footer .fdesc { font-size: 12.5px; }
  html body > footer .ft-store { min-width: 0 !important; width: 100% !important; max-width: 150px; padding: 6px 9px !important; }
  html body > footer .ft-store b { font-size: 12.5px; }
  html body > footer .ft-social { gap: 6px !important; }
}
/* tablets: the banner cards look and sit exactly as on a computer (picture on top, name, price, badge), a little
   bigger relative to the banner so their words stay readable */
@media (min-width: 621px) and (max-width: 1024px) {
  html .hero.has-banners .hcards { display: block !important; }
  html .hero .hcards .hcard.float-card { --w: calc(15.5cqw * var(--hs, 1) * var(--cs, 1)) !important; }
}
/* page transitions between the shop's pages (browsers that support cross-page View Transitions): a soft fade and
   lift, and on opening a product its card picture grows into the product picture (chai-store.js, chai-pdp.js) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-group(pd-hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.9,.25,1); z-index: 50; }
::view-transition-old(pd-hero), ::view-transition-new(pd-hero) { height: 100%; object-fit: contain; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* page transitions between the shop's pages (browsers that support cross-page View Transitions): a soft fade and
   lift, and on opening a product its card picture grows into the product picture (chai-store.js, chai-pdp.js) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.2,.8,.2,1) both; }
::view-transition-group(pd-hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.9,.25,1); z-index: 50; }
::view-transition-old(pd-hero), ::view-transition-new(pd-hero) { height: 100%; object-fit: contain; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* phones held sideways (short screens): a slim bottom bar with icons only, so pages keep their height */
@media (orientation: landscape) and (max-height: 540px) {
  html .mnav { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 20px)); bottom: 6px; padding: 2px 4px; border-radius: 18px; }
  html .mnav .mnav-item { padding: 6px 4px !important; min-height: 0; }
  html .mnav .mnav-item > span:not(.mnav-badge):not(.mn-chat-ic), html .mnav .mn-chat > span:last-child { display: none !important; }
  html .mnav .mnav-item svg { width: 20px; height: 20px; }
  html .mnav .mn-chat .mn-chat-ic { width: 40px; height: 40px; margin-top: -14px; }
  html footer { margin-bottom: 52px; }
}
/* the moving category bar (chai-store.js catnavHop): soft fading edges and a hop for the category arriving in front */
nav.catnav.cn-auto .wrap { scroll-behavior: auto; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
nav.catnav.cn-auto a { flex: none; transition: color .3s; }
@keyframes cn-hop { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.06); } 70% { transform: translateY(1px); } 100% { transform: none; } }
nav.catnav.cn-auto a.hop { animation: cn-hop .6s cubic-bezier(.34,1.56,.64,1); color: var(--red); }
/* tracking page: an unpaid online order can be paid again */
.trk-pay { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, #f59e0b 12%, var(--card)); border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--card-b)); }
.trk-pay div { display: grid; } .trk-pay b { font-size: 15px; } .trk-pay span { font-size: 13px; color: var(--ink-soft); }
.trk-pay button { border: 0; border-radius: 12px; padding: 11px 18px; font: inherit; font-weight: 800; color: var(--on-accent, #fff); background: var(--red); cursor: pointer; box-shadow: 0 10px 20px -12px var(--red); }
/* tracking page: bank transfer state */
.trk-bank { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--card-b); }
.trk-bank > div { flex: 1; min-width: 200px; display: grid; } .trk-bank b { font-size: 15px; } .trk-bank > div span { font-size: 13px; color: var(--ink-soft); }
.trk-bank-i { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; }
.trk-bank.wait { background: color-mix(in srgb, #f59e0b 10%, var(--card)); border-color: color-mix(in srgb, #f59e0b 40%, var(--card-b)); } .trk-bank.wait .trk-bank-i { background: #fef3c7; }
.trk-bank.ok { background: color-mix(in srgb, #22c55e 10%, var(--card)); border-color: color-mix(in srgb, #22c55e 40%, var(--card-b)); } .trk-bank.ok .trk-bank-i { background: #16a34a; }
.trk-bank.bad { background: color-mix(in srgb, #e11d48 8%, var(--card)); border-color: color-mix(in srgb, #e11d48 35%, var(--card-b)); } .trk-bank.bad .trk-bank-i { background: #e11d48; }
.trk-bank button { border: 0; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 700; color: var(--on-accent, #fff); background: var(--red); cursor: pointer; }
.trk-bank-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.trk-bank-f select, .trk-bank-f input { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; min-width: 0; }
@media (max-width: 560px) { .trk-bank-f { grid-template-columns: 1fr; } }
.trk-bank.live .trk-bank-i { animation: trk-pulse 1.6s ease-in-out infinite; }
@keyframes trk-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(245,158,11,.15); } }
.trk-bank.fresh { animation: trk-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes trk-pop { 0% { transform: scale(.94); } 50% { transform: scale(1.03); } 100% { transform: none; } }

/* the customer's profile picture in place of the account icon (header and the phone's bottom bar) */
img.chai-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3.5px var(--red); }
.mnav img.chai-av { width: 22px; height: 22px; }
.chai-av-w { position: relative; display: inline-block; line-height: 0; }
.chai-av-w.vf::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d9bf0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 8px no-repeat; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* search by picture: real results (public/js/chai-store.js) */
.img-list { display: flex; flex-direction: column; gap: 4px; max-height: min(46vh, 340px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.img-result-item { animation: img-panel-in .3s both; animation-delay: calc(var(--i, 0) * 40ms); }
.img-result-info { flex: 1; }
.img-match { flex: none; padding: 3px 8px; border-radius: 99px; font: 700 11px 'Poppins', sans-serif; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.img-match.hi { color: #fff; background: #16a34a; }
.img-more { font-size: 12.5px; font-weight: 700; color: var(--red); text-align: center; padding: 4px; }
.img-load { display: flex; gap: 6px; justify-content: center; padding: 14px 0; }
.img-load i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: img-dot .9s ease-in-out infinite; }
.img-load i:nth-child(2) { animation-delay: .15s; } .img-load i:nth-child(3) { animation-delay: .3s; }
@keyframes img-dot { 50% { transform: translateY(-6px); opacity: .4; } }

/* footer: less empty space above the logo (it sat low under the partners strip) */
html body > footer { margin-top: 12px !important; }
html body > footer .wrap { padding-top: 22px !important; align-items: start; }
html body > footer .wrap > div:first-child { align-self: start; }
html body > footer .flogo { margin-bottom: 8px !important; }
@media (max-width: 760px) { html body > footer .wrap { padding-top: 14px !important; } }

/* the language button: a "文A" translate sign instead of the globe */
.chai-lang-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the menu button: round like the other header buttons, three even lines; a cross while the menu is open */
.sd-btn { border-radius: 50% !important; gap: 3.5px !important; }
.sd-btn i, .sd-btn i:nth-child(2), .sd-btn:hover i:nth-child(2) { width: 16px !important; height: 2px !important; border-radius: 2px !important; }
.sd-btn i:nth-child(4) { display: none !important; }
.sd-btn.x i:nth-child(1) { transform: translateY(5.5px) rotate(45deg) !important; }
.sd-btn.x i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) !important; }
/* the language button: round on phones like its neighbours, a pill on computers; the same dark icon */
#langBtn, .lang-btn { border-radius: 99px !important; color: var(--ink) !important; }
#langBtn .chai-lang-ic, .lang-btn .chai-lang-ic { width: 18px; height: 18px; stroke-width: 1.8; color: var(--ink); }
@media (max-width: 760px) {
  .sd-btn { width: 34px !important; height: 34px !important; }
  header #langBtn, header .lang-btn { width: 34px !important; height: 34px !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 50% !important; }
  header #langBtn .chai-lang-ic { width: 17px; height: 17px; }
}

/* home banner: the service ads floating over it (sourcing, RMB, reseller) */
html .hero .hcards .hcard.float-card .fc-ic.hc-ad, .hc-img.hc-ad { display: grid !important; place-items: center; color: #fff !important; font: 800 calc(var(--w) * .15)/1 Poppins, sans-serif;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ac) 75%, #fff), var(--ac)) !important; box-shadow: 0 6px 16px -6px var(--ac); animation: hc-ad-bob 2.8s ease-in-out infinite; }
@keyframes hc-ad-bob { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-8deg) scale(1.08); } }
.hcard.hc-ad-card .hc-line b.t { color: #ffd23d; }
.hcard.hc-ad-card { outline: 1px solid rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: reduce) { .hc-img.hc-ad { animation: none; } }

/* footer on computers and tablets: a little lower, the logo block centred against the columns (phones unchanged) */
@media (min-width: 761px) {
  html body > footer { margin-top: 28px !important; }
  html body > footer .wrap { padding-top: 46px !important; padding-bottom: 30px !important; padding-inline: 22px !important; align-items: start; }
  html body > footer .wrap > div:first-child { align-self: center; }
}
/* tablets: the logo and the line about the shop on their own row in the middle, the four columns under it */
@media (min-width: 721px) and (max-width: 1100px) {
  html body > footer .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: 26px !important; }
  html body > footer .wrap > div:first-child { grid-column: 1 / -1; align-items: center; text-align: center; }
  html body > footer .wrap > div:first-child .fdesc { max-width: 520px; }
}

/* the service ads' pictures (public/img/ads): no white frame, a gentle bob */
html .hero .hcards .hcard.hc-ad-card .fc-ic.hc-img { background: transparent !important; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); animation: hc-ad-bob 3s ease-in-out infinite; }
html .hero .hcards .hcard.hc-ad-card:nth-child(2) .fc-ic.hc-img { animation-delay: -1s; } html .hero .hcards .hcard.hc-ad-card:nth-child(3) .fc-ic.hc-img { animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { html .hero .hcards .hcard.hc-ad-card .fc-ic.hc-img { animation: none; } }
/* the service ads' badges take the card's own text colour, so they read on light and dark designs */
html .hero .hcards .hcard.hc-ad-card .hc-badge { color: inherit !important; background: color-mix(in srgb, currentColor 16%, transparent) !important; }


/* ===================== smoother scrolling (2026-10) =====================
   Blur behind moving or fixed layers (backdrop-filter) is redrawn on every frame of a scroll; on phones and tablets
   those layers get a solid tint of the same colour instead. Sections below the screen are not drawn until they come
   near (content-visibility). Decorations pause while the page is hidden. */
@media (max-width: 1100px), (hover: none) {
  html .hcard, html .hero .hcards .hcard { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(14, 6, 8, .74) !important; }
  html header.main { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: color-mix(in srgb, var(--bg, #fff) 94%, transparent) !important; }
  html .mnav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: color-mix(in srgb, var(--card, #fff) 96%, transparent) !important; }
  html .eyebrow, html .camview-icon, html .sd-over { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html .sx-kick, html .sx-rate, html .sx-tag, html .rm-rates div, html .sr-rates div { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
html body > footer, html body > section.trust, html .news, html .partners, html section.section:nth-of-type(n+4) { content-visibility: auto; contain-intrinsic-size: auto 600px; }
html body > footer { contain-intrinsic-size: auto 520px; }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

/* phones and tablets: no blur behind cards, bars and small buttons (they redraw on every scroll frame); the same
   tint, a little more solid */
@media (max-width: 1100px), (hover: none) {
  html :is(.imgsearch-panel, .sp-top, .filters, .thumb-btn, .g-dots, .pd-bb, .pd-mt-b, .ct-bar, .track-hero, .track-status, .tk-pop, .help-card, .form-card, .hours-card, .side-card, .map-box, .me-gear, .account-nav, .account-block) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html :is(.track-hero, .track-status, .help-card, .form-card, .hours-card, .side-card, .map-box, .account-nav, .account-block, .filters) { background-color: color-mix(in srgb, var(--card, #fff) 94%, transparent) !important; }
  html :is(.sp-top, .pd-bb, .ct-bar) { background-color: color-mix(in srgb, var(--card, #fff) 97%, transparent) !important; }
  html :is(.thumb-btn, .g-dots, .tk-pop) { background-color: color-mix(in srgb, var(--card, #fff) 88%, transparent) !important; }
  /* the product page's top buttons are dark glass with white icons over the picture (solid bar: plain) */
  html .pd-mt-b { background-color: rgba(20, 16, 18, .5) !important; } html .pd-mt.solid .pd-mt-b { background-color: transparent !important; }
  /* the account card's settings / logout buttons sit on the red card with white icons: a light see-through tint */
  html .me-gear { background-color: rgba(255,255,255,.22) !important; }
}

/* while the page scrolls every decoration holds still (chai-store.js adds html.scrolling) */
html.scrolling :is(header, footer, .marquee, .hero, .page-hero, .news, .trust, .partners, .sx-hero, .flash-head, .mnav, .cw-fab, .in-route, .map-box, .rm-hero) :is(*, *::before, *::after) { animation-play-state: paused !important; }
/* banner ad cards (sourcing, RMB, shipping …): on phones a picture and a short name, no sentence or corner badge */
html .hero .hcards .hcard .hc-short { display: none; }
@media (max-width: 620px) {
  html .hero .hcards .hcard.float-card.hc-ad-card { --w: calc(24cqw * var(--hs, 1) * var(--cs, 1)) !important; }
  html .hero .hcards .hcard.float-card.hc-ad-card :is(.hc-line, .hc-badge, .hc-name) { display: none !important; }
  html .hero .hcards .hcard.float-card.hc-ad-card .hc-short { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 0; font-weight: 800; font-size: calc(var(--w) * .125); line-height: 1.12; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}
/* trust bar: shipping service — the parcel hops; reseller — the boxes stack and settle */
.trust .ic .i:has(> use[href="#i-package"]) { animation: tr-hop 2.6s cubic-bezier(.3,1.4,.6,1) infinite; }
.trust .ic .i:has(> use[href="#i-boxes"]) { animation: tr-stack 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tr-hop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 72% { transform: translateY(-5px) rotate(-8deg); } 84% { transform: translateY(0) rotate(4deg); } }
@keyframes tr-stack { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.12, .88); } 45% { transform: scale(.92, 1.1) translateY(-3px); } 60% { transform: scale(1, 1); } }
/* phones and tablets (no hover): a pressed card leans in 3D like a hovered one on a computer (chai-store.js adds .tap3d) */
@media (hover: none) {
  .prod-card, .cat-card, .stat-card { transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s; }
  .prod-card.tap3d { transform: perspective(1000px) rotateX(6deg) rotateY(-6deg) translateY(-6px) translateZ(20px); box-shadow: 0 30px 50px -28px color-mix(in srgb, var(--red) 55%, transparent), 0 10px 24px -18px rgba(0, 0, 0, .9); }
  .prod-card.tap3d .ph { transform: scale(1.08); } .prod-card.tap3d .prod-thumb .pi { transform: translateZ(36px) scale(1.05); } .prod-card.tap3d .prod-thumb::after { transform: translateX(130%); }
  .cat-card.tap3d { transform: perspective(800px) rotateX(8deg) translateY(-5px) translateZ(16px); }
  .stat-card.tap3d, .tier-card.tap3d, .how-card.tap3d, .service-card.tap3d { transform: perspective(900px) rotateX(5deg) rotateY(-4deg) translateY(-5px) translateZ(14px); }
}
/* the middle banner card leans the other way, like the other two */
@keyframes hc-float-b { 0%, 100% { transform: rotateX(4deg) rotateY(14deg) translateY(0); } 50% { transform: rotateX(4deg) rotateY(14deg) translateY(calc(var(--w, 120px) * .06)); } }

/* offers the website does not make now (src/lib/offers.ts; admin: Website Control → site features) */
html[data-no~="cod"] :is(.trust-item:has([data-i18n="ab_trust3_t"]), .trust-item:has([data-i18n="ct_tr2_t"]), .trust-item:has([data-i18n="pd_trust_cod"]), .sum-note:has([data-i18n="ct_note"]), .sum-note:has([data-i18n="co_trust_note"]), label:has([data-i18n="co_pay_cod"]), details:has([data-i18n="cn_faq_q2"])) { display: none !important; }
html[data-no~="free"] :is(li:has([data-i18n="ws_t1_ship"]), li:has([data-i18n="ws_t2_ship"]), li:has([data-i18n="ws_t3_ship"]), .sp-tags .free, .ct-free) { display: none !important; }

/* smooth on phones: the big soft lights keep their blurred picture (their own layer, moved by the graphics chip) */
.glow, .shp-glow, .chl-glow { will-change: transform; }

/* phones: small controls get a thumb-sized target (the wishlist heart, image search, cart and checkout remove /
   select buttons, carton steps) */
@media (max-width: 719px) {
  .sp-heart { width: 36px !important; height: 36px !important; }
  .msearch .imgsearch-btn, .imgsearch-btn { min-width: 36px; min-height: 36px; }
  .ct-all, .ct-del-sel { min-height: 36px; }
  .ct-x-del, .ct-x-wish, .co-qty .co-del { min-width: 36px; min-height: 36px; }
  .wq-ctn { min-height: 34px; padding: 6px 12px; }
}