@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap");
/* ==========================================================================
   Avyukta Dash Cams (GRAPHITE + SIGNAL AMBER) — generated custom CSS (Tier-B)
   Uploaded to the store's dedicated generated-CSS file (sx_css_location).
   Contract: every selector is namespaced under .sx — no bare element selectors,
   no body/html/:root, no `*`. Brand colour comes from the theme via
   var(--secondary-main) with a local fallback.
   ========================================================================== */
/* BEGIN shoopy-gen:base */
.sx {
  --sx-brand: var( --secondary-main, #f5a524 );

  /* signal amber — CTA + identity */--sx-brand-dk: #ffb944;
  --sx-on-brand: #131417;

  /* amber is ALWAYS a fill w/ dark text */--sx-navy: #0a0c0d;

  /* darkest band */--sx-navy-2: #171b1f;

  /* elevated cell */--sx-bg: #0e1113;
  --sx-surface: #131719;
  --sx-card: #171b1f;
  --sx-plate: #ffffff;

  /* white-background product photos */--sx-ink: #f2f4f5;
  --sx-muted: #93a0a8;
  --sx-line: rgba(255, 255, 255, 0.09);
  --sx-line-2: rgba(255, 255, 255, 0.16);
  --sx-deal: #c4292e;
  --sx-deal-tx: #ff7d81;

  /* deal red as TEXT on graphite */--sx-ok: #30a46c;
  --sx-wa: #25d366;
  --sx-star: #f5a524;
  --sx-r: 14px;
  --sx-r-lg: 22px;
  --sx-gap: 20px;
  --sx-pad: 20px;
  --sx-max: 1220px;
  --sx-font: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sx-body);
  color: var(--sx-ink);
  -webkit-font-smoothing: antialiased;
}

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

.sx-wrap {
  width: 100%;
  max-width: var(--sx-max);
  margin: 0 auto;
  padding: 0 var(--sx-pad);
}

/* section rhythm */
.sx-sec {
  padding: 46px 0;
}

.sx-sec--tight {
  padding: 30px 0;
}

.sx-sec--surface {
  background: var(--sx-surface);
}

.sx-sec--dark {
  background: var(--sx-navy);
  color: var(--sx-ink);
}

/* headings */
.sx-eyebrow {
  margin: 0 0 10px;
  font: 700 11px/1 var(--sx-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sx-brand-dk);
}

.sx-sec--dark .sx-eyebrow {
  color: var(--sx-brand-dk);
}

.sx-h2 {
  margin: 0 0 10px;
  font: 700 clamp(23px, 3.4vw, 34px)/1.15 var(--sx-font);
  letter-spacing: -0.02em;
  color: var(--sx-ink);
}

.sx-sec--dark .sx-h2 {
  color: #fff;
}

.sx-lede {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sx-muted);
}

.sx-sec--dark .sx-lede {
  color: var(--sx-muted);
}

.sx-head {
  margin-bottom: 30px;
}

.sx-head--c {
  text-align: center;
}

/* buttons */
.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 15px/1 var(--sx-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.sx-btn:active {
  transform: translateY(1px);
}

.sx-btn--primary {
  background: var(--sx-brand-dk);
  color: var(--button-contrast-text);
}

.sx-btn--primary:hover {
  background: var(--sx-brand-dk);
}

.sx-btn--ghost {
  background: transparent;
  color: var(--sx-ink);
  border-color: var(--sx-line);
}

.sx-btn--ghost:hover {
  border-color: var(--sx-brand-dk);
  color: var(--sx-brand-dk);
}

.sx-sec--dark .sx-btn--ghost {
  color: var(--sx-ink);
  border-color: var(--sx-line-2);
}

.sx-sec--dark .sx-btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

.sx-btn--wa {
  background: var(--sx-wa);
  color: #05391b;
}

.sx-btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* small parts */
.sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 165, 36, 0.12);
  color: var(--sx-brand);
  font: 600 12.5px/1 var(--sx-body);
}

.sx-badge-deal {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--sx-deal);
  color: #fff;
  font: 700 12px/1 var(--sx-body);
  letter-spacing: 0.02em;
}

.sx-card {
  background: var(--sx-card);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  overflow: hidden;
}

.sx-tick {
  color: var(--sx-ok);
  font-weight: 700;
}

.sx-no {
  color: rgba(255, 255, 255, 0.3);
}

/* END shoopy-gen:base */
/* BEGIN shoopy-gen:trust-strip */
.sx-trust {
  background: var(--sx-navy);
  padding: 0;
}

.sx-trust__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.1);
}

.sx-trust__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  background: var(--sx-navy);
}

.sx-trust__ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(245, 165, 36, 0.14);
  color: var(--sx-brand);
}

.sx-trust__ico svg {
  width: 16px;
  height: 16px;
  stroke: #f5a524;
}

.sx-trust__t {
  display: block;
  font: 600 13.5px/1.25 var(--sx-body);
  color: #fff;
}

.sx-trust__s {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--sx-muted);
}

@media (min-width: 900px) {
  .sx-trust__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .sx-trust__item {
    justify-content: center;
    padding: 20px 14px;
  }
}

/* END shoopy-gen:trust-strip */
/* BEGIN shoopy-gen:compare-models */
.sx-cmp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  background: var(--sx-card);
}

.sx-cmp__table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}

.sx-cmp__table th, .sx-cmp__table td {
  padding: 13px 14px;
  text-align: center;
  border-bottom: 1px solid var(--sx-line);
  vertical-align: middle;
}

.sx-cmp__table thead th {
  border-bottom: 2px solid var(--sx-line);
}

.sx-cmp__table tbody tr:last-child td {
  border-bottom: 0;
}

.sx-cmp__row-h {
  text-align: left;
  font-weight: 600;
  color: var(--sx-muted);
  background: var(--sx-surface);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 172px;
}

.sx-cmp__col {
  position: relative;
}

.sx-cmp__col--best {
  background: rgba(245, 165, 36, 0.07);
}

.sx-cmp__name {
  display: block;
  font: 700 16px/1.2 var(--sx-font);
  color: var(--sx-ink);
}

.sx-cmp__tag {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sx-brand);
  color: var(--brand-dk);
  font: 700 10px/1.5 var(--sx-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-cmp__tag--muted {
  background: rgba(255, 255, 255, 0.13);
  color: var(--sx-ink);
}

.sx-cmp__price {
  display: block;
  margin-top: 8px;
  font: 700 19px/1 var(--sx-font);
  color: var(--sx-ink);
}

.sx-cmp__mrp {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--sx-muted);
}

.sx-cmp__mrp s {
  color: var(--sx-muted);
}

.sx-cmp__mrp b {
  color: var(--sx-deal-tx);
  font-weight: 700;
}

.sx-cmp__thumb {
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
  background: var(--sx-plate);
  border-radius: 9px;
  padding: 3px;
}

.sx-cmp__cta {
  padding: 16px 14px 18px;
}

.sx-cmp__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--sx-muted);
  text-align: center;
}

@media (max-width: 700px) {
  .sx-cmp__note::before {
    content: "Swipe the table sideways to compare · ";
  }
}

/* END shoopy-gen:compare-models */
/* BEGIN shoopy-gen:three-channels */
.sx-chan__grid {
  display: grid;
  gap: 26px;
  align-items: center;
}

.sx-chan__fig {
  margin: 0;
}

.sx-chan__fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sx-r-lg);
  border: 1px solid var(--sx-line);
}

.sx-chan__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-chan__item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sx-line);
}

.sx-chan__item:last-child {
  border-bottom: 0;
}

.sx-chan__n {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(245, 165, 36, 0.14);
  color: var(--sx-brand-dk);
  font: 700 13px/1 var(--sx-font);
}

.sx-chan__h {
  margin: 0 0 4px;
  font: 700 16px/1.2 var(--sx-font);
}

.sx-chan__p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sx-muted);
}

@media (min-width: 900px) {
  .sx-chan__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* END shoopy-gen:three-channels */
/* BEGIN shoopy-gen:feature-band */
.sx-feat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sx-feat__cell {
  padding: 20px 16px;
  border-radius: var(--sx-r);
  background: var(--sx-navy-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.sx-feat__ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 9px;
  background: rgba(245, 165, 36, 0.14);
  color: var(--sx-brand);
}

.sx-feat__ico svg {
  width: 19px;
  height: 19px;
  stroke: var(--brand-dk);
}

.sx-feat__h {
  margin: 0 0 6px;
  font: 700 15px/1.25 var(--sx-font);
  color: #fff;
}

.sx-feat__p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sx-muted);
}

.sx-feat__shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.sx-feat__shots img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sx-r);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 760px) {
  .sx-feat__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .sx-feat__cell {
    padding: 24px 20px;
  }
  .sx-feat__shots {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* END shoopy-gen:feature-band */
/* BEGIN shoopy-gen:install-steps */
.sx-inst__grid {
  display: grid;
  gap: 28px;
}

.sx-inst__fig {
  margin: 0;
}

.sx-inst__fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sx-r-lg);
  border: 1px solid var(--sx-line);
}

.sx-inst__steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  counter-reset: sxstep;
  list-style: none;
}

.sx-inst__step {
  position: relative;
  padding: 16px 18px 16px 58px;
  border-radius: var(--sx-r);
  background: var(--sx-card);
  border: 1px solid var(--sx-line);
  counter-increment: sxstep;
}

.sx-inst__step::before {
  content: counter(sxstep);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-dk);
  color: var(--sx-on-brand);
  font: 700 13px/1 var(--sx-body);
}

.sx-inst__h {
  margin: 0 0 4px;
  font: 700 15px/1.2 var(--sx-font);
}

.sx-inst__p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-muted);
}

.sx-inst__foot {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--sx-muted);
}

@media (min-width: 900px) {
  .sx-inst__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
}

/* END shoopy-gen:install-steps */
/* BEGIN shoopy-gen:reviews */
.sx-rev__grid {
  display: grid;
  gap: 26px;
}

.sx-rev__score {
  padding: 26px 22px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-card);
  border: 1px solid var(--sx-line);
  text-align: center;
}

.sx-rev__big {
  font: 700 54px/1 var(--sx-font);
  color: var(--sx-ink);
  letter-spacing: -0.03em;
}

.sx-rev__stars {
  margin: 8px 0 6px;
  color: var(--sx-star);
  font-size: 19px;
  letter-spacing: 2px;
}

.sx-rev__count {
  margin: 0;
  font-size: 13px;
  color: var(--sx-muted);
}

.sx-rev__bars {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.sx-rev__bar {
  display: grid;
  grid-template-columns: 44px 1fr 30px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--sx-muted);
}

.sx-rev__track {
  height: 7px;
  border-radius: 99px;
  background: var(--sx-surface);
  overflow: hidden;
}

.sx-rev__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--sx-star);
}

.sx-rev__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.sx-rev__fact {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--sx-r);
  background: var(--sx-card);
  border: 1px solid var(--sx-line);
}

.sx-rev__fact-ico {
  flex: none;
  color: var(--sx-ok);
  margin-top: 1px;
}

.sx-rev__fact-ico svg {
  width: 18px;
  height: 18px;
}

.sx-rev__fact-h {
  margin: 0 0 3px;
  font: 700 14px/1.2 var(--sx-font);
}

.sx-rev__fact-p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sx-muted);
}

@media (min-width: 900px) {
  .sx-rev__grid {
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* END shoopy-gen:reviews */
/* BEGIN shoopy-gen:faq */
.sx-faq__list {
  max-width: 820px;
  margin: 0 auto;
}

.sx-faq__item {
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r);
  background: var(--sx-card);
  margin-bottom: 10px;
  overflow: hidden;
}

.sx-faq__item[open] {
  border-color: rgba(245, 165, 36, 0.45);
}

.sx-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  font: 600 15px/1.4 var(--sx-body);
  list-style: none;
}

.sx-faq__q::-webkit-details-marker {
  display: none;
}

.sx-faq__q::after {
  content: "+";
  flex: none;
  font: 400 22px/1 var(--sx-body);
  color: var(--sx-brand-dk);
}

.sx-faq__item[open] .sx-faq__q::after {
  content: "\2212";
}

.sx-faq__a {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--sx-muted);
}

/* END shoopy-gen:faq */
/* BEGIN shoopy-gen:support-cta */
.sx-sup__box {
  display: grid;
  gap: 20px;
  padding: 30px 24px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-navy);
  border: 1px solid var(--sx-line);
  color: var(--sx-ink);
}

.sx-sup__h {
  margin: 0 0 8px;
  font: 700 22px/1.2 var(--sx-font);
  color: var(--sx-ink);
}

.sx-sup__p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sx-muted);
}

.sx-sup__meta {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--sx-muted);
  opacity: 0.8;
}

.sx-sup__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
}

@media (min-width: 820px) {
  .sx-sup__box {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 38px 40px;
  }
}

/* END shoopy-gen:support-cta */
/* BEGIN shoopy-gen:pdp-description */
/* Reusable blocks for the PRODUCT DESCRIPTION body (rich-text HTML on the
   product), styled from the same generated stylesheet as the home sections. */
.sx-box__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-box__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r);
  background: var(--sx-card);
  font-size: 13.5px;
  line-height: 1.4;
}

.sx-box__n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--sx-surface);
  color: var(--sx-brand-dk);
  font: 700 12px/1 var(--sx-body);
}

.sx-box__note {
  margin: 14px 0 0;
  padding: 13px 15px;
  border-radius: var(--sx-r);
  background: rgba(196, 41, 46, 0.12);
  border: 1px solid rgba(196, 41, 46, 0.35);
  font-size: 13.5px;
  line-height: 1.55;
  color: #ff9a9d;
}

@media (min-width: 700px) {
  .sx-box__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sx-spec__wrap {
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  overflow: hidden;
  background: var(--sx-card);
}

.sx-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sx-spec__table th, .sx-spec__table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--sx-line);
  vertical-align: top;
}

.sx-spec__table tr:last-child th, .sx-spec__table tr:last-child td {
  border-bottom: 0;
}

.sx-spec__table th {
  width: 42%;
  font-weight: 600;
  color: var(--sx-muted);
  background: var(--sx-surface);
}

.sx-spec__group th {
  background: rgba(255, 255, 255, 0.07);
  color: var(--sx-ink);
  font: 700 11px/1 var(--sx-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: auto;
}

.sx-panels__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sx-panels__grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sx-r);
  border: 1px solid var(--sx-line);
}

@media (min-width: 760px) {
  .sx-panels__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sx-pick__grid {
  display: grid;
  gap: 14px;
}

.sx-pick__card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  background: var(--sx-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.sx-pick__card:hover {
  border-color: var(--sx-line-2);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.8);
}

.sx-pick__card--now {
  border-color: var(--sx-brand);
  background: rgba(245, 165, 36, 0.07);
}

.sx-pick__img {
  flex: none;
  width: 74px;
  height: 74px;
  object-fit: contain;
  background: var(--sx-plate);
  border-radius: 10px;
  padding: 4px;
}

.sx-pick__n {
  margin: 0 0 3px;
  font: 700 15px/1.2 var(--sx-font);
}

.sx-pick__d {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sx-muted);
}

.sx-pick__p {
  margin: 0;
  font: 700 15px/1 var(--sx-font);
}

.sx-pick__p s {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--sx-muted);
  margin-left: 6px;
}

.sx-pick__you {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sx-brand);
  color: var(--sx-on-brand);
  font: 700 10px/1.6 var(--sx-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 820px) {
  .sx-pick__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* END shoopy-gen:pdp-description */
/* ── Page chrome + Tier-A section styling (theme-owned on a real store) ───── */
:root {
  --brand: #f5a524;
  --brand-dk: #ffb944;
  --on-brand: #131417;
  --navy: #0a0c0d;
  --navy-2: #171b1f;
  --bg: #0e1113;
  --surface: #131719;
  --card: #171b1f;
  --plate: #ffffff;
  --ink: #f2f4f5;
  --muted: #93a0a8;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --deal: #c4292e;
  --deal-tx: #ff7d81;
  --ok: #30a46c;
  --wa: #25d366;
  --r: 14px;
  --r-lg: 22px;
  --max: 1220px;
  --pad: 20px;
  --f-head: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sec {
  padding: 46px 0;
}

.sec--surface {
  background: var(--surface);
}

.eyebrow {
  margin: 0 0 10px;
  font: 700 11px/1 var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.h2 {
  margin: 0 0 10px;
  font: 700 clamp(23px, 3.4vw, 34px)/1.15 var(--f-head);
  letter-spacing: -0.02em;
}

.lede {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.head {
  margin-bottom: 30px;
}

.head--c {
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 15px/1 var(--f-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn--primary:hover {
  background: var(--brand-dk);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* ── Notice bar (Tier C) ─────────────────────────────────────────────────── */
.notice {
  background: #000;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 4 !important;
}

.notice b {
  color: var(--brand);
}

.notice span {
  opacity: 0.5;
  margin: 0 10px;
}

@media (max-width: 560px) {
  .notice .notice__hide {
    display: none;
  }
}

/* ── Header (Tier C) ─────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 17, 19, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.hdr__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
}

.hdr__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: none;
}

.hdr__logo img {
  width: 32px;
  height: 32px;
  display: block;
}

.hdr__name {
  font: 700 17px/1 var(--f-head);
  letter-spacing: -0.01em;
}

.hdr__name small {
  display: block;
  font: 600 8.5px/1.3 var(--f-body);
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 3px;
}

.hdr__nav {
  display: none;
  gap: 22px;
  margin-left: 14px;
}

.hdr__nav a {
  font: 500 14px/1 var(--f-body);
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.hdr__nav a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.hdr__search {
  flex: 1;
  display: none;
  position: relative;
  max-width: 380px;
}

.hdr__search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 400 14px var(--f-body);
  color: var(--ink);
}

.hdr__search svg {
  position: absolute;
  left: 12px;
  top: 11px;
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.hdr__acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hdr__ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}

.hdr__ico:hover {
  background: var(--surface);
}

.hdr__ico svg {
  width: 20px;
  height: 20px;
}

.hdr__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--deal);
  color: #fff;
  font: 700 10px/16px var(--f-body);
  text-align: center;
}

.hdr__burger {
  display: grid;
}

@media (min-width: 900px) {
  .hdr__nav {
    display: flex;
  }
  .hdr__search {
    display: block;
  }
  .hdr__burger {
    display: none;
  }
}

.hdr__mobsearch {
  display: block;
  padding: 0 var(--pad) 10px;
}

.hdr__mobsearch .hdr__search {
  display: block;
  max-width: none;
}

@media (min-width: 900px) {
  .hdr__mobsearch {
    display: none;
  }
}

/* ── Hero — StoreBanner (Tier A) ─────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--navy);
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__over {
  position: absolute;
  inset: 0;
}

.hero__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad) 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero__eyebrow {
  margin: 0 0 10px;
  font: 700 10.5px/1 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

.hero__h1 {
  margin: 0 0 12px;
  font: 700 clamp(27px, 7vw, 54px)/1.08 var(--f-head);
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 15ch;
}

.hero__h1 em {
  font-style: normal;
  color: var(--brand);
}

.hero__p {
  margin: 0 0 18px;
  max-width: 40ch;
  font-size: clamp(13.5px, 3.4vw, 16.5px);
  line-height: 1.6;
  color: var(--muted);
}

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__chips li {
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font: 500 11.5px/1.35 var(--f-body);
}

.hero__acts .btn {
  flex: 1 1 100%;
}

@media (max-width: 719px) {
  .hero__chips {
    display: none;
  }
  .hero__inner {
    padding-top: 22px;
  }
  .hero__p {
    margin-bottom: 16px;
  }
}

@media (min-width: 560px) {
  .hero__acts .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 900px) {
  .hero__inner {
    justify-content: center;
    padding: 0 var(--pad);
  }
  .hero__h1 {
    margin-bottom: 16px;
  }
  .hero__p {
    margin-bottom: 24px;
  }
  .hero__acts {
    margin-bottom: 22px;
  }
}

/* ── Product grid — ProductGridCollection (Tier A) ───────────────────────── */
.pgrid__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.pgrid__all {
  font: 600 14px/1 var(--f-body);
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
}

.pgrid__all:hover {
  text-decoration: underline;
}

.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}

.pcard:hover {
  border-color: var(--line-2);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.85);
  transform: translateY(-2px);
}

.pcard__media {
  position: relative;
  background: var(--plate);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 6px;
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pcard__off {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--deal);
  color: #fff;
  font: 700 11.5px/1 var(--f-body);
}

.pcard__rank {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--brand);
  color: var(--on-brand);
  font: 700 10px/1.4 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pcard__rank--muted {
  background: #e8eaec;
  color: #3d4348;
}

.pcard__body {
  padding: 16px 16px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pcard__name {
  margin: 0 0 4px;
  font: 700 16px/1.25 var(--f-head);
  letter-spacing: -0.01em;
}

.pcard__sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  min-height: 38px;
}

.pcard__rate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 11px;
  font-size: 12.5px;
  color: var(--muted);
}

.pcard__rate b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--ok);
  color: #052e1a;
  font: 700 11.5px/1.5 var(--f-body);
}

.pcard__specs {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.pcard__specs li {
  position: relative;
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.pcard__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  border: 2.5px solid var(--brand);
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 12px;
}

.pcard__now {
  font: 700 22px/1 var(--f-head);
  letter-spacing: -0.02em;
}

.pcard__mrp {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: line-through;
}

.pcard__save {
  font: 700 12.5px/1 var(--f-body);
  color: var(--deal-tx);
}

.pcard__cta {
  display: flex;
  gap: 8px;
}

.pcard__cta .btn {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
}

/* ── Promo — BannerCollection (Tier A) ───────────────────────────────────── */
.promo {
  position: relative;
  background: var(--navy);
  border-radius: 0;
  overflow: hidden;
}

.promo__img {
  display: block;
  width: 100%;
  height: auto;
}

.promo__over {
  position: absolute;
  inset: 0;
}

.promo__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.promo__k {
  margin: 0 0 10px;
  font: 700 10.5px/1 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

.promo__h2 {
  margin: 0 0 10px;
  font: 700 clamp(22px, 5vw, 38px)/1.12 var(--f-head);
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 16ch;
}

.promo__p {
  margin: 0 0 18px;
  max-width: 36ch;
  font-size: clamp(13px, 3.2vw, 15.5px);
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 900px) {
  .promo__inner {
    justify-content: center;
  }
}

/* ── Footer (Tier C) ─────────────────────────────────────────────────────── */
.ftr {
  background: #000;
  color: var(--muted);
  padding: 44px 0 0;
  font-size: 14px;
}

.ftr__grid {
  display: grid;
  gap: 30px;
}

.ftr__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.ftr__logo img {
  width: 30px;
  height: 30px;
}

.ftr__logo span {
  font: 700 17px/1 var(--f-head);
  color: var(--ink);
}

.ftr__about {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 44ch;
}

.ftr__social {
  display: flex;
  gap: 8px;
}

.ftr__social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  text-decoration: none;
}

.ftr__social a:hover {
  background: var(--brand);
  color: var(--on-brand);
}

.ftr__social svg {
  width: 17px;
  height: 17px;
}

.ftr__h {
  margin: 0 0 13px;
  font: 700 12px/1 var(--f-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.ftr__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.ftr__list a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
}

.ftr__list a:hover {
  color: var(--brand);
}

.ftr__c {
  display: grid;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.6;
}

.ftr__c a {
  color: var(--ink);
  text-decoration: none;
}

.ftr__pay {
  margin-top: 26px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ftr__pay span {
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  color: var(--muted);
}

.ftr__pay em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-right: 4px;
}

.ftr__bottom {
  padding: 16px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.7;
}

@media (min-width: 760px) {
  .ftr__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AVYUKTA · Aerion-theme dark-mode overrides
   The store's saved theme colours default to LIGHT (white header, cream
   footer, near-black secondary), but the storefront is the dark GRAPHITE
   design. The rules below retune the REAL aerion components (header, cart
   hover preview, footer, account/checkout surfaces) to the dark tokens
   already declared above. Everything is loaded globally through
   site_settings.css_location — no theme code is touched.
   These selectors intentionally live OUTSIDE the `.sx` namespace because they
   target the theme's own class names, exactly like the .hdr/.hero/.ftr page
   chrome further up this file.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Theme variables — override the inline :root the layout injects. This
      single block flips the header + footer chrome to graphite. ─────────── */
:root {
  --header-main: #0e1113;

  /* graphite header bar (was #ffffff) */--header-accent: #f2f4f5;

  /* light logo/nav/icons on the dark header */--header-contrast-text: #f2f4f5;

  /* nav links (auto-contrast was dark) */--footer-main: #000000;

  /* black footer band (was cream #f2f1ed) */
  /* Solid CTAs shipped as #1a1a1a — nearly invisible on the #0e1113 page.
     Retint them to the brand amber with dark text, matching the design's
     primary button. Cascades to add-to-cart, buy-now, checkout, etc. */--button-main: #f5a524;
  --button-contrast-text: #131417;

  /* Accent used by input focus rings, selected chips, radio "checked" and
     the store-name — amber instead of near-black. */--secondary-main: #f5a524;

  /* Resting outlined-input border (base.css falls back to a dark rgba). */--input-border-color: rgba(255, 255, 255, 0.16);
}

/* Header bar sits on a hairline like the design's sticky graphite bar. */
.luxury-header {
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.09));
}

/* Desktop search field in the (now dark) utility bar. */
.luxury-header .utility-bar input, .luxury-header .mobile-search-input input {
  background: var(--surface, #131719);
  border-color: var(--line, rgba(255, 255, 255, 0.12));
  color: var(--ink, #f2f4f5);
}

.luxury-header .utility-bar input::placeholder, .luxury-header .mobile-search-input input::placeholder {
  color: var(--muted, #93a0a8);
}

/* Full search-results page — keep every loading/result state on graphite. */
main:has(.sh-search), .min-h-screen.bg-white:has(.sh-search), .min-h-screen.bg-white.py-8, .sh-search {
  background: #0e1113 !important;
  color: #f2f4f5 !important;
}

.min-h-screen.bg-white:has(.sh-search) {
  min-height: 100vh !important;
}

.min-h-screen.bg-white.py-8 {
  min-height: 100vh !important;
  background: #0e1113 !important;
}

.min-h-screen.bg-white.py-8 > .page-container h1 {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

main:has(.sh-search) :is(h1, .search-result-for) {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

main:has(.sh-search) h1 {
  font-family: "Sora", sans-serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
}

.sh-search .search-result-for {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.sh-search .search-productcount, .sh-search .text-sm, .sh-search .no-result-sub-title, .sh-search .search-no-result-sub-title {
  color: #aeb8bf !important;
  opacity: 1 !important;
}

.sh-search :is(.filter-icon-btn-mobile, .search-sort-btn, .sort-list-btn), main:has(.sh-search) :is(.filter-icon-btn-mobile, .search-sort-btn, .sort-list-btn) {
  min-height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  background: #171b1f !important;
  color: #e8ecef !important;
  opacity: 1 !important;
}

.sh-search :is(.filter-icon-btn-mobile, .search-sort-btn, .sort-list-btn):hover, .sh-search :is(.filter-icon-btn-mobile, .search-sort-btn, .sort-list-btn):focus-visible {
  border-color: rgba(245, 165, 36, 0.7) !important;
  background: #20262a !important;
  color: #ffffff !important;
}

.sh-search .search-sort-btn *, .sh-search .search-sort-btn-title-root *, main:has(.sh-search) :is(.filter-icon-btn-mobile, .sort-list-btn) * {
  color: inherit !important;
  opacity: 1 !important;
}

.sh-search .search-sort-btn-title-root > div > :first-child {
  color: #93a0a8 !important;
}

.sh-search .search-sort-btn-title-root > div > :last-child {
  color: #f2f4f5 !important;
}

.sh-search .search-sort-option-modal, .sh-search .search-sort-option-modal .MuiPaper-root {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #171b1f !important;
  color: #f2f4f5 !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4) !important;
}

.sh-search .search-no-result-container {
  color: #f2f4f5 !important;
}

.sh-search :is(.no-result-tilte, .search-no-result-tilte) {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  .min-h-screen.bg-white:has(.sh-search) .grid, main:has(.sh-search) .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767.95px) {
  .sh-search {
    padding-top: 22px !important;
    padding-bottom: 32px !important;
  }
  .sh-search .search-productcount {
    color: #f2f4f5 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

/* Header search results — graphite dropdown with readable product rows. */
.search-dropdown.search-res-ctn {
  padding: 0 !important;
  background: transparent !important;
}

.search-dropdown-panel {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 0 14px 14px !important;
  background: #171b1f !important;
  color: #f2f4f5 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42) !important;
}

.search-dropdown-panel > div > p, .search-dropdown-panel .search-category-section > p {
  margin: 0 !important;
  padding: 12px 14px 9px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #aeb8bf !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.search-dropdown-panel .search-result {
  min-height: 78px !important;
  padding: 10px 14px !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #171b1f !important;
  color: #f2f4f5 !important;
  transition: background-color 0.18s ease !important;
}

.search-dropdown-panel .search-result:hover, .search-dropdown-panel .search-result:focus-visible {
  background: #20262a !important;
}

.search-dropdown-panel .search-result > div {
  width: 100% !important;
  min-width: 0 !important;
}

.search-dropdown-panel .search-result img {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 8px !important;
  background: #f4f4f2 !important;
  object-fit: contain !important;
}

.search-dropdown-panel .search-result span {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

.search-dropdown-panel .search-result .text-gray-500 {
  color: #aeb8bf !important;
}

.search-dropdown-panel .search-result .line-through {
  color: #77838a !important;
}

.search-dropdown-panel .search-result + .search-result, .search-dropdown-panel .search-result[style*="border-top"] {
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.search-dropdown-panel .search-category-chip {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e8ecef !important;
}

@media (max-width: 767.95px) {
  .search-dropdown.search-res-ctn {
    width: 100% !important;
  }
  .search-dropdown-panel {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* Stable reference-inspired header treatment. Keep the component's native
   two-row structure; forcing its separate wrappers into one row causes
   overlap at wide and intermediate viewport sizes. */
.luxury-header {
  background: rgba(14, 17, 19, 0.97) !important;
  backdrop-filter: saturate(180%) blur(10px) !important;
}

.luxury-header > .notice, .luxury-header > .notice .notice-message, .luxury-header > .notice .notice-message > .notice {
  min-height: 37px !important;
  height: 37px !important;
  padding: 0 !important;
}

.luxury-header > .notice .notice-message > .notice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 20px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
}

.luxury-header .header-desktop-wrapper, .luxury-header .desktop-nav-wrapper {
  width: 100% !important;
  max-width: 1220px !important;
  margin-inline: auto !important;
  padding-inline: 20px !important;
}

.luxury-header .logo-title, .luxury-header .logo-title h1 {
  color: #f2f4f5 !important;
  word-break: normal !important;
}

.luxury-header .logo-title h1 {
  font-family: "Sora", "Inter", sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

.luxury-header .nav-link {
  color: #f2f4f5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.luxury-header .nav-link:hover, .luxury-header .nav-link:focus-visible {
  color: #f5a524 !important;
  opacity: 1 !important;
}

.luxury-header .icon-button, .luxury-header .icon-button-mobile, .luxury-header .badge-icon-btn {
  border-radius: 10px !important;
}

.luxury-header .icon-button:hover, .luxury-header .icon-button-mobile:hover, .luxury-header .badge-icon-btn:hover {
  background: #131719 !important;
}

@media (min-width: 1024px) {
  .luxury-header .main-header {
    padding-block: 10px !important;
  }
  .luxury-header .utility-bar {
    padding-block: 10px !important;
  }
  .luxury-header .desktop-nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    min-height: 48px !important;
  }
  .luxury-header .desktop-menu-container {
    flex-wrap: nowrap !important;
  }
  .luxury-header .nav-item {
    padding: 11px 14px !important;
  }
}

/* ── Cart hover preview (mini-cart) — shipped as a WHITE popup with near
      black text; on the graphite store that read as an unstyled faint box.
      Reskin it as a graphite card with light text. ──────────────────────── */
.cart-preview {
  background: var(--card, #171b1f);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  color: var(--ink, #f2f4f5);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.72);
}

.cart-preview-header {
  border-bottom-color: var(--line, rgba(255, 255, 255, 0.1));
}

.cart-preview-header h3 {
  color: var(--ink, #f2f4f5);
}

.cart-preview .view-bag-link {
  color: var(--brand-dk, #ffb944);
}

.cart-preview-item-container {
  border-bottom-color: var(--line, rgba(255, 255, 255, 0.08));
}

.cart-preview .item-details h4 {
  color: var(--ink, #f2f4f5);
}

.cart-preview .item-color, .cart-preview .item-size {
  color: var(--muted, #93a0a8);
}

/* "In Stock" ships with a Tailwind text-black utility → invisible on dark. */
.cart-preview .item-stock.text-black {
  color: var(--ok, #30a46c);
}

.cart-preview .item-stock.text-red-500 {
  color: var(--deal-tx, #ff7d81);
}

.cart-preview .total-value, .cart-preview .cart-total, .cart-preview .cart-total-label, .cart-preview .cart-total-value {
  color: var(--ink, #f2f4f5);
}

.cart-preview-footer {
  border-top-color: var(--line, rgba(255, 255, 255, 0.1));
}

.cart-preview .remove-item {
  color: var(--muted, #93a0a8);
}

.cart-preview .quantity-dropdown, .cart-preview .quantity-selector input {
  background: var(--surface, #131719);
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--ink, #f2f4f5);
}

/* MUI quantity select: its chevron inherits the original dark icon color. */
.quantity-selector .quantity-dropdown .MuiSelect-icon, .quantity-selector .quantity-dropdown .MuiSelect-iconOutlined {
  color: #dfe5e8 !important;
  fill: currentColor !important;
  opacity: 1 !important;
  right: 10px !important;
  pointer-events: none !important;
}

.quantity-selector .quantity-dropdown:hover .MuiSelect-icon, .quantity-selector .quantity-dropdown.Mui-focused .MuiSelect-icon {
  color: #ffffff !important;
}

/* Amber CTA with dark text, matching the design's primary button. */
.cart-preview .checkout-button {
  background: var(--brand, #f5a524);
  color: var(--on-brand, #131417);
  font-weight: 700;
}

/* ── FOOTER — has no background of its own, but every text/icon/border is
      hardcoded #000/#e5e5e5, i.e. black-on-graphite. Repaint to light. ──── */
.luxury-footer {
  color: var(--muted, #93a0a8);
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.09));
  background: #000;
}

.luxury-footer .footer-links a, .luxury-footer .accordion-links a, .luxury-footer .footer-bottom-links a, .luxury-footer .social-icons a {
  color: var(--muted, #93a0a8);
}

.luxury-footer .footer-links a:hover, .luxury-footer .accordion-links a:hover, .luxury-footer .footer-bottom-links a:hover, .luxury-footer .social-icons a:hover {
  color: var(--brand, #f5a524);
}

.luxury-footer .footer-copyright p, .luxury-footer .footer-company-description {
  color: var(--muted, #93a0a8);
}

.luxury-footer .accordion-item {
  border-bottom-color: var(--line, rgba(255, 255, 255, 0.09));
}

.luxury-footer .footer-separator {
  background-color: var(--line, rgba(255, 255, 255, 0.09));
}

/* ══════════════ Inner pages — light cards/text → dark tokens ══════════════
   Every rule below maps a hardcoded light-mode value from the aerion theme to
   the graphite dark tokens declared at the top of this file:
     surface #fff/#fafafa/#f5f5f5/#f0f0f0 → --card / --surface
     ink     #000/#1a1a1a/#111/#403b37    → --ink
     muted   #666/#777/#4a4a4a/#8c8781/#9f9f9f/#878787 → --muted
     lines   #e5e5e5/#e0e0e0/#e6e6e6/#eee/#eae8e4/#ddd → --line
   ────────────────────────────────────────────────────────────────────────── */
/* Shared cards / MUI / common ------------------------------------------------ */
.custom-card, .cart-summary-root, .cart-items-cart-items, .cart-details-desktop-box, .order-details-card, .address-card, .address-list-v2-card, .profile-details-disabled-style input:disabled, .menu-item {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.09)) !important;
  color: var(--ink, #f2f4f5);
}

.MuiInputBase-root {
  color: var(--ink, #f2f4f5);
}

.MuiInputBase-root .MuiOutlinedInput-notchedOutline, .MuiInputBase-root fieldset {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
}

.react-tel-input .special-label {
  color: var(--muted, #93a0a8);
  background: var(--card, #171b1f);
}

/* MUI overlay surfaces (menus, popovers, dialogs, autocomplete) default to
   white paper. Because the input text above is now light, any input/text on
   these surfaces would be light-on-white — dark-theme the paper too. The
   doubled selector beats emotion's runtime single-class styles without
   !important, matching the pattern the theme uses for universal-btn-style. */
.MuiMenu-paper.MuiPaper-root, .MuiPopover-paper.MuiPaper-root, .MuiDialog-paper.MuiPaper-root, .MuiAutocomplete-paper.MuiPaper-root, .MuiModal-root .MuiPaper-root {
  background-color: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.09));
}

/* Text inside modal/bottom-sheet panels stays light. */
.MuiModal-root .MuiPaper-root .bottom-sheet-head-ctn, .MuiModal-root .MuiPaper-root h1, .MuiModal-root .MuiPaper-root h2, .MuiModal-root .MuiPaper-root h3 {
  color: var(--ink, #f2f4f5);
}

.MuiMenuItem-root, .MuiDialogTitle-root, .MuiDialogContent-root, .MuiDialogContentText-root {
  color: var(--ink, #f2f4f5);
}

.MuiMenuItem-root:hover, .MuiMenuItem-root.Mui-selected {
  background-color: rgba(245, 165, 36, 0.12);
}

/* MUI field labels default to rgba(0,0,0,.6) (dark) — invisible on the dark
   form surfaces. Light-muted resting; the focused state stays amber
   (base.css already points .Mui-focused at --secondary-main). */
.MuiFormLabel-root, .MuiInputLabel-root {
  color: var(--muted, #93a0a8);
}

.MuiFormHelperText-root {
  color: var(--muted, #93a0a8);
}

/* Auth modal (Sign Up / Sign In / OTP / verify) — the panel ships a Tailwind
   `bg-white`; it wraps <main class="authenticate">. Dark-theme the panel so
   its heading, labels and inputs (now light) stay legible. */
.MuiModal-root div:has(> .authenticate) {
  background: var(--card, #171b1f) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.09));
}

.authenticate, .authenticate h1, .authenticate h2, .authenticate h3, .authenticate p {
  color: var(--ink, #f2f4f5);
}

.authenticate .MuiInputBase-input {
  color: var(--ink, #f2f4f5);
}

/* Card section headings ("Customer Details", "Bill Details", "Item (1)",
   "Apply coupon" …) all carry .sh-card-title. Muted grey read too faint as a
   heading — lift to ink so they read as proper titles. */
.sh-body .sh-card-title {
  color: var(--ink, #f2f4f5);
}

.payment-options-card-note {
  color: var(--muted, #93a0a8);
}

.divider, .order-details-divider, .order-items-divider-main, .cart-details-mobile-divider, .coupons-list-divider {
  background-color: var(--line, rgba(255, 255, 255, 0.09));
}

.solid-button__disabled_btn, .outlined-button__disabled-btn {

  /* Tinted just above card/surface so a disabled CTA stays visible on any
     dark panel (e.g. the OTP modal, where card bg would otherwise hide it). */background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted, #93a0a8) !important;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.16)) !important;
}

.swiper-button-prev::after, .swiper-button-next::after {
  color: var(--ink, #f2f4f5) !important;
}

.swiper-pagination-bullet {
  background-color: var(--line-2, rgba(255, 255, 255, 0.3));
}

.swiper-pagination-bullet-active {
  background-color: var(--brand, #f5a524) !important;
}

/* Account: profile / logged-in / sidebar / popover -------------------------- */
.profile-details-form-card {
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

.profile-details-subtext, .profile-details-disabled-style input:disabled {
  color: var(--muted, #93a0a8);
}

.profile-details-subtext-alt {
  color: var(--ink, #f2f4f5);
}

.profile-details-btn-container, .mob-btn-container {
  background: var(--surface, #131719);
  box-shadow: 0 -1px 0 var(--line, rgba(255, 255, 255, 0.09));
}

.profileImg {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  background: var(--surface, #131719);
}

.phone {
  color: var(--muted, #93a0a8);
}

.bg {
  background: var(--surface, #131719);
}

.side-menu-item {
  color: var(--ink, #f2f4f5);
}

.side-menu-signout {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  background: transparent;
  color: var(--ink, #f2f4f5);
}

.account-popup .ac-popup-arrow, .account-popup .ac-popup-sheet {
  background: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
}

/* Account-popover greeting ("Hi, <name>") ships #1a1a1a. */
.ac-popup-my-account {
  color: var(--ink, #f2f4f5);
}

/* Addresses ----------------------------------------------------------------- */
.address-header-idx, .address-details-card-secondary, .add-address-modal-note {
  color: var(--muted, #93a0a8);
}

.address-editbtn {
  background: transparent;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--ink, #f2f4f5);
}

.desk-cancelbtn, .mob-cancelbtn {
  background: var(--navy-2, #171b1f);
  color: var(--ink, #f2f4f5);
}

.address-list-v2-card, .address-list, .address-list-v2-demo {
  background: var(--card, #171b1f);
}

/* "Select Address" sheet card + its fixed footer bar (both hardcode white). */
.address-list-v2-buttons {
  background: var(--surface, #131719) !important;
  box-shadow: 0 -1px 0 var(--line, rgba(255, 255, 255, 0.1));
}

.address-list-v2-primary-txt {
  color: var(--ink, #f2f4f5);
}

.address-list-v2-addtype {
  color: var(--muted, #93a0a8);
}

/* Contact Us — the value lines (address/email/phone/WhatsApp) use .contact-text
   (MUI body copy defaulting to rgba(0,0,0,.87)) → invisible on dark. */
.contact-text, .contact-text * {
  color: var(--ink, #f2f4f5) !important;
}

/* Orders -------------------------------------------------------------------- */
.order-item-root {
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

.order-list-item-secondarytxt, .order-items-heading, .shipping-info-txt, .shipping-details-txt, .tracking-info-txt {
  color: var(--muted, #93a0a8);
}

.order-details-card {
  background-color: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

/* Product detail page ------------------------------------------------------- */
.product-sku, .review-card-subtext, .review-card-description, .product-review-subtext, .product-review-num-of-rating, .reviews-list-tab {
  color: var(--muted, #93a0a8);
}

.details-accordion, .not-available-footer-root, .delivery-estimate-input {
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

.mobile-bottom-bar {
  background-color: var(--surface, #131719);
  border-top-color: var(--line, rgba(255, 255, 255, 0.09));
}

.variant-selector-notselected {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  background: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
}

.variant-selector-selected {
  color: var(--ink, #f2f4f5);
}

.reviews-list-tab, .product-review-bar {
  background: var(--navy-2, #171b1f);
}

.reviews-list-profile-img, .review-card-profile-img {
  background: var(--surface, #131719);
}

.product-review-heading {
  color: var(--ink, #f2f4f5);
}

.product-review-write-popup {
  background: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
}

/* Aerion product reviews: the container and shadcn Cards ship light inline
   surfaces, while most copy inherits light-theme gray utilities. */
.sh-pc-rev-ctn, .sh-pc-rev-ctn > .universal-border, .sh-pc-rev-ctn .review-card-wrapper > .border-none, .sh-pc-rev-ctn .bg-gray-50 {
  background: var(--card, #171b1f) !important;
  background-image: none !important;
  color: var(--ink, #f2f4f5) !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: none !important;
}

.sh-pc-rev-ctn :is(h2, h3, h4, h5, label), .sh-pc-rev-ctn .text-5xl, .sh-pc-rev-ctn .font-medium, .sh-pc-rev-ctn .font-semibold {
  color: var(--ink, #f2f4f5) !important;
  opacity: 1 !important;
}

.sh-pc-rev-ctn [class*="text-gray-"], .sh-pc-rev-ctn p.text-\[\#818181\], .sh-pc-rev-ctn .text-sm.text-gray-600 {
  color: var(--muted, #a8b2b9) !important;
  opacity: 1 !important;
}

.sh-pc-rev-ctn .border-t, .sh-pc-rev-ctn .border-b, .sh-pc-rev-ctn .border-gray-200 {
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

.sh-pc-rev-ctn input.universal-input, .sh-pc-rev-ctn textarea.universal-input {
  background: var(--surface, #101416) !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.18)) !important;
  color: var(--ink, #f2f4f5) !important;
  -webkit-text-fill-color: var(--ink, #f2f4f5) !important;
  opacity: 1 !important;
}

.sh-pc-rev-ctn input.universal-input::placeholder, .sh-pc-rev-ctn textarea.universal-input::placeholder {
  color: #89959c !important;
  opacity: 1 !important;
}

.sh-pc-rev-ctn input.universal-input:focus, .sh-pc-rev-ctn textarea.universal-input:focus {
  border-color: var(--brand, #f5a524) !important;
  box-shadow: 0 0 0 2px rgba(245, 165, 36, 0.18) !important;
}

.sh-pc-rev-ctn [role="progressbar"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.sh-pc-rev-ctn button:not([class*="bg-[var(--button-main)]"]):hover {
  color: #ffffff !important;
}

/* Cart detail --------------------------------------------------------------- */
.cart-summary-root, .cart-details-desktop-box, .cart-items-cart-items {
  background-color: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

/* Individual cart rows are MUI Cards with a hardcoded light surface. */
.cart-items-root .cart-items-cart-items, .cart-items-root .cart-item-root.MuiCard-root {
  background: var(--card, #171b1f) !important;
  background-image: none !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
  color: var(--ink, #f2f4f5) !important;
  box-shadow: none !important;
}

.cart-items-root .cart-item-root :is( .cart-item-text, .cart-item-primary, .cart-item-primary span, .cart-item-content, .cart-item-content .MuiTypography-root ) {
  color: var(--ink, #f2f4f5) !important;
  opacity: 1 !important;
}

.cart-items-root .cart-item-root :is( .cart-item-remove-txt, .MuiTypography-body2:not(.cart-item-primary) ) {
  color: var(--muted, #a8b2b9) !important;
  opacity: 1 !important;
}

.cart-items-root .cart-item-root .cart-item-remove-txt:hover, .cart-items-root .cart-item-root .cart-item-remove-txt:focus-visible {
  color: #ffffff !important;
}

.sh-bill-tot-l .cart-summary-label, .sh-bill-tot-v .cart-summary-value, .cart-item-text, .coupon-card-heading, .delivery-options-card-header, .delivery-options-card-label {
  color: var(--ink, #f2f4f5);
}

.cart-summary-label, .cart-summary-delivery-savemsg, .sh-ci-count, .cart-item-remove-txt, .coupon-card-description, .coupon-card-saving, .delivery-options-card-muted {
  color: var(--muted, #93a0a8);
}

.cart-summary-value {
  color: var(--ink, #f2f4f5);
}

.cart-summary-earn-cont {
  background: rgba(245, 165, 36, 0.08);
}

.coupon-card-card {
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

.coupons-list-modal {
  background: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
}

#sh-bill-details-card > .sh-bill-tot-l, #sh-bill-details-card > .sh-bill-tot-v {
  border-top-color: var(--line, rgba(255, 255, 255, 0.09));
}

/* Checkout chrome ----------------------------------------------------------- */
.checkout-button-container {
  background: var(--surface, #131719);
  box-shadow: 0 -1px 0 var(--line, rgba(255, 255, 255, 0.09));
}

.checkout-pickup-section, .checkout-buttons-delivery-fee {
  color: var(--muted, #93a0a8);
}

/* The sticky "Continue/Checkout" footer wrapper carries an INLINE
   background:#fff (set in the component), so it needs !important to darken. */
div:has(> .cart-details-button-root) {
  background: var(--surface, #131719) !important;
}

/* Mobile sticky action bars (Add Address / edit forms) use Tailwind bg-white. */
.fixed.bottom-0.bg-white, .sticky.bottom-0.bg-white {
  background: var(--surface, #131719) !important;
  box-shadow: 0 -1px 0 var(--line, rgba(255, 255, 255, 0.1)) !important;
}

/* ── Home ProductGridCollection section headers — title shipped #1a1a1a,
      the "Shop All" link #000. Light title + amber link, per the design. ── */
.heading-title {
  color: var(--ink, #f2f4f5);
}

.heading-subtitle {
  color: var(--muted, #93a0a8);
}

.collection-header .shop-all-link, .shop-all-link {
  color: var(--brand, #f5a524);
}

/* ── Breadcrumbs — `.breadcrumb` ships #666/#999 and a #000 current crumb
      (invisible on dark). Cart-detail uses a class-less h1+span instead. ── */
.breadcrumb, .breadcrumb a, .breadcrumb span {
  color: var(--muted, #93a0a8);
}

.breadcrumb a:hover {
  color: var(--brand, #f5a524);
}

.breadcrumb .current {
  color: var(--ink, #f2f4f5);
}

.sh-cart-details-page-desk h1 {
  color: var(--ink, #f2f4f5);
}

.sh-cart-details-page-desk h1 ~ span {
  color: var(--muted, #93a0a8);
}

/* ══════════════ Universal account pages (.sh-prof-* / .sh-acct-* etc.) ══════
   These live in components/pages/account & /orders (shared "universal" UI),
   NOT the theme folder — they hardcode a light card design (#fff/#fbfaf9
   cards, #eae8e4 borders, #1a1a1a/#8c8781 text). Repaint to graphite. ────── */
/* Profile — cards & surfaces */
.sh-prof-card, .sh-prof-inp {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

.sh-prof-read, .sh-prof-danger, .sh-prof-actions {
  background: var(--surface, #131719);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

.sh-prof-card-head, .sh-prof-biz-body {
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

/* Profile — text */
.sh-prof-head h1, .sh-prof-nm, .sh-prof-card-head h2, .sh-prof-read, .sh-prof-inp input, .sh-prof-biz-l, .sh-prof-danger-t {
  color: var(--ink, #f2f4f5);
}

.sh-prof-head p, .sh-prof-meta, .sh-prof-card-sub, .sh-prof-lab, .sh-prof-biz-r, .sh-prof-hint, .sh-prof-note, .sh-prof-danger-s, .sh-prof-read.empty {
  color: var(--muted, #93a0a8);
}

.sh-prof-meta svg, .sh-prof-biz-l svg, .sh-prof-hint svg {
  color: var(--muted, #93a0a8);
}

.sh-prof-inp input::placeholder {
  color: var(--muted, #93a0a8);
}

/* Profile — verified badge & buttons (keep semantic colours, dark-adjust) */
.sh-prof-chip {
  background: rgba(48, 164, 108, 0.16);
  color: #4ec77a;
}

.sh-prof-verified-ic {
  color: #4ec77a;
}

.sh-prof-btn-edit, .sh-prof-btn-cancel {
  background: transparent;
}

.sh-prof-btn-cancel {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--ink, #f2f4f5);
}

.sh-prof-btn-danger {
  background: transparent;
  border-color: rgba(255, 125, 129, 0.4);
  color: var(--deal-tx, #ff7d81);
}

/* ── Universal design system — grouped by colour role. Covers the account
      sidebar, mobile account home, orders (list + detail + timeline),
      addresses, reviews, wallet, subscriptions & wishlist. ──────────────── */
/* CARD / PANEL backgrounds (#fff) → graphite card */
.sh-order-card, .sh-addr-card, .sh-rr-summary, .sh-rr-tr, .sh-rr-rc, .sh-sub-card, .sh-subd-card, .sh-wl-card, .sh-macct-card, .sh-macct-row, .wallet-bal-container, .order-details-card, .sh-odm-hero, .sh-order-view, .menu-item, .bg, .address-card {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

/* INSET / subtle surfaces (#f7f6f4 / #fbfaf9 / #f6f6f6) → surface */
.sh-acct-help, .sh-addr-pin, .sh-order-thumb, .sh-order-foot, .sh-rr-thumb, .sh-rr-pill, .sh-rr-f-input, .sh-rr-f-textarea, .sh-rr-rc-thumb, .sh-rr-rc-img, .sh-addr-empty-ill, .sh-ord-empty-ill, .sh-rr-empty-ill, .sh-wl-empty-ill, .sh-wlt-empty-ill, .sh-od-otp-code span, .sh-oi-qty, .sh-od-pay-ic, .sh-wlt-ic, .profileImg, .sh-macct-tile, .sh-wl-media, .sh-sub-thumb, .sh-subd-thumb, .sh-subd-ctx, .sh-addr-add-card, .sh-order-view, .delivery-otp-box, .sh-od-root .delivery-otp-box, .sh-subd-ctx, .sh-sub-card.paused {
  background: var(--surface, #131719);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

/* Empty-state illustration tiles: subtle, muted glyph */
.sh-addr-empty-ill, .sh-ord-empty-ill, .sh-rr-empty-ill, .sh-wl-empty-ill, .sh-wlt-empty-ill, .sh-macct-tile, .sh-wlt-ic {
  color: var(--muted, #93a0a8);
}

/* BORDERS / dividers (#eae8e4 / #f0eeeb / #e5e5e5 / #eeeeee) → hairline */
.menu-head, .sh-acct-id, .sh-order-top, .sh-order-foot, .sh-rr-tabs, .sh-rr-form, .sh-rr-rc-foot, .sh-rr-cell, .sh-sub-detail, .sh-sub-foot, .sh-subd-head, .sh-subd-row, .order-details-divider, .sh-od-card-h, .sh-macct-row + .sh-macct-row, .sh-oi-cancelled-wrap, .sh-od-pay-due, .sh-tl-step::before {
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

.order-details-divider {
  background-color: var(--line, rgba(255, 255, 255, 0.1));
}

/* INK text (#1a1a1a / #000) → light */
.sh-acct-id-name, .sh-acct-help-t, .sh-body .sh-acct-h1, .storeName, .sh-macct-title, .sh-addr-head h1, .sh-addr-nm, .sh-orders-head h1, .sh-ord-empty h2, .sh-order-id, .sh-order-it, .sh-order-total b, .sh-addr-empty h2, .sh-rr-head h1, .sh-rr-v, .sh-rr-tab.active, .sh-rr-tr-name, .sh-rr-rc-name, .sh-rr-rc-title, .sh-rr-empty h2, .sh-wl-head h1, .sh-wl-count b, .sh-wl-name, .sh-wl-price, .sh-wlt-head h1, .sh-wlt-empty h2, .sh-sub-nm, .sh-sub-pr, .sh-subd-nm, .sh-subd-price, .sh-subd-cur, .sh-subd-dv, .sh-subd-date, .sh-subd-card h2, .sh-subd-head h2, .sh-earn-head h1, .sh-od-head h1, .sh-od-help-t, .sh-oi-now, .sh-tl-lbl, .sh-odm-big, .sh-odm-t, .sh-od-eta-t, .sh-od-track-row .v, .sh-od-pay-t, .sh-od-otp-code span, .sh-odm-hero, .wallet-activity-card-primary, .order-list-item-secondarytxt, .sh-od-root .order-item-primary-txt, .sh-odm .order-item-primary-txt, .sh-od-root .sh-bill-tot .order-items-bill-item, .sh-odm .sh-bill-tot .order-items-bill-item, .sh-od-root .order-items-heading, .sh-od-root .payment-info-primarytxt, .sh-od-root .shipping-info-sub-heading, .sh-od-root .tracking-info-subheading, .sh-od-root .delivery-otp-heading, .sh-od-root .delivery-otp-text {
  color: var(--ink, #f2f4f5);
}

/* MUTED text (#8c8781 / #6b6862 / #4a4744 / #666 / greys) → muted */
.sh-acct-nav-title, .sh-acct-nav-item, .sh-acct-eyebrow, .sh-acct-help-s, .phone, .more-vert-icon, .sh-macct-label, .sh-macct-sub, .sh-macct-chev, .sh-addr-head p, .sh-addr-menu-btn, .sh-addr-phone, .sh-addr-line, .sh-addr-add-s, .sh-orders-head p, .sh-ord-empty p, .sh-order-id-lbl, .sh-order-date, .sh-order-qty, .sh-order-more, .sh-order-total, .address-header-idx, .sh-addr-empty p, .sh-rr-head p, .sh-rr-k, .sh-rr-v small, .sh-rr-tab, .sh-rr-tr-meta, .sh-rr-none, .sh-rr-rc-when, .sh-rr-f-note, .sh-rr-empty p, .sh-wl-head p, .sh-wl-count, .sh-wl-price s, .sh-wlt-head p, .sh-wlt-empty p, .wallet-bal-text, .sh-sub-pr s, .sh-sub-cadence, .sh-subd-meta, .sh-subd-cad, .sh-subd-sched, .sh-earn-head p, .sh-od-back, .sh-od-meta, .sh-od-help-s, .sh-oi-was, .sh-odm-eta, .sh-od-eta-s, .sh-od-track-row .k, .sh-od-pay-s, .sh-od-otp-note, .sh-od-crumbs, .sh-oi-count, .wallet-activity-card-secondary, .wallet-activity-card-datetxt, .wallet-activity-card-txntype, .sh-od-alert-s, .sh-oi-c-nm, .sh-od-root .order-item-secondary-txt, .sh-odm .order-item-secondary-txt, .sh-od-root .order-items-bill-item, .sh-odm .order-items-bill-item, .sh-od-root .sh-od-addr-line, .sh-od-root .sh-od-addr-phone, .sh-od-root .shipping-info-secondary-txt {
  color: var(--muted, #93a0a8);
}

.sh-acct-nav-item svg, .sh-addr-phone svg, .sh-order-dot, .sh-macct-chev {
  color: var(--muted, #93a0a8);
}

.sh-acct-nav-item:hover, .sh-addr-menu-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink, #f2f4f5);
}

/* Sidebar active item + popover menus */
.sh-acct-nav-item.active {
  background: rgba(245, 165, 36, 0.12);
  color: var(--ink, #f2f4f5);
}

.sh-addr-menu-pop {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

.sh-addr-menu-pop button {
  color: var(--muted, #93a0a8);
}

.sh-addr-menu-pop button:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Ghost / outline buttons in this system (white bg → transparent) */
.sh-addr-editbtn, .sh-rr-btn-cancel, .sh-rr-btn-ghost, .sh-wl-add.ghost, .sh-od-btn, .sh-subd-abtn, .desk-cancelbtn, .mob-cancelbtn, .sh-prof-btn-cancel, .address-editbtn {
  background: transparent;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--ink, #f2f4f5);
}

/* Dashed "add address" card */
.sh-addr-add-card {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--muted, #93a0a8);
}

.sh-addr-add-plus {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

/* Semantic status pills — recur across orders/subs/reviews. Dark-mode:
   translucent tint + lighter text so they read on graphite. */
.sh-sub-chip.green, .sh-subd-chip.green, .sh-order-status.green, .sh-rr-status.pub, .sh-oi-tag.refunded {
  background: rgba(48, 164, 108, 0.16);
  color: #4ec77a;
}

.sh-sub-chip.amber, .sh-subd-chip.amber, .sh-order-status.amber, .sh-rr-status.wait, .sh-oi-tag.refund {
  background: rgba(245, 165, 36, 0.16);
  color: var(--brand-dk, #ffb944);
}

.sh-sub-chip.danger, .sh-subd-chip.danger, .sh-order-status.danger, .sh-rr-status.off {
  background: rgba(196, 41, 46, 0.18);
  color: var(--deal-tx, #ff7d81);
}

.sh-sub-chip.neutral, .sh-subd-chip.neutral, .sh-order-status.neutral, .sh-oi-tag.na {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #93a0a8);
}

.sh-order-status.blue, .sh-od-btn-track, .sh-od-root .tracking-info-root .MuiLink-root {
  background: rgba(36, 91, 194, 0.18);
  border-color: rgba(36, 91, 194, 0.4);
  color: #85adf5;
}

/* Order-detail success/cancel alerts */
.sh-od-alert.success {
  background: rgba(48, 164, 108, 0.1);
  border-color: rgba(48, 164, 108, 0.3);
}

.sh-od-alert.cancel {
  background: rgba(196, 41, 46, 0.1);
  border-color: rgba(196, 41, 46, 0.3);
}

.sh-od-alert.success .sh-od-alert-t {
  color: #4ec77a;
}

.sh-od-alert.cancel .sh-od-alert-t {
  color: var(--deal-tx, #ff7d81);
}

/* Order timeline nodes (desktop + mobile) */
.sh-tl-node, .sh-odm-marker {
  background: var(--surface, #131719);
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
  color: var(--muted, #93a0a8);
}

.sh-tl-step.done .sh-tl-node, .sh-odm-step.done .sh-odm-marker {
  background: #30a46c;
  border-color: #30a46c;
  color: #fff;
}

/* Mobile account home hero already dark gradient — ensure sub text light */
.sh-macct-hero-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* Star rating */
.sh-rr-star {
  color: var(--line-2, rgba(255, 255, 255, 0.2));
}

.sh-rr-star.on {
  color: var(--star, #f5a524);
}

/* ── Cart-REVIEW (order review) page — breadcrumb link + "Review Order" h1
      and the sticky order-CTA carry INLINE #1A1A1A / #ffffff, so !important. */
.sh-cart-review-desk a[href], .sh-cart-review-mob a[href] {
  color: var(--muted, #93a0a8) !important;
}

.sh-cart-review-desk h1, .sh-cart-review-mob h1 {
  color: var(--ink, #f2f4f5) !important;
}

/* Cart-review breadcrumb uses inline dark colours and a black SVG arrow. */
.sh-cart-review-desk > .MuiGrid-item:first-child a, .sh-cart-review-mob > .MuiGrid-item:first-child a {
  color: #a8b2b9 !important;
  opacity: 1 !important;
}

.sh-cart-review-desk > .MuiGrid-item:first-child h1, .sh-cart-review-mob > .MuiGrid-item:first-child h1 {
  color: #f2f4f5 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.sh-cart-review-desk > .MuiGrid-item:first-child img[src*="dropdown.svg"], .sh-cart-review-mob > .MuiGrid-item:first-child img[src*="dropdown.svg"] {
  filter: invert(78%) sepia(8%) saturate(276%) hue-rotate(155deg) brightness(91%) contrast(88%) !important;
  opacity: 1 !important;
}

.cart-review-sticky-cta {
  background: var(--surface, #131719) !important;
}

/* Desktop cart-review coupon/summary box ships a hardcoded white bg. */
.cart-review-desktop-box {
  background: var(--card, #171b1f);
  border-color: var(--line, rgba(255, 255, 255, 0.09));
}

/* Mobile cart-review checkout footer: .wallet-bottom reads an inline
   --placeOrderCard-main:#FFFFFF, so override the resolved bg + its dark text
   (Total Payable / Cash On Delivery). The amber "Order Now" button keeps its
   own dark-on-amber label. */
.wallet-bottom {
  background: var(--surface, #131719) !important;
  box-shadow: 0 -1px 0 var(--line, rgba(255, 255, 255, 0.1));
}

.wallet-text, .wallet-rupe, .wallet-value, .wallet-bottom .MuiFormControlLabel-label {
  color: var(--ink, #f2f4f5) !important;
}

/* ── Coupon dialog (.sh-cpn*) — heading + close button + field + empty state.
      The panel itself darkens via the .MuiModal-root .MuiPaper-root rule. */
.sh-cpn .coupons-list-heading, .sh-cpn-empty h3 {
  color: var(--ink, #f2f4f5);
}

.sh-cpn-close {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink, #f2f4f5);
}

.sh-cpn .coupons-list-space-between, .sh-cpn .sh-cpn-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.sh-cpn button.sh-cpn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f2f4f5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

.sh-cpn button.sh-cpn-close svg, .sh-cpn button.sh-cpn-close .MuiSvgIcon-root {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  color: #f2f4f5 !important;
  fill: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sh-cpn-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
}

.sh-cpn-close:focus-visible {
  outline: 2px solid var(--brand, #f5a524) !important;
  outline-offset: 2px !important;
}

/* Older coupon popup markup does not include the .sh-cpn wrapper. */
.coupons-list-modal .coupons-list-space-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.coupons-list-modal button[aria-label="Close"], .coupons-list-modal button[aria-label="close"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

.coupons-list-modal button[aria-label="Close"] svg, .coupons-list-modal button[aria-label="close"] svg, .coupons-list-modal .coupons-list-space-between > svg:last-child {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
}

.coupons-list-modal button[aria-label="Close"]:hover, .coupons-list-modal button[aria-label="close"]:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.sh-cpn-handle {
  background: var(--line-2, rgba(255, 255, 255, 0.18));
}

.sh-cpn .coupons-list-couponfield input::placeholder, .sh-cpn .sh-cpn-body, .sh-cpn-empty p, .sh-cpn-empty-ill {
  color: var(--muted, #93a0a8);
}

.sh-cpn-empty-ill {
  background: var(--surface, #131719);
}

.sh-cpn .coupons-list-couponfield .MuiOutlinedInput-notchedOutline {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
}

/* ── Disabled MUI inputs (e.g. Profile "Mobile Number") render their value
      via -webkit-text-fill-color, which `color` alone can't override. ───── */
.MuiInputBase-input.Mui-disabled, .MuiInputBase-input:disabled, .profile-details-disabled-style input:disabled, .sh-prof-read.disabled {
  -webkit-text-fill-color: var(--muted, #93a0a8);
  color: var(--muted, #93a0a8);
}

/* Disabled input fill/border tuned for dark. */
.profile-details-disabled-style input:disabled {
  background: var(--surface, #131719);
}

/* Order-detail pages wrap each `.order-details-card`/`.sh-od-*` block in a bare
   white `.MuiPaper-root`; it peeks at card seams. Dark-theme it (scoped to the
   order pages so no other MuiPaper is affected). */
.sh-od-root .MuiPaper-root, .sh-odm .MuiPaper-root, .sh-order-detail .MuiPaper-root {
  background-color: var(--card, #171b1f);
  color: var(--ink, #f2f4f5);
}

/* Light savings strip → dark green tint. */
.order-items-savings-count {
  background: rgba(48, 164, 108, 0.12) !important;
}

.order-items-savings-count, .order-items-savings-count * {
  color: #4ec77a !important;
}

.cart-items-section-heading, .cart-summary-section-heading, .coupon-apply-section-heading, .payment-options-card-header, .delivery-address-info-header, .payment-options-card-label {
  color: #fff !important;
}

.bottom-sheet-head-ctn button svg {
  stroke: #fff !important;
}

/* Checkout + order review contrast -----------------------------------------
   Shared cart components still ship a few inline/light-theme colour values.
   Keep every label readable when those components sit on graphite cards. */
.cart-item-content, .cart-item-content .MuiTypography-root, .cart-item-content .cart-item-primary, .cart-item-content .cart-item-primary span, .delivery-address-info-address, .delivery-info-sub-heading {
  color: var(--ink, #f2f4f5) !important;
}

.delivery-address-info-box, .delivery-info-box {
  background: var(--card, #171b1f) !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
}

/* The mobile payment footer uses an inline --placeOrderCard-main:#fff token.
   Override both the resolved background and the component token so nested MUI
   elements do not repaint the panel white during checkout re-renders. */
.sh-cart-review-mob .wallet-bottom {
  --placeOrderCard-main: var(--surface, #131719) !important;
  --placeOrderCard-contrastText: var(--ink, #f2f4f5) !important;
  background-color: var(--surface, #131719) !important;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

.sh-cart-review-mob .wallet-bottom .MuiTypography-root, .sh-cart-review-mob .wallet-bottom .MuiFormControlLabel-label {
  color: var(--ink, #f2f4f5) !important;
}

@media (max-width: 767px) {
  .cart-item-content {
    min-width: 0;
  }
  .delivery-address-info-address, .delivery-info-sub-heading {
    color: var(--ink, #f2f4f5) !important;
  }
}

/* Address picker ----------------------------------------------------------- */
.bottom-sheet-body, .bottom-sheet-content, .address-list-v2-paper, .address-list-v2-buttons {
  background: var(--card, #171b1f) !important;
  color: var(--ink, #f2f4f5) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

.address-list-v2-paper .custom-card, .address-list-v2-paper .delivery-address-info-box {
  background: var(--surface, #131719) !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
}

.address-list-v2-paper .delivery-address-info-address, .address-list-v2-paper .MuiTypography-root {
  color: var(--ink, #f2f4f5) !important;
}

.address-list-v2-paper .bottom-sheet-content, .address-list-v2-paper .address-list-v2-buttons {
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

/* Desktop order-review cards and sticky action ---------------------------- */
.sh-cart-review-desk .delivery-address-info-box, .sh-cart-review-desk .payment-options-card, .sh-cart-review-desk .cart-review-desktop-box, .sh-cart-review-desk .coupon-card-card {
  background: var(--card, #171b1f) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

.sh-cart-review-desk .delivery-address-info-address, .sh-cart-review-desk .payment-options-card-label, .sh-cart-review-desk .cart-item-content .MuiTypography-root, .sh-cart-review-desk .cart-item-primary, .sh-cart-review-desk .cart-item-primary span {
  color: var(--ink, #f2f4f5) !important;
}

.sh-cart-review-desk .cart-review-sticky-cta, .sh-cart-review-desk div:has(> .cart-review-button-root) {
  background: var(--surface, #131719) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

/* Account overflow menus are inline-white in the universal mobile screens. */
.sh-profile-delete div[style*="background: rgb(255, 255, 255)"], .sh-profile-delete div[style*="background: #fff"], .sh-addr-menu-pop {
  background: var(--card, #171b1f) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

.sh-profile-delete div[style*="background: rgb(255, 255, 255)"] p, .sh-profile-delete div[style*="background: #fff"] p {
  color: var(--deal-tx, #ff7d81) !important;
}

/* Coupon empty state and close affordance. */
.sh-cpn-empty h3 {
  color: var(--ink, #f2f4f5) !important;
}

.sh-cpn-close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink, #f2f4f5) !important;
}

/* Order confirmation/detail: the shipping card is a nested white MuiPaper. */
.sh-od-root .shipping-info-root, .sh-odm .shipping-info-root, .sh-order-detail .shipping-info-root {
  background: var(--card, #171b1f) !important;
  color: var(--ink, #f2f4f5) !important;
}

.sh-od-root .shipping-info-heading, .sh-odm .shipping-info-heading, .sh-order-detail .shipping-info-heading {
  color: var(--ink, #f2f4f5) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
}

.sh-od-root .shipping-info-address, .sh-od-root .shipping-info-secondary-txt, .sh-odm .shipping-info-address, .sh-odm .shipping-info-secondary-txt, .sh-order-detail .shipping-info-address, .sh-order-detail .shipping-info-secondary-txt, .sh-od-pay-due span:first-child {
  color: var(--muted, #93a0a8) !important;
}

/* Modal close control ------------------------------------------------------ */
.bottom-sheet-head-ctn .MuiIconButton-root {
  color: var(--ink, #f2f4f5) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.bottom-sheet-head-ctn .MuiIconButton-root svg, .bottom-sheet-head-ctn .MuiIconButton-root svg path {
  color: var(--ink, #f2f4f5) !important;
  fill: none !important;
  stroke: var(--ink, #f2f4f5) !important;
  opacity: 1 !important;
}

/* Address-card action: prevent the shared MUI hover state from repainting the
   button white with an almost-white label. */
.address-editbtn, .address-editbtn:hover, .address-editbtn:focus-visible, .address-editbtn.MuiButton-root:hover {
  background: transparent !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
  color: var(--ink, #f2f4f5) !important;
}

.address-editbtn svg, .address-editbtn:hover svg {
  color: var(--ink, #f2f4f5) !important;
  fill: currentColor !important;
}

/* Profile edit actions: the universal stylesheet restores dark text on hover. */
.sh-prof-btn-cancel, .sh-prof-btn-cancel:hover, .sh-prof-btn-cancel:focus-visible {
  background: transparent !important;
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
  color: var(--ink, #f2f4f5) !important;
}

/* Order details — remove the light-theme Paper layer and white card seams. */
.sh-order-detail .order-items-root, .sh-order-detail .shipping-info-root, .sh-od-root .order-items-root, .sh-od-root .shipping-info-root {
  background: transparent !important;
  color: var(--ink, #f2f4f5) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sh-order-detail .order-details-card, .sh-od-root .order-details-card {
  background: var(--card, #171b1f) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1)) !important;
  color: var(--ink, #f2f4f5) !important;
  overflow: hidden;
}

/* Section header bands and dividers. */
.sh-order-detail .order-items-heading, .sh-order-detail .shipping-info-heading, .sh-order-detail .payment-info-heading, .sh-order-detail .sh-od-card-h, .sh-od-root .order-items-heading, .sh-od-root .shipping-info-heading, .sh-od-root .payment-info-heading, .sh-od-root .sh-od-card-h {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.1)) !important;
  color: var(--ink, #f2f4f5) !important;
}

.sh-order-detail .order-details-divider, .sh-od-root .order-details-divider, .sh-order-detail .sh-bill-tot, .sh-od-root .sh-bill-tot {
  border-color: var(--line-2, rgba(255, 255, 255, 0.16)) !important;
}

/* Delivery and payment copy: no remaining light-theme ink on graphite. */
.sh-order-detail .shipping-info-sub-heading, .sh-order-detail .shipping-info-address, .sh-order-detail .shipping-info-citystate-pin, .sh-order-detail .shipping-info-landmark, .sh-order-detail .shipping-info-secondary-txt, .sh-od-root .shipping-info-sub-heading, .sh-od-root .shipping-info-address, .sh-od-root .shipping-info-citystate-pin, .sh-od-root .shipping-info-landmark, .sh-od-root .shipping-info-secondary-txt {
  color: var(--muted, #93a0a8) !important;
}

.sh-order-detail .shipping-info-sub-heading, .sh-od-root .shipping-info-sub-heading, .sh-order-detail .sh-od-pay-t, .sh-od-root .sh-od-pay-t {
  color: var(--ink, #f2f4f5) !important;
}

.sh-order-detail .sh-od-pay-s, .sh-order-detail .sh-od-pay-due span:first-child, .sh-od-root .sh-od-pay-s, .sh-od-root .sh-od-pay-due span:first-child {
  color: var(--muted, #93a0a8) !important;
}

/* Keep the two-column shell aligned and comfortably spaced on desktop. */
@media (min-width: 900px) {
  .sh-order-detail .sh-od-cols, .sh-od-root .sh-od-cols {
    align-items: start;
    gap: 28px;
  }
  .sh-order-detail .sh-od-main, .sh-order-detail .sh-od-side, .sh-od-root .sh-od-main, .sh-od-root .sh-od-side {
    min-width: 0;
  }
}

/* Final order-detail fallbacks. Keep these last: the production bundle gives
   these MUI Paper nodes a white background after the universal page rules. */
.page-container.sh-order-detail.sh-od-root .MuiPaper-root.order-items-root, .page-container.sh-order-detail.sh-od-root .MuiPaper-root.shipping-info-root {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-container.sh-order-detail.sh-od-root .order-details-card .MuiPaper-root.shipping-info-root, .page-container.sh-order-detail.sh-od-root .order-details-card .shipping-info-root {
  background-color: #171b1f !important;
  color: #f2f4f5 !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root .shipping-info-heading, .page-container.sh-order-detail.sh-od-root .shipping-info-root .shipping-info-sub-heading {
  background-color: transparent !important;
  color: #f2f4f5 !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root :is(.shipping-info-address, .shipping-info-citystate-pin, .shipping-info-landmark, .shipping-info-secondary-txt) {
  color: #93a0a8 !important;
}

.page-container.sh-order-detail.sh-od-root .order-items-savings-count {
  background-color: rgba(48, 164, 108, 0.12) !important;
  color: #4ec77a !important;
  border: 1px solid rgba(48, 164, 108, 0.25) !important;
}

/* Order-detail polish: normalize the remaining light-theme wrapper layers and
   make the page/section hierarchy readable against the graphite storefront. */
.page-container.sh-order-detail {
  background: #0d1113 !important;
  color: #f2f4f5 !important;
}

.page-container.sh-order-detail .MuiPaper-root.order-items-root {
  background: #0d1113 !important;
  background-image: none !important;
}

.page-container.sh-order-detail .order-details-card {
  background: #171b1f !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: none !important;
}

/* ShippingInfo contains nested MUI Grid wrappers and repeats the heading
   class on both the band and Typography node. Reset both without affecting
   the address-change button. */
.page-container.sh-order-detail .shipping-info-root, .page-container.sh-order-detail .shipping-info-root > .MuiGrid-root, .page-container.sh-order-detail .shipping-info-root > .MuiGrid-root > .MuiGrid-root, .page-container.sh-order-detail .shipping-info-root .MuiGrid-item {
  background: #171b1f !important;
  background-image: none !important;
}

.page-container.sh-order-detail div.shipping-info-heading, .page-container.sh-order-detail .order-details-card > div:has(> .order-items-heading), .page-container.sh-order-detail .order-details-card :has(> .payment-info-heading), .page-container.sh-order-detail .sh-od-card-h {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

.page-container.sh-order-detail :is( .sh-od-head h1, .order-items-heading, .tracking-info-heading, .shipping-info-heading, .shipping-details-heading, .payment-info-heading, .sh-od-card-h, .sh-od-help-t ), .page-container.sh-order-detail :is( .order-items-heading, .shipping-info-heading, .payment-info-heading ) * {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

.page-container.sh-order-detail .sh-od-meta, .page-container.sh-order-detail .sh-od-meta b, .page-container.sh-order-detail .sh-od-crumbs, .page-container.sh-order-detail .sh-od-crumbs a, .page-container.sh-order-detail .sh-od-help-s {
  color: #93a0a8 !important;
}

.page-container.sh-order-detail .order-items-savings-count {
  background: #12251d !important;
  border: 1px solid rgba(78, 199, 122, 0.28) !important;
  color: #70d394 !important;
  box-shadow: none !important;
}

.page-container.sh-order-detail .order-items-savings-count * {
  color: #70d394 !important;
}

/* A small top inset keeps the order title clear of sticky merchant headers. */
.page-container.sh-order-detail.sh-od-root {

  /* The merchant header is fixed and does not reserve document flow space. */padding-top: 104px !important;
}

@media (max-width: 899px) {
  .page-container.sh-order-detail.sh-odm {
    padding-top: 16px !important;
  }
  .page-container.sh-order-detail .order-details-card, .page-container.sh-order-detail .shipping-info-root, .page-container.sh-order-detail .payment-info-root {
    border-radius: 14px !important;
  }
  .page-container.sh-order-detail .order-items-savings-count {
    border-radius: 12px !important;
  }
}

/* Live-DOM exact overrides for the current order page. These intentionally
   avoid grouped selectors so uploaded custom-CSS processors cannot discard
   the rule while minifying newer selector syntax. */
.page-container.sh-order-detail.sh-od-root .MuiPaper-root.MuiPaper-elevation0.order-items-root {
  background-color: #0d1113 !important;
  background-image: none !important;
  color: #f2f4f5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-container.sh-order-detail.sh-od-root .MuiPaper-root.MuiPaper-elevation0.shipping-info-root {
  background-color: #171b1f !important;
  background-image: none !important;
  color: #f2f4f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root div.shipping-info-heading {
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: #f2f4f5 !important;
  border-bottom-color: rgba(255, 255, 255, 0.11) !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root p.shipping-info-heading {
  background-color: transparent !important;
  color: #f2f4f5 !important;
  border: 0 !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root .shipping-info-sub-heading {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

.page-container.sh-order-detail.sh-od-root .shipping-info-root .shipping-info-address, .page-container.sh-order-detail.sh-od-root .shipping-info-root .shipping-info-secondary-txt {
  color: #a8b2b9 !important;
  opacity: 1 !important;
}

.page-container.sh-order-detail.sh-od-root .order-details-card .sh-od-card-h {
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: #f2f4f5 !important;
  border-bottom-color: rgba(255, 255, 255, 0.11) !important;
  opacity: 1 !important;
}

.page-container.sh-order-detail.sh-od-root .order-items-savings-count {
  background-color: #12251d !important;
  color: #70d394 !important;
  border-color: rgba(78, 199, 122, 0.28) !important;
}

@media (min-width: 900px) and (max-width: 1100px) {
  .page-container.sh-order-detail.sh-od-root {
    padding-top: 116px !important;
  }
}

@media (max-width: 899px) {
  .page-container.sh-order-detail.sh-od-root, .page-container.sh-order-detail.sh-odm {
    padding-top: 84px !important;
  }
}

/* Thank-you/order confirmation (legacy markup still used by some storefront
   bundles): give every content card breathing room and keep customer/order
   metadata readable in the dark theme. */
.sh-order-detail .ordery-summary-root, .order-details-root .ordery-summary-root {
  margin-bottom: 24px !important;
}

.sh-order-detail .ordery-summary-root > .MuiPaper-root, .order-details-root .ordery-summary-root > .MuiPaper-root {
  padding: 22px 24px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: #171b1f !important;
  color: #f2f4f5 !important;
  box-shadow: none !important;
}

.sh-order-detail :is(.ordery-summary-primary-txt, .ordery-summary-button-txt), .order-details-root :is(.ordery-summary-primary-txt, .ordery-summary-button-txt) {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

.sh-order-detail .ordery-summary-secondary-txt, .order-details-root .ordery-summary-secondary-txt {
  color: #a8b2b9 !important;
  opacity: 1 !important;
  margin-top: 6px !important;
}

.sh-order-detail :is(.shipping-info-root, .payment-info-root, .order-items-root), .order-details-root :is(.shipping-info-root, .payment-info-root, .order-items-root) {
  padding: 20px !important;
  border-radius: 14px !important;
}

/* Header account popover: phone/email was inheriting near-black text. */
.account-popup .ac-popup-sheet {
  background: #171b1f !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f2f4f5 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38) !important;
}

.account-popup .ac-popup-arrow {
  border-bottom-color: #171b1f !important;
}

.account-popup :is(.ac-popup-profile-card, .ac-popup-my-account) {
  color: #f2f4f5 !important;
}

.account-popup .ac-popup-label {
  color: #b8c1c7 !important;
  opacity: 1 !important;
}

.account-popup :is(.ac-popup-profile-card, .ac-popup-item):hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.account-popup :is(.ac-popup-profile-card, .ac-popup-item):hover, .account-popup :is(.ac-popup-profile-card, .ac-popup-item):hover * {
  color: #ffffff !important;
}

/* Orders list: remove the last light card surface and restore all metadata,
   totals, status and action contrast. */
.sh-order-card {
  background: #171b1f !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: #f2f4f5 !important;
  box-shadow: none !important;
}

.sh-order-card:hover {
  border-color: rgba(255, 166, 0, 0.48) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

.sh-order-top, .sh-order-foot {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.sh-order-card :is(.sh-order-id, .sh-order-it, .sh-order-total b) {
  color: #f2f4f5 !important;
}

.sh-order-card :is( .sh-order-id-lbl, .sh-order-date, .sh-order-qty, .sh-order-more, .sh-order-total ) {
  color: #a8b2b9 !important;
  opacity: 1 !important;
}

.sh-order-view {
  background: transparent !important;
  border-color: #f5a623 !important;
  color: #f5a623 !important;
}

.sh-order-view:hover, .sh-order-view:focus-visible {
  background: #f5a623 !important;
  color: #0d1113 !important;
}

/* Compatibility for the older order-list markup visible in cached bundles. */
.order-list-item-root, .order-list-item-root > .MuiPaper-root {
  background: #171b1f !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: #f2f4f5 !important;
}

.order-list-item-root :is(.order-list-item-primarytxt, .order-list-item-items) {
  color: #f2f4f5 !important;
  opacity: 1 !important;
}

.order-list-item-root .order-list-item-secondarytxt {
  color: #a8b2b9 !important;
  opacity: 1 !important;
}

@media (max-width: 599.95px) {
  .sh-order-detail .ordery-summary-root > .MuiPaper-root, .order-details-root .ordery-summary-root > .MuiPaper-root {
    padding: 18px 16px !important;
  }
  .sh-order-detail :is(.shipping-info-root, .payment-info-root, .order-items-root), .order-details-root :is(.shipping-info-root, .payment-info-root, .order-items-root) {
    padding: 16px !important;
  }
}

/* Product detail: keep related products at a readable three-card desktop width. */
@media (min-width: 900px) {
  #sh-related-products-container .swiper-slide {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    height: auto !important;
  }
  #sh-related-products-container .swiper-slide > div {
    height: calc(100% - 16px) !important;
  }
}

/* ================================================================
   COLLECTION RANGE HEADER + PRODUCT CHIPS
   Reference: Avyukta graphite catalogue section
   Scoped to pages that actually contain Aerion product cards.
   ================================================================ */
:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) {
  background: #0e1113 !important;
  color: #f2f4f5 !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) > .page-container:first-child {
  padding-top: 18px !important;
  padding-bottom: 0 !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  column-gap: 32px !important;
  margin-bottom: 28px !important;
  padding: 38px 0 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1)::before {
  content: "THE COMPLETE RANGE" !important;
  position: absolute !important;
  top: 15px !important;
  left: 0 !important;
  color: #f5a524 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1)::after {
  content: "Every model records front, cabin and rear — compare resolution, app control and screen size." !important;
  grid-column: 1 !important;
  display: block !important;
  max-width: 650px !important;
  margin-top: 10px !important;
  color: #93a0a8 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) > h1 {
  grid-column: 1 !important;
  margin: 0 !important;
  color: #f2f4f5 !important;
  font-family: "Sora", sans-serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

/* Filter and sort controls become compact catalogue chips. */
:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) > .flex.items-center {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .filter-icon-btn-mobile, :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .sort-list-btn, :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) button {
  min-height: 34px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background: #171b1f !important;
  color: #d9dee1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) :is(.product-card, .pcard) {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: #171b1f !important;
}

/* The catalogue has three products; use the available desktop width evenly
   instead of leaving an empty fourth-column strip. */
@media (min-width: 1024px) {
  :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .grid.auto-rows-fr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) :is(.product-card-tag, .product-card-discount, .pcard__discount) {
  top: 12px !important;
  min-height: 24px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .product-card-tag {
  left: 12px !important;
  background: #e8ebed !important;
  color: #596168 !important;
}

:is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) :is(.product-card-discount, .pcard__discount) {
  right: 12px !important;
  left: auto !important;
  background: #c92d35 !important;
  color: #ffffff !important;
}

@media (max-width: 767.95px) {
  :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) {
    display: block !important;
    padding-top: 34px !important;
  }
  :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) > h1 {
    font-size: 28px !important;
  }
  :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1)::after {
    margin-bottom: 18px !important;
    font-size: 14px !important;
  }
  :is(.min-h-screen.bg-white:has(.product-card), .min-h-screen.bg-white:has(.pcard)) .page-container .flex-1 > .mb-8:has(> h1) > .flex.items-center {
    justify-content: flex-start !important;
  }
}

/* Live Avyukta homepage markup: verified against the rendered DOM.
   The store renders multirow-pr-collection/collection-header rather than
   sh-home-page-prod-section for this block. */
.multirow-pr-collection {
  position: relative !important;
  padding-top: 42px !important;
  padding-bottom: 44px !important;
}

.multirow-pr-collection .collection-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px 28px !important;
  margin-bottom: 24px !important;
  padding-top: 21px !important;
}

.multirow-pr-collection .collection-header::before {
  content: "THE COMPLETE RANGE" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  color: #f5a524 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
}

.multirow-pr-collection .collection-header::after {
  content: "We make one thing, and we make it in three sizes. Every model records front, cabin and rear — the differences are resolution, app control and the screen." !important;
  grid-column: 1 !important;
  display: block !important;
  max-width: 690px !important;
  margin-top: 2px !important;
  color: #93a0a8 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.multirow-pr-collection .collection-header .heading {
  grid-column: 1 !important;
  margin: 0 !important;
}

.multirow-pr-collection .collection-header .heading-title {
  margin: 0 !important;
  color: #f2f4f5 !important;
  font-family: "Sora", sans-serif !important;
  font-size: clamp(28px, 2.65vw, 40px) !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

.multirow-pr-collection .collection-header .shop-all-link {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important;
  margin: 0 0 4px !important;
  color: #f5a524 !important;
  font-size: 0 !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.multirow-pr-collection .collection-header .shop-all-link::after {
  content: "Compare all \2192" !important;
  font-size: 13px !important;
}

.multirow-pr-collection .product-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: #171b1f !important;
}

.multirow-pr-collection .product-card-image-container {
  overflow: hidden !important;
  border-radius: 15px 15px 0 0 !important;
  background: #f4f4f2 !important;
}

.multirow-pr-collection .product-card-tag {
  display: none !important;
}

.multirow-pr-collection .product-card-discount {
  top: 12px !important;
  right: auto !important;
  left: 12px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  background: #c92d35 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.multirow-pr-collection .product-card::after {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #17120a !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

.multirow-pr-collection .product-card:nth-of-type(1)::after, .multirow-pr-collection .grid > div:nth-child(1) .product-card::after {
  content: "ENTRY" !important;
  background: #e8ebed !important;
  color: #596168 !important;
}

.multirow-pr-collection .product-card:nth-of-type(2)::after, .multirow-pr-collection .grid > div:nth-child(2) .product-card::after {
  content: "MOST POPULAR" !important;
  background: #f5a524 !important;
}

.multirow-pr-collection .product-card:nth-of-type(3)::after, .multirow-pr-collection .grid > div:nth-child(3) .product-card::after {
  content: "BEST VIDEO" !important;
  background: #f5a524 !important;
}

@media (max-width: 767.95px) {
  .multirow-pr-collection {
    padding-top: 30px !important;
    padding-bottom: 32px !important;
  }
  .multirow-pr-collection .collection-header {
    display: block !important;
  }
  .multirow-pr-collection .collection-header .heading-title {
    font-size: 28px !important;
  }
  .multirow-pr-collection .collection-header::after {
    margin-top: 10px !important;
    font-size: 14px !important;
  }
  .multirow-pr-collection .collection-header .shop-all-link {
    display: inline-block !important;
    margin-top: 15px !important;
  }
}

/* Homepage catalogue range — this is the section rendered in the supplied
   screenshot (separate from the /collections route above). */
.sh-home-page-prod-section {
  position: relative !important;
  padding-top: 38px !important;
  padding-bottom: 42px !important;
  background: #0e1113 !important;
}

.sh-home-page-prod-section > .my-6 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px 32px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.sh-home-page-prod-section .heading-title {
  grid-column: 1 !important;
  position: relative !important;
  display: block !important;
  padding-top: 22px !important;
}

.sh-home-page-prod-section .heading-title::before {
  content: "THE COMPLETE RANGE" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  color: #f5a524 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
}

.sh-home-page-prod-section .heading-title::after {
  content: "We make one thing, and we make it in three sizes. Every model records front, cabin and rear — the differences are resolution, app control and the screen." !important;
  display: block !important;
  max-width: 680px !important;
  margin-top: 10px !important;
  color: #93a0a8 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.sh-home-page-prod-section .heading-title .section-heading {
  margin: 0 !important;
  color: #f2f4f5 !important;
  font-family: "Sora", sans-serif !important;
  font-size: clamp(28px, 2.7vw, 40px) !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

.sh-home-page-prod-section > .my-6 > .flex.items-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  width: auto !important;
  padding-bottom: 4px !important;
}

.sh-home-page-prod-section .shop-all-link {
  color: #f5a524 !important;
  font-size: 0 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.sh-home-page-prod-section .shop-all-link::after {
  content: "Compare all \2192" !important;
  font-size: 13px !important;
}

.sh-home-page-prod-section .product-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: #171b1f !important;
}

.sh-home-page-prod-section .product-card-image-container {
  overflow: hidden !important;
  border-radius: 15px 15px 0 0 !important;
  background: #f4f4f2 !important;
}

.sh-home-page-prod-section .product-card-tag {
  display: none !important;
}

.sh-home-page-prod-section .product-card-discount {
  top: 12px !important;
  right: auto !important;
  left: 12px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  background: #c92d35 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.sh-home-page-prod-section .grid > div .product-card::after {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 4 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #e8ebed !important;
  color: #596168 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

.sh-home-page-prod-section .grid > div:nth-child(1) .product-card::after {
  content: "ENTRY" !important;
}

.sh-home-page-prod-section .grid > div:nth-child(2) .product-card::after {
  content: "MOST POPULAR" !important;
  background: #f5a524 !important;
  color: #17120a !important;
}

.sh-home-page-prod-section .grid > div:nth-child(3) .product-card::after {
  content: "BEST VIDEO" !important;
  background: #f5a524 !important;
  color: #17120a !important;
}

@media (max-width: 767.95px) {
  .sh-home-page-prod-section {
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }
  .sh-home-page-prod-section > .my-6 {
    display: block !important;
  }
  .sh-home-page-prod-section .heading-title .section-heading {
    font-size: 28px !important;
  }
  .sh-home-page-prod-section .heading-title::after {
    font-size: 14px !important;
  }
  .sh-home-page-prod-section > .my-6 > .flex.items-center {
    margin-top: 14px !important;
  }
}

/* Legacy order summary/status card (thank-you and cached order-detail views). */
.ordery-summary-root {
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.ordery-summary-root > .MuiPaper-root {
  width: 100% !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  background: #171b1f !important;
  background-image: none !important;
  color: #f2f4f5 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

.ordery-summary-root .ordery-summary-primary-txt {
  color: #f5f7f8 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.ordery-summary-root .ordery-summary-secondary-txt {
  margin-top: 6px !important;
  color: #aeb8bf !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

.ordery-summary-root .delivery-progress-root {
  margin-top: 16px !important;
}

.ordery-summary-root .delivery-progress-root .MuiStepper-root {
  padding: 12px 6px 8px !important;
}

.ordery-summary-root .delivery-progress-root .MuiStepConnector-line {
  border-color: #78838a !important;
  border-top-width: 1px !important;
}

.ordery-summary-root .delivery-progress-root .qonto-step-icon-root svg {
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  max-height: none !important;
}

.ordery-summary-root .delivery-progress-root .qonto-step-icon-root {
  width: 20px !important;
  height: 20px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.ordery-summary-root .delivery-progress-root .MuiStepConnector-root {
  top: 10px !important;
}

.ordery-summary-root .delivery-progress-root .stepper-wrapper-label {
  margin-top: 10px !important;
  color: #8f9aa1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

.ordery-summary-root .delivery-progress-root .stepper-wrapper-label.Mui-active, .ordery-summary-root .delivery-progress-root .stepper-wrapper-label.Mui-completed {
  color: #f2f4f5 !important;
  font-weight: 650 !important;
}

.ordery-summary-root .delivery-progress-cancel-btn {
  min-height: 36px !important;
  margin: 14px auto 0 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  color: #ff6262 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.ordery-summary-root .delivery-progress-cancel-btn:hover, .ordery-summary-root .delivery-progress-cancel-btn:focus-visible {
  background: rgba(255, 82, 82, 0.1) !important;
  color: #ff8585 !important;
}

/* Legacy Cancel Order sheet uses inline black text for unselected reasons. */
.bottom-sheet-body .bottom-sheet-content > .MuiTypography-caption {
  color: #a8b2b9 !important;
  opacity: 1 !important;
}

.bottom-sheet-body .delivery-progress-reason-btn {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #e8ecef !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

.bottom-sheet-body .delivery-progress-reason-btn:hover, .bottom-sheet-body .delivery-progress-reason-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(245, 165, 36, 0.55) !important;
  color: #ffffff !important;
}

.bottom-sheet-body .delivery-progress-reason-btn[style*="background"] {
  background: rgba(245, 165, 36, 0.12) !important;
  border-color: #f5a524 !important;
  color: #ffffff !important;
}

.bottom-sheet-body .delivery-progress-form-control textarea, .bottom-sheet-body .delivery-progress-form-control input {
  color: #f2f4f5 !important;
  -webkit-text-fill-color: #f2f4f5 !important;
}

.bottom-sheet-body .delivery-progress-form-control textarea::placeholder, .bottom-sheet-body .delivery-progress-form-control input::placeholder {
  color: #89959c !important;
  opacity: 1 !important;
}

/* Some legacy detail layouts wrap the already-bordered summary card in a
   second .order-details-card. Keep only the inner card boundary. */
.order-details-card:has(.ordery-summary-root), .MuiPaper-root:has(> .ordery-summary-root) {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Legacy thank-you/cancellation alert uses inline black message text. */
.sh-order-detail .order-details-card:has(> .order-details-primary-txt) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 14px 16px !important;
  background: #171b1f !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.sh-order-detail .order-details-card:has(> .order-details-primary-txt) .order-details-primary-txt {
  margin-left: 0 !important;
  color: #f2f4f5 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

.sh-order-detail .order-details-card:has(> .order-details-primary-txt) > svg[style*="primary-contrast"] {
  color: #4ec77a !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

@media (max-width: 599.95px) {
  .ordery-summary-root > .MuiPaper-root {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .ordery-summary-root .ordery-summary-primary-txt {
    font-size: 16px !important;
  }
  .ordery-summary-root .delivery-progress-root .MuiStepper-root {
    padding-inline: 0 !important;
  }
  .ordery-summary-root .delivery-progress-root .stepper-wrapper-horizontal {
    padding-inline: 4px !important;
  }
}

/* BEGIN shoopy-gen:avyukta-pdp-graphite-fix */
/* The product detail page (aurora preset) renders on the graphite/dark store
   theme, but several shared components (FAQ, related-products heading, price,
   highlights, features, variant labels, reviews) ship default light-theme
   colours — near-black text that is invisible on the dark background. These
   overrides restyle the FAQ to match the graphite mockup and lift every dark
   text element to the theme's ink/muted tokens. Scoped to .pdp-preset-aurora. */
/* ---- FAQ: match the graphite "Before you buy" mockup ---- */
.storefront-faq {
  padding-block: 1.5rem;
}

@media (min-width: 768px) {
  .storefront-faq {
    padding-block: 2rem;
  }
}

.storefront-faq__heading {
  margin-bottom: 1.25rem;
  color: var(--sx-ink, #f2f4f5);
}

/* Tighten the card padding a touch */
.storefront-faq__question {
  padding: 14px 16px;
}

.storefront-faq__answer {
  padding: 12px 16px 16px;
}

@media (min-width: 768px) {
  .storefront-faq__question {
    padding: 14px 18px;
  }
  .storefront-faq__answer {
    padding: 12px 18px 16px;
  }
}

.storefront-faq__list {
  max-width: 820px;
  margin-inline: auto;
  gap: 10px;
}

.storefront-faq__item {
  border: 1px solid var(--sx-line, rgba(255, 255, 255, 0.09));
  background: var(--sx-card, #171b1f);
  box-shadow: none;
}

.storefront-faq__item[open] {
  border-color: rgba(245, 165, 36, 0.45);
  box-shadow: none;
}

.storefront-faq__question, .storefront-faq__item[open] .storefront-faq__question {
  color: var(--sx-ink, #f2f4f5);
  background: transparent;
}

.storefront-faq__question:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Replace the circular +/- badge with a flat amber glyph like the mockup */
.storefront-faq__icon {
  flex-basis: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  transform: none;
}

.storefront-faq__icon::before {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--sx-brand, #f5a524);
}

.storefront-faq__item[open] .storefront-faq__icon {
  border: 0;
  background: transparent;
  transform: none;
}

.storefront-faq__item[open] .storefront-faq__icon::before {
  content: "\2212";
}

.storefront-faq__answer {
  border-top-color: var(--sx-line, rgba(255, 255, 255, 0.09));
  background: transparent;
  color: var(--sx-muted, #93a0a8);
}

/* ---- Related products heading (was near-black on graphite) ---- */
.pdp-preset-aurora .related-products-heading {
  color: var(--sx-ink, #f2f4f5);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
}

/* ---- Lift dark text that was invisible on the graphite background ---- */
.pdp-preset-aurora .product-pricing-price, .pdp-preset-aurora .product-pricing-price * {
  color: var(--sx-ink, #f2f4f5);
}

.pdp-preset-aurora .product-highlights-title, .pdp-preset-aurora .features-heading {
  color: var(--sx-ink, #f2f4f5);
}

.pdp-preset-aurora .buy__tag, .pdp-preset-aurora .variant-label-text {
  color: var(--sx-ink, #f2f4f5);
}

.pdp-preset-aurora .product-review-no-review {
  color: var(--sx-muted, #93a0a8);
}

/* END shoopy-gen:avyukta-pdp-graphite-fix */
/* BEGIN shoopy-gen:avyukta-scrollbar */
/* White scrollbar to suit the graphite theme */
* {
  scrollbar-color: #ffffff transparent;

  /* Firefox: thumb track */
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #e6e6e6;
  background-clip: padding-box;
}

/* END shoopy-gen:avyukta-scrollbar */
/* ==========================================================================
   Aurora PDP preset — buy-box title / price / summary
   Matches the Avyukta graphite reference (buy__rank / title / meta / tag /
   price). These rules live outside the `.sx` namespace because the preset
   renders under `.pdp-preset-aurora`, so palette values are literal (with a
   theme-var fallback for brand) rather than `var(--sx-*)`.
   ========================================================================== */
/* Rank / model badge (rendered from product `brand`) */
.pdp-preset-aurora .aurora-rank {
  display: inline-block;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f2f4f5;
  font: 700 10px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Title */
.pdp-preset-aurora .aurora-name {
  margin: 13px 0 9px;
  color: #f2f4f5;
  font: 700 clamp(21px, 4.2vw, 30px) / 1.22 "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.025em;
}

/* Meta row — rating badge + ratings count + SKU */
.pdp-preset-aurora .aurora-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.pdp-preset-aurora .aurora-rate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #93a0a8;
  font-size: 12.5px;
  text-decoration: none;
}

.pdp-preset-aurora .aurora-rate b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #30a46c;
  color: #052e1a;
  font: 700 11.5px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif;
}

.pdp-preset-aurora .aurora-sku {
  color: #93a0a8;
  font-size: 12px;
  opacity: 0.8;
}

/* Summary / tagline (shortSummary) */
.pdp-preset-aurora .aurora-tag {
  margin: 0 0 20px;
  color: #93a0a8;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Price block (ProductPricing slot) */
.pdp-preset-aurora .aurora-price {
  margin-top: 0;
}

.pdp-preset-aurora .aurora-price .product-pricing-root {
  margin: 0;
}

.pdp-preset-aurora .aurora-price .product-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin: 0;
}

.pdp-preset-aurora .aurora-price .product-pricing-primary {
  margin: 0;
  color: #f2f4f5;
  font: 700 clamp(30px, 6vw, 40px) / 1 "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.03em;
}

.pdp-preset-aurora .aurora-price .product-pricing-secondary {
  margin: 0;
  color: #93a0a8;
  font-size: 17px;
  text-decoration: line-through;
  opacity: 1;
}

.pdp-preset-aurora .aurora-price .product-pricing-discount {
  margin: 0;
  padding: 4px 9px;
  border-radius: 6px;
  background: #c4292e;
  color: #fff;
  font: 700 12.5px/1.3 "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Highlights sit directly under the title, styled as the product summary —
   the "Highlights" heading is hidden and the copy is muted like a tagline. */
.pdp-preset-aurora .aurora-highlights {
  margin: 2px 0 20px;
}

.pdp-preset-aurora .aurora-highlights .sh-pc-hilts-ctn {
  margin: 0;
}

.pdp-preset-aurora .aurora-highlights .product-highlights-title {
  display: none;
}

.pdp-preset-aurora .aurora-highlights revert-tailwind-container {
  display: block;
}

.pdp-preset-aurora .aurora-highlights .product-highlights-list {
  margin: 0;
  color: #93a0a8;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 400;
}

.pdp-preset-aurora .aurora-highlights .product-highlights-list * {
  color: #93a0a8;
}

.pdp-preset-aurora .aurora-highlights .product-highlights-list :is(p, ul, ol) {
  margin: 0 0 8px;
}

.pdp-preset-aurora .aurora-highlights .product-highlights-list > :last-child {
  margin-bottom: 0;
}

/* Reviews & Ratings — dark card to match the PDP (the base theme paints this
   section white with dark text at desktop widths). */
.pdp-preset-aurora .aurora-reviews .product-review-root {
  background: #131719;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

.pdp-preset-aurora .aurora-reviews .product-review-heading, .pdp-preset-aurora .aurora-reviews .product-review-no-review {
  color: #f2f4f5;
}

.pdp-preset-aurora .aurora-reviews .product-review-empty-subtext, .pdp-preset-aurora .aurora-reviews .sh-pr-login-hint, .pdp-preset-aurora .aurora-reviews .product-review-subtext, .pdp-preset-aurora .aurora-reviews .product-review-rating-num, .pdp-preset-aurora .aurora-reviews .product-review-num-of-rating {
  color: #93a0a8;
}

.pdp-preset-aurora .aurora-reviews .sh-pr-empty .sh-pr-empty-star {
  color: #5b6570;
}

/* Rating bar track on the dark card */
.pdp-preset-aurora .aurora-reviews .product-review-bar {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Variant selector — reference "Add a memory card?" radio cards.
   Restyles the store's chip buttons into the graphite radio-card list
   (legend, full-width cards, radio dot, title + price, amber selected state).
   Assumes a single variant field (as this store's products have); the legend
   below is hardcoded to match the reference.
   ========================================================================== */
.pdp-preset-aurora .aurora-variants .sh-variant-container {
  position: relative;
}

/* Legend — replaces the "Field: value" label */
.pdp-preset-aurora .aurora-variants .sh-variant-field-label {
  display: none;
}

.pdp-preset-aurora .aurora-variants .sh-variant-values-list::before {
  content: "Add a memory card?";
  display: block;
  margin: 0 0 10px;
  color: #93a0a8;
  font: 700 12px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Vertical stack of full-width cards */
.pdp-preset-aurora .aurora-variants .sh-variant-values-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.pdp-preset-aurora .aurora-variants .sh-variant-values-list > div {
  width: 100%;
  align-items: stretch;
}

/* Card */
.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip {
  width: 100%;
  height: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  text-align: left;
  animation: none;
  transition: border-color 0.16s, background 0.16s;
}

.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip:hover:not(.variant-disabled) {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.16);
}

/* Radio dot (left) */
.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  box-sizing: border-box;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}

/* Let the label wrapper's children (title + price) sit in the card's row */
.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip > .flex {
  display: contents;
}

.pdp-preset-aurora .aurora-variants .variant-chip .sh-variant-label-text {
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow: visible;
  color: #f2f4f5;
  font: 600 14px/1.3 "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Hardcoded per-variant subtext (design copy not present in variant data).
   Keyed off the chip's title, which mirrors the variant value, so no JS/core
   change is needed — the line is injected purely from CSS, like the legend. */
.pdp-preset-aurora .aurora-variants .variant-chip[title="Camera only"] .sh-variant-label-text::after {
  content: "I already have a Class-10 microSD";
  display: block;
  margin-top: 3px;
  color: #93a0a8;
  font: 400 12px/1.3 "Inter", ui-sans-serif, system-ui, sans-serif;
}

.pdp-preset-aurora .aurora-variants .variant-chip[title="With a 32 GB Class-10 card"] .sh-variant-label-text::after {
  content: "Pre-formatted and tested in this camera";
  display: block;
  margin-top: 3px;
  color: #93a0a8;
  font: 400 12px/1.3 "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Price (right) */
.pdp-preset-aurora .aurora-variants .variant-chip .sh-variant-label-text + span {
  flex: none;
  margin-left: auto;
  opacity: 1;
  color: #f2f4f5;
  font: 700 15px/1 "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Selected state — amber border, tinted fill, filled radio dot */
.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip.selected {
  border-width: 1px;
  border-color: #f5a524;
  background: rgba(245, 165, 36, 0.08);
  box-shadow: none;
}

.pdp-preset-aurora .aurora-variants .variant-chip.sh-variant-chip.selected::before {
  border-color: #f5a524;
  background: #f5a524;
  box-shadow: inset 0 0 0 3px #12161a;
}

/* ==========================================================================
   Aurora PDP preset — price note, CTA column, WhatsApp button, share.
   Matches the Avyukta graphite reference. The WhatsApp button is a plain <a>
   added in the aurora template (not the shared ProductFooter), so this is all
   template/store styling — no core component changes.
   ========================================================================== */
/* "You save … · inclusive of all taxes" sub-line under the price */
.pdp-preset-aurora .aurora-price .aurora-save {
  margin: 10px 0 0;
  color: #93a0a8;
  font: 400 13px/1.4 "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Prepaid-offer callout. Markup lives in the aurora template (gated on the
   view model's prepaidOffer, with the amounts supplied as data), so the two
   emphasised amounts can be real amber spans instead of a single CSS run. */
.pdp-preset-aurora .aurora-prepaid {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 165, 36, 0.45);
  border-radius: 14px;
  background: rgba(245, 165, 36, 0.06);
}

.pdp-preset-aurora .aurora-prepaid-ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: #f5a524;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pdp-preset-aurora .aurora-prepaid-text {
  margin: 0;
  color: #cfd4d9;
  font: 400 13.5px/1.55 "Inter", ui-sans-serif, system-ui, sans-serif;
}

.pdp-preset-aurora .aurora-prepaid-em {
  color: #f5a524;
  font-weight: 700;
}

/* CTA column: Add-to-cart / Buy-now row, then the WhatsApp button under it */
.pdp-preset-aurora .aurora-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.pdp-preset-aurora .aurora-cta .product-footer-root {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Green "Ask a question on WhatsApp" button (full width, below the buy row) */
.pdp-preset-aurora .aurora-whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #25d366;
  color: #0b3d1f;
  font: 700 15px/1.2 "Inter", ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  transition: background 0.16s;
}

.pdp-preset-aurora .aurora-whatsapp-cta:hover {
  background: #20bd5a;
}

/* Icon is a mask so it takes the button's dark text colour (currentColor)
   instead of the white PNG-style glyph. */
.pdp-preset-aurora .aurora-whatsapp-cta .aurora-wa-ico {
  width: 22px;
  height: 22px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M12.5 0C19.4038 0 25 5.59625 25 12.5C25 19.4037 19.4038 25 12.5 25C10.291 25.0038 8.12074 24.4192 6.21251 23.3062L0.00501932 25L1.69502 18.79C0.581217 16.8812 -0.00385203 14.71 1.90858e-05 12.5C1.90858e-05 5.59625 5.59627 0 12.5 0ZM8.24001 6.625L7.99001 6.635C7.82838 6.64613 7.67045 6.68859 7.52501 6.75999C7.38948 6.83688 7.26572 6.93287 7.15751 7.04499C7.00751 7.18624 6.92251 7.30874 6.83126 7.42749C6.36892 8.02862 6.11998 8.76663 6.12376 9.52499C6.12626 10.1375 6.28626 10.7337 6.53626 11.2912C7.04751 12.4187 7.88876 13.6125 8.99876 14.7187C9.26626 14.985 9.52876 15.2525 9.81126 15.5012C11.1906 16.7155 12.8341 17.5912 14.6113 18.0587L15.3213 18.1675C15.5525 18.18 15.7838 18.1625 16.0163 18.1512C16.3802 18.132 16.7356 18.0335 17.0575 17.8625C17.2211 17.7779 17.3808 17.6862 17.5363 17.5875C17.5363 17.5875 17.5892 17.5517 17.6925 17.475C17.8613 17.35 17.965 17.2612 18.105 17.115C18.21 17.0067 18.2975 16.8808 18.3675 16.7375C18.465 16.5337 18.5625 16.145 18.6025 15.8212C18.6325 15.5737 18.6238 15.4387 18.62 15.355C18.615 15.2212 18.5038 15.0825 18.3825 15.0237L17.655 14.6975C17.655 14.6975 16.5675 14.2237 15.9025 13.9212C15.8329 13.8909 15.7583 13.8736 15.6825 13.87C15.597 13.861 15.5105 13.8706 15.429 13.898C15.3475 13.9254 15.2728 13.97 15.21 14.0287C15.2038 14.0262 15.12 14.0975 14.2163 15.1925C14.1644 15.2622 14.0929 15.3149 14.011 15.3438C13.9291 15.3727 13.8404 15.3766 13.7563 15.355C13.6748 15.3333 13.595 15.3057 13.5175 15.2725C13.3625 15.2075 13.3088 15.1825 13.2025 15.1375C12.4849 14.8249 11.8206 14.4018 11.2338 13.8837C11.0763 13.7462 10.93 13.5962 10.78 13.4512C10.2883 12.9802 9.8597 12.4475 9.50501 11.8662L9.43126 11.7475C9.37909 11.6672 9.33631 11.5813 9.30376 11.4912C9.25626 11.3075 9.38001 11.16 9.38001 11.16C9.38001 11.16 9.68376 10.8275 9.82501 10.6475C9.96251 10.4725 10.0788 10.3025 10.1538 10.1812C10.3013 9.94374 10.3475 9.69999 10.27 9.51124C9.92001 8.65624 9.55835 7.80583 9.18501 6.95999C9.11126 6.79249 8.89251 6.67249 8.69376 6.64874C8.62626 6.64041 8.55876 6.63374 8.49126 6.62874C8.32342 6.61912 8.15513 6.62079 7.98751 6.63375L8.24001 6.625Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M12.5 0C19.4038 0 25 5.59625 25 12.5C25 19.4037 19.4038 25 12.5 25C10.291 25.0038 8.12074 24.4192 6.21251 23.3062L0.00501932 25L1.69502 18.79C0.581217 16.8812 -0.00385203 14.71 1.90858e-05 12.5C1.90858e-05 5.59625 5.59627 0 12.5 0ZM8.24001 6.625L7.99001 6.635C7.82838 6.64613 7.67045 6.68859 7.52501 6.75999C7.38948 6.83688 7.26572 6.93287 7.15751 7.04499C7.00751 7.18624 6.92251 7.30874 6.83126 7.42749C6.36892 8.02862 6.11998 8.76663 6.12376 9.52499C6.12626 10.1375 6.28626 10.7337 6.53626 11.2912C7.04751 12.4187 7.88876 13.6125 8.99876 14.7187C9.26626 14.985 9.52876 15.2525 9.81126 15.5012C11.1906 16.7155 12.8341 17.5912 14.6113 18.0587L15.3213 18.1675C15.5525 18.18 15.7838 18.1625 16.0163 18.1512C16.3802 18.132 16.7356 18.0335 17.0575 17.8625C17.2211 17.7779 17.3808 17.6862 17.5363 17.5875C17.5363 17.5875 17.5892 17.5517 17.6925 17.475C17.8613 17.35 17.965 17.2612 18.105 17.115C18.21 17.0067 18.2975 16.8808 18.3675 16.7375C18.465 16.5337 18.5625 16.145 18.6025 15.8212C18.6325 15.5737 18.6238 15.4387 18.62 15.355C18.615 15.2212 18.5038 15.0825 18.3825 15.0237L17.655 14.6975C17.655 14.6975 16.5675 14.2237 15.9025 13.9212C15.8329 13.8909 15.7583 13.8736 15.6825 13.87C15.597 13.861 15.5105 13.8706 15.429 13.898C15.3475 13.9254 15.2728 13.97 15.21 14.0287C15.2038 14.0262 15.12 14.0975 14.2163 15.1925C14.1644 15.2622 14.0929 15.3149 14.011 15.3438C13.9291 15.3727 13.8404 15.3766 13.7563 15.355C13.6748 15.3333 13.595 15.3057 13.5175 15.2725C13.3625 15.2075 13.3088 15.1825 13.2025 15.1375C12.4849 14.8249 11.8206 14.4018 11.2338 13.8837C11.0763 13.7462 10.93 13.5962 10.78 13.4512C10.2883 12.9802 9.8597 12.4475 9.50501 11.8662L9.43126 11.7475C9.37909 11.6672 9.33631 11.5813 9.30376 11.4912C9.25626 11.3075 9.38001 11.16 9.38001 11.16C9.38001 11.16 9.68376 10.8275 9.82501 10.6475C9.96251 10.4725 10.0788 10.3025 10.1538 10.1812C10.3013 9.94374 10.3475 9.69999 10.27 9.51124C9.92001 8.65624 9.55835 7.80583 9.18501 6.95999C9.11126 6.79249 8.89251 6.67249 8.69376 6.64874C8.62626 6.64041 8.55876 6.63374 8.49126 6.62874C8.32342 6.61912 8.15513 6.62079 7.98751 6.63375L8.24001 6.625Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pdp-preset-aurora .aurora-whatsapp-cta .aurora-wa-label {
  color: inherit;
}

/* Actions row (wishlist + share) — subtle, muted to suit the graphite theme
   instead of the loud amber default. */
.pdp-preset-aurora .aurora-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.pdp-preset-aurora .aurora-actions #sh-product-share .sh-product-share-icon {
  stroke: #93a0a8;
  transition: stroke 0.16s;
}

.pdp-preset-aurora .aurora-actions #sh-product-share:hover .sh-product-share-icon {
  stroke: #f2f4f5;
}

/* ==========================================================================
   Aurora PDP preset — image gallery layout. Put the thumbnail rail as a
   vertical "up and down" column to the LEFT of the main image (the base
   markup already stacks the thumbs vertically at >=960px; it just needs the
   carousel to be a flex row so the rail sits beside the main image instead
   of above it). The rail stays hidden below 960px, so mobile is unchanged.
   ========================================================================== */
.pdp-preset-aurora .product-sticky-carousel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pdp-preset-aurora .product-sticky-carousel .product-gallery-aside-image {
  flex: none;
  margin: 0;
}

.pdp-preset-aurora .product-sticky-carousel .swiper {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   Merged from the cloud dashboard export: product-card quantity stepper +
   review-input height. Unrelated to the aurora buy-box above; added in the
   cloud after the earlier variant-card work, so brought in here.
   ========================================================================== */
/* Strip the orange fill/border/radius the generic rule gives each button */
.pcard__cta .sh-card-cta .pr-plus-minus-button button.pr-plus-minus-stepper-btn {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  margin-top: 0 !important;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f5a524;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.pcard__cta .sh-card-cta .pr-plus-minus-button button.pr-plus-minus-stepper-btn:hover {
  background: rgba(245, 165, 36, 0.12);
}

/* The centre value must not stretch like the +/- and stays readable */
.pcard__cta .sh-card-cta .pr-plus-minus-button button.pr-plus-minus-button-text {
  flex: 0 0 auto;
  min-width: 32px;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}

.pcard__cta .sh-card-cta .pr-plus-minus-button button.pr-plus-minus-button-text {
  flex: 0 0 auto;
  min-width: 32px;
  color: #f5a524;

  /* was #111 — dark on a dark card, so it vanished */ font-size: 14px;
  font-weight: 600;
  cursor: default;
}

.pr-plus-minus-button {
  margin-top: 0px !important;
}

.write-review-black input {
  height: 2.5rem !important;
}

product-component-description * {
  all: revert-layer;
}