/* ---- css/styles.css ---- */
:root {
  --orange: #FC6501;
  --deep: #1A1A1A;
  --purple: #7C5CFF;
  --peach: #FFA569;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --muted: #55505F;
  --line: rgba(26,26,26,.12);
  --nav: rgba(255,255,255,.92);
  --navText: rgba(26,26,26,.82);
  --soft: rgba(252,101,1,.10);
  --shadow: 0 18px 48px rgba(0,0,0,.10);
}
html[data-theme="dark"] {
  --bg: #1A1A1A;
  --surface: #1A1A1A;
  --text: #FFFFFF;
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.14);
  --nav: rgba(26,26,26,.94);
  --navText: rgba(255,255,255,.84);
  --soft: rgba(252,101,1,.16);
  --shadow: 0 18px 48px rgba(0,0,0,.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Splash */
.splash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 22px;
  background: radial-gradient(circle at 25% 20%, rgba(252,101,1,.40), transparent 30%), linear-gradient(135deg, var(--deep), var(--purple));
  color: #fff; transition: opacity .32s ease, visibility .32s ease;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash-card {
  width: min(560px, 100%); padding: clamp(30px, 6vw, 56px); text-align: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 34px;
  backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.splash-logo { width: 160px; margin-bottom: 22px; }
.splash h1 { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.06em; line-height: .96; margin-bottom: 12px; }
.splash p:not(.eyebrow) { color: rgba(255,255,255,.76); }
.mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.mode-buttons button { min-height: 62px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.11); color: white; font-weight: 900; }

/* Nav */
.top-nav { position: sticky; top: 0; z-index: 200; height: 44px; background: var(--nav); backdrop-filter: blur(18px); color: var(--navText); }
.nav-inner { width: min(1120px, 96%); height: 44px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; }
.logo-mark { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; }
.logo-mark img { width: 24px; height: 24px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2.35vw, 30px); }
.nav-links a { white-space: nowrap; }
.nav-links a.active { color: #fff; font-weight: 900; }
.nav-icons { display: flex; gap: 14px; align-items: center; }
.nav-icon, .theme-toggle, .search-toggle { background: transparent; border: 0; color: var(--navText); font-size: 16px; }
.mobile-menu { display: none; background: transparent; color: white; border: 0; font-size: 22px; }

/* Common */
.page-hero, .section, .page-wrap { width: min(1180px, 94%); margin: 0 auto; }
.eyebrow { color: var(--orange); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; margin-bottom: 10px; }
h1, .headline { font-size: clamp(3rem, 7vw, 6.2rem); line-height: .94; letter-spacing: -.075em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: .98; letter-spacing: -.065em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.btn {
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; background: var(--text); color: var(--bg);
}
.btn.orange { background: var(--orange); color: #fff; box-shadow: 0 16px 32px rgba(252,101,1,.24); }
.btn.soft { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn.wide { width: 100%; }
.actions { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
img { max-width: 100%; display: block; }
.price { display: block; margin: 12px 0; color: var(--orange); font-weight: 900; }
.tag { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--soft); color: var(--orange); font-size: 12px; font-weight: 900; margin-bottom: 10px; }

/* Home */
.hero-ad { min-height: calc(100vh - 44px); display: grid; place-items: center; text-align: center; padding: 54px 0; }
.ad-copy { max-width: 870px; margin: 0 auto 28px; }
.ad-copy p:not(.eyebrow), .section-heading p, .page-title p { color: var(--muted); font-size: 1.08rem; max-width: 700px; margin: 16px auto 0; }
.hero-image, .promo-image { width: min(840px, 100%); margin: 0 auto; }
.hero-image img, .promo-image img, .card img, .product-card img, .service-card img, .product-media img { border-radius: 26px; }

.promo, .section { padding: 32px 0; }
.promo-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; min-height: 520px;
  padding: clamp(24px, 5vw, 64px); background: var(--surface); border: 1px solid var(--line); border-radius: 34px; box-shadow: var(--shadow);
}
.promo-card.center { grid-template-columns: 1fr; text-align: center; }
.section.pad { padding: 70px 0; }
.section-heading { text-align: center; margin-bottom: 28px; }

.card-grid, .product-grid, .service-grid, .support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card, .product-card, .service-card, .support-card, .form-card, .product-panel, .trust-box, .filter-box, .search-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 20px; box-shadow: var(--shadow);
}
.card h3, .product-card h3, .service-card h3, .support-card h3 { margin-top: 12px; line-height: 1.1; }
.card p, .product-card p, .service-card p, .support-card p { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.product-card .btn { margin-top: 12px; width: 100%; }

.trust-box { padding: clamp(24px, 5vw, 56px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.trust-list { display: grid; gap: 12px; color: var(--muted); }

/* Pages */
.page-title { width: min(1180px, 94%); margin: 0 auto; padding: 76px 0 30px; text-align: center; }
.filters { width: min(1180px, 94%); margin: 0 auto 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.filter-box { box-shadow: none; padding: 12px 14px; }
.filter-box select, .filter-box input { width: 100%; border: 0; background: transparent; color: var(--text); outline: none; font-weight: 800; }

.product-grid-section { width: min(1180px, 94%); margin: 0 auto; padding: 34px 0 80px; }

.product-page-wrap { width: min(1180px, 94%); margin: 0 auto; padding: 60px 0; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }
.product-media { position: sticky; top: 70px; }
.product-panel { padding: clamp(22px, 4vw, 42px); }
.product-panel h1 { font-size: clamp(2.7rem, 5vw, 5rem); }
.step { border-top: 1px solid var(--line); padding: 22px 0; }
.step:first-of-type { border-top: 0; }
.option-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.option { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 16px; padding: 14px 16px; font-weight: 900; }
.option.active { border-color: var(--orange); box-shadow: inset 0 0 0 2px rgba(252,101,1,.25); }
.color-dot { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.summary-box, .estimate-box { background: var(--soft); border-radius: 24px; padding: 20px; display: grid; gap: 10px; margin-top: 14px; }
.summary-line { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.summary-line strong { color: var(--text); text-align: right; }

.form-page { width: min(920px, 94%); margin: 0 auto; padding: 38px 0 80px; }
.form-card { padding: clamp(22px, 4vw, 42px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 800; margin-bottom: 16px; }
input, select, textarea { width: 100%; min-height: 48px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 12px 14px; outline: none; }
textarea { resize: vertical; }

.footer { padding: 34px 20px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }

/* Search */
.search-overlay { display: none; position: fixed; inset: 44px 0 0; z-index: 180; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); padding: 24px; }
.search-overlay.active { display: block; }
.search-panel { width: min(720px, 96%); margin: 0 auto; }
.search-results { display: grid; gap: 10px; margin-top: 14px; }
.search-result { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .mobile-menu { display: block; }
  .nav-links.open { display: flex; position: absolute; top: 44px; left: 0; right: 0; padding: 18px 24px 24px; flex-direction: column; align-items: flex-start; background: var(--nav); }
  .promo-card, .trust-box, .product-detail { grid-template-columns: 1fr; }
  .product-media { position: static; }
  .card-grid, .product-grid, .service-grid, .support-grid { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mode-buttons, .card-grid, .product-grid, .service-grid, .support-grid, .filters, .form-grid { grid-template-columns: 1fr; }
  h1, .headline, .page-title h1 { font-size: 3rem; }
  h2 { font-size: 2.35rem; }
  .actions { flex-direction: column; }
  .btn { width: 100%; }
  .promo-card { min-height: auto; }
}


/* Trade-in / Sell value guide */
.trade-value-section {
  width: min(1180px, 94%);
  margin: 0 auto;
  padding: 20px 0 36px;
}
.trade-value-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(252,101,1,.16), transparent 28%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--shadow);
}
.trade-value-head {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.trade-value-head p:not(.eyebrow) {
  color: var(--muted);
  max-width: 820px;
  margin-top: 12px;
}
.rate-badge {
  background: var(--soft);
  border-radius: 26px;
  padding: 22px;
  text-align: center;
}
.rate-badge span,
.rate-badge small {
  color: var(--muted);
  font-weight: 800;
}
.rate-badge strong {
  display: block;
  color: var(--orange);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.05;
  margin: 8px 0;
}
.value-table-wrap {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
}
.value-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  background: var(--surface);
}
.value-table th,
.value-table td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.value-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.value-table td:nth-child(2),
.value-table td:nth-child(3) {
  font-weight: 900;
}
.value-table td:nth-child(3) {
  color: var(--orange);
}
@media (max-width: 780px) {
  .trade-value-head {
    grid-template-columns: 1fr;
  }
}


/* Model select improvement */
select option {
  color: #111;
}
html[data-theme="dark"] select option {
  color: #111;
}
/* Product colour preference buttons */
.color-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.color-dot-small {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  flex: 0 0 auto;
}


/* Brand New vs Pre-Owned comparison */
.condition-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.condition-card {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 8px;
}
.condition-card.active {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 2px rgba(252,101,1,.25);
}
.condition-card strong {
  font-size: 1.35rem;
  color: var(--orange);
}
.condition-card small,
.condition-card em,
.compare-mini {
  color: var(--muted);
}
.condition-card em {
  font-style: normal;
  font-size: .9rem;
}
.compare-mini {
  font-size: .88rem;
  margin-top: 8px;
  font-weight: 800;
}
@media (max-width: 620px) {
  .condition-options {
    grid-template-columns: 1fr;
  }
}


/* PC / Laptop configurator */
.pc-config-block {
  margin-top: 18px;
}
.pc-config-block h4 {
  margin-bottom: 10px;
}
.pc-option {
  text-align: left;
  min-width: 210px;
  line-height: 1.35;
}
.pc-option strong {
  display: inline-block;
  margin-bottom: 4px;
}
.pc-option em {
  display: inline-block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 900;
  color: var(--orange);
}
.pc-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pc-locked-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(252, 101, 1, .10);
  border: 1px solid rgba(252, 101, 1, .25);
  color: var(--text);
  font-weight: 800;
}
@media (max-width: 760px) {
  .pc-upgrade-grid {
    grid-template-columns: 1fr;
  }
}


/* Hover mega menu */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
}
.nav-item > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
}
.mega-menu {
  position: absolute;
  top: 44px;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(10px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 24px;
  border-radius: 0 0 28px 28px;
  background: rgba(17, 9, 51, .97);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .18s ease;
  z-index: 500;
}
.mega-menu.compact {
  width: min(520px, calc(100vw - 32px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-menu.wide {
  width: min(780px, calc(100vw - 32px));
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-col {
  display: grid;
  gap: 10px;
  align-content: start;
}
.mega-col span {
  color: #FFA569;
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.mega-col a {
  color: rgba(255,255,255,.82);
  font-weight: 700;
  line-height: 1.2;
}
.mega-col a:hover {
  color: #fff;
  transform: translateX(2px);
}
@media (max-width: 820px) {
  .nav-item {
    display: block;
    height: auto;
    width: 100%;
  }
  .nav-item > a {
    height: auto;
  }
  .mega-menu {
    position: static;
    width: 100%;
    transform: none;
    grid-template-columns: 1fr;
    padding: 14px 0 8px 16px;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .nav-item:hover .mega-menu,
  .nav-item:focus-within .mega-menu {
    display: grid;
    transform: none;
  }
  .mega-menu.compact,
  .mega-menu.wide {
    width: 100%;
    grid-template-columns: 1fr;
  }
}


/* Compact store/category headers */
.catalog-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 22px 20px;
}
.catalog-header .eyebrow {
  margin: 0 0 6px;
}
.catalog-header h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.06em;
  margin: 0;
}
.store-filters {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .catalog-header {
    padding: 34px 18px 14px;
  }
  .catalog-header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }
}


/* V1.11: visible filter bar removed; nav hover menus handle browsing */
.catalog-header + .section {
  padding-top: 18px;
}


/* Device option picker */
.exact-option-wrap {
  width: 100%;
  margin-top: 18px;
}
.exact-option-wrap h4 {
  margin: 0 0 10px;
}
.exact-device-option {
  text-align: left;
  min-width: 220px;
}


/* V1.14: always-visible purchase summary */
.product-layout,
.product-detail,
.product-page-grid {
  align-items: start;
}

/* Try to support the existing product page layout class names safely */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 34px;
}

.sticky-summary-panel,
.buy-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 118px);
  overflow: auto;
  align-self: start;
  z-index: 80;
}

.sticky-summary-panel::-webkit-scrollbar,
.buy-panel::-webkit-scrollbar {
  width: 6px;
}

.sticky-summary-panel::-webkit-scrollbar-thumb,
.buy-panel::-webkit-scrollbar-thumb {
  background: rgba(252, 101, 1, .5);
  border-radius: 999px;
}

@media (max-width: 920px) {
  .product-detail {
    grid-template-columns: 1fr;
  }

  .sticky-summary-panel,
  .buy-panel {
    position: sticky;
    bottom: 0;
    top: auto;
    max-height: 56vh;
    border-radius: 24px 24px 0 0;
    margin: 20px -18px 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.18);
    z-index: 200;
  }

  .sticky-summary-panel .eyebrow,
  .buy-panel .eyebrow {
    margin-bottom: 8px;
  }
}


/* V1.15: remove visible filter row from product category pages */
.store-filters {
  display: none !important;
}
.catalog-header + .section {
  padding-top: 18px;
}


/* V1.16 product selection layout based on Miller wireframe */
.product-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 22px;
}

.product-selection-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.25fr) minmax(320px, .8fr);
  gap: 28px;
  align-items: start;
}

.product-image-panel {
  position: sticky;
  top: 92px;
  min-height: 430px;
  border-radius: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
}

.product-image-panel img {
  width: 100%;
  max-height: 390px;
  object-fit: contain;
  border-radius: 22px;
}

.product-choice-panel {
  min-width: 0;
}

.product-choice-panel h1 {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.07em;
  margin: 4px 0 12px;
}

.selection-step {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.selection-step h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
}

.storage-grid .option {
  min-width: 0;
}

.option span {
  display: inline-block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
}

.summary-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 26px;
  box-shadow: 0 24px 80px rgba(0,0,0,.08);
}

.summary-panel h2 {
  margin: 4px 0 18px;
  font-size: 1.5rem;
  line-height: 1.05;
}

.summary-line.total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 18px;
}

.summary-line.total strong {
  color: var(--orange);
  font-size: 1.18rem;
}

.full {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

.small-note {
  font-size: .9rem;
}

@media (max-width: 1050px) {
  .product-selection-layout {
    grid-template-columns: 1fr;
  }

  .product-image-panel {
    position: relative;
    top: auto;
    min-height: 280px;
  }

  .summary-panel {
    position: sticky;
    bottom: 0;
    top: auto;
    max-height: 58vh;
    border-radius: 26px 26px 0 0;
    z-index: 200;
  }

  .storage-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}


/* V1.17 Standard / Premium price grade */
#gradeOptions .option {
  min-width: 150px;
}
#gradeOptions .option.active {
  border-color: var(--orange);
}


/* V1.18 cleaner auto-layout product cards */
.product-grid {
  align-items: stretch;
}

.product-card-v18,
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.product-card-v18 .product-image-link {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg);
}

.product-card-v18 .product-image-link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .22s ease;
}

.product-card-v18 .product-image-link:hover img {
  transform: scale(1.035);
}

.product-card-v18 .product-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-card-v18 h3 {
  margin-top: 0;
}

.product-card-v18 .product-card-body > p:first-of-type {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.45em;
}

.product-card-v18 .compare-mini {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.product-card-v18 .price-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--orange);
  font-weight: 950;
  text-decoration: none;
  letter-spacing: -.01em;
}

.product-card-v18 .price-cta:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
}

.product-card-v18 .btn.soft {
  display: none !important;
}

@media (max-width: 760px) {
  .product-card-v18 .product-card-body > p:first-of-type {
    -webkit-line-clamp: 2;
    min-height: auto;
  }
}


/* V1.19: price grade sits under condition */
.condition-grade-inline {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
}

.condition-grade-inline h4 {
  margin: 0 0 6px;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.condition-grade-inline .option-row {
  margin-top: 12px;
}

.condition-grade-inline[hidden] {
  display: none !important;
}


/* V1.20 Store category hub */
.store-category-header {
  padding-bottom: 8px;
}

.store-category-header .muted {
  margin-top: 12px;
  max-width: 640px;
}

.store-category-hub {
  padding-top: 16px;
}

.category-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.category-hub-card {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(220px, 1fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 310px;
  border-radius: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 20px 70px rgba(0,0,0,.06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.category-hub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(252,101,1,.55);
  box-shadow: 0 28px 90px rgba(0,0,0,.10);
}

.category-hub-image {
  min-height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.category-hub-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.category-hub-card:hover .category-hub-image img {
  transform: scale(1.045);
}

.category-hub-copy {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-hub-copy h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 6px 0 14px;
}

.category-hub-copy p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.category-hub-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 24px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 900;
}

@media (max-width: 980px) {
  .category-hub-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .category-hub-card {
    grid-template-columns: 1fr;
  }

  .category-hub-image {
    height: 220px;
  }

  .category-hub-copy {
    padding: 24px;
  }
}


/* V1.22 subtle premium motion and duplicate-safe card polish */
.reveal-card,
.category-hub-card {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-card.is-visible,
.category-hub-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .55s ease var(--reveal-delay, 0ms),
    transform .55s ease var(--reveal-delay, 0ms),
    border-color .2s ease,
    box-shadow .2s ease;
}

.product-card-v18 {
  will-change: transform;
}

.product-card-v18:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(0,0,0,.09);
}

.price-cta {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.price-cta:hover {
  background: rgba(252,101,1,.08);
}

.option,
.condition-card,
.category-hub-button,
.btn {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.option:hover,
.condition-card:hover,
.btn:hover {
  transform: translateY(-1px);
}

.nav-links a,
.mega-col a {
  transition: color .16s ease, transform .16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .category-hub-card,
  .reveal-card.is-visible,
  .category-hub-card.is-visible,
  .product-card-v18:hover,
  .option:hover,
  .condition-card:hover,
  .btn:hover,
  .product-card-v18 .product-image-link:hover img,
  .category-hub-card:hover .category-hub-image img {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}


/* V1.24 hard grid/card fix: prevents oversized leftover product cards */
.product-listing-section {
  padding-top: 16px;
}

.product-grid-locked,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.product-grid-locked > .product-card,
.product-card-v24 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.product-card-v24 .product-image-link,
.product-grid-locked > .product-card .product-image-link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

.product-card-v24 .product-image-link img,
.product-grid-locked > .product-card .product-image-link img,
.product-grid-locked > .product-card > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  max-height: 240px !important;
  object-fit: cover !important;
  border-radius: 22px !important;
}

.product-card-v24 .price-cta {
  margin-top: auto !important;
}

.product-card-v24 .product-card-body > p:first-of-type {
  min-height: 4.5em;
}

@media (min-width: 1200px) {
  .product-grid-locked,
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 760px) and (max-width: 1199px) {
  .product-grid-locked,
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 759px) {
  .product-grid-locked,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .product-grid-locked,
  .product-grid {
    grid-template-columns: 1fr !important;
  }
}


/* V1.25 brand/subcategory sections */
.brand-page-header {
  padding-bottom: 20px;
}

.brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.brand-pills a,
.mini-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.brand-pills a:hover,
.mini-link:hover {
  transform: translateY(-1px);
  border-color: var(--orange);
  background: rgba(252,101,1,.08);
}

.brand-section {
  padding-top: 28px;
}

.brand-section + .brand-section {
  border-top: 1px solid var(--line);
  margin-top: 20px;
}

.brand-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 20px;
}

.brand-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 6px 0 8px;
}

.brand-section-head .muted {
  max-width: 620px;
}

@media (max-width: 650px) {
  .brand-section-head {
    align-items: start;
    flex-direction: column;
  }

  .brand-pills a {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* V1.26 filter buttons and calmer hover */
.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.category-filter {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.category-filter span {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 800;
}

.category-filter:hover {
  transform: none !important;
  border-color: rgba(252,101,1,.45);
  background: rgba(252,101,1,.06);
}

.category-filter.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 8px 22px rgba(252,101,1,.22);
}

.category-filter.active span {
  color: rgba(255,255,255,.82);
}

/* calm hover: no jumpy movement, no aggressive image zoom */
.product-card,
.product-card-v24,
.category-hub-card,
.option,
.condition-card,
.btn,
.price-cta {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

.product-card:hover,
.product-card-v24:hover,
.category-hub-card:hover {
  transform: none !important;
  border-color: rgba(252,101,1,.38) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.075) !important;
}

.product-card-v24 .product-image-link:hover img,
.product-card-v18 .product-image-link:hover img,
.category-hub-card:hover .category-hub-image img {
  transform: none !important;
}

.option:hover,
.condition-card:hover,
.btn:hover,
.price-cta:hover {
  transform: none !important;
}

.reveal-card,
.category-hub-card {
  opacity: 1 !important;
  transform: none !important;
}

.reveal-card.is-visible,
.category-hub-card.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

[hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  .category-filter {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* V1.27 remove price-stack text and align product cards */
.compare-mini {
  display: none !important;
}

.product-card-v27 {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.product-card-v27 .product-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.product-card-v27 .product-card-body > p {
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.65em;
}

.product-card-v27 .price-cta {
  margin-top: auto !important;
}

.product-card-v27 .product-image-link img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}


/* V1.28 whole card clickable */
a.product-card {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

a.product-card:focus-visible {
  outline: 3px solid rgba(252, 101, 1, .35);
  outline-offset: 4px;
}

a.product-card .product-image-link {
  pointer-events: none;
}

a.product-card .price-cta {
  pointer-events: none;
}

a.product-card:hover .price-cta {
  border-color: var(--orange);
  background: rgba(252,101,1,.08);
}


/* V1.29 whole-card interaction + strict subsection filtering */
a.product-card.interactive-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

a.product-card.interactive-card::after {
  content: "";
  position: absolute;
  left: var(--tap-x, 50%);
  top: var(--tap-y, 50%);
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(252, 101, 1, .14);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

a.product-card.interactive-card.card-pressed::after {
  width: 420px;
  height: 420px;
  opacity: 1;
  transition: width .28s ease, height .28s ease, opacity .38s ease;
}

a.product-card.interactive-card.card-pressed {
  border-color: rgba(252,101,1,.55) !important;
  box-shadow: 0 14px 34px rgba(252,101,1,.12) !important;
}

a.product-card.interactive-card.card-pressed .product-image-link {
  background: rgba(252,101,1,.08) !important;
}

a.product-card.interactive-card.card-pressed .price-cta {
  background: rgba(252,101,1,.12) !important;
  border-color: rgba(252,101,1,.55) !important;
}

[data-card-product][hidden],
[data-card-product].filter-hidden {
  display: none !important;
}

.category-filter.active {
  pointer-events: auto;
}


/* V1.30 PC configuration buttons */
.pc-config-option {
  text-align: left;
  min-width: min(100%, 260px);
  flex: 1 1 260px;
}

.pc-config-option span {
  color: var(--orange);
}

#storageOptions .pc-config-option {
  line-height: 1.35;
}

.product-card-v27 .product-card-body > p {
  min-height: 4.65em;
}


/* V1.31 PC processor/config/grade flow */
.pc-config-option {
  text-align: left;
  min-width: min(100%, 260px);
  flex: 1 1 260px;
  line-height: 1.35;
}

.pc-config-option span {
  color: var(--orange);
}


/* V1.32 laptop config selector refinements */
.pc-config-option {
  text-align: left;
  min-width: min(100%, 280px);
  flex: 1 1 280px;
  line-height: 1.35;
}

.pc-config-option span {
  color: var(--orange);
}


/* V1.33 RAM/storage upgrade UI */
.pc-config-option {
  text-align: left;
  min-width: min(100%, 280px);
  flex: 1 1 280px;
  line-height: 1.35;
}

.pc-config-option span,
#connectivityOptions .option span,
#colorOptions .option span {
  color: var(--orange);
}


/* V1.35 stability layer: clean cards, strict filters, calm interaction */
.product-grid-locked,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

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

@media (max-width: 760px) {
  .product-grid-locked,
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .product-grid-locked,
  .product-grid { grid-template-columns: 1fr; }
}

a.product-card-v35,
.product-card-v35 {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100%;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.product-card-v35 .product-image-link {
  display: block;
  pointer-events: none;
}

.product-card-v35 .product-image-link img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  max-height: 240px !important;
  object-fit: cover !important;
  border-radius: 24px;
}

.product-card-v35 .product-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.product-card-v35 .product-card-body p {
  min-height: 4.65em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.55;
}

.product-card-v35 .price-cta {
  margin-top: auto !important;
  pointer-events: none;
}

a.product-card-v35::after {
  content: "";
  position: absolute;
  left: var(--tap-x, 50%);
  top: var(--tap-y, 50%);
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(252, 101, 1, .12);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

a.product-card-v35.card-pressed::after {
  width: 420px;
  height: 420px;
  opacity: 1;
  transition: width .28s ease, height .28s ease, opacity .36s ease;
}

a.product-card-v35:hover,
a.product-card-v35.card-pressed {
  transform: none !important;
  border-color: rgba(252, 101, 1, .45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

.product-card-v35:hover .product-image-link img {
  transform: none !important;
}

[data-card-product][hidden],
[data-card-product].filter-hidden {
  display: none !important;
}

.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.category-filter {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.category-filter span {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 800;
}

.category-filter:hover {
  transform: none !important;
  border-color: rgba(252,101,1,.45);
  background: rgba(252,101,1,.06);
}

.category-filter.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 8px 22px rgba(252,101,1,.18);
}

.category-filter.active span {
  color: rgba(255,255,255,.82);
}

.pc-config-option {
  text-align: left;
  min-width: min(100%, 280px);
  flex: 1 1 280px;
  line-height: 1.35;
}

.pc-config-option span,
#connectivityOptions .option span,
#colorOptions .option span {
  color: var(--orange);
}

.color-choice,
#colorOptions .option {
  gap: 8px;
}

@media (max-width: 620px) {
  .category-filter { flex: 1 1 auto; justify-content: center; }
}


/* V1.36 product CTA + reliable count polish */
.product-card-v35 .cta-button,
.cta-button {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff !important;
  font-weight: 950;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(252,101,1,.18);
}

.product-card-v35:hover .cta-button,
.product-card-v35.card-pressed .cta-button {
  background: #e85c00;
  border-color: #e85c00;
  box-shadow: 0 12px 28px rgba(252,101,1,.24);
}

.category-filter[hidden] {
  display: none !important;
}


/* V1.37 trade-in page rebuild */
.trade-hero {
  position: relative;
  overflow: hidden;
}

.trade-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 22px;
  align-items: start;
}

.trade-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-soft);
}

.trade-form-card h2,
.trade-info-card h2 {
  margin-top: 0;
}

.smart-form {
  display: grid;
  gap: 18px;
}

.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.smart-form label {
  display: grid;
  gap: 8px;
  font-weight: 850;
}

.smart-form input,
.smart-form select,
.smart-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 18px;
  padding: 13px 14px;
  font: inherit;
  outline: none;
}

.smart-form input:focus,
.smart-form select:focus,
.smart-form textarea:focus {
  border-color: rgba(252, 101, 1, .65);
  box-shadow: 0 0 0 4px rgba(252, 101, 1, .12);
}

.estimate-box {
  display: grid;
  gap: 6px;
  border-radius: 24px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(252, 101, 1, .13), rgba(255, 165, 105, .18));
  border: 1px solid rgba(252, 101, 1, .22);
}

.estimate-box span {
  color: var(--muted);
  font-weight: 850;
}

.estimate-box strong {
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -.05em;
}

.estimate-box small {
  color: var(--muted);
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.info-steps {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.info-steps > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
}

.info-steps span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 950;
}

.info-steps strong {
  align-self: end;
}

.info-steps p {
  margin: 0;
  color: var(--muted);
}

.policy-note {
  margin-top: 18px;
  border-radius: 24px;
  padding: 18px;
  background: rgba(17, 9, 51, .06);
  border: 1px solid var(--line);
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.trust-strip div {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 24px;
  padding: 18px;
  display: grid;
  gap: 6px;
}

.trust-strip span {
  color: var(--muted);
}

@media (max-width: 880px) {
  .trade-page-grid,
  .trust-strip,
  .form-grid.two {
    grid-template-columns: 1fr;
  }
}


/* V1.38 iPhone trade-in deduction calculator */
.deduction-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: var(--bg);
}

.deduction-panel h3 {
  margin-top: 0;
}

.deduction-list {
  display: grid;
  gap: 8px;
}

.deduction-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.deduction-list div:last-child {
  border-bottom: 0;
}

.deduction-list span {
  color: var(--muted);
}

.deduction-list strong {
  text-align: right;
}

.deduction-list .deduct strong {
  color: #b42318;
}

.deduction-list .total {
  font-weight: 950;
}

.deduction-list .warning {
  display: grid;
  gap: 6px;
  background: rgba(252, 101, 1, .08);
  border: 1px solid rgba(252, 101, 1, .2);
  border-radius: 18px;
  padding: 12px;
}

.trade-formula {
  display: grid;
  gap: 10px;
  border-radius: 24px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

.trade-formula span,
.trade-formula strong {
  display: block;
}


/* V1.39 PC/laptop section rebuild */
.pc-catalog-header {
  padding-bottom: 28px;
}

.pc-count-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 4px;
}

.pc-count-strip div {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 4px;
}

.pc-count-strip strong {
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -.06em;
}

.pc-count-strip span {
  color: var(--muted);
  font-weight: 800;
}

.product-card-v39 {
  display: flex !important;
  flex-direction: column !important;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
}

.product-card-v39 .product-image-link {
  pointer-events: none;
}

.product-card-v39 .product-image-link img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  max-height: 240px !important;
  object-fit: cover !important;
  border-radius: 24px;
}

.product-card-v39 .product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-v39 .product-card-body p {
  min-height: 4.65em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
  color: var(--muted);
}

.product-card-v39 .cta-button,
.cta-button {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff !important;
  font-weight: 950;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(252,101,1,.18);
  margin-top: auto !important;
  pointer-events: none;
}

.product-card-v39:hover,
.product-card-v39.card-pressed {
  transform: none !important;
  border-color: rgba(252, 101, 1, .45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

.product-card-v39:hover .cta-button,
.product-card-v39.card-pressed .cta-button {
  background: #e85c00;
  border-color: #e85c00;
}

.product-detail-grid-v39 {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.25fr) minmax(320px, .65fr);
  gap: 22px;
  align-items: start;
}

.product-media-card,
.product-config-card,
.purchase-summary-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 32px;
  padding: clamp(18px, 2.5vw, 30px);
  box-shadow: var(--shadow-soft);
}

.product-media-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 26px;
}

.product-media-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
}

.selection-stack {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.selection-step {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 26px;
  padding: 18px;
}

.selection-step h3 {
  margin-top: 0;
}

.option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-grid-wide .option {
  flex: 1 1 280px;
  text-align: left;
}

.option {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.option span {
  color: var(--orange);
  font-size: .9em;
  font-weight: 850;
}

.option:hover {
  transform: none !important;
  border-color: rgba(252,101,1,.45);
}

.option.active {
  background: rgba(252,101,1,.10);
  border-color: rgba(252,101,1,.72);
  box-shadow: 0 0 0 4px rgba(252,101,1,.08);
}

.purchase-summary-card {
  position: sticky;
  top: 92px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.summary-line span {
  color: var(--muted);
}

.summary-line strong {
  text-align: right;
}

.summary-total {
  margin: 18px 0;
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(252,101,1,.14), rgba(255,165,105,.2));
  border: 1px solid rgba(252,101,1,.22);
  display: grid;
  gap: 6px;
}

.summary-total strong {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -.05em;
}

.summary-exact {
  color: var(--muted);
  line-height: 1.5;
}

.full-width {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.category-filter[hidden],
[data-card-product][hidden],
[data-card-product].filter-hidden {
  display: none !important;
}

@media (max-width: 1120px) {
  .product-detail-grid-v39 {
    grid-template-columns: 1fr;
  }
  .purchase-summary-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .pc-count-strip {
    grid-template-columns: 1fr;
  }
}


/* V1.40 phone price + trade-in selector fix */
.smart-form select,
.smart-form input,
.smart-form textarea {
  min-height: 48px;
}

#tradeModel,
#tradeStorage,
#tradeCondition,
#tradeBattery,
#tradeScreen,
#tradeBackGlass,
#tradeFaceId,
#tradeCamera,
#tradeIcloud,
#tradeCarrier,
#tradeParts,
#tradePackage {
  cursor: pointer;
}

.purchase-summary-card #summaryPrice {
  white-space: nowrap;
}


/* V1.41 remove PC stats strip */
.pc-count-strip {
  display: none !important;
}


/* V1.42 hard fix: clickable trade-in selectors and phone price */
.trade-form-card,
.trade-form-card form,
.trade-form-card label,
.trade-form-card select,
.trade-form-card input,
.trade-form-card textarea {
  position: relative;
  z-index: 3;
}

.trade-form-card select {
  pointer-events: auto !important;
  user-select: auto !important;
  cursor: pointer;
}

.trade-select-label .field-hint {
  color: var(--muted);
  font-weight: 700;
}

.purchase-summary-card #summaryPrice {
  min-height: 1.2em;
}


/* V1.43 hard runtime fix */
.trade-form-card select,
.trade-form-card input,
.trade-form-card textarea,
#tradeModel,
#checkoutBtn {
  pointer-events: auto !important;
  position: relative;
  z-index: 20;
}

#tradeModel option {
  color: #111;
}

.purchase-summary-card {
  z-index: 10;
}

#checkoutBtn {
  cursor: pointer;
}


/* V1.44 trade-in upgrade phone balance */
.trade-upgrade-section {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 28px;
  padding: 18px;
}

.trade-upgrade-section h3 {
  margin: 0 0 6px;
}

.upgrade-price-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.upgrade-price-box > div {
  border: 1px solid rgba(252,101,1,.22);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(252,101,1,.10), rgba(255,165,105,.14));
  display: grid;
  gap: 6px;
}

.upgrade-price-box span {
  color: var(--muted);
  font-weight: 850;
}

.upgrade-price-box strong {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  letter-spacing: -.04em;
}

@media (max-width: 760px) {
  .upgrade-price-box {
    grid-template-columns: 1fr;
  }
}


/* V1.45 universal summary checkout */
#checkoutBtn,
#sendTradeBtn,
.universal-summary-checkout,
.purchase-summary-card .primary-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 30;
}

.purchase-summary-card,
.estimate-box,
.upgrade-price-box {
  position: relative;
  z-index: 5;
}


/* V1.46 checkout bug pass */
#checkoutBtn,
#sendTradeBtn,
.purchase-summary-card a.primary-btn,
.purchase-summary-card button.primary-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 100 !important;
}
.purchase-summary-card {
  position: sticky;
  top: 92px;
  z-index: 50;
}
.trade-form-card,
.trade-form-card form {
  position: relative;
  z-index: 50;
}


/* V1.47 visible checkout button hardfix */
.primary-btn,
.secondary-btn,
button.primary-btn,
button.secondary-btn,
a.primary-btn,
a.secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap;
  pointer-events: auto !important;
  user-select: none;
  position: relative;
  z-index: 120;
}

.primary-btn,
button.primary-btn,
a.primary-btn {
  background: var(--orange, #FC6501) !important;
  border-color: var(--orange, #FC6501) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(252, 101, 1, .24);
}

.primary-btn:hover,
button.primary-btn:hover,
a.primary-btn:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}

.secondary-btn,
button.secondary-btn,
a.secondary-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--line, rgba(255,255,255,.16)) !important;
  color: var(--text, #fff) !important;
}

.secondary-btn:hover,
button.secondary-btn:hover,
a.secondary-btn:hover {
  border-color: rgba(252,101,1,.55) !important;
}

.full-width {
  width: 100% !important;
  display: flex !important;
}

.purchase-summary-card #checkoutBtn,
.purchase-summary-card #backToCatalogBtn,
.trade-form-card #sendTradeBtn {
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.purchase-summary-card #checkoutBtn {
  font-size: 1rem;
}

.purchase-summary-card #backToCatalogBtn {
  min-height: 46px;
}

#sendTradeBtn.checkout-ready,
#checkoutBtn.checkout-ready {
  outline: 0;
}

.summary-actions,
.form-actions {
  display: grid;
  gap: 10px;
}


/* V1.48 support/contact official links */
.support-link-grid,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
}

.support-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.support-card {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: var(--shadow-soft);
}

.support-card h2,
.support-card h3 {
  margin-top: 0;
}

.support-priority {
  background: linear-gradient(135deg, rgba(252,101,1,.14), rgba(255,165,105,.10));
  border-color: rgba(252,101,1,.24);
}

.contact-link-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.contact-link-list a {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px 16px;
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
}

.contact-link-list a:hover {
  border-color: rgba(252,101,1,.55);
}

.contact-link-list span {
  color: var(--muted);
  font-size: .94rem;
}

.social-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.social-button-grid a,
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 15px;
  text-decoration: none;
  color: var(--text);
  font-weight: 850;
  background: rgba(255,255,255,.04);
}

.social-button-grid a:hover,
.footer-socials a:hover {
  border-color: rgba(252,101,1,.6);
  color: var(--orange);
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.footer-socials a {
  min-height: 36px;
  font-size: .88rem;
}

@media (max-width: 980px) {
  .support-link-grid,
  .contact-layout,
  .support-topic-grid {
    grid-template-columns: 1fr;
  }
}


/* V1.49 centered social logo footer */
.footer-social-icons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px auto 14px;
  text-align: center;
}

.footer-social-icons a {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.footer-social-icons a:hover {
  transform: translateY(-2px);
  border-color: rgba(252,101,1,.7);
  box-shadow: 0 14px 30px rgba(252,101,1,.16);
}

.footer-social-icons img {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 8px;
}

.social-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.social-logo-grid a {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
}

.social-logo-grid a:hover {
  border-color: rgba(252,101,1,.65);
}

.social-logo-grid img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .footer-social-icons {
    gap: 10px;
  }

  .footer-social-icons a {
    width: 42px;
    height: 42px;
  }

  .footer-social-icons img {
    width: 24px;
    height: 24px;
  }

  .social-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* V1.50 world-standard UI polish pass */

/* Global interaction consistency */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  overflow-x: hidden;
}

a,
button,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(252, 101, 1, .55);
  outline-offset: 3px;
}

/* Better forms and selects */
input,
select,
textarea {
  border-radius: 16px;
  line-height: 1.35;
}

select {
  appearance: auto;
}

label {
  line-height: 1.35;
}

.small-note,
.muted {
  line-height: 1.6;
}

/* Product option consistency */
.option-grid {
  align-items: stretch;
}

.option {
  min-height: 52px;
  line-height: 1.25;
  text-align: left;
}

.option span {
  line-height: 1.25;
}

.option.active {
  border-color: var(--orange) !important;
}

/* Fix colour shade alignment: dot sits directly beside name */
#colorOptions {
  align-items: center;
}

#colorOptions .option {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 112px;
  min-height: 54px;
  padding: 12px 14px !important;
  white-space: nowrap;
}

#colorOptions .option br {
  display: none !important;
}

#colorOptions .option .color-dot-small,
.color-dot-small {
  display: inline-block !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  flex: 0 0 21px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  vertical-align: middle !important;
  position: static !important;
}

#colorOptions .option span:not(.color-dot-small) {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Keep non-colour options readable when they have price subtext */
#conditionOptions .option,
#storageOptions .option,
#connectivityOptions .option,
#gradeOptions .option {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Compact radio-like groups */
.compact-options .option,
#tradeStep .option,
#fulfilmentStep .option {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 124px;
}

/* Product detail layout polish */
.product-detail-grid-v39 {
  gap: clamp(18px, 2.6vw, 30px);
}

.product-media-card,
.product-config-card,
.purchase-summary-card,
.selection-step {
  backdrop-filter: blur(10px);
}

.product-config-card h1,
.purchase-summary-card h2 {
  letter-spacing: -.055em;
}

.product-config-card h1 {
  line-height: 1.02;
}

.product-description,
#productDescription {
  max-width: 62ch;
}

/* Summary card polish */
.purchase-summary-card {
  overflow: hidden;
}

.purchase-summary-card .eyebrow {
  margin-bottom: 10px;
}

.purchase-summary-card h2,
#summaryProduct {
  font-size: clamp(2.45rem, 6vw, 5.4rem);
  line-height: .98;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 0;
  margin-bottom: 18px;
}

.summary-line {
  align-items: flex-start;
  min-height: 48px;
  padding: 12px 0;
}

.summary-line span {
  min-width: 36%;
}

.summary-line strong {
  max-width: 62%;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.summary-total {
  margin-top: 20px;
}

.summary-total span {
  color: var(--muted);
  font-weight: 850;
}

.summary-total strong,
#summaryPrice {
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.summary-exact,
#summaryExactOption {
  margin-top: 12px;
  line-height: 1.55;
}

.summary-action-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

/* Consistent buttons */
.primary-btn,
.secondary-btn,
.cta-button {
  min-height: 48px;
  line-height: 1;
}

.primary-btn.full-width,
.secondary-btn.full-width {
  width: 100%;
}

/* Product cards: same rhythm across store pages */
.product-grid {
  align-items: stretch;
}

.product-card,
.product-card-v39 {
  min-width: 0;
}

.product-card h3,
.product-card-v39 h3 {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.product-card p,
.product-card-v39 p {
  line-height: 1.55;
}

.product-card-v39 .cta-button {
  min-height: 48px;
}

/* Filter bar polish */
.category-filter-bar {
  align-items: center;
}

.category-filter {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.category-filter span {
  font-variant-numeric: tabular-nums;
}

/* Trade-in page polish */
.trade-page-grid {
  align-items: start;
}

.estimate-box,
.upgrade-price-box > div,
.deduction-panel {
  overflow: hidden;
}

.deduction-list div {
  align-items: flex-start;
}

.deduction-list strong {
  font-variant-numeric: tabular-nums;
}

/* Support/contact consistency */
.contact-link-list a,
.social-logo-grid a,
.support-card,
.trade-card {
  min-width: 0;
}

.contact-link-list a strong,
.social-logo-grid a span {
  line-height: 1.2;
}

/* Footer: icons centered before copyright */
footer {
  text-align: center;
}

.footer-social-icons {
  margin-left: auto;
  margin-right: auto;
}

.footer-social-icons a {
  flex: 0 0 auto;
}

/* Mobile polish */
@media (max-width: 760px) {
  .product-detail-section,
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .option-grid,
  #colorOptions {
    gap: 10px;
  }

  #colorOptions .option {
    min-width: calc(50% - 6px);
    justify-content: flex-start !important;
  }

  .summary-line {
    gap: 12px;
  }

  .summary-line span {
    min-width: 42%;
  }

  .summary-line strong {
    max-width: 58%;
  }

  .purchase-summary-card h2,
  #summaryProduct {
    font-size: clamp(2.2rem, 13vw, 4.2rem);
  }

  .summary-total strong,
  #summaryPrice {
    font-size: clamp(1.8rem, 10vw, 3rem);
  }

  .primary-btn,
  .secondary-btn {
    min-height: 52px;
  }
}

@media (max-width: 430px) {
  #colorOptions .option {
    width: 100%;
    min-width: 100%;
  }

  .summary-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .summary-line span,
  .summary-line strong {
    max-width: 100%;
    min-width: 0;
    text-align: left;
  }
}


/* V1.51 responsive auto-layout fix */

/*
  The V1.50 title scale made summary names too large.
  This layer fixes product detail layout, summary title wrapping,
  mobile stacking, and card overflow across the site.
*/

.product-detail-section {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
}

.product-detail-grid-v39 {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(240px, 0.85fr)
    minmax(380px, 1.35fr)
    minmax(340px, 0.95fr) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  align-items: start !important;
}

.product-media-card,
.product-config-card,
.purchase-summary-card {
  min-width: 0 !important;
  width: 100%;
}

/* Summary product title must never look like broken letters */
.purchase-summary-card h2,
#summaryProduct {
  font-size: clamp(1.85rem, 2.7vw, 3.15rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  max-width: 100% !important;
  margin-bottom: 18px !important;
}

/* Keep long words under control without cutting product names into ugly chunks */
#summaryProduct {
  display: block;
}

/* Summary rows should stay readable and not crush values */
.summary-line {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.9fr) minmax(130px, 1.1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.summary-line span,
.summary-line strong {
  min-width: 0 !important;
  max-width: 100% !important;
}

.summary-line strong {
  text-align: right !important;
  overflow-wrap: break-word !important;
}

.summary-total {
  width: 100%;
  min-width: 0;
}

.summary-total strong,
#summaryPrice {
  font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
  line-height: 1.08 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
}

.summary-exact,
#summaryExactOption {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Option cards: prevent tiny squeezed buttons */
.option-grid {
  display: flex !important;
  flex-wrap: wrap !important;
}

.option {
  flex: 0 1 auto;
  max-width: 100%;
}

#conditionOptions .option,
#storageOptions .option,
#connectivityOptions .option,
#gradeOptions .option {
  min-width: min(220px, 100%);
}

#colorOptions .option {
  flex: 0 1 auto;
}

/* Product cards and content grids should not overflow */
.product-grid,
.support-link-grid,
.contact-layout,
.support-topic-grid,
.trade-page-grid {
  min-width: 0;
}

.product-card,
.product-card-v39,
.support-card,
.trade-card,
.selection-step,
.estimate-box,
.deduction-panel {
  min-width: 0;
}

/* Catalog cards: cleaner stable height without squeezing */
.product-card-v39 .product-card-body p {
  min-height: auto !important;
}

/* Better responsive breakpoints */
@media (max-width: 1320px) {
  .product-detail-grid-v39 {
    grid-template-columns:
      minmax(300px, 0.85fr)
      minmax(420px, 1.15fr) !important;
  }

  .product-media-card {
    grid-column: 1;
  }

  .product-config-card {
    grid-column: 1 / -1;
    order: 3;
  }

  .purchase-summary-card {
    grid-column: 2;
    order: 2;
  }
}

/* Tablet: stack naturally before the summary gets crushed */
@media (max-width: 1024px) {
  .product-detail-grid-v39 {
    grid-template-columns: 1fr !important;
  }

  .product-media-card,
  .product-config-card,
  .purchase-summary-card {
    grid-column: auto !important;
    order: initial !important;
  }

  .purchase-summary-card {
    position: static !important;
  }

  .purchase-summary-card h2,
  #summaryProduct {
    font-size: clamp(2rem, 6vw, 3.4rem) !important;
  }
}

/* Mobile: summary rows become vertical and readable */
@media (max-width: 640px) {
  .product-detail-section,
  .section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .selection-step {
    border-radius: 24px !important;
    padding: 18px !important;
  }

  .purchase-summary-card h2,
  #summaryProduct {
    font-size: clamp(1.9rem, 11vw, 3.1rem) !important;
    line-height: 1.08 !important;
  }

  .summary-line {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 12px 0 !important;
  }

  .summary-line strong {
    text-align: left !important;
  }

  .summary-total strong,
  #summaryPrice {
    font-size: clamp(1.7rem, 9vw, 2.6rem) !important;
    white-space: normal !important;
  }

  #conditionOptions .option,
  #storageOptions .option,
  #connectivityOptions .option,
  #gradeOptions .option {
    flex: 1 1 100%;
    width: 100%;
  }

  #colorOptions .option {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}

@media (max-width: 420px) {
  #colorOptions .option {
    flex-basis: 100%;
    min-width: 100%;
  }

  .primary-btn,
  .secondary-btn {
    white-space: normal !important;
    text-align: center;
  }
}


/* V1.55 mobile nav and header tap-target fix */

.site-header,
.navbar,
.main-nav,
.top-ribbon,
.header-actions,
.nav-actions {
  min-width: 0;
}

.nav-group,
.dropdown,
.nav-dropdown,
.has-dropdown,
.nav-item.has-dropdown,
.nav-menu-item.has-dropdown {
  position: relative;
}

.dropdown-menu,
.nav-dropdown-menu,
.mega-menu,
.submenu {
  z-index: 1005;
}

.mobile-menu-open .nav-links,
.mobile-menu-open .nav-menu,
.mobile-menu-open #navLinks,
.mobile-menu-open #navMenu,
.nav-links.is-open,
.nav-menu.is-open,
#navLinks.is-open,
#navMenu.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.dropdown-open > .dropdown-menu,
.dropdown-open > .nav-dropdown-menu,
.dropdown-open > .mega-menu,
.dropdown-open > .submenu,
.has-dropdown.dropdown-open .dropdown-menu,
.has-dropdown.dropdown-open .nav-dropdown-menu,
.has-dropdown.dropdown-open .mega-menu,
.has-dropdown.dropdown-open .submenu {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  max-height: 650px !important;
}

@media (min-width: 901px) {
  .nav-group:hover > .dropdown-menu,
  .dropdown:hover > .dropdown-menu,
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown:focus-within > .dropdown-menu,
  .nav-group:hover > .nav-dropdown-menu,
  .dropdown:hover > .nav-dropdown-menu,
  .has-dropdown:hover > .nav-dropdown-menu,
  .has-dropdown:focus-within > .nav-dropdown-menu {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 900px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  .site-header,
  .navbar,
  header {
    z-index: 1000;
  }

  .navbar,
  .nav-shell,
  .main-nav {
    min-height: 68px !important;
  }

  .site-header .container,
  .navbar,
  .nav-shell,
  .main-nav {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand,
  .logo-link,
  .site-brand {
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .brand img,
  .logo-link img,
  .site-brand img,
  .nav-logo {
    max-height: 42px !important;
    width: auto !important;
  }

  .header-actions,
  .nav-actions,
  .top-ribbon {
    gap: 8px !important;
  }

  .theme-toggle,
  .mode-toggle,
  .search-toggle,
  .cart-toggle,
  .menu-toggle,
  .hamburger,
  .nav-toggle,
  .mobile-menu-toggle,
  button[aria-label*="menu" i],
  button[aria-label*="search" i],
  button[aria-label*="mode" i],
  button[aria-label*="theme" i] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    font-size: 1rem !important;
  }

  .nav-links,
  .nav-menu,
  #navLinks,
  #navMenu {
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: rgba(17, 9, 51, .96) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(22px) !important;
    z-index: 1004 !important;
  }

  .nav-links a,
  .nav-menu a,
  #navLinks a,
  #navMenu a,
  .dropdown-toggle,
  .nav-dropdown-toggle,
  .has-dropdown > button,
  .has-dropdown > a {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-size: .98rem !important;
    line-height: 1.2 !important;
  }

  .nav-links a:hover,
  .nav-menu a:hover,
  #navLinks a:hover,
  #navMenu a:hover,
  .dropdown-toggle:hover,
  .nav-dropdown-toggle:hover {
    background: rgba(255,255,255,.08) !important;
  }

  .dropdown-menu,
  .nav-dropdown-menu,
  .mega-menu,
  .submenu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 4px 0 8px 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    transform: none !important;
  }

  .dropdown-menu a,
  .nav-dropdown-menu a,
  .mega-menu a,
  .submenu a {
    min-height: 44px !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
  }

  .dropdown-toggle::after,
  .nav-dropdown-toggle::after,
  .has-dropdown > button::after,
  .has-dropdown > a::after {
    content: "⌄";
    font-size: 1rem;
    transform: rotate(0deg);
    transition: transform .2s ease;
  }

  .dropdown-open > .dropdown-toggle::after,
  .dropdown-open > .nav-dropdown-toggle::after,
  .has-dropdown.dropdown-open > button::after,
  .has-dropdown.dropdown-open > a::after {
    transform: rotate(180deg);
  }

  .search-panel,
  .site-search,
  .search-box,
  #searchPanel {
    z-index: 1006 !important;
  }
}

@media (max-width: 430px) {
  .navbar,
  .nav-shell,
  .main-nav {
    min-height: 72px !important;
  }

  .nav-links,
  .nav-menu,
  #navLinks,
  #navMenu {
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 92px) !important;
  }

  .theme-toggle,
  .mode-toggle,
  .search-toggle,
  .cart-toggle,
  .menu-toggle,
  .hamburger,
  .nav-toggle,
  .mobile-menu-toggle,
  button[aria-label*="menu" i],
  button[aria-label*="search" i],
  button[aria-label*="mode" i],
  button[aria-label*="theme" i] {
    min-width: 46px !important;
    min-height: 46px !important;
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .brand img,
  .logo-link img,
  .site-brand img,
  .nav-logo {
    max-height: 40px !important;
  }
}


/* V1.56 store page horizontal product sections */

.store-rails-shell {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.store-rail-section {
  display: grid;
  gap: 18px;
}

.store-rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.store-rail-head h2 {
  margin: 0 0 8px 0;
  letter-spacing: -.055em;
}

.store-rail-head p {
  max-width: 66ch;
}

.store-section-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.store-scroll-wrap {
  width: 100%;
  overflow: hidden;
}

.store-scroll-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 340px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 6px;
  padding: 6px 6px 18px;
  -webkit-overflow-scrolling: touch;
}

.store-scroll-row::-webkit-scrollbar {
  height: 10px;
}

.store-scroll-row::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.store-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(252,101,1,.75);
  border-radius: 999px;
}

.store-scroll-card {
  min-width: 0;
  min-height: 435px;
  display: grid;
  grid-template-rows: auto 190px 1fr;
  gap: 12px;
  padding: 18px;
  border-radius: 30px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.store-scroll-card:hover {
  transform: translateY(-4px);
  border-color: rgba(252,101,1,.55);
  background: rgba(255,255,255,.075);
}

.store-scroll-image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.store-scroll-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.store-scroll-body {
  display: grid;
  align-content: start;
  gap: 10px;
}

.store-scroll-body h3 {
  margin: 0;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.store-scroll-body p {
  margin: 0;
  line-height: 1.5;
  color: var(--muted);
}

.store-scroll-body .price-cta {
  margin-top: 6px;
  justify-self: start;
}

@media (max-width: 760px) {
  .store-rail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .store-section-link {
    width: 100%;
    justify-content: center;
  }

  .store-scroll-wrap {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
  }

  .store-scroll-row {
    grid-auto-columns: minmax(245px, 82vw);
    gap: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .store-scroll-card {
    min-height: 405px;
    grid-template-rows: auto 165px 1fr;
    border-radius: 26px;
  }
}

@media (max-width: 430px) {
  .store-scroll-row {
    grid-auto-columns: minmax(238px, 86vw);
  }

  .store-scroll-card {
    padding: 16px;
    min-height: 390px;
  }
}


/* V1.57 Apple-inspired Store page */

.apple-store-main {
  background:
    radial-gradient(circle at 20% 0%, rgba(252,101,1,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 420px);
}

.apple-store-hero {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 72px) clamp(26px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 390px);
  gap: 30px;
  align-items: start;
}

.apple-store-hero p {
  margin: 18px 0 0;
  max-width: 720px;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: -.04em;
}

.apple-store-help {
  justify-self: end;
  padding-top: 12px;
}

.apple-store-help h2 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.apple-store-help a {
  display: block;
  margin-top: 8px;
  color: var(--orange);
  text-decoration: none;
  font-weight: 850;
}

.apple-category-rail {
  max-width: 1500px;
  margin: 0 auto;
  padding: 8px clamp(18px, 5vw, 72px) clamp(46px, 6vw, 76px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 146px);
  gap: clamp(18px, 2.8vw, 34px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  -webkit-overflow-scrolling: touch;
}

.apple-category-rail::-webkit-scrollbar {
  height: 8px;
}

.apple-category-rail::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

.apple-category-rail::-webkit-scrollbar-thumb {
  background: rgba(252,101,1,.65);
  border-radius: 999px;
}

.store-icon-card {
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.store-icon-image {
  height: 82px;
  width: 118px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.store-icon-image img {
  max-width: 118px;
  max-height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.2));
}

.store-icon-card strong {
  font-size: .95rem;
  line-height: 1.1;
}

.store-icon-card span {
  font-size: .78rem;
  line-height: 1.25;
  color: var(--muted);
}

.apple-store-section {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 72px) clamp(42px, 6vw, 74px);
}

.apple-store-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 20px;
}

.apple-store-section-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.apple-store-section-head h2 span {
  color: var(--muted);
}

.apple-store-section-head a {
  flex: 0 0 auto;
  color: var(--orange);
  text-decoration: none;
  font-weight: 900;
}

.apple-store-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(285px, 380px);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 20px;
  -webkit-overflow-scrolling: touch;
}

.apple-store-row-featured {
  grid-auto-columns: minmax(310px, 430px);
}

.apple-store-row::-webkit-scrollbar {
  height: 10px;
}

.apple-store-row::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.apple-store-row::-webkit-scrollbar-thumb {
  background: rgba(252,101,1,.72);
  border-radius: 999px;
}

.store-feature-card {
  scroll-snap-align: start;
  min-width: 0;
  min-height: 500px;
  padding: 28px;
  border-radius: 32px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.store-feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(252,101,1,.55);
  background: rgba(255,255,255,.09);
}

.store-feature-card-wide {
  background: linear-gradient(145deg, rgba(252,101,1,.16), rgba(255,255,255,.06));
}

.store-card-kicker {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 950;
}

.store-feature-card h3 {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.03;
  letter-spacing: -.05em;
}

.store-feature-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.store-feature-card strong {
  font-size: .98rem;
  color: var(--muted);
}

.store-feature-image {
  min-height: 220px;
  margin: 8px -18px -18px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.store-feature-image img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.28));
}

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

  .apple-store-help {
    justify-self: start;
  }

  .apple-category-rail {
    grid-auto-columns: minmax(98px, 122px);
    padding-bottom: 38px;
  }

  .store-icon-image {
    height: 72px;
    width: 102px;
  }

  .store-icon-image img {
    max-width: 102px;
    max-height: 68px;
  }

  .apple-store-section-head {
    align-items: start;
    flex-direction: column;
  }

  .apple-store-row,
  .apple-store-row-featured {
    grid-auto-columns: minmax(282px, 82vw);
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .store-feature-card {
    min-height: 455px;
    padding: 23px;
    border-radius: 28px;
  }

  .store-feature-image img {
    height: 220px;
  }
}

@media (max-width: 430px) {
  .apple-store-hero {
    padding-top: 38px;
  }

  .apple-store-hero h1 {
    font-size: clamp(3.5rem, 19vw, 5.2rem);
  }

  .apple-store-hero p {
    font-size: 1.15rem;
  }

  .apple-category-rail {
    grid-auto-columns: 104px;
    gap: 16px;
  }

  .apple-store-row,
  .apple-store-row-featured {
    grid-auto-columns: minmax(265px, 86vw);
  }

  .store-feature-card {
    min-height: 430px;
  }
}


/* V1.58 logo-only header + homepage adverts only */

.brand,
.logo-link,
.site-brand {
  gap: 0 !important;
}

.brand span,
.logo-link span,
.site-brand span,
.brand strong,
.logo-link strong,
.site-brand strong {
  display: none !important;
}

.brand img,
.logo-link img,
.site-brand img,
.nav-logo {
  display: block;
}

.homepage-adverts {
  display: grid;
  gap: 24px;
}

.ad-banner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr);
  gap: 18px;
}

.ad-banner {
  min-height: 280px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 34px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 76% 18%, rgba(252,101,1,.32), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  position: relative;
}

.ad-banner::after {
  content: "";
  position: absolute;
  inset: auto -10% -34% auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(252,101,1,.18);
  filter: blur(4px);
}

.ad-banner-primary {
  min-height: 360px;
  background:
    radial-gradient(circle at 82% 18%, rgba(252,101,1,.42), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(255,165,105,.22), transparent 32%),
    linear-gradient(145deg, rgba(252,101,1,.18), rgba(255,255,255,.04));
}

.ad-banner h3 {
  margin: 8px 0 14px;
  max-width: 13ch;
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.065em;
}

.ad-banner:not(.ad-banner-primary) h3 {
  font-size: clamp(1.55rem, 2.7vw, 2.7rem);
  max-width: 14ch;
}

.ad-banner span {
  color: var(--orange);
  font-weight: 950;
}

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

  .ad-banner,
  .ad-banner-primary {
    min-height: 260px;
    border-radius: 28px;
  }
}


/* V1.59 true logo-only header + refined header icons */
.logo-mark,
.logo-only-link,
.brand,
.logo-link,
.site-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.logo-mark img,
.logo-only-link img,
.brand img,
.logo-link img,
.site-brand img,
.nav-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 30px !important;
}

.nav-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

.header-icon-button,
.theme-toggle,
.search-toggle,
.nav-icon,
.mobile-menu,
.whatsapp-icon-button,
.search-icon-button,
.mode-icon-button,
.menu-icon-button {
  min-width: 36px !important;
  width: 36px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text) !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.14) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}

.header-icon-button:hover,
.theme-toggle:hover,
.search-toggle:hover,
.nav-icon:hover,
.mobile-menu:hover,
.whatsapp-icon-button:hover,
.search-icon-button:hover,
.mode-icon-button:hover,
.menu-icon-button:hover {
  transform: translateY(-1px) !important;
  color: var(--orange) !important;
  background: rgba(252,101,1,.13) !important;
  border-color: rgba(252,101,1,.55) !important;
}

.whatsapp-icon-button,
.nav-icon[href*="wa.link"],
.nav-icon[href*="wa.me"] {
  color: #25D366 !important;
}

.header-control-svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

.whatsapp-svg {
  width: 19px !important;
  height: 19px !important;
  flex-basis: 19px !important;
}

/* Include the actual mega menu class used by the navigation */
.has-mega { position: relative; }
.has-mega.mega-open > .mega-menu,
.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

@media (max-width: 900px) {
  .logo-mark img,
  .logo-only-link img,
  .brand img,
  .logo-link img,
  .site-brand img,
  .nav-logo {
    max-height: 40px !important;
  }

  .nav-icons { gap: 8px !important; }

  .header-icon-button,
  .theme-toggle,
  .search-toggle,
  .nav-icon,
  .mobile-menu,
  .whatsapp-icon-button,
  .search-icon-button,
  .mode-icon-button,
  .menu-icon-button {
    min-width: 46px !important;
    width: 46px !important;
    min-height: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  .header-control-svg {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  .has-mega > .mega-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 8px !important;
    padding: 9px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.065) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .has-mega.mega-open > .mega-menu {
    display: grid !important;
  }

  .has-mega > a::after {
    content: "⌄";
    margin-left: auto;
    transition: transform .18s ease;
  }

  .has-mega.mega-open > a::after {
    transform: rotate(180deg);
  }
}


/* V1.60 trade-in page UI polish */

.trade-hero {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(42px, 7vw, 88px) clamp(18px, 5vw, 54px) clamp(18px, 3vw, 34px) !important;
  display: grid;
  gap: 18px;
}

.trade-hero h1 {
  max-width: 980px;
  font-size: clamp(3rem, 7.5vw, 6.5rem) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
  margin-bottom: 4px !important;
}

.trade-hero .muted {
  max-width: 820px;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.7;
}

.trade-page-grid {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 42px) clamp(18px, 5vw, 54px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.62fr) minmax(330px, .78fr) !important;
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: start !important;
}

.trade-card {
  min-width: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(252,101,1,.09), transparent 34%),
    rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.18) !important;
}

.trade-form-card {
  padding: clamp(20px, 3vw, 38px) !important;
}

.trade-form-card > h2 {
  max-width: 780px;
  font-size: clamp(2.5rem, 5.2vw, 4.7rem) !important;
  line-height: .96 !important;
  letter-spacing: -.065em !important;
  margin: 8px 0 10px !important;
}

.trade-form-card > .muted {
  max-width: 820px;
  margin-bottom: 22px !important;
  line-height: 1.65 !important;
}

.trade-mobile-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 24px;
}

.trade-mobile-summary-strip span {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(252,101,1,.1);
  border: 1px solid rgba(252,101,1,.22);
  color: var(--text);
  font-weight: 900;
  font-size: .86rem;
  line-height: 1.2;
}

.trade-section-title {
  margin: 10px 0 14px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 950;
}

.smart-form {
  display: grid;
  gap: 22px !important;
}

.smart-form .form-grid.two,
.form-grid.two.trade-old-phone-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
  gap: 18px 18px !important;
}

.smart-form label {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  color: rgba(245,242,255,.72) !important;
  font-size: .93rem !important;
  font-weight: 900 !important;
  letter-spacing: .015em;
}

.smart-form small,
.field-hint {
  color: rgba(245,242,255,.58) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.smart-form select,
.smart-form input,
.smart-form textarea {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 48px 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background-color: rgba(5, 2, 20, .72) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(0,0,0,.12) !important;
  font-weight: 900 !important;
  font-size: .98rem !important;
  line-height: 1.25 !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.smart-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245,242,255,.85) 50%),
    linear-gradient(135deg, rgba(245,242,255,.85) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50% !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
}

.smart-form textarea {
  min-height: 132px !important;
  padding-top: 16px !important;
  padding-right: 18px !important;
  resize: vertical !important;
}

.smart-form select:focus,
.smart-form input:focus,
.smart-form textarea:focus {
  outline: none !important;
  border-color: rgba(252,101,1,.75) !important;
  background-color: rgba(9, 4, 31, .9) !important;
  box-shadow: 0 0 0 4px rgba(252,101,1,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.trade-upgrade-section {
  margin-top: 8px !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(252,101,1,.105), rgba(255,255,255,.045)) !important;
  border: 1px solid rgba(252,101,1,.16) !important;
  display: grid !important;
  gap: 18px !important;
}

.trade-upgrade-section h3 {
  margin: 6px 0 8px !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}

.upgrade-price-box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.upgrade-price-box > div,
.estimate-box {
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.upgrade-price-box span,
.estimate-box span {
  display: block !important;
  color: rgba(245,242,255,.62) !important;
  font-size: .78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
  margin-bottom: 8px !important;
}

.upgrade-price-box strong,
.estimate-box strong {
  display: block !important;
  font-size: clamp(1.25rem, 2.6vw, 2.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: anywhere !important;
}

.estimate-box {
  background:
    radial-gradient(circle at 88% 0%, rgba(252,101,1,.22), transparent 34%),
    rgba(255,255,255,.075) !important;
}

.estimate-box small {
  display: block;
  margin-top: 10px;
}

.deduction-panel {
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.deduction-panel h3 {
  margin: 0 0 12px !important;
  font-size: 1.15rem !important;
  letter-spacing: -.025em !important;
}

.deduction-list {
  display: grid;
  gap: 9px;
}

.deduction-list:empty::before {
  content: "Your deduction breakdown will appear here after selecting an iPhone.";
  display: block;
  color: rgba(245,242,255,.58);
  line-height: 1.55;
  font-weight: 700;
}

.deduction-list div {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

.form-actions .primary-btn,
.form-actions .secondary-btn {
  min-height: 54px !important;
  border-radius: 999px !important;
}

.trade-info-card {
  position: sticky !important;
  top: 92px !important;
  padding: clamp(20px, 2.6vw, 32px) !important;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
}

.trade-info-card h2 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 4.4vw, 4.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  margin: 8px 0 18px !important;
}

.trade-formula,
.policy-note,
.info-steps > div {
  border-radius: 24px !important;
  background: rgba(255,255,255,.048) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.trade-formula {
  padding: 18px !important;
  display: grid !important;
  gap: 12px !important;
}

.trade-formula strong {
  color: var(--text) !important;
  font-weight: 950 !important;
}

.trade-formula span {
  color: rgba(245,242,255,.76) !important;
}

.policy-note {
  padding: 18px !important;
  margin-top: 18px !important;
}

.policy-note h3 {
  margin: 0 0 8px !important;
  color: var(--text) !important;
}

.policy-note p {
  margin: 0 !important;
  color: rgba(245,242,255,.82) !important;
  line-height: 1.6 !important;
}

.info-steps {
  display: grid !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.info-steps > div {
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 12px !important;
  align-items: start;
}

.info-steps > div > span {
  grid-row: 1 / span 2;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--orange) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

.info-steps strong {
  align-self: end;
}

.info-steps p {
  margin: 0 !important;
  color: rgba(245,242,255,.7) !important;
  line-height: 1.4 !important;
}

.trust-strip {
  max-width: 1320px !important;
  margin-inline: auto !important;
}

@media (max-width: 1080px) {
  .trade-page-grid {
    grid-template-columns: 1fr !important;
  }

  .trade-info-card {
    position: static !important;
    max-height: none !important;
  }

  .trade-info-card h2 {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .trade-hero {
    padding-top: 34px !important;
  }

  .trade-hero h1,
  .trade-form-card > h2 {
    font-size: clamp(2.35rem, 12vw, 3.7rem) !important;
    line-height: .98 !important;
  }

  .trade-page-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .trade-form-card,
  .trade-info-card {
    border-radius: 28px !important;
    padding: 18px !important;
  }

  .trade-mobile-summary-strip {
    grid-template-columns: 1fr !important;
  }

  .smart-form .form-grid.two,
  .form-grid.two.trade-old-phone-grid,
  .upgrade-price-box {
    grid-template-columns: 1fr !important;
  }

  .smart-form select,
  .smart-form input {
    min-height: 58px !important;
    font-size: 1rem !important;
  }

  .form-actions {
    grid-template-columns: 1fr !important;
  }

  .form-actions .primary-btn,
  .form-actions .secondary-btn {
    width: 100% !important;
  }
}


/* V1.61 desktop nav cleanup: menu button is mobile-only */

/* Desktop/tablet-wide: normal nav links only. No hamburger/menu button. */
@media (min-width: 901px) {
  .menu-toggle,
  .hamburger,
  .nav-toggle,
  .mobile-menu-toggle,
  .menu-icon-button,
  button[aria-label*="menu" i],
  button[title="Menu" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-links,
  .nav-menu,
  #navLinks,
  #navMenu {
    display: flex !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.mobile-menu-open {
    overflow: auto !important;
  }
}

/* Mobile only: show hamburger/menu button and use dropdown panel. */
@media (max-width: 900px) {
  .menu-toggle,
  .hamburger,
  .nav-toggle,
  .mobile-menu-toggle,
  .menu-icon-button,
  button[aria-label*="menu" i],
  button[title="Menu" i] {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* V1.62 global button and interaction contrast standard */

/*
  Goal: no button/link/option text should fade below readable contrast
  in normal, hover, active, selected, card-hover or mobile states.
*/

:root {
  --btn-text-on-orange: #ffffff;
  --btn-text-on-dark: #f8f5ff;
  --btn-text-muted-readable: rgba(248,245,255,.82);
  --btn-orange-solid: #fc6501;
  --btn-orange-hover: #ff7a22;
  --btn-dark-glass: rgba(255,255,255,.09);
  --btn-dark-glass-hover: rgba(255,255,255,.14);
  --btn-border-soft: rgba(255,255,255,.18);
  --btn-border-orange: rgba(252,101,1,.72);
}

/* Base clickable quality */
button,
a,
[role="button"],
.primary-btn,
.secondary-btn,
.cta-button,
.price-cta,
.category-filter,
.option,
.store-section-link,
.store-feature-card,
.store-icon-card,
.ad-banner,
.footer-social-icons a,
.social-logo-grid a,
.contact-link-list a {
  text-decoration-thickness: from-font;
}

/* Primary buttons: orange background must always keep white readable text */
.primary-btn,
button.primary-btn,
a.primary-btn,
.cta-button,
.price-cta,
.product-card .cta-button,
.product-card-v39 .cta-button,
.store-scroll-body .price-cta,
.store-feature-card .price-cta,
#checkoutBtn,
#sendTradeBtn,
a[href*="wa.me"].primary-btn,
a[href*="wa.link"].primary-btn {
  color: var(--btn-text-on-orange) !important;
  background: linear-gradient(180deg, var(--btn-orange-hover), var(--btn-orange-solid)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 950 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
  opacity: 1 !important;
}

.primary-btn *,
.cta-button *,
.price-cta *,
#checkoutBtn *,
#sendTradeBtn * {
  color: inherit !important;
  opacity: 1 !important;
}

.primary-btn:hover,
.primary-btn:focus-visible,
.cta-button:hover,
.cta-button:focus-visible,
.price-cta:hover,
.price-cta:focus-visible,
#checkoutBtn:hover,
#checkoutBtn:focus-visible,
#sendTradeBtn:hover,
#sendTradeBtn:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff8a35, #fc6501) !important;
  border-color: rgba(255,255,255,.34) !important;
  opacity: 1 !important;
}

.primary-btn:active,
.cta-button:active,
.price-cta:active,
#checkoutBtn:active,
#sendTradeBtn:active {
  color: #ffffff !important;
  background: #e75900 !important;
  opacity: 1 !important;
}

/* Secondary / outline buttons: readable on dark and light surfaces */
.secondary-btn,
button.secondary-btn,
a.secondary-btn,
#backToCatalogBtn,
#resetTradeBtn,
.store-section-link,
.category-card span,
.ad-banner span,
.apple-store-section-head a,
.apple-store-help a,
.contact-link-list a,
.social-logo-grid a,
.support-card a {
  color: var(--btn-text-on-dark) !important;
  background: var(--btn-dark-glass) !important;
  border: 1px solid var(--btn-border-soft) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.secondary-btn:hover,
.secondary-btn:focus-visible,
#backToCatalogBtn:hover,
#backToCatalogBtn:focus-visible,
#resetTradeBtn:hover,
#resetTradeBtn:focus-visible,
.store-section-link:hover,
.store-section-link:focus-visible,
.contact-link-list a:hover,
.contact-link-list a:focus-visible,
.social-logo-grid a:hover,
.social-logo-grid a:focus-visible,
.support-card a:hover,
.support-card a:focus-visible {
  color: #ffffff !important;
  background: rgba(252,101,1,.18) !important;
  border-color: var(--btn-border-orange) !important;
  opacity: 1 !important;
}

.secondary-btn:active,
#backToCatalogBtn:active,
#resetTradeBtn:active,
.store-section-link:active {
  color: #ffffff !important;
  background: rgba(252,101,1,.26) !important;
  opacity: 1 !important;
}

/* Product option buttons and filters */
.option,
.category-filter,
.filter-pill,
button.category-filter {
  color: var(--btn-text-on-dark) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}

.option span,
.option strong,
.category-filter span,
.category-filter strong,
.filter-pill span,
.filter-pill strong {
  color: inherit !important;
  opacity: 1 !important;
}

.option:hover,
.option:focus-visible,
.category-filter:hover,
.category-filter:focus-visible,
.filter-pill:hover,
.filter-pill:focus-visible {
  color: #ffffff !important;
  background: rgba(252,101,1,.16) !important;
  border-color: rgba(252,101,1,.55) !important;
  opacity: 1 !important;
}

.option.active,
.option[aria-pressed="true"],
.option[aria-selected="true"],
.category-filter.active,
.category-filter.is-active,
.category-filter[aria-pressed="true"],
.filter-pill.active,
.filter-pill.is-active {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(252,101,1,.95), rgba(209,76,0,.96)) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 12px 26px rgba(252,101,1,.22) !important;
  opacity: 1 !important;
}

/* Card hover must not fade the CTA text */
.product-card:hover .cta-button,
.product-card-v39:hover .cta-button,
.store-scroll-card:hover .price-cta,
.store-feature-card:hover strong,
.interactive-card:hover .cta-button,
.interactive-card:hover .price-cta {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Header icon buttons remain visible and intentional */
.header-icon-button,
.theme-toggle,
.mode-toggle,
.search-toggle,
.whatsapp-toggle,
.whatsapp-icon-button,
.search-icon-button,
.mode-icon-button,
.menu-icon-button,
.menu-toggle,
.hamburger,
.nav-toggle,
.mobile-menu-toggle {
  color: var(--btn-text-on-dark) !important;
  background: rgba(255,255,255,.095) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  opacity: 1 !important;
}

.header-icon-button svg,
.theme-toggle svg,
.mode-toggle svg,
.search-toggle svg,
.whatsapp-toggle svg,
.whatsapp-icon-button svg,
.search-icon-button svg,
.mode-icon-button svg,
.menu-icon-button svg {
  color: currentColor !important;
  opacity: 1 !important;
}

.header-icon-button:hover,
.header-icon-button:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible,
.mode-toggle:hover,
.mode-toggle:focus-visible,
.search-toggle:hover,
.search-toggle:focus-visible,
.whatsapp-toggle:hover,
.whatsapp-toggle:focus-visible,
.search-icon-button:hover,
.search-icon-button:focus-visible,
.mode-icon-button:hover,
.mode-icon-button:focus-visible,
.menu-icon-button:hover,
.menu-icon-button:focus-visible {
  color: #ffffff !important;
  background: rgba(252,101,1,.18) !important;
  border-color: rgba(252,101,1,.72) !important;
}

/* Keep WhatsApp green but readable */
.whatsapp-icon-button,
.whatsapp-toggle[href*="wa"],
a[href*="wa.me"].header-icon-button,
a[href*="wa.link"].header-icon-button {
  color: #ffffff !important;
  background: rgba(37,211,102,.18) !important;
  border-color: rgba(37,211,102,.55) !important;
}

.whatsapp-icon-button:hover,
.whatsapp-icon-button:focus-visible,
a[href*="wa.me"].header-icon-button:hover,
a[href*="wa.link"].header-icon-button:hover {
  color: #ffffff !important;
  background: rgba(37,211,102,.3) !important;
  border-color: rgba(37,211,102,.82) !important;
}

/* Nav links and dropdowns: avoid low contrast hover/focus */
.nav-links a,
.nav-menu a,
#navLinks a,
#navMenu a,
.dropdown-menu a,
.nav-dropdown-menu a,
.mega-menu a,
.submenu a {
  color: var(--btn-text-on-dark) !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-menu a:hover,
.nav-menu a:focus-visible,
#navLinks a:hover,
#navLinks a:focus-visible,
#navMenu a:hover,
#navMenu a:focus-visible,
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.mega-menu a:hover,
.mega-menu a:focus-visible,
.submenu a:hover,
.submenu a:focus-visible {
  color: #ffffff !important;
  background: rgba(252,101,1,.16) !important;
  opacity: 1 !important;
}

/* Forms: selected/active text should not fade */
.smart-form select,
.smart-form input,
.smart-form textarea,
input,
select,
textarea {
  color: var(--btn-text-on-dark) !important;
  opacity: 1 !important;
}

.smart-form select option,
select option {
  color: #111111 !important;
  background: #ffffff !important;
}

/* Disabled states remain clearly disabled but still readable */
button:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.cta-button:disabled,
.option:disabled,
.category-filter:disabled,
[aria-disabled="true"] {
  color: rgba(248,245,255,.72) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  text-shadow: none !important;
}

/* Text links inside cards/sections should retain readable contrast */
a:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.product-card):not(.product-card-v39):not(.store-feature-card):not(.store-icon-card):not(.ad-banner) {
  text-underline-offset: 3px;
}

a:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):hover {
  opacity: 1 !important;
}

/* Light mode/bright cards safety */
.light-mode .secondary-btn,
[data-theme="light"] .secondary-btn,
body.light .secondary-btn,
.light-mode .option,
[data-theme="light"] .option,
body.light .option,
.light-mode .category-filter,
[data-theme="light"] .category-filter,
body.light .category-filter {
  color: #170f2f !important;
  background: rgba(17,9,51,.06) !important;
  border-color: rgba(17,9,51,.18) !important;
}

.light-mode .secondary-btn:hover,
[data-theme="light"] .secondary-btn:hover,
body.light .secondary-btn:hover,
.light-mode .option:hover,
[data-theme="light"] .option:hover,
body.light .option:hover,
.light-mode .category-filter:hover,
[data-theme="light"] .category-filter:hover,
body.light .category-filter:hover {
  color: #ffffff !important;
  background: rgba(252,101,1,.9) !important;
  border-color: rgba(252,101,1,1) !important;
}

/* Mobile: make all important buttons comfortably tappable and readable */
@media (max-width: 760px) {
  .primary-btn,
  .secondary-btn,
  .cta-button,
  .price-cta,
  .category-filter,
  .option {
    min-height: 50px !important;
    font-size: .98rem !important;
  }

  .summary-action-stack .primary-btn,
  .summary-action-stack .secondary-btn,
  .form-actions .primary-btn,
  .form-actions .secondary-btn {
    width: 100% !important;
  }
}


/* V1.63 mobile-first standard header layout */

/*
  Mobile standard:
  - hamburger/menu button on the left
  - logo centered
  - mode/search/WhatsApp on the right
  - big enough tap targets for the phone users who matter most
*/

@media (min-width: 901px) {
  .mobile-menu-left,
  #mobileMenu,
  .mobile-menu,
  .mobile-menu-toggle,
  .menu-icon-button {
    display: none !important;
  }

  .top-nav .nav-inner {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 900px) {
  .top-nav {
    min-height: calc(66px + env(safe-area-inset-top, 0px)) !important;
  }

  .top-nav .nav-inner {
    min-height: 66px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 14px 8px !important;
  }

  .mobile-menu-left,
  #mobileMenu,
  .mobile-menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 999px !important;
    z-index: 1010 !important;
  }

  .logo-mark,
  .logo-only-link,
  .brand,
  .logo-link,
  .site-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    min-width: 0 !important;
    max-width: 140px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo-mark img,
  .logo-only-link img,
  .brand img,
  .logo-link img,
  .site-brand img,
  .nav-logo {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .nav-icons {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .nav-icons .mobile-menu,
  .nav-icons #mobileMenu,
  .nav-icons .mobile-menu-left {
    display: none !important;
  }

  .nav-icons .header-icon-button,
  .nav-icons .theme-toggle,
  .nav-icons .search-toggle,
  .nav-icons .whatsapp-icon-button,
  .nav-icons .nav-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }

  .nav-links,
  .nav-menu,
  #navLinks,
  #navMenu {
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100dvh - 86px - env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 520px) {
  .top-nav .nav-inner {
    grid-template-columns: 50px minmax(72px, 1fr) auto !important;
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .mobile-menu-left,
  #mobileMenu,
  .mobile-menu {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
  }

  .nav-icons {
    gap: 6px !important;
  }

  .nav-icons .header-icon-button,
  .nav-icons .theme-toggle,
  .nav-icons .search-toggle,
  .nav-icons .whatsapp-icon-button,
  .nav-icons .nav-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }

  .logo-mark,
  .logo-only-link,
  .brand,
  .logo-link,
  .site-brand {
    max-width: 104px !important;
  }

  .logo-mark img,
  .logo-only-link img,
  .brand img,
  .logo-link img,
  .site-brand img,
  .nav-logo {
    max-height: 34px !important;
  }
}

@media (max-width: 380px) {
  .top-nav .nav-inner {
    grid-template-columns: 48px minmax(54px, 1fr) auto !important;
  }

  .nav-icons {
    gap: 4px !important;
  }

  .nav-icons .header-icon-button,
  .nav-icons .theme-toggle,
  .nav-icons .search-toggle,
  .nav-icons .whatsapp-icon-button,
  .nav-icons .nav-icon {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
    flex-basis: 39px !important;
  }
}


/* V1.64 dedicated mobile drawer menu */

/*
  Mobile menu is now independent of the desktop mega-menu.
  It contains only the clean core links requested by the business:
  Store, Phones, Laptops & PCs, Consoles, Accessories, Trade In, Repair, Support.
*/

.mobile-drawer {
  display: none;
}

@media (min-width: 901px) {
  .mobile-drawer {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* Hide desktop nav links on mobile; mobile drawer owns the menu now */
  .top-nav .nav-links,
  .top-nav .nav-menu,
  .top-nav #navLinks,
  .top-nav #navMenu {
    display: none !important;
  }

  .mobile-drawer {
    position: fixed !important;
    top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 26px !important;
    background: rgba(17, 9, 51, .98) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(22px) !important;
    z-index: 1009 !important;
  }

  body.mobile-menu-open .mobile-drawer,
  .mobile-drawer.is-open {
    display: grid !important;
  }

  .mobile-drawer a {
    min-height: 54px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #f8f5ff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
  }

  .mobile-drawer a::after {
    content: "›";
    color: var(--orange);
    font-size: 1.35rem;
    line-height: 1;
  }

  .mobile-drawer a:hover,
  .mobile-drawer a:focus-visible {
    color: #ffffff !important;
    background: rgba(252,101,1,.18) !important;
    border-color: rgba(252,101,1,.62) !important;
    outline: none !important;
  }

  .mobile-drawer a:active {
    background: rgba(252,101,1,.28) !important;
  }
}

@media (max-width: 430px) {
  .mobile-drawer {
    top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px)) !important;
  }

  .mobile-drawer a {
    min-height: 56px !important;
  }
}


/* V1.66 mobile hamburger menu follows light/dark mode */

/*
  The dedicated mobile drawer now changes with the active mode:
  - Dark mode: dark glass drawer, light text.
  - Light mode: clean light drawer, dark text.
  This fixes the mismatch where the hamburger menu stayed dark on light pages.
*/

@media (max-width: 900px) {
  /* Default/dark drawer */
  .mobile-drawer {
    background:
      radial-gradient(circle at 85% 0%, rgba(252,101,1,.14), transparent 30%),
      rgba(17, 9, 51, .98) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.42) !important;
  }

  .mobile-drawer a {
    color: #f8f5ff !important;
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  .mobile-drawer a::after {
    color: var(--orange) !important;
  }

  .mobile-drawer a:hover,
  .mobile-drawer a:focus-visible,
  .mobile-drawer a:active {
    color: #ffffff !important;
    background: rgba(252,101,1,.2) !important;
    border-color: rgba(252,101,1,.62) !important;
  }

  /* Light mode drawer: match light surface and keep strong contrast */
  body.light .mobile-drawer,
  body.light-mode .mobile-drawer,
  body[data-theme="light"] .mobile-drawer,
  html.light .mobile-drawer,
  html.light-mode .mobile-drawer,
  html[data-theme="light"] .mobile-drawer,
  [data-theme="light"] .mobile-drawer {
    background:
      radial-gradient(circle at 85% 0%, rgba(252,101,1,.12), transparent 30%),
      rgba(255,255,255,.96) !important;
    border-color: rgba(17,9,51,.12) !important;
    box-shadow: 0 24px 70px rgba(17,9,51,.18) !important;
  }

  body.light .mobile-drawer a,
  body.light-mode .mobile-drawer a,
  body[data-theme="light"] .mobile-drawer a,
  html.light .mobile-drawer a,
  html.light-mode .mobile-drawer a,
  html[data-theme="light"] .mobile-drawer a,
  [data-theme="light"] .mobile-drawer a {
    color: #171124 !important;
    background: rgba(17,9,51,.055) !important;
    border-color: rgba(17,9,51,.11) !important;
  }

  body.light .mobile-drawer a::after,
  body.light-mode .mobile-drawer a::after,
  body[data-theme="light"] .mobile-drawer a::after,
  html.light .mobile-drawer a::after,
  html.light-mode .mobile-drawer a::after,
  html[data-theme="light"] .mobile-drawer a::after,
  [data-theme="light"] .mobile-drawer a::after {
    color: var(--orange) !important;
  }

  body.light .mobile-drawer a:hover,
  body.light .mobile-drawer a:focus-visible,
  body.light-mode .mobile-drawer a:hover,
  body.light-mode .mobile-drawer a:focus-visible,
  body[data-theme="light"] .mobile-drawer a:hover,
  body[data-theme="light"] .mobile-drawer a:focus-visible,
  html.light .mobile-drawer a:hover,
  html.light .mobile-drawer a:focus-visible,
  html.light-mode .mobile-drawer a:hover,
  html.light-mode .mobile-drawer a:focus-visible,
  html[data-theme="light"] .mobile-drawer a:hover,
  html[data-theme="light"] .mobile-drawer a:focus-visible,
  [data-theme="light"] .mobile-drawer a:hover,
  [data-theme="light"] .mobile-drawer a:focus-visible {
    color: #ffffff !important;
    background: rgba(252,101,1,.92) !important;
    border-color: rgba(252,101,1,1) !important;
  }

  /* The hamburger button itself should also match mode */
  body.light .mobile-menu-left,
  body.light #mobileMenu,
  body.light .mobile-menu,
  body.light-mode .mobile-menu-left,
  body.light-mode #mobileMenu,
  body.light-mode .mobile-menu,
  body[data-theme="light"] .mobile-menu-left,
  body[data-theme="light"] #mobileMenu,
  body[data-theme="light"] .mobile-menu,
  html.light .mobile-menu-left,
  html.light #mobileMenu,
  html.light .mobile-menu,
  html.light-mode .mobile-menu-left,
  html.light-mode #mobileMenu,
  html.light-mode .mobile-menu,
  html[data-theme="light"] .mobile-menu-left,
  html[data-theme="light"] #mobileMenu,
  html[data-theme="light"] .mobile-menu,
  [data-theme="light"] .mobile-menu-left,
  [data-theme="light"] #mobileMenu,
  [data-theme="light"] .mobile-menu {
    color: #171124 !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(17,9,51,.18) !important;
    box-shadow: 0 8px 24px rgba(17,9,51,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
  }

  body.light .mobile-menu-left:hover,
  body.light #mobileMenu:hover,
  body.light .mobile-menu:hover,
  body.light-mode .mobile-menu-left:hover,
  body.light-mode #mobileMenu:hover,
  body.light-mode .mobile-menu:hover,
  body[data-theme="light"] .mobile-menu-left:hover,
  body[data-theme="light"] #mobileMenu:hover,
  body[data-theme="light"] .mobile-menu:hover,
  html.light .mobile-menu-left:hover,
  html.light #mobileMenu:hover,
  html.light .mobile-menu:hover,
  html.light-mode .mobile-menu-left:hover,
  html.light-mode #mobileMenu:hover,
  html.light-mode .mobile-menu:hover,
  html[data-theme="light"] .mobile-menu-left:hover,
  html[data-theme="light"] #mobileMenu:hover,
  html[data-theme="light"] .mobile-menu:hover,
  [data-theme="light"] .mobile-menu-left:hover,
  [data-theme="light"] #mobileMenu:hover,
  [data-theme="light"] .mobile-menu:hover {
    color: #ffffff !important;
    background: rgba(252,101,1,.92) !important;
    border-color: rgba(252,101,1,1) !important;
  }
}




/* V1.69 reliable global search overlay */

.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
}

body.search-open {
  overflow: hidden !important;
}

body.search-open .global-search-overlay,
.global-search-overlay.is-open {
  display: grid !important;
  place-items: start center;
}

.global-search-box {
  width: min(860px, 100%);
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  margin-top: clamp(64px, 9vh, 100px);
  padding: clamp(18px, 3vw, 28px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.14), transparent 34%),
    rgba(17,9,51,.98);
  color: #f8f5ff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 100px rgba(0,0,0,.45);
}

.global-search-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.global-search-top h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.06em;
  color: #f8f5ff;
}

.global-search-close {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.global-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.global-search-input {
  min-height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(7,3,26,.96);
  color: #f8f5ff;
  padding: 0 18px;
  font-size: 1rem;
  font-weight: 850;
  outline: none;
}

.global-search-input::placeholder {
  color: rgba(248,245,255,.55);
}

.global-search-input:focus {
  border-color: rgba(252,101,1,.8);
  box-shadow: 0 0 0 4px rgba(252,101,1,.16);
}

.global-search-submit {
  min-height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, #ff7a22, #fc6501);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.global-search-results {
  display: grid;
  gap: 10px;
}

.global-search-empty {
  margin: 0;
  color: rgba(248,245,255,.72);
  line-height: 1.5;
}

.global-search-result {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  color: #f8f5ff !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.11);
}

.global-search-result:hover,
.global-search-result:focus-visible {
  background: rgba(252,101,1,.16);
  border-color: rgba(252,101,1,.58);
  outline: none;
}

.global-search-result img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  padding: 5px;
}

.global-search-result strong {
  display: block;
  color: #fff !important;
  line-height: 1.15;
}

.global-search-result span {
  display: block;
  margin-top: 3px;
  color: rgba(248,245,255,.7) !important;
  font-size: .86rem;
  line-height: 1.25;
}

.global-search-result em {
  justify-self: end;
  color: var(--orange);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

/* Light mode search */
body.light .global-search-overlay,
body.light-mode .global-search-overlay,
body[data-theme="light"] .global-search-overlay,
html.light .global-search-overlay,
html.light-mode .global-search-overlay,
html[data-theme="light"] .global-search-overlay,
[data-theme="light"] .global-search-overlay {
  background: rgba(245,245,247,.72);
}

body.light .global-search-box,
body.light-mode .global-search-box,
body[data-theme="light"] .global-search-box,
html.light .global-search-box,
html.light-mode .global-search-box,
html[data-theme="light"] .global-search-box,
[data-theme="light"] .global-search-box {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.12), transparent 34%),
    rgba(255,255,255,.98);
  color: #171124;
  border-color: rgba(17,9,51,.12);
  box-shadow: 0 28px 80px rgba(17,9,51,.18);
}

body.light .global-search-top h2,
body.light-mode .global-search-top h2,
body[data-theme="light"] .global-search-top h2,
html.light .global-search-top h2,
html.light-mode .global-search-top h2,
html[data-theme="light"] .global-search-top h2,
[data-theme="light"] .global-search-top h2 {
  color: #171124;
}

body.light .global-search-input,
body.light-mode .global-search-input,
body[data-theme="light"] .global-search-input,
html.light .global-search-input,
html.light-mode .global-search-input,
html[data-theme="light"] .global-search-input,
[data-theme="light"] .global-search-input {
  background: rgba(17,9,51,.055);
  border-color: rgba(17,9,51,.15);
  color: #171124;
}

body.light .global-search-input::placeholder,
body.light-mode .global-search-input::placeholder,
body[data-theme="light"] .global-search-input::placeholder,
html.light .global-search-input::placeholder,
html.light-mode .global-search-input::placeholder,
html[data-theme="light"] .global-search-input::placeholder,
[data-theme="light"] .global-search-input::placeholder {
  color: rgba(23,17,36,.52);
}

body.light .global-search-empty,
body.light-mode .global-search-empty,
body[data-theme="light"] .global-search-empty,
html.light .global-search-empty,
html.light-mode .global-search-empty,
html[data-theme="light"] .global-search-empty,
[data-theme="light"] .global-search-empty {
  color: rgba(23,17,36,.68);
}

body.light .global-search-result,
body.light-mode .global-search-result,
body[data-theme="light"] .global-search-result,
html.light .global-search-result,
html.light-mode .global-search-result,
html[data-theme="light"] .global-search-result,
[data-theme="light"] .global-search-result {
  color: #171124 !important;
  background: rgba(17,9,51,.045);
  border-color: rgba(17,9,51,.1);
}

body.light .global-search-result strong,
body.light-mode .global-search-result strong,
body[data-theme="light"] .global-search-result strong,
html.light .global-search-result strong,
html.light-mode .global-search-result strong,
html[data-theme="light"] .global-search-result strong,
[data-theme="light"] .global-search-result strong {
  color: #171124 !important;
}

body.light .global-search-result span,
body.light-mode .global-search-result span,
body[data-theme="light"] .global-search-result span,
html.light .global-search-result span,
html.light-mode .global-search-result span,
html[data-theme="light"] .global-search-result span,
[data-theme="light"] .global-search-result span {
  color: rgba(23,17,36,.66) !important;
}

@media (max-width: 760px) {
  .global-search-overlay {
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 10px;
  }

  .global-search-box {
    margin-top: calc(74px + env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px));
    border-radius: 26px;
    padding: 16px;
  }

  .global-search-form {
    grid-template-columns: 1fr;
  }

  .global-search-input,
  .global-search-submit {
    min-height: 52px;
  }

  .global-search-result {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .global-search-result img {
    width: 50px;
    height: 50px;
  }

  .global-search-result em {
    grid-column: 2;
    justify-self: start;
  }
}






/* V1.72 clean Trade-In UI + true light/dark mode */

/*
  Clean rule:
  - Default site mode is light, so Trade-In is light by default.
  - Only html[data-theme="dark"] makes the Trade-In page dark.
  - No forced dark island on a light page.
*/

body.trade-page-body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Trade-In design tokens: LIGHT DEFAULT */
body.trade-page-body {
  --trade-card-bg: rgba(255,255,255,.94);
  --trade-card-bg-strong: rgba(255,255,255,.98);
  --trade-subcard-bg: rgba(17,9,51,.045);
  --trade-text: #171124;
  --trade-muted: rgba(23,17,36,.68);
  --trade-border: rgba(17,9,51,.11);
  --trade-input-bg: rgba(17,9,51,.055);
  --trade-input-text: #171124;
  --trade-input-border: rgba(17,9,51,.16);
  --trade-shadow: 0 24px 70px rgba(17,9,51,.10);
  --trade-orange-soft: #fff1e8;
  --trade-orange-soft-2: #ffd9c2;
}

/* DARK MODE ONLY */
html[data-theme="dark"] body.trade-page-body {
  --trade-card-bg: rgba(17,9,51,.96);
  --trade-card-bg-strong: rgba(21,16,42,.98);
  --trade-subcard-bg: rgba(255,255,255,.06);
  --trade-text: #f8f5ff;
  --trade-muted: rgba(248,245,255,.72);
  --trade-border: rgba(255,255,255,.14);
  --trade-input-bg: rgba(7,3,26,.96);
  --trade-input-text: #f8f5ff;
  --trade-input-border: rgba(255,255,255,.18);
  --trade-shadow: 0 24px 70px rgba(0,0,0,.28);
  --trade-orange-soft: #25164d;
  --trade-orange-soft-2: #110933;
}

body.trade-page-body .trade-hero {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(42px, 7vw, 88px) clamp(18px, 5vw, 54px) clamp(18px, 3vw, 34px) !important;
}

body.trade-page-body .trade-hero .eyebrow,
body.trade-page-body .trade-section-title,
body.trade-page-body .trade-form-card .eyebrow,
body.trade-page-body .trade-info-card .eyebrow {
  color: var(--orange) !important;
}

body.trade-page-body .trade-hero h1 {
  max-width: 980px !important;
  margin: 0 0 18px !important;
  color: var(--text) !important;
  font-size: clamp(3rem, 7.2vw, 6.2rem) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}

body.trade-page-body .trade-hero-copy,
body.trade-page-body .trade-hero .muted {
  max-width: 880px !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.25rem) !important;
  line-height: 1.65 !important;
}

body.trade-page-body .trade-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

/* Layout */
body.trade-page-body .trade-page-grid {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 42px) clamp(18px, 5vw, 54px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .82fr) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  align-items: start !important;
}

/* Main cards */
body.trade-page-body .trade-card,
body.trade-page-body .trade-form-card,
body.trade-page-body .trade-info-card {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.10), transparent 34%),
    var(--trade-card-bg) !important;
  color: var(--trade-text) !important;
  border: 1px solid var(--trade-border) !important;
  box-shadow: var(--trade-shadow) !important;
  border-radius: 34px !important;
}

body.trade-page-body .trade-form-card {
  padding: clamp(22px, 3vw, 36px) !important;
}

body.trade-page-body .trade-info-card {
  padding: clamp(22px, 3vw, 32px) !important;
  position: sticky !important;
  top: 92px !important;
  max-height: calc(100dvh - 112px) !important;
  overflow-y: auto !important;
}

/* Text inside cards */
body.trade-page-body .trade-form-card h2,
body.trade-page-body .trade-form-card h3,
body.trade-page-body .trade-form-card label,
body.trade-page-body .trade-form-card strong,
body.trade-page-body .trade-info-card h2,
body.trade-page-body .trade-info-card h3,
body.trade-page-body .trade-info-card strong {
  color: var(--trade-text) !important;
  opacity: 1 !important;
}

body.trade-page-body .trade-form-card p,
body.trade-page-body .trade-form-card small,
body.trade-page-body .trade-form-card span,
body.trade-page-body .trade-form-card .muted,
body.trade-page-body .trade-info-card p,
body.trade-page-body .trade-info-card span,
body.trade-page-body .trade-info-card li,
body.trade-page-body .trade-info-card .muted {
  color: var(--trade-muted) !important;
  opacity: 1 !important;
}

body.trade-page-body .trade-form-card > h2 {
  max-width: 760px !important;
  margin: 8px 0 10px !important;
  font-size: clamp(2.45rem, 5vw, 4.55rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

body.trade-page-body .trade-info-card h2 {
  max-width: 100% !important;
  margin: 8px 0 18px !important;
  font-size: clamp(2.25rem, 4.2vw, 4.1rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

/* Step chips */
body.trade-page-body .trade-mobile-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 18px 0 24px !important;
}

body.trade-page-body .trade-mobile-summary-strip span {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--trade-text) !important;
  background: rgba(252,101,1,.10) !important;
  border: 1px solid rgba(252,101,1,.24) !important;
  font-size: .8rem !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Form */
body.trade-page-body .smart-form {
  display: grid !important;
  gap: 22px !important;
}

body.trade-page-body .smart-form .form-grid.two,
body.trade-page-body .form-grid.two.trade-old-phone-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 18px !important;
}

body.trade-page-body .smart-form label {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--trade-text) !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
}

body.trade-page-body .smart-form small,
body.trade-page-body .field-hint {
  color: var(--trade-muted) !important;
  font-size: .82rem !important;
  line-height: 1.38 !important;
  font-weight: 750 !important;
}

body.trade-page-body .smart-form select,
body.trade-page-body .smart-form input,
body.trade-page-body .smart-form textarea {
  width: 100% !important;
  min-height: 52px !important;
  color: var(--trade-input-text) !important;
  background-color: var(--trade-input-bg) !important;
  border: 1px solid var(--trade-input-border) !important;
  border-radius: 16px !important;
  opacity: 1 !important;
  font-weight: 850 !important;
  font-size: .95rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.06) !important;
}

body.trade-page-body .smart-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 44px 0 15px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50% !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
}

body.trade-page-body .smart-form input {
  padding: 0 15px !important;
}

body.trade-page-body .smart-form textarea {
  min-height: 118px !important;
  padding: 14px 15px !important;
  resize: vertical !important;
}

body.trade-page-body .smart-form input::placeholder,
body.trade-page-body .smart-form textarea::placeholder {
  color: var(--trade-muted) !important;
}

body.trade-page-body .smart-form select:focus,
body.trade-page-body .smart-form input:focus,
body.trade-page-body .smart-form textarea:focus {
  outline: none !important;
  border-color: rgba(252,101,1,.72) !important;
  box-shadow: 0 0 0 4px rgba(252,101,1,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Upgrade island follows mode */
body.trade-page-body .trade-upgrade-section {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(160deg, var(--trade-orange-soft), var(--trade-orange-soft-2)) !important;
  color: var(--trade-text) !important;
  border: 1px solid rgba(252,101,1,.22) !important;
  box-shadow: none !important;
  border-radius: 28px !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  display: grid !important;
  gap: 18px !important;
}

body.trade-page-body .trade-upgrade-section h3,
body.trade-page-body .trade-upgrade-section p,
body.trade-page-body .trade-upgrade-section label,
body.trade-page-body .trade-upgrade-section span,
body.trade-page-body .trade-upgrade-section small {
  color: var(--trade-text) !important;
  opacity: 1 !important;
}

body.trade-page-body .trade-upgrade-section .muted {
  color: var(--trade-muted) !important;
}

/* Subcards */
body.trade-page-body .trade-formula,
body.trade-page-body .policy-note,
body.trade-page-body .info-steps > div,
body.trade-page-body .deduction-panel,
body.trade-page-body .upgrade-price-box > div,
body.trade-page-body .estimate-box {
  background: var(--trade-subcard-bg) !important;
  color: var(--trade-text) !important;
  border: 1px solid var(--trade-border) !important;
  border-radius: 22px !important;
}

body.trade-page-body .trade-formula,
body.trade-page-body .policy-note,
body.trade-page-body .deduction-panel,
body.trade-page-body .upgrade-price-box > div,
body.trade-page-body .estimate-box {
  padding: 18px !important;
}

body.trade-page-body .trade-formula {
  display: grid !important;
  gap: 12px !important;
}

body.trade-page-body .policy-note {
  margin-top: 18px !important;
}

body.trade-page-body .info-steps {
  display: grid !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

body.trade-page-body .info-steps > div {
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 4px 12px !important;
  align-items: start !important;
}

body.trade-page-body .info-steps > div > span {
  grid-row: 1 / span 2 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--orange) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
}

/* Subcard text */
body.trade-page-body .trade-formula strong,
body.trade-page-body .policy-note h3,
body.trade-page-body .info-steps strong,
body.trade-page-body .deduction-panel h3,
body.trade-page-body .upgrade-price-box strong,
body.trade-page-body .estimate-box strong {
  color: var(--trade-text) !important;
  opacity: 1 !important;
}

body.trade-page-body .trade-formula span,
body.trade-page-body .policy-note p,
body.trade-page-body .info-steps p,
body.trade-page-body .deduction-list,
body.trade-page-body .deduction-list div,
body.trade-page-body .upgrade-price-box span,
body.trade-page-body .estimate-box span,
body.trade-page-body .estimate-box small {
  color: var(--trade-muted) !important;
  opacity: 1 !important;
}

body.trade-page-body .estimate-box strong,
body.trade-page-body .upgrade-price-box strong {
  font-size: clamp(1.2rem, 2.4vw, 2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere !important;
}

body.trade-page-body .upgrade-price-box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Actions */
body.trade-page-body .form-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

body.trade-page-body .form-actions .primary-btn,
body.trade-page-body .form-actions .secondary-btn {
  min-height: 54px !important;
  border-radius: 999px !important;
}

/* Trust strip follows normal site mode */
body.trade-page-body .trust-strip {
  max-width: 1320px !important;
  margin-inline: auto !important;
}

/* Responsive */
@media (max-width: 1080px) {
  body.trade-page-body .trade-page-grid {
    grid-template-columns: 1fr !important;
    max-width: 920px !important;
  }

  body.trade-page-body .trade-info-card {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  body.trade-page-body .trade-hero {
    padding-top: 34px !important;
  }

  body.trade-page-body .trade-hero h1,
  body.trade-page-body .trade-form-card > h2 {
    font-size: clamp(2.35rem, 11vw, 3.8rem) !important;
    line-height: .98 !important;
  }

  body.trade-page-body .trade-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .trade-hero-actions .primary-btn,
  body.trade-page-body .trade-hero-actions .secondary-btn {
    width: 100% !important;
  }

  body.trade-page-body .trade-page-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.trade-page-body .trade-form-card,
  body.trade-page-body .trade-info-card {
    border-radius: 28px !important;
    padding: 18px !important;
  }

  body.trade-page-body .trade-mobile-summary-strip {
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .smart-form .form-grid.two,
  body.trade-page-body .form-grid.two.trade-old-phone-grid,
  body.trade-page-body .upgrade-price-box {
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .smart-form select,
  body.trade-page-body .smart-form input {
    min-height: 52px !important;
  }

  body.trade-page-body .form-actions {
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .form-actions .primary-btn,
  body.trade-page-body .form-actions .secondary-btn {
    width: 100% !important;
  }
}


/* V1.73 search light-mode text visibility fix */

/*
  Fixes search text appearing transparent in light mode.
  Clean rule:
  - Default/light mode search is light with dark readable text.
  - Only html[data-theme="dark"] search is dark with light text.
  - Includes -webkit-text-fill-color for iPhone/Safari input rendering.
*/

.global-search-overlay {
  background: rgba(245,245,247,.72) !important;
}

.global-search-box {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.12), transparent 34%),
    rgba(255,255,255,.98) !important;
  color: #171124 !important;
  border-color: rgba(17,9,51,.12) !important;
  box-shadow: 0 28px 80px rgba(17,9,51,.18) !important;
}

.global-search-top h2,
.global-search-box h2,
.global-search-box p,
.global-search-box label,
.global-search-box strong {
  color: #171124 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #171124 !important;
}

.global-search-empty,
.global-search-box span {
  color: rgba(23,17,36,.68) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(23,17,36,.68) !important;
}

.global-search-input,
input.global-search-input,
#globalSearchInput {
  background: rgba(17,9,51,.055) !important;
  border-color: rgba(17,9,51,.15) !important;
  color: #171124 !important;
  caret-color: #171124 !important;
  -webkit-text-fill-color: #171124 !important;
  opacity: 1 !important;
}

.global-search-input::placeholder,
#globalSearchInput::placeholder {
  color: rgba(23,17,36,.52) !important;
  -webkit-text-fill-color: rgba(23,17,36,.52) !important;
  opacity: 1 !important;
}

.global-search-close {
  background: rgba(17,9,51,.065) !important;
  border-color: rgba(17,9,51,.14) !important;
  color: #171124 !important;
  -webkit-text-fill-color: #171124 !important;
}

.global-search-result {
  color: #171124 !important;
  background: rgba(17,9,51,.045) !important;
  border-color: rgba(17,9,51,.1) !important;
}

.global-search-result strong {
  color: #171124 !important;
  -webkit-text-fill-color: #171124 !important;
  opacity: 1 !important;
}

.global-search-result span {
  color: rgba(23,17,36,.66) !important;
  -webkit-text-fill-color: rgba(23,17,36,.66) !important;
  opacity: 1 !important;
}

.global-search-result em {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  opacity: 1 !important;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  background: rgba(252,101,1,.12) !important;
  border-color: rgba(252,101,1,.48) !important;
}

.global-search-submit {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Dark mode search only when site is explicitly dark */
html[data-theme="dark"] .global-search-overlay {
  background: rgba(0,0,0,.55) !important;
}

html[data-theme="dark"] .global-search-box {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.14), transparent 34%),
    rgba(17,9,51,.98) !important;
  color: #f8f5ff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] .global-search-top h2,
html[data-theme="dark"] .global-search-box h2,
html[data-theme="dark"] .global-search-box p,
html[data-theme="dark"] .global-search-box label,
html[data-theme="dark"] .global-search-box strong {
  color: #f8f5ff !important;
  -webkit-text-fill-color: #f8f5ff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .global-search-empty,
html[data-theme="dark"] .global-search-box span {
  color: rgba(248,245,255,.72) !important;
  -webkit-text-fill-color: rgba(248,245,255,.72) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .global-search-input,
html[data-theme="dark"] input.global-search-input,
html[data-theme="dark"] #globalSearchInput {
  background: rgba(7,3,26,.96) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #f8f5ff !important;
  caret-color: #f8f5ff !important;
  -webkit-text-fill-color: #f8f5ff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .global-search-input::placeholder,
html[data-theme="dark"] #globalSearchInput::placeholder {
  color: rgba(248,245,255,.55) !important;
  -webkit-text-fill-color: rgba(248,245,255,.55) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .global-search-close {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .global-search-result {
  color: #f8f5ff !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.11) !important;
}

html[data-theme="dark"] .global-search-result strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .global-search-result span {
  color: rgba(248,245,255,.7) !important;
  -webkit-text-fill-color: rgba(248,245,255,.7) !important;
}

html[data-theme="dark"] .global-search-result em {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

html[data-theme="dark"] .global-search-result:hover,
html[data-theme="dark"] .global-search-result:focus-visible {
  background: rgba(252,101,1,.16) !important;
  border-color: rgba(252,101,1,.58) !important;
}


/* V1.74 standard Support page UI */

body.support-page-body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.support-main {
  --support-card-bg: rgba(255,255,255,.94);
  --support-card-strong: rgba(255,255,255,.98);
  --support-soft-bg: rgba(17,9,51,.045);
  --support-text: #171124;
  --support-muted: rgba(23,17,36,.68);
  --support-border: rgba(17,9,51,.11);
  --support-shadow: 0 24px 70px rgba(17,9,51,.10);
}

html[data-theme="dark"] .support-main {
  --support-card-bg: rgba(17,9,51,.94);
  --support-card-strong: rgba(21,16,42,.98);
  --support-soft-bg: rgba(255,255,255,.06);
  --support-text: #f8f5ff;
  --support-muted: rgba(248,245,255,.72);
  --support-border: rgba(255,255,255,.14);
  --support-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.support-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 56px) clamp(26px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: end;
}

.support-hero-copy h1 {
  max-width: 900px;
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: .88;
  letter-spacing: -.08em;
}

.support-hero-copy > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
}

.support-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.support-hero-card,
.support-contact-card,
.support-policy-card,
.support-help-card,
.support-checklist > div {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.10), transparent 34%),
    var(--support-card-bg);
  color: var(--support-text);
  border: 1px solid var(--support-border);
  box-shadow: var(--support-shadow);
}

.support-hero-card {
  border-radius: 34px;
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 16px;
}

.support-hero-card div {
  padding: 18px;
  border-radius: 24px;
  background: var(--support-soft-bg);
  border: 1px solid var(--support-border);
}

.support-hero-card span,
.support-policy-card span {
  display: block;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 950;
  margin-bottom: 8px;
}

.support-hero-card strong {
  display: block;
  color: var(--support-text);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.1;
}

.support-hero-card p {
  margin: 8px 0 0;
  color: var(--support-muted);
  line-height: 1.55;
}

.support-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 56px);
}

.support-section-head {
  margin-bottom: 20px;
}

.support-section-head h2,
.support-contact-card h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.support-section-head p,
.support-contact-card p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}

.support-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.support-help-card {
  min-height: 250px;
  padding: 22px;
  border-radius: 28px;
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: 12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.support-help-card:hover,
.support-help-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(252,101,1,.55);
  outline: none;
}

.support-help-card span {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  font-weight: 950;
}

.support-help-card h3,
.support-policy-card h3,
.support-checklist strong {
  margin: 0;
  color: var(--support-text);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.support-help-card p,
.support-policy-card p,
.support-checklist p {
  margin: 0;
  color: var(--support-muted);
  line-height: 1.55;
}

.support-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.support-policy-card {
  min-height: 210px;
  padding: 22px;
  border-radius: 28px;
}

.support-contact-card {
  border-radius: 36px;
  padding: clamp(22px, 4vw, 40px);
  display: grid;
  gap: 22px;
}

.support-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.support-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.support-social-row a {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--support-text) !important;
  background: var(--support-soft-bg);
  border: 1px solid var(--support-border);
  text-decoration: none;
  font-weight: 900;
}

.support-social-row a:hover,
.support-social-row a:focus-visible {
  color: #fff !important;
  background: rgba(252,101,1,.92);
  border-color: rgba(252,101,1,1);
  outline: none;
}

.support-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.support-checklist > div {
  padding: 22px;
  border-radius: 28px;
}

@media (max-width: 1100px) {
  .support-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .support-help-grid,
  .support-policy-grid,
  .support-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .support-hero {
    padding-top: 38px;
  }

  .support-hero-copy h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
    line-height: .92;
  }

  .support-hero-actions,
  .support-contact-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .support-hero-actions .primary-btn,
  .support-hero-actions .secondary-btn,
  .support-contact-actions .primary-btn,
  .support-contact-actions .secondary-btn {
    width: 100%;
  }

  .support-help-grid,
  .support-policy-grid,
  .support-checklist {
    grid-template-columns: 1fr;
  }

  .support-help-card,
  .support-policy-card,
  .support-checklist > div {
    min-height: auto;
  }

  .support-social-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-social-row a {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .support-social-row {
    grid-template-columns: 1fr;
  }
}


/* V1.75 standard Repair page UI + transparency fix */

body.repair-page-body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.repair-main {
  --repair-card-bg: rgba(255,255,255,.94);
  --repair-card-strong: rgba(255,255,255,.98);
  --repair-soft-bg: rgba(17,9,51,.045);
  --repair-text: #171124;
  --repair-muted: rgba(23,17,36,.70);
  --repair-border: rgba(17,9,51,.11);
  --repair-input-bg: rgba(17,9,51,.055);
  --repair-input-text: #171124;
  --repair-input-border: rgba(17,9,51,.16);
  --repair-shadow: 0 24px 70px rgba(17,9,51,.10);
}

html[data-theme="dark"] .repair-main {
  --repair-card-bg: rgba(17,9,51,.94);
  --repair-card-strong: rgba(21,16,42,.98);
  --repair-soft-bg: rgba(255,255,255,.06);
  --repair-text: #f8f5ff;
  --repair-muted: rgba(248,245,255,.72);
  --repair-border: rgba(255,255,255,.14);
  --repair-input-bg: rgba(7,3,26,.96);
  --repair-input-text: #f8f5ff;
  --repair-input-border: rgba(255,255,255,.18);
  --repair-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.repair-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 56px) clamp(26px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: end;
}

.repair-hero-copy h1 {
  max-width: 980px;
  margin: 0 0 18px;
  color: var(--text) !important;
  font-size: clamp(3.4rem, 8vw, 7.6rem);
  line-height: .88;
  letter-spacing: -.08em;
}

.repair-hero-copy > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted) !important;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
}

.repair-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.repair-hero-card,
.repair-type-card,
.repair-form-card,
.repair-guide-card,
.repair-note-card,
.repair-checklist > div {
  background:
    radial-gradient(circle at 92% 0%, rgba(252,101,1,.10), transparent 34%),
    var(--repair-card-bg) !important;
  color: var(--repair-text) !important;
  border: 1px solid var(--repair-border) !important;
  box-shadow: var(--repair-shadow) !important;
}

.repair-hero-card {
  border-radius: 34px;
  padding: clamp(22px, 3vw, 34px);
}

.repair-hero-card h2 {
  margin: 8px 0 12px;
  color: var(--repair-text) !important;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.repair-hero-card p,
.repair-hero-card .eyebrow {
  color: var(--repair-muted) !important;
}

.repair-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 56px);
}

.repair-section-head {
  margin-bottom: 20px;
}

.repair-section-head h2,
.repair-form-head h2,
.repair-guide-card h2 {
  margin: 0 0 10px;
  color: var(--text) !important;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.repair-section-head p,
.repair-form-head p,
.repair-guide-card p {
  max-width: 760px;
  margin: 0;
  color: var(--muted) !important;
  line-height: 1.6;
  font-size: 1rem;
}

.repair-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.repair-type-card {
  min-height: 250px;
  padding: 22px;
  border-radius: 28px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.repair-type-card span,
.repair-step-list > div > span {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff !important;
  font-weight: 950;
}

.repair-type-card h3,
.repair-note-card h3,
.repair-checklist strong,
.repair-step-list strong {
  margin: 0;
  color: var(--repair-text) !important;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.repair-type-card p,
.repair-note-card p,
.repair-checklist p,
.repair-step-list p {
  margin: 0;
  color: var(--repair-muted) !important;
  line-height: 1.55;
}

.repair-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

.repair-form-card,
.repair-guide-card {
  border-radius: 36px;
  padding: clamp(22px, 3vw, 36px);
}

.repair-form-head {
  margin-bottom: 22px;
}

.repair-form-card .form-grid.two,
.repair-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.repair-form-card {
  display: grid;
  gap: 18px;
}

.repair-form-card label {
  display: grid;
  gap: 8px;
  color: var(--repair-text) !important;
  font-size: .92rem;
  line-height: 1.22;
  font-weight: 900;
}

.repair-form-card input,
.repair-form-card select,
.repair-form-card textarea {
  width: 100% !important;
  min-height: 52px !important;
  color: var(--repair-input-text) !important;
  -webkit-text-fill-color: var(--repair-input-text) !important;
  background-color: var(--repair-input-bg) !important;
  border: 1px solid var(--repair-input-border) !important;
  border-radius: 16px !important;
  opacity: 1 !important;
  font-weight: 850 !important;
  font-size: .95rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.06) !important;
}

.repair-form-card input {
  padding: 0 15px !important;
}

.repair-form-card select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 44px 0 15px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50% !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
}

.repair-form-card textarea {
  min-height: 126px !important;
  padding: 14px 15px !important;
  resize: vertical;
}

.repair-form-card input::placeholder,
.repair-form-card textarea::placeholder {
  color: var(--repair-muted) !important;
  -webkit-text-fill-color: var(--repair-muted) !important;
  opacity: 1 !important;
}

.repair-form-card input:focus,
.repair-form-card select:focus,
.repair-form-card textarea:focus {
  outline: none !important;
  border-color: rgba(252,101,1,.72) !important;
  box-shadow: 0 0 0 4px rgba(252,101,1,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.repair-submit-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  margin-top: 4px;
}

.repair-guide-card {
  position: sticky;
  top: 92px;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
}

.repair-step-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.repair-step-list > div {
  padding: 16px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  background: var(--repair-soft-bg);
  border: 1px solid var(--repair-border);
}

.repair-step-list > div > span {
  grid-row: 1 / span 2;
}

.repair-note-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: var(--repair-soft-bg) !important;
  box-shadow: none !important;
}

.repair-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.repair-checklist > div {
  padding: 22px;
  border-radius: 28px;
}

@media (max-width: 1100px) {
  .repair-hero,
  .repair-booking-grid {
    grid-template-columns: 1fr;
  }

  .repair-guide-card {
    position: static;
    max-height: none;
  }

  .repair-type-grid,
  .repair-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .repair-hero {
    padding-top: 38px;
  }

  .repair-hero-copy h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
    line-height: .92;
  }

  .repair-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .repair-hero-actions .primary-btn,
  .repair-hero-actions .secondary-btn {
    width: 100%;
  }

  .repair-type-grid,
  .repair-checklist,
  .repair-form-card .form-grid.two,
  .repair-form-grid {
    grid-template-columns: 1fr !important;
  }

  .repair-form-card,
  .repair-guide-card {
    border-radius: 28px;
    padding: 18px;
  }

  .repair-type-card,
  .repair-checklist > div {
    min-height: auto;
  }

  .repair-form-card input,
  .repair-form-card select,
  .repair-form-card textarea {
    font-size: 1rem !important;
  }
}


/* V1.76 mobile compact product catalogue */

/*
  Mobile goal:
  - Show more products per screen.
  - Keep two product cards per row on phones instead of falling back to one card.
  - Reduce card padding, image height, text height and CTA size.
  - Keep text readable and buttons tappable.
  Product data and checkout logic are untouched.
*/

/* Category/product listing pages */
@media (max-width: 760px) {
  .product-listing-section,
  .product-grid-section {
    width: min(100%, 100%) !important;
    padding: 18px 10px 48px !important;
  }

  .product-grid-locked,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .product-grid-locked > .product-card,
  .product-card,
  .product-card-v18,
  .product-card-v24,
  .product-card-v27,
  .product-card-v35,
  .product-card-v39 {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    gap: 8px !important;
  }

  .product-card .tag,
  .product-card-v39 .tag,
  .product-card-v35 .tag {
    max-width: 100% !important;
    min-height: 24px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: .66rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-card .product-image-link,
  .product-card-v18 .product-image-link,
  .product-card-v24 .product-image-link,
  .product-card-v27 .product-image-link,
  .product-card-v35 .product-image-link,
  .product-card-v39 .product-image-link,
  .product-grid-locked > .product-card .product-image-link {
    border-radius: 16px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.055) !important;
  }

  .product-card .product-image-link img,
  .product-card-v18 .product-image-link img,
  .product-card-v24 .product-image-link img,
  .product-card-v27 .product-image-link img,
  .product-card-v35 .product-image-link img,
  .product-card-v39 .product-image-link img,
  .product-grid-locked > .product-card .product-image-link img,
  .product-grid-locked > .product-card > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / .82 !important;
    max-height: 125px !important;
    object-fit: cover !important;
    border-radius: 15px !important;
  }

  .product-card-body {
    gap: 5px !important;
  }

  .product-card h3,
  .product-card-v18 h3,
  .product-card-v24 h3,
  .product-card-v27 h3,
  .product-card-v35 h3,
  .product-card-v39 h3 {
    margin: 4px 0 0 !important;
    font-size: .95rem !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    min-height: 2.15em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-card p,
  .product-card-v18 p,
  .product-card-v24 p,
  .product-card-v27 p,
  .product-card-v35 p,
  .product-card-v39 p,
  .product-card-body > p:first-of-type {
    margin: 0 !important;
    font-size: .73rem !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    color: var(--muted) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-card .price-cta,
  .product-card-v18 .price-cta,
  .product-card-v24 .price-cta,
  .product-card-v27 .price-cta,
  .product-card-v35 .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    margin-top: 8px !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-card:hover,
  .product-card-v39:hover,
  .product-card-v35:hover {
    transform: none !important;
  }

  /* Category filters also become more compact on mobile */
  .category-filters,
  .filters,
  .filter-row {
    gap: 8px !important;
  }

  .category-filter,
  .filter-pill {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: .82rem !important;
  }
}

/* Keep two columns even on small phones. This is the main "more products per page" fix. */
@media (max-width: 480px) {
  .product-grid-locked,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .product-listing-section,
  .product-grid-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .product-grid-locked > .product-card,
  .product-card,
  .product-card-v18,
  .product-card-v24,
  .product-card-v27,
  .product-card-v35,
  .product-card-v39 {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  .product-card .product-image-link img,
  .product-card-v18 .product-image-link img,
  .product-card-v24 .product-image-link img,
  .product-card-v27 .product-image-link img,
  .product-card-v35 .product-image-link img,
  .product-card-v39 .product-image-link img,
  .product-grid-locked > .product-card .product-image-link img,
  .product-grid-locked > .product-card > img {
    max-height: 108px !important;
    aspect-ratio: 1 / .78 !important;
  }

  .product-card h3,
  .product-card-v18 h3,
  .product-card-v24 h3,
  .product-card-v27 h3,
  .product-card-v35 h3,
  .product-card-v39 h3 {
    font-size: .86rem !important;
  }

  .product-card p,
  .product-card-v18 p,
  .product-card-v24 p,
  .product-card-v27 p,
  .product-card-v35 p,
  .product-card-v39 p {
    font-size: .68rem !important;
  }

  .product-card .price-cta,
  .product-card-v18 .price-cta,
  .product-card-v24 .price-cta,
  .product-card-v27 .price-cta,
  .product-card-v35 .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    min-height: 36px !important;
    font-size: .66rem !important;
    padding: 6px 7px !important;
  }
}

/* Ultra-small screens still keep two columns, but trim text harder */
@media (max-width: 360px) {
  .product-grid-locked,
  .product-grid {
    gap: 7px !important;
  }

  .product-card .product-image-link img,
  .product-card-v39 .product-image-link img,
  .product-grid-locked > .product-card .product-image-link img {
    max-height: 96px !important;
  }

  .product-card h3,
  .product-card-v39 h3 {
    font-size: .8rem !important;
  }

  .product-card p,
  .product-card-v39 p {
    -webkit-line-clamp: 1 !important;
    min-height: 1.25em !important;
    max-height: 1.25em !important;
  }
}

/* Store page horizontal product rows: smaller mobile cards so more is visible while swiping */
@media (max-width: 760px) {
  .apple-store-row,
  .apple-store-row-featured {
    grid-auto-columns: minmax(210px, 62vw) !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .store-feature-card {
    min-height: 350px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    gap: 7px !important;
  }

  .store-feature-card h3 {
    font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important;
    line-height: 1.05 !important;
  }

  .store-feature-card p {
    font-size: .82rem !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .store-feature-card strong,
  .store-card-kicker {
    font-size: .72rem !important;
  }

  .store-feature-image {
    min-height: 142px !important;
    margin: 4px -8px -8px !important;
  }

  .store-feature-image img {
    height: 160px !important;
  }

  .apple-category-rail {
    grid-auto-columns: 90px !important;
    gap: 12px !important;
  }

  .store-icon-image {
    width: 88px !important;
    height: 58px !important;
  }

  .store-icon-image img {
    max-width: 88px !important;
    max-height: 58px !important;
  }

  .store-icon-card strong {
    font-size: .78rem !important;
  }

  .store-icon-card span {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .apple-store-row,
  .apple-store-row-featured {
    grid-auto-columns: minmax(190px, 58vw) !important;
  }

  .store-feature-card {
    min-height: 325px !important;
  }

  .store-feature-image img {
    height: 145px !important;
  }
}


/* V1.77 masterpiece polish pass */

/*
  Final polish system:
  - consistent rhythm
  - consistent focus states
  - cleaner light/dark surfaces
  - better mobile fit
  - safer accessibility
  - reduced motion support
  - no product data or checkout logic changes
*/

:root {
  --mg-radius-xs: 12px;
  --mg-radius-sm: 18px;
  --mg-radius-md: 26px;
  --mg-radius-lg: 34px;
  --mg-shadow-soft: 0 18px 55px rgba(0,0,0,.16);
  --mg-shadow-lift: 0 24px 80px rgba(0,0,0,.22);
  --mg-border-dark: rgba(255,255,255,.13);
  --mg-border-light: rgba(17,9,51,.11);
  --mg-surface-dark: rgba(17,9,51,.94);
  --mg-surface-light: rgba(255,255,255,.94);
  --mg-focus: 0 0 0 4px rgba(252,101,1,.22);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--orange, #fc6501);
  color: #fff !important;
  font-weight: 950;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--mg-focus);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  image-rendering: auto;
}

main {
  min-width: 0;
}

::selection {
  background: rgba(252,101,1,.28);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.option:focus-visible,
.category-filter:focus-visible {
  outline: none !important;
  box-shadow: var(--mg-focus) !important;
  border-color: rgba(252,101,1,.72) !important;
}

a,
button {
  -webkit-tap-highlight-color: rgba(252,101,1,.18);
}

button,
.primary-btn,
.secondary-btn,
.cta-button,
.price-cta,
.category-filter,
.option,
.header-icon-button,
.global-search-submit {
  isolation: isolate;
}

.section,
.page-hero,
.store-hero,
.product-page,
.trust-strip,
.category-shell,
.product-listing-section,
.product-grid-section {
  max-width: 1360px;
}

.product-card,
.product-card-v39,
.category-card,
.service-card,
.support-help-card,
.support-policy-card,
.repair-type-card,
.store-feature-card,
.trade-card,
.repair-form-card,
.support-contact-card,
.global-search-box {
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .interactive-card,
  .product-card,
  .store-feature-card,
  .support-help-card,
  .repair-type-card,
  .category-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .interactive-card:hover,
  .product-card:hover,
  .store-feature-card:hover,
  .support-help-card:hover,
  .repair-type-card:hover,
  .category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mg-shadow-lift);
  }
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .store-feature-card {
  background: rgba(17,9,51,.72);
  border-color: var(--mg-border-dark);
}

html:not([data-theme="dark"]) .product-card,
html:not([data-theme="dark"]) .category-card,
html:not([data-theme="dark"]) .service-card,
html:not([data-theme="dark"]) .store-feature-card {
  border-color: var(--mg-border-light);
}

.product-card h3,
.product-card-v39 h3,
.store-feature-card h3,
.category-card h2 {
  overflow-wrap: anywhere;
}

.product-card p,
.product-card-v39 p,
.store-feature-card p {
  overflow-wrap: break-word;
}

.product-card img,
.product-card-v39 img,
.store-feature-card img,
.store-scroll-card img {
  transform: translateZ(0);
}

.primary-btn,
.cta-button,
.price-cta,
.global-search-submit,
.repair-submit-btn {
  box-shadow: 0 10px 24px rgba(252,101,1,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.primary-btn:hover,
.cta-button:hover,
.price-cta:hover,
.global-search-submit:hover,
.repair-submit-btn:hover {
  box-shadow: 0 14px 34px rgba(252,101,1,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.top-nav {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.top-nav .nav-inner {
  min-width: 0;
}

.logo-mark img,
.logo-only-link img,
.brand img,
.logo-link img,
.site-brand img {
  object-fit: contain;
}

.mobile-drawer {
  overscroll-behavior: contain;
}

.mobile-drawer a {
  letter-spacing: -.015em;
}

.global-search-overlay {
  overscroll-behavior: contain;
}

.global-search-box {
  overscroll-behavior: contain;
}

.global-search-result {
  min-width: 0;
}

.global-search-result > span {
  min-width: 0;
}

.global-search-result strong,
.global-search-result span {
  overflow: hidden;
  text-overflow: ellipsis;
}

input,
select,
textarea {
  opacity: 1 !important;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
  color: #171124;
  -webkit-text-fill-color: #171124;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #f8f5ff;
  -webkit-text-fill-color: #f8f5ff;
}

@media (max-width: 900px) {
  .product-layout,
  .product-detail-grid,
  .product-shell,
  .product-page-grid {
    gap: 18px !important;
  }

  .summary-card,
  .product-summary,
  .sticky-summary {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  .page-hero,
  .store-hero,
  .section,
  .support-section,
  .repair-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page-hero h1,
  .support-hero h1,
  .repair-hero h1,
  .trade-hero h1,
  .apple-store-hero h1 {
    max-width: 100% !important;
  }

  .product-grid,
  .product-grid-locked,
  .support-help-grid,
  .support-policy-grid,
  .repair-type-grid,
  .repair-checklist,
  .support-checklist {
    min-width: 0 !important;
  }

  .primary-btn,
  .secondary-btn {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .product-card .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    letter-spacing: -.01em !important;
  }

  .product-card h3,
  .product-card-v39 h3 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .top-nav,
  .mobile-drawer,
  .global-search-overlay,
  .footer-social-icons,
  .support-social-row,
  .hero-actions,
  .form-actions {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}


/* V1.78 smooth mode-aware desktop hover mega menu */

/*
  Fixes the hover dropdown/mega menu:
  - smoother open/close effect
  - less harsh pop-in
  - light mode panel is light with dark text
  - dark mode panel is dark with light text
  - dropdown links remain readable in both modes
*/

:root {
  --mega-bg: rgba(255,255,255,.94);
  --mega-bg-soft: rgba(17,9,51,.045);
  --mega-text: #171124;
  --mega-muted: rgba(23,17,36,.68);
  --mega-border: rgba(17,9,51,.12);
  --mega-shadow: 0 28px 90px rgba(17,9,51,.16);
}

html[data-theme="dark"] {
  --mega-bg: rgba(17,9,51,.94);
  --mega-bg-soft: rgba(255,255,255,.06);
  --mega-text: #f8f5ff;
  --mega-muted: rgba(248,245,255,.72);
  --mega-border: rgba(255,255,255,.14);
  --mega-shadow: 0 28px 95px rgba(0,0,0,.42);
}

/* The website has had a few nav/dropdown class names across versions, so this safely targets all likely mega/dropdown panels. */
.top-nav .mega-menu,
.top-nav .mega-panel,
.top-nav .mega-dropdown,
.top-nav .nav-dropdown,
.top-nav .dropdown-panel,
.top-nav .dropdown-menu,
.top-nav .nav-mega,
.top-nav .mega-content,
.navbar .mega-menu,
.navbar .mega-panel,
.navbar .mega-dropdown,
.navbar .nav-dropdown,
.navbar .dropdown-panel,
.navbar .dropdown-menu,
.navbar .nav-mega,
.navbar .mega-content,
.has-mega .mega-menu,
.has-mega .mega-panel,
.has-mega .mega-dropdown,
.has-mega .nav-dropdown,
.has-mega .dropdown-panel,
.has-mega .dropdown-menu,
.nav-item .mega-menu,
.nav-item .mega-panel,
.nav-item .mega-dropdown,
.nav-item .nav-dropdown,
.nav-item .dropdown-panel,
.nav-item .dropdown-menu {
  background:
    radial-gradient(circle at 88% 0%, rgba(252,101,1,.10), transparent 32%),
    var(--mega-bg) !important;
  color: var(--mega-text) !important;
  border: 1px solid var(--mega-border) !important;
  box-shadow: var(--mega-shadow) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  border-radius: 0 0 30px 30px !important;
  overflow: hidden !important;
  transform-origin: top center !important;
  transition:
    opacity .24s ease,
    transform .24s cubic-bezier(.2,.8,.2,1),
    visibility .24s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}

/* Smooth hidden state for dropdowns that use hover/focus display logic */
.has-mega:not(:hover):not(:focus-within) .mega-menu,
.has-mega:not(:hover):not(:focus-within) .mega-panel,
.has-mega:not(:hover):not(:focus-within) .mega-dropdown,
.has-mega:not(:hover):not(:focus-within) .nav-dropdown,
.has-mega:not(:hover):not(:focus-within) .dropdown-panel,
.has-mega:not(:hover):not(:focus-within) .dropdown-menu,
.nav-item:not(:hover):not(:focus-within) .mega-menu,
.nav-item:not(:hover):not(:focus-within) .mega-panel,
.nav-item:not(:hover):not(:focus-within) .mega-dropdown,
.nav-item:not(:hover):not(:focus-within) .nav-dropdown,
.nav-item:not(:hover):not(:focus-within) .dropdown-panel,
.nav-item:not(:hover):not(:focus-within) .dropdown-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(.985) !important;
}

/* Smooth visible state */
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega:hover .mega-dropdown,
.has-mega:focus-within .mega-dropdown,
.has-mega:hover .nav-dropdown,
.has-mega:focus-within .nav-dropdown,
.has-mega:hover .dropdown-panel,
.has-mega:focus-within .dropdown-panel,
.has-mega:hover .dropdown-menu,
.has-mega:focus-within .dropdown-menu,
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel,
.nav-item:hover .mega-dropdown,
.nav-item:focus-within .mega-dropdown,
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel,
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Text readability inside the hover menu */
.top-nav .mega-menu *,
.top-nav .mega-panel *,
.top-nav .mega-dropdown *,
.top-nav .nav-dropdown *,
.top-nav .dropdown-panel *,
.top-nav .dropdown-menu *,
.has-mega .mega-menu *,
.has-mega .mega-panel *,
.has-mega .mega-dropdown *,
.has-mega .nav-dropdown *,
.has-mega .dropdown-panel *,
.has-mega .dropdown-menu *,
.nav-item .mega-menu *,
.nav-item .mega-panel *,
.nav-item .mega-dropdown *,
.nav-item .nav-dropdown *,
.nav-item .dropdown-panel *,
.nav-item .dropdown-menu * {
  opacity: 1 !important;
}

.top-nav .mega-menu h3,
.top-nav .mega-panel h3,
.top-nav .mega-dropdown h3,
.top-nav .nav-dropdown h3,
.top-nav .dropdown-panel h3,
.top-nav .dropdown-menu h3,
.top-nav .mega-menu strong,
.top-nav .mega-panel strong,
.top-nav .mega-dropdown strong,
.top-nav .nav-dropdown strong,
.top-nav .dropdown-panel strong,
.top-nav .dropdown-menu strong,
.has-mega .mega-menu h3,
.has-mega .mega-panel h3,
.has-mega .mega-dropdown h3,
.has-mega .nav-dropdown h3,
.has-mega .dropdown-panel h3,
.has-mega .dropdown-menu h3,
.nav-item .mega-menu h3,
.nav-item .mega-panel h3,
.nav-item .mega-dropdown h3,
.nav-item .nav-dropdown h3,
.nav-item .dropdown-panel h3,
.nav-item .dropdown-menu h3 {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
}

.top-nav .mega-menu a,
.top-nav .mega-panel a,
.top-nav .mega-dropdown a,
.top-nav .nav-dropdown a,
.top-nav .dropdown-panel a,
.top-nav .dropdown-menu a,
.has-mega .mega-menu a,
.has-mega .mega-panel a,
.has-mega .mega-dropdown a,
.has-mega .nav-dropdown a,
.has-mega .dropdown-panel a,
.has-mega .dropdown-menu a,
.nav-item .mega-menu a,
.nav-item .mega-panel a,
.nav-item .mega-dropdown a,
.nav-item .nav-dropdown a,
.nav-item .dropdown-panel a,
.nav-item .dropdown-menu a {
  color: var(--mega-text) !important;
  -webkit-text-fill-color: var(--mega-text) !important;
  background: transparent !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease,
    padding-left .18s ease !important;
}

.top-nav .mega-menu a:hover,
.top-nav .mega-panel a:hover,
.top-nav .mega-dropdown a:hover,
.top-nav .nav-dropdown a:hover,
.top-nav .dropdown-panel a:hover,
.top-nav .dropdown-menu a:hover,
.has-mega .mega-menu a:hover,
.has-mega .mega-panel a:hover,
.has-mega .mega-dropdown a:hover,
.has-mega .nav-dropdown a:hover,
.has-mega .dropdown-panel a:hover,
.has-mega .dropdown-menu a:hover,
.nav-item .mega-menu a:hover,
.nav-item .mega-panel a:hover,
.nav-item .mega-dropdown a:hover,
.nav-item .nav-dropdown a:hover,
.nav-item .dropdown-panel a:hover,
.nav-item .dropdown-menu a:hover,
.top-nav .mega-menu a:focus-visible,
.top-nav .mega-panel a:focus-visible,
.top-nav .mega-dropdown a:focus-visible,
.top-nav .nav-dropdown a:focus-visible,
.top-nav .dropdown-panel a:focus-visible,
.top-nav .dropdown-menu a:focus-visible {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  background: var(--mega-bg-soft) !important;
  transform: translateX(2px) !important;
}

/* Column blocks/cards inside mega menus */
.top-nav .mega-menu > *,
.top-nav .mega-panel > *,
.top-nav .mega-dropdown > *,
.top-nav .nav-dropdown > *,
.top-nav .dropdown-panel > *,
.top-nav .dropdown-menu > *,
.has-mega .mega-menu > *,
.has-mega .mega-panel > *,
.has-mega .mega-dropdown > *,
.has-mega .nav-dropdown > *,
.has-mega .dropdown-panel > *,
.has-mega .dropdown-menu > * {
  color: var(--mega-text) !important;
}

/* Muted copy inside menus */
.top-nav .mega-menu p,
.top-nav .mega-panel p,
.top-nav .mega-dropdown p,
.top-nav .nav-dropdown p,
.top-nav .dropdown-panel p,
.top-nav .dropdown-menu p,
.top-nav .mega-menu span,
.top-nav .mega-panel span,
.top-nav .mega-dropdown span,
.top-nav .nav-dropdown span,
.top-nav .dropdown-panel span,
.top-nav .dropdown-menu span {
  color: var(--mega-muted) !important;
  -webkit-text-fill-color: var(--mega-muted) !important;
}

/* Prevent hover panel from covering content too harshly in light mode */
html:not([data-theme="dark"]) .top-nav .mega-menu,
html:not([data-theme="dark"]) .top-nav .mega-panel,
html:not([data-theme="dark"]) .top-nav .mega-dropdown,
html:not([data-theme="dark"]) .top-nav .nav-dropdown,
html:not([data-theme="dark"]) .top-nav .dropdown-panel,
html:not([data-theme="dark"]) .top-nav .dropdown-menu,
html:not([data-theme="dark"]) .has-mega .mega-menu,
html:not([data-theme="dark"]) .has-mega .mega-panel,
html:not([data-theme="dark"]) .has-mega .mega-dropdown,
html:not([data-theme="dark"]) .has-mega .nav-dropdown,
html:not([data-theme="dark"]) .has-mega .dropdown-panel,
html:not([data-theme="dark"]) .has-mega .dropdown-menu {
  background:
    radial-gradient(circle at 88% 0%, rgba(252,101,1,.09), transparent 32%),
    rgba(255,255,255,.95) !important;
}

/* On mobile, the drawer should remain controlled by the dedicated mobile menu, not desktop hover effects. */
@media (max-width: 900px) {
  .top-nav .mega-menu,
  .top-nav .mega-panel,
  .top-nav .mega-dropdown,
  .top-nav .nav-dropdown,
  .top-nav .dropdown-panel,
  .top-nav .dropdown-menu,
  .has-mega .mega-menu,
  .has-mega .mega-panel,
  .has-mega .mega-dropdown,
  .has-mega .nav-dropdown,
  .has-mega .dropdown-panel,
  .has-mega .dropdown-menu {
    transform: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  }
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .top-nav .mega-menu,
  .top-nav .mega-panel,
  .top-nav .mega-dropdown,
  .top-nav .nav-dropdown,
  .top-nav .dropdown-panel,
  .top-nav .dropdown-menu,
  .has-mega .mega-menu,
  .has-mega .mega-panel,
  .has-mega .mega-dropdown,
  .has-mega .nav-dropdown,
  .has-mega .dropdown-panel,
  .has-mega .dropdown-menu {
    transition: none !important;
    transform: none !important;
  }
}


/* V1.79 mode icon toggle: moon in light mode, sun in dark mode */

.theme-toggle-button,
.mode-icon-button {
  position: relative !important;
  overflow: hidden !important;
}

.theme-toggle-button .theme-icon,
.mode-icon-button .theme-icon {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), color .18s ease !important;
}

.theme-toggle-button .theme-icon svg,
.mode-icon-button .theme-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

.theme-toggle-button .theme-icon-moon,
.mode-icon-button .theme-icon-moon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

.theme-toggle-button .theme-icon-sun,
.mode-icon-button .theme-icon-sun {
  position: absolute !important;
  opacity: 0 !important;
  transform: rotate(-45deg) scale(.55) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .theme-toggle-button .theme-icon-moon,
html[data-theme="dark"] .mode-icon-button .theme-icon-moon,
body.dark .theme-toggle-button .theme-icon-moon,
body.dark-mode .theme-toggle-button .theme-icon-moon,
body[data-theme="dark"] .theme-toggle-button .theme-icon-moon,
body.dark .mode-icon-button .theme-icon-moon,
body.dark-mode .mode-icon-button .theme-icon-moon,
body[data-theme="dark"] .mode-icon-button .theme-icon-moon {
  opacity: 0 !important;
  transform: rotate(45deg) scale(.55) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .theme-toggle-button .theme-icon-sun,
html[data-theme="dark"] .mode-icon-button .theme-icon-sun,
body.dark .theme-toggle-button .theme-icon-sun,
body.dark-mode .theme-toggle-button .theme-icon-sun,
body[data-theme="dark"] .theme-toggle-button .theme-icon-sun,
body.dark .mode-icon-button .theme-icon-sun,
body.dark-mode .mode-icon-button .theme-icon-sun,
body[data-theme="dark"] .mode-icon-button .theme-icon-sun {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
  pointer-events: auto !important;
}

html:not([data-theme="dark"]) .theme-toggle-button,
html:not([data-theme="dark"]) .mode-icon-button {
  color: #171124 !important;
}

html[data-theme="dark"] .theme-toggle-button,
html[data-theme="dark"] .mode-icon-button {
  color: #f8f5ff !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle-button .theme-icon,
  .mode-icon-button .theme-icon {
    transition: none !important;
  }
}


/* V1.80 accurate SVG social icons + light/dark mode */

.footer-social-icons,
.footer-socials,
.social-logo-grid,
.support-social-row,
.contact-social-row,
.social-icon-row,
.social-links {
  --social-button-bg: rgba(255,255,255,.92);
  --social-button-border: rgba(17,9,51,.12);
  --social-button-shadow: 0 10px 26px rgba(17,9,51,.10);
  --social-button-text: #171124;
}

html[data-theme="dark"] .footer-social-icons,
html[data-theme="dark"] .footer-socials,
html[data-theme="dark"] .social-logo-grid,
html[data-theme="dark"] .support-social-row,
html[data-theme="dark"] .contact-social-row,
html[data-theme="dark"] .social-icon-row,
html[data-theme="dark"] .social-links {
  --social-button-bg: rgba(255,255,255,.075);
  --social-button-border: rgba(255,255,255,.14);
  --social-button-shadow: 0 10px 28px rgba(0,0,0,.28);
  --social-button-text: #f8f5ff;
}

.footer-social-icons,
.footer-socials,
.social-logo-grid,
.support-social-row,
.contact-social-row,
.social-icon-row,
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.footer-social-icons a,
.footer-socials a,
.social-logo-grid a,
.support-social-row a,
.contact-social-row a,
.social-icon-row a,
.social-links a {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--social-button-bg) !important;
  border: 1px solid var(--social-button-border) !important;
  box-shadow: var(--social-button-shadow) !important;
  color: var(--social-button-text) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}

.footer-social-icons a:hover,
.footer-socials a:hover,
.social-logo-grid a:hover,
.support-social-row a:hover,
.contact-social-row a:hover,
.social-icon-row a:hover,
.social-links a:hover,
.footer-social-icons a:focus-visible,
.footer-socials a:focus-visible,
.social-logo-grid a:focus-visible,
.support-social-row a:focus-visible,
.contact-social-row a:focus-visible,
.social-icon-row a:focus-visible,
.social-links a:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(252,101,1,.45) !important;
  box-shadow: 0 16px 34px rgba(252,101,1,.18) !important;
  outline: none !important;
}

.social-svg-icon,
.footer-social-icons img,
.footer-socials img,
.social-logo-grid img,
.support-social-row img,
.contact-social-row img,
.social-icon-row img,
.social-links img {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Some brand SVGs are full-colour square icons, so make them breathe inside round buttons. */
.footer-social-icons a img[src*="instagram"],
.footer-social-icons a img[src*="tiktok"],
.footer-social-icons a img[src*="facebook"],
.footer-social-icons a img[src*="youtube"],
.footer-social-icons a img[src*="twitch"],
.footer-social-icons a img[src*="snapchat"],
.footer-social-icons a img[src*="whatsapp"],
.footer-social-icons a img[src*="linktree"],
.footer-social-icons a img[src*="/x.svg"],
.footer-socials a img[src*="instagram"],
.footer-socials a img[src*="tiktok"],
.footer-socials a img[src*="facebook"],
.footer-socials a img[src*="youtube"],
.footer-socials a img[src*="twitch"],
.footer-socials a img[src*="snapchat"],
.footer-socials a img[src*="whatsapp"],
.footer-socials a img[src*="linktree"],
.footer-socials a img[src*="/x.svg"],
.social-logo-grid a img[src*="instagram"],
.social-logo-grid a img[src*="tiktok"],
.social-logo-grid a img[src*="facebook"],
.social-logo-grid a img[src*="youtube"],
.social-logo-grid a img[src*="twitch"],
.social-logo-grid a img[src*="snapchat"],
.social-logo-grid a img[src*="whatsapp"],
.social-logo-grid a img[src*="linktree"],
.social-logo-grid a img[src*="/x.svg"] {
  width: 28px !important;
  height: 28px !important;
}

/* When support/contact social rows contain text links, keep text available but visually compact only if an SVG exists. */
.support-social-row a,
.contact-social-row a,
.social-links a {
  font-size: 0 !important;
}

.support-social-row a img + *,
.contact-social-row a img + *,
.social-links a img + * {
  display: none !important;
}

@media (max-width: 700px) {
  .footer-social-icons,
  .footer-socials,
  .social-logo-grid,
  .support-social-row,
  .contact-social-row,
  .social-icon-row,
  .social-links {
    gap: 10px !important;
  }

  .footer-social-icons a,
  .footer-socials a,
  .social-logo-grid a,
  .support-social-row a,
  .contact-social-row a,
  .social-icon-row a,
  .social-links a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* V1.81 header ribbon/logo restore */

.top-nav .brand-logo,
.top-nav .logo-only-link,
.top-nav .restored-header-logo,
header .brand-logo,
header .logo-only-link,
header .restored-header-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.top-nav .brand-logo img,
.top-nav .logo-only-link img,
.top-nav .restored-header-logo img,
header .brand-logo img,
header .logo-only-link img,
header .restored-header-logo img {
  display: block !important;
  width: auto !important;
  height: clamp(38px, 4.6vw, 54px) !important;
  max-width: 180px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Do not allow social icon round-button rules to touch header logo */
.top-nav .brand-logo img.social-svg-icon,
.top-nav .logo-only-link img.social-svg-icon,
header .brand-logo img.social-svg-icon,
header .logo-only-link img.social-svg-icon {
  width: auto !important;
  height: clamp(38px, 4.6vw, 54px) !important;
  border-radius: 0 !important;
}

@media (max-width: 760px) {
  .top-nav .brand-logo img,
  .top-nav .logo-only-link img,
  .top-nav .restored-header-logo img,
  header .brand-logo img,
  header .logo-only-link img,
  header .restored-header-logo img {
    height: 42px !important;
    max-width: 145px !important;
  }
}


/* V1.81 preserved mode icon toggle */

.theme-toggle-button,
.mode-icon-button {
  position: relative !important;
  overflow: hidden !important;
}

.theme-toggle-button .theme-icon,
.mode-icon-button .theme-icon {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), color .18s ease !important;
}

.theme-toggle-button .theme-icon svg,
.mode-icon-button .theme-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

.theme-toggle-button .theme-icon-moon,
.mode-icon-button .theme-icon-moon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

.theme-toggle-button .theme-icon-sun,
.mode-icon-button .theme-icon-sun {
  position: absolute !important;
  opacity: 0 !important;
  transform: rotate(-45deg) scale(.55) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .theme-toggle-button .theme-icon-moon,
html[data-theme="dark"] .mode-icon-button .theme-icon-moon,
body.dark .theme-toggle-button .theme-icon-moon,
body.dark-mode .theme-toggle-button .theme-icon-moon,
body[data-theme="dark"] .theme-toggle-button .theme-icon-moon,
body.dark .mode-icon-button .theme-icon-moon,
body.dark-mode .mode-icon-button .theme-icon-moon,
body[data-theme="dark"] .mode-icon-button .theme-icon-moon {
  opacity: 0 !important;
  transform: rotate(45deg) scale(.55) !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .theme-toggle-button .theme-icon-sun,
html[data-theme="dark"] .mode-icon-button .theme-icon-sun,
body.dark .theme-toggle-button .theme-icon-sun,
body.dark-mode .theme-toggle-button .theme-icon-sun,
body[data-theme="dark"] .theme-toggle-button .theme-icon-sun,
body.dark .mode-icon-button .theme-icon-sun,
body.dark-mode .mode-icon-button .theme-icon-sun,
body[data-theme="dark"] .mode-icon-button .theme-icon-sun {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
  pointer-events: auto !important;
}


/* V1.82 Trade-In field spacing fix */

/*
  Fixes the uneven vertical spacing in the Trade-In form where Storage was pushed
  too far down because the iPhone model field had helper text.
*/

body.trade-page-body .trade-old-phone-grid,
body.trade-page-body .smart-form .form-grid.two.trade-old-phone-grid,
body.trade-page-body .smart-form .form-grid.two {
  align-items: start !important;
}

body.trade-page-body .trade-old-phone-grid > label,
body.trade-page-body .smart-form .form-grid.two > label {
  align-self: start !important;
  justify-content: start !important;
}

body.trade-page-body .trade-old-phone-grid > label > select,
body.trade-page-body .trade-old-phone-grid > label > input,
body.trade-page-body .trade-old-phone-grid > label > textarea,
body.trade-page-body .smart-form .form-grid.two > label > select,
body.trade-page-body .smart-form .form-grid.two > label > input,
body.trade-page-body .smart-form .form-grid.two > label > textarea {
  margin-top: 2px !important;
}

/* Helper text should sit under its own field only; it should not force the neighbouring field down. */
body.trade-page-body .trade-old-phone-grid > label small,
body.trade-page-body .trade-old-phone-grid > label .field-hint,
body.trade-page-body .smart-form .form-grid.two > label small,
body.trade-page-body .smart-form .form-grid.two > label .field-hint {
  margin-top: 0 !important;
  min-height: 0 !important;
}

/* Keep the first row compact on mobile too. */
@media (max-width: 760px) {
  body.trade-page-body .trade-old-phone-grid,
  body.trade-page-body .smart-form .form-grid.two.trade-old-phone-grid,
  body.trade-page-body .smart-form .form-grid.two {
    gap: 14px !important;
  }
}


/* V1.83 global typography + mode-aware writing system */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "SF Pro Display", "SF Pro Text", Roboto, Arial, "Helvetica Neue", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --type-text-light: #171124;
  --type-muted-light: rgba(23, 17, 36, .72);
  --type-soft-light: rgba(23, 17, 36, .58);

  --type-text-dark: #f8f5ff;
  --type-muted-dark: rgba(248, 245, 255, .76);
  --type-soft-dark: rgba(248, 245, 255, .60);

  --type-h1: clamp(3rem, 7.4vw, 7.35rem);
  --type-h2: clamp(2.15rem, 4.7vw, 4.65rem);
  --type-h3: clamp(1.35rem, 2.2vw, 2rem);
  --type-body: clamp(.98rem, 1vw, 1.05rem);

  --type-leading-tight: .94;
  --type-leading-title: 1.02;
  --type-leading-body: 1.62;
  --type-tracking-tight: -.055em;
}

html,
body {
  font-family: var(--font-sans) !important;
  color: var(--type-text-light);
}

html:not([data-theme="dark"]) {
  --text: var(--type-text-light);
  --muted: var(--type-muted-light);
  --soft-text: var(--type-soft-light);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  color: var(--type-text-dark);
}

html[data-theme="dark"] {
  --text: var(--type-text-dark);
  --muted: var(--type-muted-dark);
  --soft-text: var(--type-soft-dark);
}

body {
  font-size: var(--type-body) !important;
  line-height: var(--type-leading-body) !important;
  letter-spacing: -.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main,
section,
article,
aside,
div,
p,
span,
li,
label,
small,
strong,
em,
a,
button,
input,
select,
textarea {
  font-family: var(--font-sans) !important;
}

p,
li,
dd,
blockquote {
  line-height: var(--type-leading-body) !important;
}

p,
li,
small,
label,
.form-note,
.muted,
.field-hint,
.card-note,
.product-card p,
.store-feature-card p,
.support-section-head p,
.repair-section-head p,
.trade-hero-copy {
  color: var(--muted) !important;
  opacity: 1 !important;
}

h1,
.hero h1,
.page-hero h1,
.store-hero h1,
.apple-store-hero h1,
.support-hero h1,
.repair-hero h1,
.trade-hero h1 {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  font-size: var(--type-h1) !important;
  line-height: var(--type-leading-tight) !important;
  letter-spacing: var(--type-tracking-tight) !important;
  font-weight: 850 !important;
  text-wrap: balance;
  opacity: 1 !important;
}

h2,
.section h2,
.section-title,
.support-section-head h2,
.repair-section-head h2,
.trade-form-card h2,
.trade-info-card h2,
.product-info h1,
.product-detail h1,
.product-title {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  font-size: var(--type-h2) !important;
  line-height: var(--type-leading-title) !important;
  letter-spacing: var(--type-tracking-tight) !important;
  font-weight: 850 !important;
  text-wrap: balance;
  opacity: 1 !important;
}

h3,
.card h3,
.product-card h3,
.product-card-v39 h3,
.store-feature-card h3,
.support-help-card h3,
.support-policy-card h3,
.repair-type-card h3,
.repair-note-card h3,
.trade-upgrade-section h3 {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  font-size: var(--type-h3) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  font-weight: 820 !important;
  text-wrap: balance;
  opacity: 1 !important;
}

h4,
h5,
h6,
strong {
  color: var(--text) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.eyebrow,
.kicker,
.store-card-kicker,
.product-kicker,
.card-kicker,
.trade-section-title,
.nav-column h3,
.mega-menu h3,
.mega-panel h3 {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: .76rem !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  opacity: 1 !important;
}

a {
  color: inherit;
}

.primary-btn,
.secondary-btn,
.cta-button,
.price-cta,
button,
.category-filter,
.filter-pill,
.option {
  font-family: var(--font-sans) !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}

.primary-btn,
.cta-button,
.price-cta,
.global-search-submit,
.repair-submit-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.secondary-btn,
.category-filter,
.filter-pill,
.option {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.card,
.product-card,
.product-card-v39,
.store-feature-card,
.category-card,
.service-card,
.support-help-card,
.support-policy-card,
.support-contact-card,
.support-checklist > div,
.repair-type-card,
.repair-form-card,
.repair-guide-card,
.repair-note-card,
.repair-checklist > div,
.trade-form-card,
.trade-info-card,
.trade-upgrade-section,
.estimate-box,
.deduction-panel,
.policy-note,
.info-steps > div,
.trade-formula,
.global-search-box,
.mobile-drawer {
  color: var(--text) !important;
}

.card p,
.product-card p,
.product-card-v39 p,
.store-feature-card p,
.category-card p,
.service-card p,
.support-help-card p,
.support-policy-card p,
.support-contact-card p,
.support-checklist p,
.repair-type-card p,
.repair-form-card p,
.repair-guide-card p,
.repair-note-card p,
.repair-checklist p,
.trade-form-card p,
.trade-info-card p,
.trade-upgrade-section p,
.estimate-box span,
.estimate-box small,
.deduction-list,
.policy-note p,
.info-steps p,
.trade-formula span,
.global-search-empty,
.mobile-drawer span {
  color: var(--muted) !important;
  opacity: 1 !important;
}

input,
select,
textarea {
  font-family: var(--font-sans) !important;
  font-size: .96rem !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
  color: var(--type-text-light) !important;
  -webkit-text-fill-color: var(--type-text-light) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--type-text-dark) !important;
  -webkit-text-fill-color: var(--type-text-dark) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  opacity: .85 !important;
}

select option {
  font-family: var(--font-sans) !important;
  color: #171124 !important;
  background: #ffffff !important;
}

.product-card h3,
.product-card-v39 h3 {
  font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
  line-height: 1.15 !important;
}

.product-card p,
.product-card-v39 p {
  font-size: .92rem !important;
  line-height: 1.42 !important;
}

.product-card .price-cta,
.product-card-v39 .price-cta {
  font-size: .9rem !important;
}

.top-nav,
.top-nav a,
.nav-links a,
.mobile-drawer a,
.mega-menu a,
.mega-panel a,
.dropdown-menu a {
  font-size: .92rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
}

footer,
.site-footer,
.footer {
  color: var(--muted) !important;
}

footer a,
.site-footer a,
.footer a {
  color: var(--text) !important;
}

.global-search-input,
#globalSearchInput {
  font-size: 1rem !important;
  font-weight: 780 !important;
}

.global-search-result strong {
  color: var(--text) !important;
  font-size: .98rem !important;
  line-height: 1.18 !important;
}

.global-search-result span {
  color: var(--muted) !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
}

.global-search-result em {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  :root {
    --type-h1: clamp(2.6rem, 12vw, 4.45rem);
    --type-h2: clamp(2rem, 8.2vw, 3.35rem);
    --type-h3: clamp(1.05rem, 4.8vw, 1.42rem);
    --type-body: .96rem;
  }

  body {
    line-height: 1.58 !important;
  }

  p,
  li,
  label,
  small {
    line-height: 1.52 !important;
  }

  .page-hero h1,
  .store-hero h1,
  .apple-store-hero h1,
  .support-hero h1,
  .repair-hero h1,
  .trade-hero h1 {
    letter-spacing: -.06em !important;
  }

  .product-card h3,
  .product-card-v39 h3 {
    font-size: .88rem !important;
    line-height: 1.12 !important;
  }

  .product-card p,
  .product-card-v39 p {
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  .product-card .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    font-size: .68rem !important;
    line-height: 1.12 !important;
  }

  .top-nav,
  .top-nav a,
  .mobile-drawer a {
    font-size: .94rem !important;
  }

  input,
  select,
  textarea {
    font-size: 1rem !important;
  }
}

@media (max-width: 380px) {
  :root {
    --type-h1: clamp(2.35rem, 11.5vw, 3.65rem);
    --type-h2: clamp(1.85rem, 8vw, 2.8rem);
  }

  .product-card h3,
  .product-card-v39 h3 {
    font-size: .82rem !important;
  }

  .product-card p,
  .product-card-v39 p {
    font-size: .68rem !important;
  }
}


/* V1.84 Apple-style search panel */

#globalSearchOverlay,
#siteSearchOverlay {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mg-search-overlay {
  --mg-search-bg: rgba(245,245,247,.985);
  --mg-search-panel: rgba(245,245,247,.985);
  --mg-search-text: #1d1d1f;
  --mg-search-muted: rgba(29,29,31,.62);
  --mg-search-soft: rgba(29,29,31,.055);
  --mg-search-hover: rgba(29,29,31,.055);
  --mg-search-border: rgba(29,29,31,.10);
  --mg-search-shadow: 0 22px 70px rgba(0,0,0,.12);
  position: fixed;
  inset: 0;
  z-index: 5600;
  display: none;
  background: rgba(0,0,0,0);
  color: var(--mg-search-text);
}

html[data-theme="dark"] .mg-search-overlay {
  --mg-search-bg: rgba(10,6,28,.985);
  --mg-search-panel: rgba(17,9,51,.985);
  --mg-search-text: #f8f5ff;
  --mg-search-muted: rgba(248,245,255,.68);
  --mg-search-soft: rgba(255,255,255,.07);
  --mg-search-hover: rgba(255,255,255,.08);
  --mg-search-border: rgba(255,255,255,.12);
  --mg-search-shadow: 0 22px 90px rgba(0,0,0,.42);
}

body.mg-search-open {
  overflow: hidden !important;
}

body.mg-search-open .mg-search-overlay,
.mg-search-overlay.is-open {
  display: block !important;
}

.mg-search-shell {
  width: 100%;
  min-height: 100dvh;
  background: var(--mg-search-bg);
  box-shadow: var(--mg-search-shadow);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    color .18s ease;
}

body.mg-search-open .mg-search-shell,
.mg-search-overlay.is-open .mg-search-shell {
  opacity: 1;
  transform: translateY(0);
}

.mg-search-inner {
  width: min(990px, calc(100% - 36px));
  margin: 0 auto;
  padding-top: clamp(68px, 8vh, 92px);
  padding-bottom: 42px;
}

.mg-search-form {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 32px;
}

.mg-search-symbol {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-search-muted);
}

.mg-search-symbol svg {
  width: 26px;
  height: 26px;
  display: block;
}

.mg-search-input,
#mgSearchInput {
  width: 100%;
  min-height: 58px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--mg-search-text) !important;
  -webkit-text-fill-color: var(--mg-search-text) !important;
  caret-color: var(--orange) !important;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(2rem, 4.6vw, 3.45rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.055em !important;
  font-weight: 760 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mg-search-input::placeholder,
#mgSearchInput::placeholder {
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
  opacity: 1 !important;
}

.mg-search-close {
  border: 0 !important;
  background: transparent !important;
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif) !important;
  font-size: .94rem !important;
  font-weight: 750 !important;
  cursor: pointer;
  padding: 10px 0 10px 16px !important;
  border-radius: 999px !important;
}

.mg-search-close:hover,
.mg-search-close:focus-visible {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  outline: none !important;
}

.mg-search-content {
  display: grid;
  gap: 28px;
}

.mg-search-quick {
  display: grid;
  gap: 2px;
  width: 100%;
}

.mg-search-quick p,
.mg-search-results-title {
  margin: 0 0 8px;
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
  font-size: .84rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

.mg-search-quick a {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--mg-search-text) !important;
  -webkit-text-fill-color: var(--mg-search-text) !important;
  text-decoration: none !important;
  font-size: .92rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

.mg-search-quick a span {
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
}

.mg-search-quick a:hover,
.mg-search-quick a:focus-visible {
  background: var(--mg-search-hover) !important;
  outline: none !important;
}

.mg-search-results {
  display: grid;
  gap: 8px;
}

.mg-search-result {
  min-height: 62px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mg-search-text) !important;
  -webkit-text-fill-color: var(--mg-search-text) !important;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.mg-search-result:hover,
.mg-search-result:focus-visible,
.mg-search-result.is-active {
  background: var(--mg-search-hover) !important;
  border-color: var(--mg-search-border) !important;
  transform: translateX(3px);
  outline: none !important;
}

.mg-search-result img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: var(--mg-search-soft) !important;
  padding: 5px !important;
}

.mg-search-result strong {
  display: block;
  color: var(--mg-search-text) !important;
  -webkit-text-fill-color: var(--mg-search-text) !important;
  font-size: .98rem !important;
  line-height: 1.16 !important;
  font-weight: 780 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-search-result span {
  display: block;
  margin-top: 3px;
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
  font-size: .82rem !important;
  line-height: 1.3 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-search-result em {
  justify-self: end;
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  font-style: normal;
  font-size: .82rem !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

.mg-search-empty {
  margin: 0;
  padding: 12px 0;
  color: var(--mg-search-muted) !important;
  -webkit-text-fill-color: var(--mg-search-muted) !important;
  font-size: .95rem !important;
}

.mg-search-highlight {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

@media (max-width: 760px) {
  .mg-search-inner {
    width: min(100% - 24px, 680px);
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }

  .mg-search-form {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 50px;
    margin-bottom: 24px;
  }

  .mg-search-input,
  #mgSearchInput {
    min-height: 50px;
    font-size: clamp(1.65rem, 9vw, 2.45rem) !important;
  }

  .mg-search-close {
    font-size: .88rem !important;
    padding-left: 8px !important;
  }

  .mg-search-result {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 58px;
  }

  .mg-search-result img {
    width: 44px !important;
    height: 44px !important;
  }

  .mg-search-result em {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }
}

@media (max-width: 420px) {
  .mg-search-inner {
    width: min(100% - 18px, 680px);
  }

  .mg-search-close {
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .mg-search-close::before {
    content: "×";
    font-size: 1.7rem;
    line-height: 1;
    color: var(--mg-search-muted);
    -webkit-text-fill-color: var(--mg-search-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-search-shell,
  .mg-search-result,
  .mg-search-close {
    transition: none !important;
    transform: none !important;
  }
}


/* V1.85 Help choosing section contrast + mode consistency */

/*
  Fixes the "Need help choosing?" block where CTA text faded in light mode.
  The section now has a clear surface and button text that follows the active mode.
*/

.help-choosing-section {
  --help-section-bg: rgba(255,255,255,.88);
  --help-section-border: rgba(17,9,51,.11);
  --help-section-text: #171124;
  --help-section-muted: rgba(23,17,36,.70);
  --help-link-bg: rgba(17,9,51,.055);
  --help-link-border: rgba(17,9,51,.14);
  --help-link-text: #171124;
  --help-link-hover-bg: rgba(252,101,1,.12);
  --help-link-hover-text: #171124;
}

html[data-theme="dark"] .help-choosing-section {
  --help-section-bg: rgba(17,9,51,.92);
  --help-section-border: rgba(255,255,255,.14);
  --help-section-text: #f8f5ff;
  --help-section-muted: rgba(248,245,255,.72);
  --help-link-bg: rgba(255,255,255,.075);
  --help-link-border: rgba(255,255,255,.16);
  --help-link-text: #f8f5ff;
  --help-link-hover-bg: rgba(252,101,1,.18);
  --help-link-hover-text: #ffffff;
}

.help-choosing-section {
  background:
    radial-gradient(circle at 96% 0%, rgba(252,101,1,.10), transparent 32%),
    var(--help-section-bg) !important;
  border-color: var(--help-section-border) !important;
  color: var(--help-section-text) !important;
}

.help-choosing-section h1,
.help-choosing-section h2,
.help-choosing-section h3,
.help-choosing-section strong {
  color: var(--help-section-text) !important;
  -webkit-text-fill-color: var(--help-section-text) !important;
  opacity: 1 !important;
}

.help-choosing-section p,
.help-choosing-section span,
.help-choosing-section small {
  color: var(--help-section-muted) !important;
  -webkit-text-fill-color: var(--help-section-muted) !important;
  opacity: 1 !important;
}

.help-choosing-section .help-choosing-link,
.help-choosing-section a[href*="recommendation"],
.help-choosing-section a[href*="wa.link"],
.help-choosing-section a[href*="wa.me"] {
  min-height: 44px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0 !important;
  background: var(--help-link-bg) !important;
  border: 1px solid var(--help-link-border) !important;
  color: var(--help-link-text) !important;
  -webkit-text-fill-color: var(--help-link-text) !important;
  opacity: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.help-choosing-section .help-choosing-link *,
.help-choosing-section a[href*="recommendation"] *,
.help-choosing-section a[href*="wa.link"] *,
.help-choosing-section a[href*="wa.me"] * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

.help-choosing-section .help-choosing-link:hover,
.help-choosing-section .help-choosing-link:focus-visible,
.help-choosing-section a[href*="recommendation"]:hover,
.help-choosing-section a[href*="recommendation"]:focus-visible,
.help-choosing-section a[href*="wa.link"]:hover,
.help-choosing-section a[href*="wa.link"]:focus-visible,
.help-choosing-section a[href*="wa.me"]:hover,
.help-choosing-section a[href*="wa.me"]:focus-visible {
  background: var(--help-link-hover-bg) !important;
  color: var(--help-link-hover-text) !important;
  -webkit-text-fill-color: var(--help-link-hover-text) !important;
  border-color: rgba(252,101,1,.45) !important;
  transform: translateX(2px) !important;
  outline: none !important;
}

/* Guard against global typography/button rules turning these CTA links white in light mode */
html:not([data-theme="dark"]) .help-choosing-section .help-choosing-link,
html:not([data-theme="dark"]) .help-choosing-section a[href*="recommendation"],
html:not([data-theme="dark"]) .help-choosing-section a[href*="wa.link"],
html:not([data-theme="dark"]) .help-choosing-section a[href*="wa.me"] {
  color: #171124 !important;
  -webkit-text-fill-color: #171124 !important;
}

/* Dark mode keeps CTA readable */
html[data-theme="dark"] .help-choosing-section .help-choosing-link,
html[data-theme="dark"] .help-choosing-section a[href*="recommendation"],
html[data-theme="dark"] .help-choosing-section a[href*="wa.link"],
html[data-theme="dark"] .help-choosing-section a[href*="wa.me"] {
  color: #f8f5ff !important;
  -webkit-text-fill-color: #f8f5ff !important;
}

@media (max-width: 760px) {
  .help-choosing-section .help-choosing-link,
  .help-choosing-section a[href*="recommendation"],
  .help-choosing-section a[href*="wa.link"],
  .help-choosing-section a[href*="wa.me"] {
    min-height: 46px !important;
    padding: 11px 13px !important;
  }
}


/* V1.86 Poppins/Montserrat slick typography polish */

/*
  Replaces the plain system typography feel with a slicker retail style:
  - Primary: Poppins
  - Fallback display: Montserrat
  - Final fallback: system fonts
  - Keeps mode-aware text colours from v1.83.
*/

:root {
  --font-sans: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif !important;
  --font-display: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;

  --type-h1: clamp(3rem, 7.1vw, 7rem);
  --type-h2: clamp(2.1rem, 4.5vw, 4.4rem);
  --type-h3: clamp(1.28rem, 2.05vw, 1.86rem);
  --type-body: clamp(.96rem, .98vw, 1.03rem);

  --type-leading-tight: .98;
  --type-leading-title: 1.05;
  --type-leading-body: 1.62;
  --type-tracking-tight: -.045em;
  --type-tracking-title: -.03em;
}

html,
body,
main,
section,
article,
aside,
div,
p,
span,
li,
label,
small,
strong,
em,
a,
button,
input,
select,
textarea {
  font-family: var(--font-sans) !important;
}

body {
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
}

h1,
.hero h1,
.page-hero h1,
.store-hero h1,
.apple-store-hero h1,
.support-hero h1,
.repair-hero h1,
.trade-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
  line-height: .96 !important;
}

h2,
.section h2,
.section-title,
.support-section-head h2,
.repair-section-head h2,
.trade-form-card h2,
.trade-info-card h2,
.product-info h1,
.product-detail h1,
.product-title {
  font-family: var(--font-display) !important;
  font-weight: 850 !important;
  letter-spacing: -.042em !important;
  line-height: 1.04 !important;
}

h3,
.card h3,
.product-card h3,
.product-card-v39 h3,
.store-feature-card h3,
.support-help-card h3,
.support-policy-card h3,
.repair-type-card h3,
.repair-note-card h3,
.trade-upgrade-section h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.028em !important;
  line-height: 1.13 !important;
}

p,
li,
small,
label,
.form-note,
.muted,
.field-hint,
.card-note,
.product-card p,
.store-feature-card p,
.support-section-head p,
.repair-section-head p,
.trade-hero-copy {
  font-weight: 500 !important;
}

.eyebrow,
.kicker,
.store-card-kicker,
.product-kicker,
.card-kicker,
.trade-section-title,
.nav-column h3,
.mega-menu h3,
.mega-panel h3 {
  font-family: var(--font-display) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

.top-nav,
.top-nav a,
.nav-links a,
.mobile-drawer a,
.mega-menu a,
.mega-panel a,
.dropdown-menu a {
  font-family: var(--font-sans) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}

.primary-btn,
.secondary-btn,
.cta-button,
.price-cta,
button,
.category-filter,
.filter-pill,
.option {
  font-family: var(--font-sans) !important;
  font-weight: 750 !important;
  letter-spacing: -.018em !important;
}

.product-card h3,
.product-card-v39 h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(.96rem, 1.32vw, 1.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
}

.product-card p,
.product-card-v39 p {
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.product-card .price-cta,
.product-card-v39 .price-cta {
  font-size: .84rem !important;
  font-weight: 800 !important;
}

input,
select,
textarea {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}

.global-search-input,
#mgSearchInput,
#globalSearchInput {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.048em !important;
}

.global-search-result strong,
.mg-search-result strong {
  font-family: var(--font-display) !important;
  font-weight: 760 !important;
}

.footer,
.site-footer,
footer {
  font-family: var(--font-sans) !important;
}

/* Keep the compact catalogue readable with Poppins on mobile */
@media (max-width: 760px) {
  :root {
    --type-h1: clamp(2.6rem, 11.6vw, 4.35rem);
    --type-h2: clamp(1.95rem, 8vw, 3.2rem);
    --type-h3: clamp(1.02rem, 4.6vw, 1.35rem);
    --type-body: .95rem;
  }

  h1,
  .hero h1,
  .page-hero h1,
  .store-hero h1,
  .apple-store-hero h1,
  .support-hero h1,
  .repair-hero h1,
  .trade-hero h1 {
    letter-spacing: -.052em !important;
    line-height: .98 !important;
  }

  .product-card h3,
  .product-card-v39 h3 {
    font-size: .84rem !important;
    font-weight: 800 !important;
    line-height: 1.13 !important;
  }

  .product-card p,
  .product-card-v39 p {
    font-size: .69rem !important;
    line-height: 1.3 !important;
  }

  .product-card .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    font-size: .64rem !important;
    font-weight: 800 !important;
  }

  .top-nav,
  .top-nav a,
  .mobile-drawer a {
    font-size: .9rem !important;
  }
}

@media (max-width: 380px) {
  .product-card h3,
  .product-card-v39 h3 {
    font-size: .79rem !important;
  }

  .product-card p,
  .product-card-v39 p {
    font-size: .66rem !important;
  }
}


/* V1.87 slick premium UI system */

/*
  Premium tech-retail polish:
  - Sora display font for slick headings.
  - Manrope for clean body/UI copy.
  - Softer light mode and deeper dark mode.
  - Cleaner glass cards, product cards, buttons, filters and section rhythm.
  - Keeps all existing JS/product/checkout logic intact.
*/

:root {
  --font-sans: "Manrope", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  --font-display: "Sora", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;

  --slick-bg: #f6f5f8;
  --slick-bg-2: #ffffff;
  --slick-text: #120d22;
  --slick-muted: rgba(18, 13, 34, .68);
  --slick-soft: rgba(18, 13, 34, .055);
  --slick-card: rgba(255,255,255,.82);
  --slick-card-strong: rgba(255,255,255,.94);
  --slick-border: rgba(18, 13, 34, .105);
  --slick-shadow: 0 18px 50px rgba(18, 13, 34, .10);
  --slick-shadow-hover: 0 28px 90px rgba(18, 13, 34, .16);
  --slick-glow: 0 18px 46px rgba(252,101,1,.18);
  --slick-radius: 30px;
  --slick-radius-sm: 18px;
  --slick-orange: #fc6501;
  --slick-orange-2: #ff8a3d;
}

html[data-theme="dark"] {
  --slick-bg: #0a061a;
  --slick-bg-2: #110933;
  --slick-text: #fbf8ff;
  --slick-muted: rgba(251,248,255,.70);
  --slick-soft: rgba(255,255,255,.07);
  --slick-card: rgba(20, 12, 52, .72);
  --slick-card-strong: rgba(18, 10, 47, .92);
  --slick-border: rgba(255,255,255,.13);
  --slick-shadow: 0 22px 70px rgba(0,0,0,.32);
  --slick-shadow-hover: 0 34px 100px rgba(0,0,0,.42);
  --slick-glow: 0 20px 56px rgba(252,101,1,.22);
}

html,
body {
  font-family: var(--font-sans) !important;
  color: var(--slick-text) !important;
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(252,101,1,.10), transparent 28%),
    radial-gradient(circle at 92% 2%, rgba(59,52,87,.10), transparent 30%),
    var(--slick-bg) !important;
  font-weight: 500 !important;
  letter-spacing: -.018em !important;
}

/* Typography with a more premium feel */
h1,
.hero h1,
.page-hero h1,
.store-hero h1,
.apple-store-hero h1,
.support-hero h1,
.repair-hero h1,
.trade-hero h1 {
  font-family: var(--font-display) !important;
  color: var(--slick-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.065em !important;
  line-height: .94 !important;
}

h2,
.section h2,
.section-title,
.support-section-head h2,
.repair-section-head h2,
.trade-form-card h2,
.trade-info-card h2,
.product-info h1,
.product-detail h1,
.product-title {
  font-family: var(--font-display) !important;
  color: var(--slick-text) !important;
  font-weight: 750 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
}

h3,
.product-card h3,
.product-card-v39 h3,
.store-feature-card h3,
.support-help-card h3,
.repair-type-card h3,
.trade-upgrade-section h3 {
  font-family: var(--font-display) !important;
  color: var(--slick-text) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
}

p,
li,
small,
label,
span,
.muted,
.field-hint,
.card-note {
  color: var(--slick-muted) !important;
}

strong {
  color: var(--slick-text) !important;
}

.eyebrow,
.kicker,
.store-card-kicker,
.product-kicker,
.card-kicker,
.trade-section-title {
  font-family: var(--font-display) !important;
  color: var(--slick-orange) !important;
  -webkit-text-fill-color: var(--slick-orange) !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

/* Header/nav: sleeker glass ribbon */
.top-nav,
header,
.site-header {
  color: var(--slick-text) !important;
}

.top-nav {
  background: color-mix(in srgb, var(--slick-bg-2) 84%, transparent) !important;
  border-bottom: 1px solid var(--slick-border) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.035) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

html[data-theme="dark"] .top-nav {
  box-shadow: 0 14px 42px rgba(0,0,0,.24) !important;
}

.top-nav a,
.nav-links a {
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  font-weight: 650 !important;
}

.top-nav a:hover,
.nav-links a:hover {
  color: var(--slick-orange) !important;
  -webkit-text-fill-color: var(--slick-orange) !important;
}

/* Icon buttons */
.header-icon-button,
.mode-icon-button,
.search-icon-button,
.whatsapp-icon-button,
.menu-icon-button {
  background: var(--slick-soft) !important;
  border: 1px solid var(--slick-border) !important;
  color: var(--slick-text) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.045) !important;
}

.header-icon-button:hover,
.mode-icon-button:hover,
.search-icon-button:hover,
.whatsapp-icon-button:hover,
.menu-icon-button:hover {
  border-color: rgba(252,101,1,.38) !important;
  color: var(--slick-orange) !important;
  transform: translateY(-1px) !important;
}

/* General sections */
.section,
.page-hero,
.store-hero,
.support-section,
.repair-section,
.trade-hero {
  color: var(--slick-text) !important;
}

/* Premium cards */
.product-card,
.product-card-v39,
.store-feature-card,
.category-card,
.service-card,
.support-help-card,
.support-policy-card,
.support-contact-card,
.support-checklist > div,
.repair-type-card,
.repair-form-card,
.repair-guide-card,
.repair-note-card,
.repair-checklist > div,
.trade-form-card,
.trade-info-card,
.trade-upgrade-section,
.estimate-box,
.deduction-panel,
.policy-note,
.info-steps > div,
.trade-formula,
.global-search-box,
.mg-search-shell,
.mobile-drawer {
  background:
    radial-gradient(circle at 100% 0%, rgba(252,101,1,.08), transparent 34%),
    var(--slick-card) !important;
  color: var(--slick-text) !important;
  border: 1px solid var(--slick-border) !important;
  box-shadow: var(--slick-shadow) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

.product-card,
.product-card-v39,
.store-feature-card,
.support-help-card,
.support-policy-card,
.repair-type-card {
  border-radius: var(--slick-radius) !important;
}

.product-card:hover,
.product-card-v39:hover,
.store-feature-card:hover,
.support-help-card:hover,
.repair-type-card:hover {
  border-color: rgba(252,101,1,.28) !important;
  box-shadow: var(--slick-shadow-hover) !important;
}

/* Product cards: slicker retail style */
.product-card,
.product-card-v39 {
  padding: clamp(14px, 1.7vw, 22px) !important;
  gap: 12px !important;
}

.product-card .product-image-link,
.product-card-v39 .product-image-link,
.product-card img,
.product-card-v39 img {
  border-radius: 22px !important;
}

.product-card .product-image-link,
.product-card-v39 .product-image-link {
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
    var(--slick-soft) !important;
  border: 1px solid var(--slick-border) !important;
}

html[data-theme="dark"] .product-card .product-image-link,
html[data-theme="dark"] .product-card-v39 .product-image-link {
  background:
    radial-gradient(circle at 50% 0%, rgba(252,101,1,.08), transparent 40%),
    rgba(255,255,255,.045) !important;
}

.product-card h3,
.product-card-v39 h3 {
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.14 !important;
}

.product-card p,
.product-card-v39 p {
  font-size: .86rem !important;
  line-height: 1.48 !important;
}

/* Buttons: less chunky, more expensive */
.primary-btn,
.cta-button,
.price-cta,
.global-search-submit,
.repair-submit-btn {
  background: linear-gradient(135deg, var(--slick-orange), var(--slick-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--slick-glow) !important;
  font-weight: 800 !important;
}

.primary-btn:hover,
.cta-button:hover,
.price-cta:hover,
.global-search-submit:hover,
.repair-submit-btn:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.06) brightness(1.02) !important;
}

.secondary-btn,
.category-filter,
.filter-pill,
.option {
  background: var(--slick-soft) !important;
  border: 1px solid var(--slick-border) !important;
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.secondary-btn:hover,
.category-filter:hover,
.filter-pill:hover,
.option:hover,
.category-filter.active,
.filter-pill.active,
.option.active {
  border-color: rgba(252,101,1,.35) !important;
  background: rgba(252,101,1,.10) !important;
  color: var(--slick-orange) !important;
  -webkit-text-fill-color: var(--slick-orange) !important;
}

/* Store page */
.store-feature-card {
  overflow: hidden !important;
}

.store-feature-image {
  background:
    radial-gradient(circle at 50% 30%, rgba(252,101,1,.10), transparent 42%),
    var(--slick-soft) !important;
  border-radius: 24px !important;
}

/* Forms */
input,
select,
textarea {
  background: var(--slick-soft) !important;
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  border: 1px solid var(--slick-border) !important;
  border-radius: 16px !important;
  font-family: var(--font-sans) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--slick-muted) !important;
  -webkit-text-fill-color: var(--slick-muted) !important;
}

/* Trade-in, Repair and Support surfaces */
.trade-form-card,
.trade-info-card,
.repair-form-card,
.repair-guide-card,
.support-contact-card {
  border-radius: 34px !important;
}

.info-steps > div,
.repair-step-list > div,
.support-checklist > div,
.repair-checklist > div,
.policy-note,
.trade-formula,
.estimate-box,
.deduction-panel {
  background: var(--slick-soft) !important;
  border-color: var(--slick-border) !important;
  box-shadow: none !important;
}

/* Apple-style search should inherit the slick text but remain clean */
.mg-search-overlay {
  --mg-search-bg: var(--slick-bg) !important;
  --mg-search-panel: var(--slick-bg) !important;
  --mg-search-text: var(--slick-text) !important;
  --mg-search-muted: var(--slick-muted) !important;
  --mg-search-soft: var(--slick-soft) !important;
  --mg-search-hover: rgba(252,101,1,.10) !important;
  --mg-search-border: var(--slick-border) !important;
}

html[data-theme="dark"] .mg-search-overlay {
  --mg-search-bg: #0a061a !important;
  --mg-search-panel: #0a061a !important;
}

/* Mega menu */
.top-nav .mega-menu,
.top-nav .mega-panel,
.top-nav .mega-dropdown,
.top-nav .nav-dropdown,
.top-nav .dropdown-panel,
.top-nav .dropdown-menu,
.has-mega .mega-menu,
.has-mega .mega-panel,
.has-mega .mega-dropdown,
.has-mega .nav-dropdown,
.has-mega .dropdown-panel,
.has-mega .dropdown-menu {
  background:
    radial-gradient(circle at 88% 0%, rgba(252,101,1,.10), transparent 32%),
    color-mix(in srgb, var(--slick-bg-2) 88%, transparent) !important;
  color: var(--slick-text) !important;
  border-color: var(--slick-border) !important;
  box-shadow: var(--slick-shadow-hover) !important;
}

.top-nav .mega-menu a,
.top-nav .mega-panel a,
.top-nav .mega-dropdown a,
.top-nav .nav-dropdown a,
.top-nav .dropdown-panel a,
.top-nav .dropdown-menu a,
.has-mega .mega-menu a,
.has-mega .mega-panel a,
.has-mega .mega-dropdown a,
.has-mega .nav-dropdown a,
.has-mega .dropdown-panel a,
.has-mega .dropdown-menu a {
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
}

/* Social icons */
.footer-social-icons a,
.footer-socials a,
.social-logo-grid a,
.support-social-row a,
.contact-social-row a,
.social-icon-row a,
.social-links a {
  background: var(--slick-card-strong) !important;
  border-color: var(--slick-border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
}

html[data-theme="dark"] .footer-social-icons a,
html[data-theme="dark"] .footer-socials a,
html[data-theme="dark"] .social-logo-grid a,
html[data-theme="dark"] .support-social-row a,
html[data-theme="dark"] .contact-social-row a,
html[data-theme="dark"] .social-icon-row a,
html[data-theme="dark"] .social-links a {
  background: rgba(255,255,255,.075) !important;
}

/* Need help section contrast retained */
.help-choosing-section {
  background:
    radial-gradient(circle at 100% 0%, rgba(252,101,1,.08), transparent 34%),
    var(--slick-card) !important;
  color: var(--slick-text) !important;
  border-color: var(--slick-border) !important;
}

.help-choosing-section .help-choosing-link,
.help-choosing-section a[href*="recommendation"],
.help-choosing-section a[href*="wa.link"],
.help-choosing-section a[href*="wa.me"] {
  background: var(--slick-soft) !important;
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  border-color: var(--slick-border) !important;
}

/* Mobile: keep slick but not oversized */
@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 0% 0%, rgba(252,101,1,.09), transparent 26%),
      var(--slick-bg) !important;
  }

  .product-card,
  .product-card-v39 {
    border-radius: 18px !important;
    padding: 9px !important;
  }

  .product-card .product-image-link,
  .product-card-v39 .product-image-link,
  .product-card img,
  .product-card-v39 img {
    border-radius: 15px !important;
  }

  .product-card h3,
  .product-card-v39 h3 {
    font-size: .82rem !important;
    letter-spacing: -.035em !important;
  }

  .product-card p,
  .product-card-v39 p {
    font-size: .66rem !important;
  }

  .product-card .price-cta,
  .product-card-v39 .price-cta,
  .product-card .cta-button {
    min-height: 34px !important;
    font-size: .62rem !important;
  }

  .store-feature-card,
  .support-help-card,
  .support-policy-card,
  .repair-type-card,
  .trade-form-card,
  .trade-info-card,
  .repair-form-card,
  .repair-guide-card {
    border-radius: 24px !important;
  }

  .primary-btn,
  .secondary-btn {
    min-height: 46px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card-v39,
  .store-feature-card,
  .primary-btn,
  .secondary-btn,
  .cta-button,
  .price-cta {
    transition: none !important;
    transform: none !important;
  }
}


/* V1.88 Store floating mode icon fix */

/*
  The mode/theme icon must live inside the header ribbon only.
  This prevents a duplicate moon/sun button from floating inside Store content.
*/

body:not(.force-show-theme-button) > .theme-toggle-button,
body:not(.force-show-theme-button) > .mode-icon-button,
main .theme-toggle-button,
main .mode-icon-button,
.store-main .theme-toggle-button,
.store-main .mode-icon-button,
.apple-store-main .theme-toggle-button,
.apple-store-main .mode-icon-button,
.store-page-body main .theme-toggle-button,
.store-page-body main .mode-icon-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Header theme button stays visible and aligned. */
header .theme-toggle-button,
header .mode-icon-button,
.top-nav .theme-toggle-button,
.top-nav .mode-icon-button,
.nav-inner .theme-toggle-button,
.nav-inner .mode-icon-button {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
}

/* Keep Store content free from accidental fixed/floating icon controls. */
.store-main,
.apple-store-main,
.store-page-body main {
  isolation: isolate;
}


/* V1.89 sliding product row arrows */

/*
  Adds subtle left/right controls to horizontal product rows.
  - Arrows show only when the row has hidden products to the left/right.
  - Arrows fade in on hover, touch, focus, or while scrolling.
  - Arrows fade away when the row is not being interacted with.
  - Works in light and dark mode.
*/

.mg-scroll-frame {
  --mg-arrow-bg: rgba(255,255,255,.92);
  --mg-arrow-border: rgba(18,13,34,.12);
  --mg-arrow-text: #120d22;
  --mg-arrow-shadow: 0 14px 34px rgba(18,13,34,.16);
  position: relative !important;
  isolation: isolate;
}

html[data-theme="dark"] .mg-scroll-frame {
  --mg-arrow-bg: rgba(17,9,51,.86);
  --mg-arrow-border: rgba(255,255,255,.15);
  --mg-arrow-text: #f8f5ff;
  --mg-arrow-shadow: 0 16px 40px rgba(0,0,0,.36);
}

.mg-scroll-frame::before,
.mg-scroll-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(34px, 6vw, 76px);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}

.mg-scroll-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--slick-bg, var(--bg, #f6f5f8)), transparent);
}

.mg-scroll-frame::after {
  right: 0;
  background: linear-gradient(270deg, var(--slick-bg, var(--bg, #f6f5f8)), transparent);
}

.mg-scroll-frame.is-interacting.can-scroll-left::before,
.mg-scroll-frame:hover.can-scroll-left::before,
.mg-scroll-frame:focus-within.can-scroll-left::before,
.mg-scroll-frame.is-interacting.can-scroll-right::after,
.mg-scroll-frame:hover.can-scroll-right::after,
.mg-scroll-frame:focus-within.can-scroll-right::after {
  opacity: .82;
}

html[data-theme="dark"] .mg-scroll-frame::before {
  background: linear-gradient(90deg, var(--slick-bg, #0a061a), transparent);
}

html[data-theme="dark"] .mg-scroll-frame::after {
  background: linear-gradient(270deg, var(--slick-bg, #0a061a), transparent);
}

.mg-scroll-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mg-arrow-bg) !important;
  color: var(--mg-arrow-text) !important;
  -webkit-text-fill-color: var(--mg-arrow-text) !important;
  border: 1px solid var(--mg-arrow-border) !important;
  box-shadow: var(--mg-arrow-shadow) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(-50%) scale(.92);
  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    border-color .18s ease;
}

.mg-scroll-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
}

.mg-scroll-arrow-left {
  left: clamp(8px, 1.4vw, 18px);
}

.mg-scroll-arrow-right {
  right: clamp(8px, 1.4vw, 18px);
}

.mg-scroll-frame.is-interacting.can-scroll-left .mg-scroll-arrow-left,
.mg-scroll-frame:hover.can-scroll-left .mg-scroll-arrow-left,
.mg-scroll-frame:focus-within.can-scroll-left .mg-scroll-arrow-left,
.mg-scroll-frame.is-interacting.can-scroll-right .mg-scroll-arrow-right,
.mg-scroll-frame:hover.can-scroll-right .mg-scroll-arrow-right,
.mg-scroll-frame:focus-within.can-scroll-right .mg-scroll-arrow-right {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.mg-scroll-arrow:hover,
.mg-scroll-arrow:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, var(--slick-orange, #fc6501), var(--slick-orange-2, #ff8a3d)) !important;
  border-color: rgba(252,101,1,.5) !important;
  outline: none !important;
}

.mg-scroll-arrow[disabled],
.mg-scroll-frame:not(.can-scroll-left) .mg-scroll-arrow-left,
.mg-scroll-frame:not(.can-scroll-right) .mg-scroll-arrow-right {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep arrows from making mobile rows feel crowded. */
@media (max-width: 760px) {
  .mg-scroll-arrow {
    width: 38px;
    height: 38px;
  }

  .mg-scroll-arrow svg {
    width: 17px;
    height: 17px;
  }

  .mg-scroll-frame::before,
  .mg-scroll-frame::after {
    width: 42px;
  }

  .mg-scroll-frame.is-interacting.can-scroll-left::before,
  .mg-scroll-frame:hover.can-scroll-left::before,
  .mg-scroll-frame:focus-within.can-scroll-left::before,
  .mg-scroll-frame.is-interacting.can-scroll-right::after,
  .mg-scroll-frame:hover.can-scroll-right::after,
  .mg-scroll-frame:focus-within.can-scroll-right::after {
    opacity: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-scroll-arrow,
  .mg-scroll-frame::before,
  .mg-scroll-frame::after {
    transition: none !important;
  }
}


/* V1.90 clean soft UI refinement */

/*
  Direction:
  - Less sharp, less noisy, less over-carded.
  - Keep islands only where they help: product cards, forms, support/repair/trade panels, search panel.
  - Softer corners, lighter shadows, cleaner surfaces.
  - Better mode consistency without making every section look boxed.
*/

:root {
  --clean-bg-light: #f7f6f8;
  --clean-surface-light: rgba(255,255,255,.76);
  --clean-surface-strong-light: rgba(255,255,255,.92);
  --clean-soft-light: rgba(18,13,34,.045);
  --clean-border-light: rgba(18,13,34,.085);
  --clean-text-light: #120d22;
  --clean-muted-light: rgba(18,13,34,.66);
  --clean-shadow-light: 0 14px 38px rgba(18,13,34,.075);
  --clean-shadow-hover-light: 0 22px 64px rgba(18,13,34,.12);

  --clean-bg-dark: #0b071c;
  --clean-surface-dark: rgba(22,13,54,.66);
  --clean-surface-strong-dark: rgba(22,13,54,.86);
  --clean-soft-dark: rgba(255,255,255,.06);
  --clean-border-dark: rgba(255,255,255,.105);
  --clean-text-dark: #fbf8ff;
  --clean-muted-dark: rgba(251,248,255,.70);
  --clean-shadow-dark: 0 16px 46px rgba(0,0,0,.24);
  --clean-shadow-hover-dark: 0 26px 76px rgba(0,0,0,.36);

  --clean-radius-xl: 30px;
  --clean-radius-lg: 24px;
  --clean-radius-md: 18px;
  --clean-radius-sm: 14px;
}

html:not([data-theme="dark"]) {
  --slick-bg: var(--clean-bg-light);
  --slick-bg-2: #ffffff;
  --slick-text: var(--clean-text-light);
  --slick-muted: var(--clean-muted-light);
  --slick-soft: var(--clean-soft-light);
  --slick-card: var(--clean-surface-light);
  --slick-card-strong: var(--clean-surface-strong-light);
  --slick-border: var(--clean-border-light);
  --slick-shadow: var(--clean-shadow-light);
  --slick-shadow-hover: var(--clean-shadow-hover-light);
  --text: var(--clean-text-light);
  --muted: var(--clean-muted-light);
}

html[data-theme="dark"] {
  --slick-bg: var(--clean-bg-dark);
  --slick-bg-2: #110933;
  --slick-text: var(--clean-text-dark);
  --slick-muted: var(--clean-muted-dark);
  --slick-soft: var(--clean-soft-dark);
  --slick-card: var(--clean-surface-dark);
  --slick-card-strong: var(--clean-surface-strong-dark);
  --slick-border: var(--clean-border-dark);
  --slick-shadow: var(--clean-shadow-dark);
  --slick-shadow-hover: var(--clean-shadow-hover-dark);
  --text: var(--clean-text-dark);
  --muted: var(--clean-muted-dark);
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(252,101,1,.055), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(59,52,87,.055), transparent 31%),
    var(--slick-bg) !important;
  color: var(--slick-text) !important;
}

/* Remove heavy island feeling from broad sections */
.section,
.page-hero,
.store-hero,
.apple-store-hero,
.support-section,
.repair-section,
.trade-hero,
.category-shell,
.product-listing-section,
.product-grid-section {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Softer header ribbon */
.top-nav {
  background: color-mix(in srgb, var(--slick-bg-2) 76%, transparent) !important;
  border-bottom: 1px solid var(--slick-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

.nav-links a,
.top-nav a {
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
}

.header-icon-button,
.mode-icon-button,
.search-icon-button,
.whatsapp-icon-button,
.menu-icon-button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--slick-text) !important;
}

.header-icon-button:hover,
.mode-icon-button:hover,
.search-icon-button:hover,
.whatsapp-icon-button:hover,
.menu-icon-button:hover {
  background: var(--slick-soft) !important;
  border-color: var(--slick-border) !important;
  color: var(--slick-orange, #fc6501) !important;
}

/* Keep true islands only where content benefits from being grouped */
.product-card,
.product-card-v39,
.store-feature-card,
.support-help-card,
.support-policy-card,
.support-contact-card,
.support-checklist > div,
.repair-type-card,
.repair-form-card,
.repair-guide-card,
.repair-note-card,
.repair-checklist > div,
.trade-form-card,
.trade-info-card,
.trade-upgrade-section,
.global-search-box,
.mg-search-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong) 72%, transparent), var(--slick-card)) !important;
  color: var(--slick-text) !important;
  border: 1px solid var(--slick-border) !important;
  box-shadow: var(--slick-shadow) !important;
  border-radius: var(--clean-radius-xl) !important;
  backdrop-filter: blur(14px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(132%) !important;
}

/* Remove nested island overload */
.estimate-box,
.deduction-panel,
.policy-note,
.info-steps > div,
.trade-formula,
.repair-step-list > div,
.store-feature-image,
.product-card .product-image-link,
.product-card-v39 .product-image-link,
.category-card,
.service-card {
  background: var(--slick-soft) !important;
  border: 1px solid var(--slick-border) !important;
  box-shadow: none !important;
  border-radius: var(--clean-radius-lg) !important;
}

/* Product cards: softer, cleaner and less aggressive */
.product-card,
.product-card-v39 {
  padding: clamp(12px, 1.5vw, 18px) !important;
  gap: 10px !important;
}

.product-card:hover,
.product-card-v39:hover,
.store-feature-card:hover,
.support-help-card:hover,
.repair-type-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--slick-shadow-hover) !important;
  border-color: rgba(252,101,1,.22) !important;
}

.product-card img,
.product-card-v39 img {
  border-radius: var(--clean-radius-md) !important;
}

/* Store page: reduce boxy feel */
.store-feature-card {
  min-height: auto !important;
}

.store-feature-image {
  margin-top: 10px !important;
  overflow: hidden !important;
}

/* Buttons: cleaner, less bulky */
.primary-btn,
.cta-button,
.price-cta,
.global-search-submit,
.repair-submit-btn {
  background: linear-gradient(135deg, #fc6501, #ff8a3d) !important;
  border-radius: 999px !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 12px 28px rgba(252,101,1,.18) !important;
  font-weight: 780 !important;
}

.primary-btn:hover,
.cta-button:hover,
.price-cta:hover,
.global-search-submit:hover,
.repair-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 42px rgba(252,101,1,.22) !important;
}

.secondary-btn,
.category-filter,
.filter-pill,
.option,
.help-choosing-section .help-choosing-link {
  background: transparent !important;
  border: 1px solid var(--slick-border) !important;
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  box-shadow: none !important;
}

.secondary-btn:hover,
.category-filter:hover,
.filter-pill:hover,
.option:hover,
.category-filter.active,
.filter-pill.active,
.option.active,
.help-choosing-section .help-choosing-link:hover {
  background: rgba(252,101,1,.09) !important;
  border-color: rgba(252,101,1,.26) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
}

/* Forms: softer fields */
input,
select,
textarea {
  background: var(--slick-soft) !important;
  border: 1px solid var(--slick-border) !important;
  color: var(--slick-text) !important;
  -webkit-text-fill-color: var(--slick-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(252,101,1,.42) !important;
  box-shadow: 0 0 0 4px rgba(252,101,1,.10) !important;
}

/* Mega menu: soften big island */
.top-nav .mega-menu,
.top-nav .mega-panel,
.top-nav .mega-dropdown,
.top-nav .nav-dropdown,
.top-nav .dropdown-panel,
.top-nav .dropdown-menu,
.has-mega .mega-menu,
.has-mega .mega-panel,
.has-mega .mega-dropdown,
.has-mega .nav-dropdown,
.has-mega .dropdown-panel,
.has-mega .dropdown-menu {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-bg-2) 82%, transparent), color-mix(in srgb, var(--slick-bg-2) 72%, transparent)) !important;
  border: 1px solid var(--slick-border) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.12) !important;
  border-radius: 0 0 var(--clean-radius-xl) var(--clean-radius-xl) !important;
}

/* Search: cleaner, no heavy card effect */
.mg-search-shell {
  background: var(--slick-bg) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.mg-search-result {
  border-radius: var(--clean-radius-md) !important;
}

.mg-search-result:hover,
.mg-search-result:focus-visible,
.mg-search-result.is-active {
  background: var(--slick-soft) !important;
  border-color: var(--slick-border) !important;
  transform: translateX(2px) !important;
}

/* Sliding arrows: keep subtle */
.mg-scroll-arrow {
  background: var(--slick-card-strong) !important;
  border-color: var(--slick-border) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

/* Social icons: softer, no harsh bubble */
.footer-social-icons a,
.footer-socials a,
.social-logo-grid a,
.support-social-row a,
.contact-social-row a,
.social-icon-row a,
.social-links a {
  background: var(--slick-card-strong) !important;
  border: 1px solid var(--slick-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.075) !important;
}

/* Help choosing section: not too boxed */
.help-choosing-section {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Typography slightly calmer */
h1,
.hero h1,
.page-hero h1,
.store-hero h1,
.apple-store-hero h1,
.support-hero h1,
.repair-hero h1,
.trade-hero h1 {
  letter-spacing: -.055em !important;
}

h2,
.section h2,
.section-title,
.support-section-head h2,
.repair-section-head h2,
.trade-form-card h2,
.trade-info-card h2 {
  letter-spacing: -.045em !important;
}

/* Mobile: avoid too many mini islands */
@media (max-width: 760px) {
  body {
    background: var(--slick-bg) !important;
  }

  .product-card,
  .product-card-v39 {
    border-radius: 18px !important;
    padding: 9px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.07) !important;
  }

  .product-card:hover,
  .product-card-v39:hover {
    transform: none !important;
  }

  .store-feature-card,
  .support-help-card,
  .support-policy-card,
  .repair-type-card,
  .trade-form-card,
  .trade-info-card,
  .repair-form-card,
  .repair-guide-card,
  .support-contact-card {
    border-radius: 24px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.08) !important;
  }

  .primary-btn,
  .secondary-btn {
    min-height: 44px !important;
  }

  .category-filter,
  .filter-pill {
    min-height: 36px !important;
  }
}


/* V1.91 Trade-In compact standard UI */

/*
  Cleans up the Trade-In page spacing:
  - Less empty vertical space.
  - Tighter form rows.
  - Cleaner card padding.
  - More standard field spacing.
  - Compact right-side explanation panel.
  - Mobile remains readable without becoming too long.
*/

body.trade-page-body .trade-hero {
  padding-top: clamp(34px, 5vw, 64px) !important;
  padding-bottom: clamp(12px, 2vw, 22px) !important;
}

body.trade-page-body .trade-hero h1 {
  max-width: 900px !important;
  margin-bottom: 12px !important;
  font-size: clamp(2.8rem, 6.4vw, 5.8rem) !important;
  line-height: .98 !important;
}

body.trade-page-body .trade-hero-copy,
body.trade-page-body .trade-hero .muted {
  max-width: 820px !important;
  font-size: clamp(.98rem, 1.25vw, 1.1rem) !important;
  line-height: 1.52 !important;
}

body.trade-page-body .trade-hero-actions {
  margin-top: 18px !important;
  gap: 10px !important;
}

body.trade-page-body .trade-page-grid {
  padding-top: clamp(10px, 1.6vw, 22px) !important;
  padding-bottom: clamp(34px, 5vw, 64px) !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
}

body.trade-page-body .trade-form-card,
body.trade-page-body .trade-info-card {
  border-radius: 26px !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
}

body.trade-page-body .trade-form-card > h2 {
  margin: 4px 0 6px !important;
  font-size: clamp(2.05rem, 4.2vw, 3.75rem) !important;
  line-height: 1.02 !important;
}

body.trade-page-body .trade-form-card > p,
body.trade-page-body .trade-form-head p,
body.trade-page-body .trade-info-card > p {
  line-height: 1.48 !important;
  margin-bottom: 0 !important;
}

body.trade-page-body .trade-mobile-summary-strip {
  margin: 14px 0 18px !important;
  gap: 8px !important;
}

body.trade-page-body .trade-mobile-summary-strip span {
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: .72rem !important;
}

body.trade-page-body .smart-form {
  gap: 16px !important;
}

body.trade-page-body .smart-form .form-grid.two,
body.trade-page-body .form-grid.two.trade-old-phone-grid,
body.trade-page-body .trade-old-phone-grid {
  gap: 14px 16px !important;
  align-items: start !important;
}

body.trade-page-body .smart-form label {
  gap: 6px !important;
  font-size: .86rem !important;
  line-height: 1.18 !important;
}

body.trade-page-body .smart-form small,
body.trade-page-body .field-hint {
  font-size: .76rem !important;
  line-height: 1.32 !important;
}

body.trade-page-body .smart-form select,
body.trade-page-body .smart-form input {
  min-height: 46px !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
}

body.trade-page-body .smart-form textarea {
  min-height: 96px !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
}

body.trade-page-body .trade-upgrade-section {
  border-radius: 22px !important;
  padding: clamp(16px, 2vw, 22px) !important;
  gap: 14px !important;
}

body.trade-page-body .trade-upgrade-section h3 {
  margin-bottom: 2px !important;
}

body.trade-page-body .upgrade-price-box {
  gap: 10px !important;
}

body.trade-page-body .upgrade-price-box > div,
body.trade-page-body .estimate-box,
body.trade-page-body .deduction-panel,
body.trade-page-body .trade-formula,
body.trade-page-body .policy-note {
  border-radius: 18px !important;
  padding: 14px !important;
}

body.trade-page-body .estimate-box strong,
body.trade-page-body .upgrade-price-box strong {
  font-size: clamp(1.08rem, 1.8vw, 1.55rem) !important;
  line-height: 1.12 !important;
}

body.trade-page-body .deduction-list {
  display: grid !important;
  gap: 8px !important;
}

body.trade-page-body .deduction-list > div {
  padding: 0 !important;
  line-height: 1.4 !important;
}

body.trade-page-body .form-actions {
  margin-top: 4px !important;
  gap: 10px !important;
}

body.trade-page-body .form-actions .primary-btn,
body.trade-page-body .form-actions .secondary-btn,
body.trade-page-body .repair-submit-btn {
  min-height: 48px !important;
}

/* Right-side guide card */
body.trade-page-body .trade-info-card {
  top: 82px !important;
  max-height: calc(100dvh - 96px) !important;
}

body.trade-page-body .trade-info-card h2 {
  margin: 4px 0 12px !important;
  font-size: clamp(2rem, 3.6vw, 3.35rem) !important;
  line-height: 1.02 !important;
}

body.trade-page-body .trade-info-card .trade-formula,
body.trade-page-body .trade-info-card .policy-note {
  margin-top: 12px !important;
}

body.trade-page-body .info-steps {
  gap: 10px !important;
  margin-top: 14px !important;
}

body.trade-page-body .info-steps > div {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 2px 10px !important;
  padding: 12px !important;
  border-radius: 18px !important;
}

body.trade-page-body .info-steps > div > span {
  width: 38px !important;
  height: 38px !important;
  font-size: .9rem !important;
}

body.trade-page-body .info-steps strong {
  font-size: .94rem !important;
  line-height: 1.18 !important;
}

body.trade-page-body .info-steps p {
  font-size: .84rem !important;
  line-height: 1.38 !important;
}

body.trade-page-body .policy-note h3 {
  margin: 0 0 6px !important;
}

body.trade-page-body .policy-note p {
  line-height: 1.45 !important;
}

/* Trust strip near Trade-In should not create excess spacing */
body.trade-page-body .trust-strip {
  padding-top: 16px !important;
  padding-bottom: 20px !important;
}

/* Mobile compact layout */
@media (max-width: 1080px) {
  body.trade-page-body .trade-info-card {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  body.trade-page-body .trade-hero {
    padding-top: 28px !important;
    padding-bottom: 10px !important;
  }

  body.trade-page-body .trade-hero h1 {
    font-size: clamp(2.3rem, 10.5vw, 3.6rem) !important;
    margin-bottom: 10px !important;
  }

  body.trade-page-body .trade-hero-copy,
  body.trade-page-body .trade-hero .muted {
    font-size: .9rem !important;
    line-height: 1.46 !important;
  }

  body.trade-page-body .trade-page-grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
    gap: 14px !important;
  }

  body.trade-page-body .trade-form-card,
  body.trade-page-body .trade-info-card {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  body.trade-page-body .trade-form-card > h2,
  body.trade-page-body .trade-info-card h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.85rem) !important;
  }

  body.trade-page-body .trade-mobile-summary-strip {
    grid-template-columns: 1fr !important;
    margin: 12px 0 14px !important;
  }

  body.trade-page-body .smart-form {
    gap: 14px !important;
  }

  body.trade-page-body .smart-form .form-grid.two,
  body.trade-page-body .form-grid.two.trade-old-phone-grid,
  body.trade-page-body .trade-old-phone-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.trade-page-body .smart-form select,
  body.trade-page-body .smart-form input {
    min-height: 46px !important;
  }

  body.trade-page-body .trade-upgrade-section {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.trade-page-body .upgrade-price-box {
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .estimate-box,
  body.trade-page-body .deduction-panel,
  body.trade-page-body .trade-formula,
  body.trade-page-body .policy-note,
  body.trade-page-body .upgrade-price-box > div {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.trade-page-body .info-steps > div {
    padding: 11px !important;
  }
}


/* V1.92 floating translucent search refinement */

/*
  Search should not feel like a full-screen page.
  - Overlay background is translucent and blurred.
  - Search panel is a floating top panel, not full-screen.
  - Only the actual search input/text area stays solid and readable.
  - Results/quick links sit on a soft transparent panel.
*/

.mg-search-overlay {
  --mg-search-backdrop: rgba(246,245,248,.58);
  --mg-search-panel-float: rgba(255,255,255,.72);
  --mg-search-input-solid: rgba(255,255,255,.96);
  --mg-search-panel-border: rgba(18,13,34,.10);
  --mg-search-panel-shadow: 0 26px 90px rgba(18,13,34,.16);
  background: var(--mg-search-backdrop) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html[data-theme="dark"] .mg-search-overlay {
  --mg-search-backdrop: rgba(10,6,26,.56);
  --mg-search-panel-float: rgba(17,9,51,.72);
  --mg-search-input-solid: rgba(22,13,54,.96);
  --mg-search-panel-border: rgba(255,255,255,.13);
  --mg-search-panel-shadow: 0 30px 100px rgba(0,0,0,.42);
}

/* Floating panel instead of full screen */
.mg-search-shell {
  width: min(1040px, calc(100% - 48px)) !important;
  min-height: 0 !important;
  max-height: min(76dvh, 680px) !important;
  margin: clamp(54px, 8vh, 82px) auto 0 !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mg-search-panel-float) 92%, transparent), var(--mg-search-panel-float)) !important;
  border: 1px solid var(--mg-search-panel-border) !important;
  box-shadow: var(--mg-search-panel-shadow) !important;
  backdrop-filter: blur(26px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
}

body.mg-search-open .mg-search-shell,
.mg-search-overlay.is-open .mg-search-shell {
  transform: translateY(0) scale(1) !important;
}

.mg-search-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  max-height: min(76dvh, 680px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Solid search bar/text area */
.mg-search-form {
  min-height: 58px !important;
  margin-bottom: 18px !important;
  padding: 0 14px !important;
  border-radius: 22px !important;
  background: var(--mg-search-input-solid) !important;
  border: 1px solid var(--mg-search-panel-border) !important;
  box-shadow: 0 10px 30px rgba(18,13,34,.07) !important;
}

html[data-theme="dark"] .mg-search-form {
  box-shadow: 0 14px 36px rgba(0,0,0,.24) !important;
}

/* Keep only input/text solid and clear */
.mg-search-input,
#mgSearchInput {
  background: transparent !important;
  color: var(--mg-search-text, var(--slick-text, #120d22)) !important;
  -webkit-text-fill-color: var(--mg-search-text, var(--slick-text, #120d22)) !important;
  opacity: 1 !important;
}

.mg-search-input::placeholder,
#mgSearchInput::placeholder {
  color: var(--mg-search-muted, rgba(18,13,34,.62)) !important;
  -webkit-text-fill-color: var(--mg-search-muted, rgba(18,13,34,.62)) !important;
  opacity: 1 !important;
}

/* Quick links/results should feel light, not boxed heavily */
.mg-search-content {
  padding: 2px 2px 4px !important;
}

.mg-search-quick,
.mg-search-results-wrap {
  background: transparent !important;
}

.mg-search-quick a,
.mg-search-result {
  background: transparent !important;
  border-color: transparent !important;
}

.mg-search-quick a:hover,
.mg-search-quick a:focus-visible,
.mg-search-result:hover,
.mg-search-result:focus-visible,
.mg-search-result.is-active {
  background: rgba(252,101,1,.08) !important;
  border-color: rgba(252,101,1,.18) !important;
}

/* Less page takeover on desktop */
@media (min-width: 761px) {
  .mg-search-overlay {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .mg-search-input,
  #mgSearchInput {
    font-size: clamp(1.55rem, 2.6vw, 2.55rem) !important;
    letter-spacing: -.045em !important;
  }
}

/* Mobile remains usable but not full-screen unless the viewport is very small */
@media (max-width: 760px) {
  .mg-search-shell {
    width: min(100% - 18px, 680px) !important;
    max-height: calc(86dvh - env(safe-area-inset-top, 0px)) !important;
    margin-top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 26px !important;
  }

  .mg-search-inner {
    max-height: calc(86dvh - env(safe-area-inset-top, 0px)) !important;
    padding: 14px !important;
  }

  .mg-search-form {
    min-height: 52px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
  }

  .mg-search-input,
  #mgSearchInput {
    font-size: clamp(1.28rem, 7vw, 2rem) !important;
    letter-spacing: -.04em !important;
  }
}

@media (max-height: 620px) {
  .mg-search-shell {
    margin-top: 18px !important;
    max-height: calc(100dvh - 36px) !important;
  }

  .mg-search-inner {
    max-height: calc(100dvh - 36px) !important;
  }
}


/* V1.93 Trade-In mathematical formula card */

.trade-math-formula {
  display: grid !important;
  gap: 12px !important;
  padding: clamp(16px, 2vw, 20px) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 88%, transparent), var(--slick-card, rgba(255,255,255,.75))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  box-shadow: none !important;
}

.trade-math-formula .formula-kicker {
  margin: 0 !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.formula-main,
.formula-balance {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
}

.formula-main {
  padding: 12px !important;
  border-radius: 16px !important;
  background: var(--slick-soft, rgba(18,13,34,.045)) !important;
}

.formula-balance {
  padding-top: 2px !important;
}

.formula-token {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--slick-soft, rgba(18,13,34,.045)) 76%, transparent) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  white-space: nowrap !important;
}

.formula-positive {
  background: rgba(252,101,1,.10) !important;
  border-color: rgba(252,101,1,.22) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.formula-result {
  background: linear-gradient(135deg, rgba(252,101,1,.16), rgba(255,138,61,.10)) !important;
  border-color: rgba(252,101,1,.32) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.formula-operator {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  font-size: 1.15rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.formula-sub {
  display: grid !important;
  gap: 4px !important;
  padding: 0 2px !important;
}

.formula-sub strong {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: .85rem !important;
  line-height: 1.25 !important;
}

.formula-sub span {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .84rem !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"] .trade-math-formula {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, rgba(22,13,54,.86)) 88%, transparent), var(--slick-card, rgba(22,13,54,.66))) !important;
}

html[data-theme="dark"] .formula-token,
html[data-theme="dark"] .formula-positive,
html[data-theme="dark"] .formula-result {
  color: #fbf8ff !important;
  -webkit-text-fill-color: #fbf8ff !important;
}

@media (max-width: 760px) {
  .trade-math-formula {
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .formula-main {
    padding: 10px !important;
  }

  .formula-token {
    min-height: 28px !important;
    padding: 6px 9px !important;
    font-size: .78rem !important;
  }

  .formula-operator {
    font-size: 1rem !important;
  }

  .formula-sub span {
    font-size: .78rem !important;
  }
}


/* V1.94 Sell Device calculator using Trade-In logic */

.sell-device-main {
  color: var(--slick-text, var(--text, #120d22)) !important;
}

.sell-device-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(18px, 5vw, 56px) clamp(10px, 2vw, 22px);
}

.sell-device-hero-copy h1 {
  max-width: 980px;
  margin: 0 0 14px;
  color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.sell-device-hero-copy > p {
  max-width: 820px;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  line-height: 1.52;
}

.sell-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sell-device-grid {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px) clamp(18px, 5vw, 56px) clamp(42px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .75fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

.sell-device-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 72%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  border-radius: 26px !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  padding: clamp(18px, 2.2vw, 28px);
}

.sell-device-form-head {
  margin-bottom: 16px;
}

.sell-device-form-head h2,
.sell-device-guide-card h2 {
  margin: 4px 0 6px;
  color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
}

.sell-device-form-head p,
.sell-device-guide-card p {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  line-height: 1.48;
}

.sell-device-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.sell-device-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.18;
}

.sell-device-form-grid small {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .76rem;
  line-height: 1.32;
}

.sell-device-form-grid select,
.sell-device-form-grid input {
  min-height: 46px !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
}

.sell-device-result-card,
.sell-device-breakdown,
.sell-math-formula,
.sell-policy-note,
.sell-guide-steps > div {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: var(--slick-soft, rgba(18,13,34,.045)) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: none !important;
}

.sell-device-result-card strong {
  display: block;
  margin: 2px 0 4px;
  color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.12;
}

.sell-device-result-card span {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

.sell-device-breakdown h3,
.sell-policy-note h3 {
  margin: 0 0 10px;
  color: var(--slick-text, var(--text, #120d22)) !important;
}

#sellBreakdown {
  display: grid;
  gap: 8px;
}

#sellBreakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--slick-border, rgba(18,13,34,.085));
}

#sellBreakdown > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#sellBreakdown span {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

#sellBreakdown strong {
  color: var(--slick-text, var(--text, #120d22)) !important;
  text-align: right;
}

.sell-device-guide-card {
  position: sticky;
  top: 82px;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
}

.sell-formula-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sell-formula-main span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--slick-text, var(--text, #120d22)) !important;
  background: rgba(252,101,1,.10);
  border: 1px solid rgba(252,101,1,.22);
  font-weight: 800;
  font-size: .82rem;
}

.sell-formula-main b {
  color: var(--orange, #fc6501) !important;
  font-size: 1.1rem;
}

.sell-math-formula p {
  margin: 10px 0 0;
  font-size: .84rem;
}

.sell-guide-steps {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.sell-guide-steps > div {
  margin-top: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  padding: 12px;
}

.sell-guide-steps > div > span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange, #fc6501);
  color: #fff !important;
  font-weight: 900;
}

.sell-guide-steps strong {
  color: var(--slick-text, var(--text, #120d22)) !important;
}

.sell-guide-steps p,
.sell-policy-note p {
  margin: 0;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  line-height: 1.42;
}

html[data-theme="dark"] .sell-device-card,
html[data-theme="dark"] .sell-formula-main span {
  color: #fbf8ff !important;
}

@media (max-width: 1080px) {
  .sell-device-grid {
    grid-template-columns: 1fr;
  }

  .sell-device-guide-card {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .sell-device-hero {
    padding: 28px 12px 10px;
  }

  .sell-device-hero-copy h1 {
    font-size: clamp(2.3rem, 10.5vw, 3.6rem);
  }

  .sell-device-grid {
    padding-left: 12px;
    padding-right: 12px;
    gap: 14px;
  }

  .sell-device-card {
    padding: 16px;
    border-radius: 22px !important;
  }

  .sell-device-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sell-device-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sell-device-actions .primary-btn,
  .sell-device-actions .secondary-btn {
    width: 100%;
  }

  #sellBreakdown > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  #sellBreakdown strong {
    text-align: left;
  }
}


/* V1.95 mobile calculator effects for Sell + Trade-In */

/*
  Ensures the Sell Device and Trade-In calculator effects work cleanly on mobile:
  - Stacked form fields.
  - Compact spacing.
  - Readable formula cards.
  - Result and deduction breakdown fit small screens.
  - WhatsApp/action buttons remain easy to tap.
  - No desktop-only sticky/side-panel behavior on mobile.
*/

@media (max-width: 900px) {
  body.trade-page-body .trade-page-grid,
  .sell-device-grid {
    grid-template-columns: 1fr !important;
  }

  body.trade-page-body .trade-info-card,
  .sell-device-guide-card {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  /* Shared mobile calculator rhythm */
  body.trade-page-body .trade-page-grid,
  .sell-device-grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 14px !important;
  }

  body.trade-page-body .trade-form-card,
  body.trade-page-body .trade-info-card,
  .sell-device-card,
  .sell-device-form-card,
  .sell-device-guide-card {
    padding: 15px !important;
    border-radius: 20px !important;
  }

  /* Fields stack naturally on mobile */
  body.trade-page-body .smart-form .form-grid.two,
  body.trade-page-body .form-grid.two.trade-old-phone-grid,
  body.trade-page-body .trade-old-phone-grid,
  .sell-device-form-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body.trade-page-body .smart-form,
  .sell-device-form-card {
    gap: 13px !important;
  }

  body.trade-page-body .smart-form label,
  .sell-device-form-grid label {
    gap: 5px !important;
    font-size: .84rem !important;
    line-height: 1.16 !important;
  }

  body.trade-page-body .smart-form small,
  body.trade-page-body .field-hint,
  .sell-device-form-grid small {
    font-size: .73rem !important;
    line-height: 1.28 !important;
  }

  body.trade-page-body .smart-form select,
  body.trade-page-body .smart-form input,
  body.trade-page-body .smart-form textarea,
  .sell-device-form-grid select,
  .sell-device-form-grid input,
  .sell-device-form-grid textarea {
    min-height: 44px !important;
    border-radius: 13px !important;
    font-size: .92rem !important;
  }

  /* Mobile result cards */
  body.trade-page-body .estimate-box,
  body.trade-page-body .deduction-panel,
  body.trade-page-body .trade-formula,
  body.trade-page-body .policy-note,
  body.trade-page-body .upgrade-price-box > div,
  .sell-device-result-card,
  .sell-device-breakdown,
  .sell-math-formula,
  .sell-policy-note,
  .sell-guide-steps > div {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.trade-page-body .estimate-box strong,
  body.trade-page-body .upgrade-price-box strong,
  .sell-device-result-card strong {
    font-size: clamp(1.12rem, 5.3vw, 1.55rem) !important;
    line-height: 1.12 !important;
    word-break: keep-all !important;
  }

  /* Formula cards should wrap properly instead of overflowing */
  .trade-math-formula,
  .sell-math-formula {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  .formula-main,
  .formula-balance,
  .sell-formula-main {
    gap: 6px !important;
    padding: 8px !important;
  }

  .formula-token,
  .sell-formula-main span {
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: .72rem !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .formula-operator,
  .sell-formula-main b {
    font-size: .95rem !important;
  }

  .formula-sub span,
  .sell-math-formula p {
    font-size: .76rem !important;
    line-height: 1.38 !important;
  }

  /* Breakdown rows should not overflow on mobile */
  #sellBreakdown > div,
  body.trade-page-body .deduction-list > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    align-items: start !important;
  }

  #sellBreakdown strong,
  body.trade-page-body .deduction-list strong,
  body.trade-page-body .deduction-list b {
    text-align: left !important;
    justify-self: start !important;
  }

  /* Buttons become full-width, tap-friendly */
  body.trade-page-body .form-actions,
  .sell-device-actions.form-actions,
  .sell-device-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.trade-page-body .form-actions .primary-btn,
  body.trade-page-body .form-actions .secondary-btn,
  .sell-device-actions .primary-btn,
  .sell-device-actions .secondary-btn,
  #sellWhatsappBtn,
  #sellResetBtn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Guide steps compact */
  body.trade-page-body .info-steps,
  .sell-guide-steps {
    gap: 9px !important;
  }

  body.trade-page-body .info-steps > div,
  .sell-guide-steps > div {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 2px 9px !important;
    padding: 10px !important;
  }

  body.trade-page-body .info-steps > div > span,
  .sell-guide-steps > div > span {
    width: 34px !important;
    height: 34px !important;
    font-size: .82rem !important;
  }

  body.trade-page-body .info-steps strong,
  .sell-guide-steps strong {
    font-size: .9rem !important;
    line-height: 1.16 !important;
  }

  body.trade-page-body .info-steps p,
  .sell-guide-steps p {
    font-size: .78rem !important;
    line-height: 1.34 !important;
  }

  /* Heroes reduce height so calculator appears earlier on mobile */
  body.trade-page-body .trade-hero,
  .sell-device-hero {
    padding-top: 24px !important;
    padding-bottom: 8px !important;
  }

  body.trade-page-body .trade-hero h1,
  .sell-device-hero-copy h1 {
    font-size: clamp(2.25rem, 10vw, 3.45rem) !important;
    margin-bottom: 8px !important;
  }

  body.trade-page-body .trade-hero-copy,
  body.trade-page-body .trade-hero .muted,
  .sell-device-hero-copy > p {
    font-size: .88rem !important;
    line-height: 1.44 !important;
  }
}

@media (max-width: 380px) {
  body.trade-page-body .trade-form-card,
  body.trade-page-body .trade-info-card,
  .sell-device-card,
  .sell-device-form-card,
  .sell-device-guide-card {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .formula-token,
  .sell-formula-main span {
    font-size: .68rem !important;
  }

  body.trade-page-body .smart-form select,
  body.trade-page-body .smart-form input,
  .sell-device-form-grid select,
  .sell-device-form-grid input {
    min-height: 42px !important;
  }
}


/* V1.96 mobile + desktop UI parity pass */

/*
  Rule from this version onward:
  Unless an edit is specifically requested for desktop-only or mobile-only,
  visual effects should apply to both desktop and mobile.

  This pass ports the desktop polish effects to mobile:
  - same soft premium background direction
  - same card/surface language
  - same button/interactivity feedback
  - same floating translucent search feel
  - same sliding row arrows behavior
  - same social icon button feel
  - same mode-aware text and surface treatment
*/

@media (max-width: 760px) {
  /* Mobile should keep the same premium background direction, not a flat reset. */
  body {
    background:
      radial-gradient(circle at 8% -8%, rgba(252,101,1,.065), transparent 30%),
      radial-gradient(circle at 95% 0%, rgba(59,52,87,.055), transparent 28%),
      var(--slick-bg, #f7f6f8) !important;
    color: var(--slick-text, var(--text, #120d22)) !important;
  }

  html[data-theme="dark"] body {
    background:
      radial-gradient(circle at 8% -8%, rgba(252,101,1,.075), transparent 32%),
      radial-gradient(circle at 100% 0%, rgba(59,52,87,.16), transparent 30%),
      var(--slick-bg, #0b071c) !important;
  }

  /* Header glass should match desktop instead of becoming plain. */
  .top-nav {
    background: color-mix(in srgb, var(--slick-bg-2, #fff) 74%, transparent) !important;
    border-bottom: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  }

  /* Mobile drawer should share desktop glass/card language. */
  .mobile-drawer {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 82%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
    color: var(--slick-text, var(--text, #120d22)) !important;
    border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
    box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  }

  .mobile-drawer a {
    color: var(--slick-text, var(--text, #120d22)) !important;
    -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
    border-radius: 14px !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
  }

  .mobile-drawer a:hover,
  .mobile-drawer a:focus-visible,
  .mobile-drawer a:active {
    background: rgba(252,101,1,.10) !important;
    color: var(--orange, #fc6501) !important;
    -webkit-text-fill-color: var(--orange, #fc6501) !important;
    transform: translateX(2px) !important;
  }

  /* Mobile gets the same touch feedback as desktop hover. */
  .product-card,
  .product-card-v39,
  .store-feature-card,
  .support-help-card,
  .support-policy-card,
  .repair-type-card,
  .category-card,
  .service-card,
  .trade-form-card,
  .trade-info-card,
  .sell-device-card {
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease,
      background .18s ease !important;
  }

  .product-card:active,
  .product-card-v39:active,
  .store-feature-card:active,
  .support-help-card:active,
  .support-policy-card:active,
  .repair-type-card:active,
  .category-card:active,
  .service-card:active {
    transform: translateY(-2px) !important;
    box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
    border-color: rgba(252,101,1,.24) !important;
  }

  /* Buttons get desktop-quality feedback on touch. */
  .primary-btn:active,
  .secondary-btn:active,
  .cta-button:active,
  .price-cta:active,
  .global-search-submit:active,
  .repair-submit-btn:active,
  .category-filter:active,
  .filter-pill:active,
  .option:active {
    transform: translateY(-1px) scale(.99) !important;
  }

  .primary-btn,
  .cta-button,
  .price-cta,
  .global-search-submit,
  .repair-submit-btn {
    box-shadow: 0 12px 28px rgba(252,101,1,.18) !important;
  }

  /* Product image panels should keep the same clean island effect on mobile. */
  .product-card .product-image-link,
  .product-card-v39 .product-image-link,
  .store-feature-image {
    background: var(--slick-soft, rgba(18,13,34,.045)) !important;
    border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  }

  /* Store sliding rows should clearly show that more products exist on touch devices too. */
  .mg-scroll-frame.has-overflow.can-scroll-left::before,
  .mg-scroll-frame.has-overflow.can-scroll-right::after {
    opacity: .38 !important;
  }

  .mg-scroll-frame.has-overflow.can-scroll-left .mg-scroll-arrow-left,
  .mg-scroll-frame.has-overflow.can-scroll-right .mg-scroll-arrow-right {
    opacity: .92 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) scale(1) !important;
  }

  .mg-scroll-frame:not(.can-scroll-left) .mg-scroll-arrow-left,
  .mg-scroll-frame:not(.can-scroll-right) .mg-scroll-arrow-right {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mg-scroll-arrow:active {
    transform: translateY(-50%) scale(.94) !important;
    background: linear-gradient(135deg, var(--slick-orange, #fc6501), var(--slick-orange-2, #ff8a3d)) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Search panel keeps the translucent floating look on mobile too. */
  .mg-search-overlay {
    background: var(--mg-search-backdrop, rgba(246,245,248,.58)) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  .mg-search-shell {
    width: min(100% - 18px, 680px) !important;
    margin-top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--mg-search-panel-float, rgba(255,255,255,.72)) 92%, transparent), var(--mg-search-panel-float, rgba(255,255,255,.72))) !important;
    border: 1px solid var(--mg-search-panel-border, rgba(18,13,34,.10)) !important;
    box-shadow: var(--mg-search-panel-shadow, 0 26px 90px rgba(18,13,34,.16)) !important;
  }

  .mg-search-form {
    background: var(--mg-search-input-solid, rgba(255,255,255,.96)) !important;
    border: 1px solid var(--mg-search-panel-border, rgba(18,13,34,.10)) !important;
    box-shadow: 0 10px 30px rgba(18,13,34,.07) !important;
  }

  .mg-search-result:active,
  .mg-search-quick a:active {
    background: rgba(252,101,1,.10) !important;
    border-color: rgba(252,101,1,.22) !important;
    transform: translateX(2px) !important;
  }

  /* Social icon polish should match desktop on mobile. */
  .footer-social-icons a,
  .footer-socials a,
  .social-logo-grid a,
  .support-social-row a,
  .contact-social-row a,
  .social-icon-row a,
  .social-links a {
    background: var(--slick-card-strong, rgba(255,255,255,.92)) !important;
    border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.075) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }

  .footer-social-icons a:active,
  .footer-socials a:active,
  .social-logo-grid a:active,
  .support-social-row a:active,
  .contact-social-row a:active,
  .social-icon-row a:active,
  .social-links a:active {
    transform: translateY(-2px) scale(.98) !important;
    border-color: rgba(252,101,1,.35) !important;
  }

  /* Mathematical formula chips should visually match desktop but fit mobile. */
  .trade-math-formula,
  .sell-math-formula {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 72%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
    border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
    box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  }

  .formula-token,
  .sell-formula-main span {
    background: rgba(252,101,1,.10) !important;
    border-color: rgba(252,101,1,.22) !important;
  }

  /* Help choosing section should keep desktop contrast treatment on mobile too. */
  .help-choosing-section .help-choosing-link,
  .help-choosing-section a[href*="recommendation"],
  .help-choosing-section a[href*="wa.link"],
  .help-choosing-section a[href*="wa.me"] {
    color: var(--slick-text, var(--text, #120d22)) !important;
    -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
    border-color: var(--slick-border, rgba(18,13,34,.085)) !important;
  }

  .help-choosing-section .help-choosing-link:active,
  .help-choosing-section a[href*="recommendation"]:active,
  .help-choosing-section a[href*="wa.link"]:active,
  .help-choosing-section a[href*="wa.me"]:active {
    background: rgba(252,101,1,.10) !important;
    color: var(--orange, #fc6501) !important;
    -webkit-text-fill-color: var(--orange, #fc6501) !important;
  }
}

/* Small mobile keeps parity without crowding. */
@media (max-width: 420px) {
  .mg-scroll-frame.has-overflow.can-scroll-left::before,
  .mg-scroll-frame.has-overflow.can-scroll-right::after {
    opacity: .28 !important;
  }

  .mg-scroll-frame.has-overflow.can-scroll-left .mg-scroll-arrow-left,
  .mg-scroll-frame.has-overflow.can-scroll-right .mg-scroll-arrow-right {
    opacity: .82 !important;
  }

  .mg-search-shell {
    width: min(100% - 14px, 680px) !important;
    border-radius: 20px !important;
  }
}


/* V1.98 required selection validation */

/*
  Any checkout/action that depends on user choices must validate visible pickable fields.
  Missing fields are highlighted, the user is scrolled back, and checkout is blocked.
  Applies on desktop and mobile.
*/

.mg-field-toast {
  position: fixed;
  left: 50%;
  top: calc(84px + env(safe-area-inset-top, 0px));
  z-index: 9000;
  width: min(440px, calc(100% - 28px));
  transform: translateX(-50%) translateY(-12px);
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;
  color: #120d22 !important;
  border: 1px solid rgba(252,101,1,.35);
  box-shadow: 0 18px 50px rgba(18,13,34,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

html[data-theme="dark"] .mg-field-toast {
  background:
    linear-gradient(180deg, rgba(22,13,54,.96), rgba(22,13,54,.88)) !important;
  color: #fbf8ff !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}

.mg-field-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mg-field-toast strong {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}

.mg-field-toast span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 700;
}

.mg-field-invalid,
select.mg-field-invalid,
input.mg-field-invalid,
textarea.mg-field-invalid,
.mg-field-invalid .option,
.option.mg-field-invalid {
  border-color: rgba(252,101,1,.72) !important;
  box-shadow: 0 0 0 4px rgba(252,101,1,.14) !important;
  outline: none !important;
}

.mg-field-invalid-label,
label:has(.mg-field-invalid) {
  color: var(--orange, #fc6501) !important;
}

.mg-field-required-note {
  margin-top: 6px;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .mg-field-toast {
    top: calc(74px + env(safe-area-inset-top, 0px));
    width: min(420px, calc(100% - 20px));
    border-radius: 16px;
    padding: 12px 14px;
  }

  .mg-field-toast span {
    font-size: .86rem;
  }
}


/* V1.99 Accessories page UI polish */

.accessories-page-body .accessories-main {
  color: var(--slick-text, var(--text, #120d22)) !important;
}

.accessories-page-body .accessories-hero {
  width: min(1360px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: clamp(36px, 5vw, 72px) 0 clamp(18px, 3vw, 34px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .82fr) !important;
  gap: clamp(18px, 3vw, 42px) !important;
  align-items: end !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.accessories-hero-copy h1 {
  max-width: 880px !important;
  margin: 0 0 14px !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.accessories-hero-copy .muted {
  max-width: 730px !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: clamp(.98rem, 1.22vw, 1.12rem) !important;
  line-height: 1.54 !important;
}

.accessories-hero-panel {
  display: grid !important;
  gap: 10px !important;
  padding: clamp(14px, 2vw, 18px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 80%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.accessories-hero-panel > div {
  display: grid !important;
  gap: 3px !important;
  padding: 13px !important;
  border-radius: 18px !important;
  background: var(--slick-soft, rgba(18,13,34,.045)) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
}

.accessories-hero-panel span {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
}

.accessories-hero-panel strong {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: .98rem !important;
  line-height: 1.18 !important;
}

.accessories-hero-panel p {
  margin: 0 !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .84rem !important;
  line-height: 1.38 !important;
}

.accessories-filter-shell {
  grid-column: 1 / -1 !important;
  margin-top: clamp(10px, 1.5vw, 18px) !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--slick-card, rgba(255,255,255,.76)) 68%, transparent) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: none !important;
}

.accessories-filter-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 2px 4px 10px !important;
}

.accessories-filter-head span {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-weight: 900 !important;
}

.accessories-filter-head p {
  margin: 0 !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .84rem !important;
}

.accessories-page-body .category-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

.accessories-page-body .category-filter {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  box-shadow: none !important;
}

.accessories-page-body .category-filter span {
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--slick-soft, rgba(18,13,34,.045)) !important;
  color: inherit !important;
}

.accessories-page-body .category-filter.active,
.accessories-page-body .category-filter:hover,
.accessories-page-body .category-filter:focus-visible {
  background: rgba(252,101,1,.10) !important;
  border-color: rgba(252,101,1,.32) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

.accessories-page-body .accessories-product-section {
  width: min(1360px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: clamp(14px, 2vw, 28px) 0 clamp(34px, 5vw, 64px) !important;
}

.accessories-grid-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
}

.accessories-grid-head h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 4vw, 3.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.accessories-help-btn {
  white-space: nowrap !important;
}

.accessories-page-body #storeGrid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
}

.accessories-page-body .accessory-card {
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 76%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  overflow: hidden !important;
}

.accessories-page-body .accessory-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
  border-color: rgba(252,101,1,.24) !important;
}

.accessories-page-body .accessory-card .tag {
  justify-self: start !important;
  margin: 0 0 9px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  background: rgba(252,101,1,.10) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  border: 1px solid rgba(252,101,1,.18) !important;
}

.accessories-page-body .accessory-card .product-image-link {
  height: clamp(150px, 15vw, 218px) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(252,101,1,.12), transparent 34%),
    var(--slick-soft, rgba(18,13,34,.045)) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  overflow: hidden !important;
}

.accessories-page-body .accessory-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  transition: transform .22s ease !important;
}

.accessories-page-body .accessory-card:hover img {
  transform: scale(1.035) !important;
}

.accessories-page-body .accessory-card .product-card-body {
  display: grid !important;
  gap: 6px !important;
  padding: 12px 2px 10px !important;
}

.accessories-page-body .accessory-card h3 {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: clamp(.98rem, 1.08vw, 1.08rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
}

.accessories-page-body .accessory-card p {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .82rem !important;
  line-height: 1.36 !important;
  min-height: 2.72em !important;
}

.accessories-page-body .accessory-card .price-cta {
  min-height: 42px !important;
  width: 100% !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
}

.accessories-bottom-cta {
  width: min(1360px, calc(100% - 36px)) !important;
  margin: 0 auto clamp(34px, 5vw, 66px) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(252,101,1,.14), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 80%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
}

.accessories-bottom-cta h2 {
  margin: 0 0 8px !important;
  font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.accessories-bottom-cta p:not(.eyebrow) {
  max-width: 720px !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

.accessories-bottom-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

html[data-theme="dark"] .accessories-hero-panel,
html[data-theme="dark"] .accessories-page-body .accessory-card,
html[data-theme="dark"] .accessories-bottom-cta {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, rgba(22,13,54,.86)) 76%, transparent), var(--slick-card, rgba(22,13,54,.66))) !important;
}

@media (max-width: 1100px) {
  .accessories-page-body #storeGrid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .accessories-page-body .accessories-hero {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .accessories-hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .accessories-page-body #storeGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .accessories-bottom-cta {
    display: grid !important;
  }

  .accessories-bottom-actions {
    justify-content: start !important;
  }
}

@media (max-width: 760px) {
  .accessories-page-body .accessories-hero,
  .accessories-page-body .accessories-product-section,
  .accessories-bottom-cta {
    width: min(100% - 24px, 1360px) !important;
  }

  .accessories-page-body .accessories-hero {
    padding-top: 28px !important;
    padding-bottom: 14px !important;
    gap: 14px !important;
  }

  .accessories-hero-copy h1 {
    font-size: clamp(2.35rem, 10vw, 3.7rem) !important;
    margin-bottom: 10px !important;
  }

  .accessories-hero-copy .muted {
    font-size: .9rem !important;
    line-height: 1.46 !important;
  }

  .accessories-hero-panel {
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .accessories-hero-panel > div {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  .accessories-filter-shell {
    border-radius: 20px !important;
    padding: 10px !important;
  }

  .accessories-filter-head {
    display: grid !important;
    gap: 2px !important;
    padding-bottom: 9px !important;
  }

  .accessories-filter-head p {
    font-size: .78rem !important;
  }

  .accessories-page-body .category-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .accessories-page-body .category-filter {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    scroll-snap-align: start !important;
    font-size: .82rem !important;
  }

  .accessories-grid-head {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .accessories-grid-head h2 {
    font-size: clamp(1.85rem, 8.2vw, 2.7rem) !important;
  }

  .accessories-help-btn {
    width: 100% !important;
  }

  .accessories-page-body #storeGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .accessories-page-body .accessory-card {
    border-radius: 18px !important;
    padding: 9px !important;
  }

  .accessories-page-body .accessory-card .tag {
    font-size: .58rem !important;
    padding: 5px 7px !important;
    margin-bottom: 7px !important;
  }

  .accessories-page-body .accessory-card .product-image-link {
    height: clamp(112px, 35vw, 152px) !important;
    border-radius: 15px !important;
  }

  .accessories-page-body .accessory-card img {
    padding: 6px !important;
  }

  .accessories-page-body .accessory-card .product-card-body {
    padding: 9px 1px 8px !important;
    gap: 4px !important;
  }

  .accessories-page-body .accessory-card h3 {
    font-size: .82rem !important;
    line-height: 1.14 !important;
  }

  .accessories-page-body .accessory-card p {
    font-size: .7rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .accessories-page-body .accessory-card .price-cta {
    min-height: 36px !important;
    font-size: .72rem !important;
    padding: 0 8px !important;
  }

  .accessories-bottom-cta {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .accessories-bottom-cta h2 {
    font-size: clamp(1.85rem, 8vw, 2.75rem) !important;
  }

  .accessories-bottom-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .accessories-bottom-actions .primary-btn,
  .accessories-bottom-actions .secondary-btn {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .accessories-page-body #storeGrid.product-grid {
    gap: 8px !important;
  }

  .accessories-page-body .accessory-card {
    padding: 8px !important;
  }

  .accessories-page-body .accessory-card .product-image-link {
    height: 108px !important;
  }

  .accessories-page-body .accessory-card h3 {
    font-size: .78rem !important;
  }

  .accessories-page-body .accessory-card .price-cta {
    font-size: .68rem !important;
  }
}


/* V1.100 main pages UI fit + consistency pass */

/*
  Main page system fit:
  Home, Store, Phones, Laptops & PCs, Consoles, Accessories, Trade In, Repair and Support
  now share the same visual rhythm, page width, soft surfaces, spacing, cards, filters and mobile behavior.
*/

.mg-ui-fit-body {
  background:
    radial-gradient(circle at 8% -8%, rgba(252,101,1,.062), transparent 30%),
    radial-gradient(circle at 94% -4%, rgba(59,52,87,.060), transparent 31%),
    var(--slick-bg, #f7f6f8) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
}

html[data-theme="dark"] .mg-ui-fit-body {
  background:
    radial-gradient(circle at 8% -8%, rgba(252,101,1,.072), transparent 32%),
    radial-gradient(circle at 98% -2%, rgba(59,52,87,.17), transparent 31%),
    var(--slick-bg, #0b071c) !important;
}

/* Consistent page container */
.mg-ui-fit-main > section,
.mg-ui-fit-main > div,
.mg-ui-fit-main .catalog-header,
.mg-ui-fit-main .product-listing-section,
.mg-ui-fit-main .support-section,
.mg-ui-fit-main .repair-section {
  max-width: 1360px;
}

/* Page hero rhythm */
.page-home .hero,
.page-home .home-hero,
.page-home .apple-hero,
.page-store .store-hero,
.page-store .apple-store-hero,
.page-phones .catalog-header,
.page-laptops .catalog-header,
.page-consoles .catalog-header,
.page-accessories .accessories-hero,
.page-trade-in .trade-hero,
.page-repair .repair-hero,
.page-support .support-hero,
.page-support .page-hero {
  width: min(1360px, calc(100% - 36px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(36px, 5vw, 72px) !important;
  padding-bottom: clamp(18px, 3vw, 34px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page-home h1,
.page-store h1,
.page-phones .catalog-header h1,
.page-laptops .catalog-header h1,
.page-consoles .catalog-header h1,
.page-accessories .accessories-hero h1,
.page-trade-in .trade-hero h1,
.page-repair .repair-hero h1,
.page-support .support-hero h1,
.page-support .page-hero h1 {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  letter-spacing: -.06em !important;
  line-height: .96 !important;
}

.page-home .muted,
.page-store .muted,
.page-phones .catalog-header p,
.page-laptops .catalog-header p,
.page-consoles .catalog-header p,
.page-accessories .accessories-hero p,
.page-trade-in .trade-hero p,
.page-repair .repair-hero p,
.page-support .support-hero p,
.page-support .page-hero p {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

/* Category/catalogue pages: fit the same visual language */
.page-phones .catalog-header,
.page-laptops .catalog-header,
.page-consoles .catalog-header {
  display: grid !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.page-phones .catalog-header h1,
.page-laptops .catalog-header h1,
.page-consoles .catalog-header h1 {
  max-width: 900px !important;
  margin-bottom: 10px !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
}

.page-phones .catalog-header > p,
.page-laptops .catalog-header > p,
.page-consoles .catalog-header > p {
  max-width: 760px !important;
  font-size: clamp(.98rem, 1.22vw, 1.12rem) !important;
  line-height: 1.54 !important;
}

/* Shared filter shell for catalogue pages */
.page-phones .category-filter-bar,
.page-laptops .category-filter-bar,
.page-consoles .category-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--slick-card, rgba(255,255,255,.76)) 68%, transparent) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: none !important;
}

.page-phones .category-filter,
.page-laptops .category-filter,
.page-consoles .category-filter {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  box-shadow: none !important;
}

.page-phones .category-filter.active,
.page-laptops .category-filter.active,
.page-consoles .category-filter.active,
.page-phones .category-filter:hover,
.page-laptops .category-filter:hover,
.page-consoles .category-filter:hover {
  background: rgba(252,101,1,.10) !important;
  border-color: rgba(252,101,1,.32) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

/* Product listing fit */
.page-phones .product-listing-section,
.page-laptops .product-listing-section,
.page-consoles .product-listing-section,
.page-accessories .accessories-product-section {
  width: min(1360px, calc(100% - 36px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(14px, 2vw, 28px) !important;
  padding-bottom: clamp(34px, 5vw, 64px) !important;
}

.page-phones #storeGrid.product-grid,
.page-laptops #storeGrid.product-grid,
.page-consoles #storeGrid.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
}

.page-phones .product-card,
.page-laptops .product-card,
.page-consoles .product-card,
.page-store .product-card,
.page-store .store-feature-card {
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 76%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  overflow: hidden !important;
}

.page-phones .product-card:hover,
.page-laptops .product-card:hover,
.page-consoles .product-card:hover,
.page-store .product-card:hover,
.page-store .store-feature-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
  border-color: rgba(252,101,1,.24) !important;
}

.page-phones .product-card .product-image-link,
.page-laptops .product-card .product-image-link,
.page-consoles .product-card .product-image-link {
  height: clamp(150px, 15vw, 218px) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(252,101,1,.12), transparent 34%),
    var(--slick-soft, rgba(18,13,34,.045)) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  overflow: hidden !important;
}

.page-phones .product-card img,
.page-laptops .product-card img,
.page-consoles .product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  transition: transform .22s ease !important;
}

.page-phones .product-card:hover img,
.page-laptops .product-card:hover img,
.page-consoles .product-card:hover img {
  transform: scale(1.035) !important;
}

.page-phones .product-card h3,
.page-laptops .product-card h3,
.page-consoles .product-card h3,
.page-store .product-card h3 {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  letter-spacing: -.025em !important;
}

.page-phones .product-card p,
.page-laptops .product-card p,
.page-consoles .product-card p,
.page-store .product-card p {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

/* Store page fit */
.page-store .apple-store-main,
.page-store .store-main,
.page-store .main-store {
  color: var(--slick-text, var(--text, #120d22)) !important;
}

.page-store .store-section,
.page-store .apple-store-section,
.page-store .store-row-section,
.page-store .help-choosing-section {
  width: min(1360px, calc(100% - 36px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-store .apple-store-row,
.page-store .store-product-row,
.page-store .horizontal-product-row {
  scroll-padding-left: 18px !important;
  scroll-padding-right: 18px !important;
}

/* Home page fit */
.page-home .hero,
.page-home .home-hero,
.page-home .apple-hero {
  min-height: auto !important;
}

.page-home .hero-card,
.page-home .feature-card,
.page-home .ad-card,
.page-home .banner-card,
.page-home .home-card {
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 76%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
}

/* Trade/Repair/Support page fit */
.page-trade-in .trade-page-grid,
.page-repair .repair-main > section,
.page-support .support-main > section,
.page-support .main-support > section {
  width: min(1360px, calc(100% - 36px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-repair .repair-type-card,
.page-repair .repair-form-card,
.page-repair .repair-guide-card,
.page-repair .repair-note-card,
.page-support .support-help-card,
.page-support .support-policy-card,
.page-support .support-contact-card,
.page-trade-in .trade-form-card,
.page-trade-in .trade-info-card,
.page-trade-in .trade-upgrade-section {
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 76%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
}

.page-repair .repair-type-card:hover,
.page-support .support-help-card:hover,
.page-support .support-policy-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
  border-color: rgba(252,101,1,.24) !important;
}

/* Shared bottom CTA */
.mg-page-bottom-cta {
  width: min(1360px, calc(100% - 36px)) !important;
  margin: 0 auto clamp(34px, 5vw, 66px) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(252,101,1,.14), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 80%, transparent), var(--slick-card, rgba(255,255,255,.76))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
}

.mg-page-bottom-cta h2 {
  margin: 0 0 8px !important;
  font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.mg-page-bottom-cta p:not(.eyebrow) {
  max-width: 720px !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
}

.mg-page-bottom-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* Dark mode fit */
html[data-theme="dark"] .page-phones .product-card,
html[data-theme="dark"] .page-laptops .product-card,
html[data-theme="dark"] .page-consoles .product-card,
html[data-theme="dark"] .page-store .product-card,
html[data-theme="dark"] .page-store .store-feature-card,
html[data-theme="dark"] .page-repair .repair-type-card,
html[data-theme="dark"] .page-repair .repair-form-card,
html[data-theme="dark"] .page-repair .repair-guide-card,
html[data-theme="dark"] .page-repair .repair-note-card,
html[data-theme="dark"] .page-support .support-help-card,
html[data-theme="dark"] .page-support .support-policy-card,
html[data-theme="dark"] .page-support .support-contact-card,
html[data-theme="dark"] .page-trade-in .trade-form-card,
html[data-theme="dark"] .page-trade-in .trade-info-card,
html[data-theme="dark"] .page-trade-in .trade-upgrade-section,
html[data-theme="dark"] .mg-page-bottom-cta {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, rgba(22,13,54,.86)) 76%, transparent), var(--slick-card, rgba(22,13,54,.66))) !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .page-phones #storeGrid.product-grid,
  .page-laptops #storeGrid.product-grid,
  .page-consoles #storeGrid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile parity */
@media (max-width: 760px) {
  .page-home .hero,
  .page-home .home-hero,
  .page-home .apple-hero,
  .page-store .store-hero,
  .page-store .apple-store-hero,
  .page-phones .catalog-header,
  .page-laptops .catalog-header,
  .page-consoles .catalog-header,
  .page-accessories .accessories-hero,
  .page-trade-in .trade-hero,
  .page-repair .repair-hero,
  .page-support .support-hero,
  .page-support .page-hero,
  .page-phones .product-listing-section,
  .page-laptops .product-listing-section,
  .page-consoles .product-listing-section,
  .page-store .store-section,
  .page-store .apple-store-section,
  .page-store .store-row-section,
  .page-store .help-choosing-section,
  .mg-page-bottom-cta {
    width: min(100% - 24px, 1360px) !important;
  }

  .page-home .hero,
  .page-home .home-hero,
  .page-home .apple-hero,
  .page-store .store-hero,
  .page-store .apple-store-hero,
  .page-phones .catalog-header,
  .page-laptops .catalog-header,
  .page-consoles .catalog-header,
  .page-accessories .accessories-hero,
  .page-trade-in .trade-hero,
  .page-repair .repair-hero,
  .page-support .support-hero,
  .page-support .page-hero {
    padding-top: 28px !important;
    padding-bottom: 14px !important;
  }

  .page-home h1,
  .page-store h1,
  .page-phones .catalog-header h1,
  .page-laptops .catalog-header h1,
  .page-consoles .catalog-header h1,
  .page-accessories .accessories-hero h1,
  .page-trade-in .trade-hero h1,
  .page-repair .repair-hero h1,
  .page-support .support-hero h1,
  .page-support .page-hero h1 {
    font-size: clamp(2.35rem, 10vw, 3.7rem) !important;
    margin-bottom: 10px !important;
  }

  .page-home .muted,
  .page-store .muted,
  .page-phones .catalog-header p,
  .page-laptops .catalog-header p,
  .page-consoles .catalog-header p,
  .page-accessories .accessories-hero p,
  .page-trade-in .trade-hero p,
  .page-repair .repair-hero p,
  .page-support .support-hero p,
  .page-support .page-hero p {
    font-size: .9rem !important;
    line-height: 1.46 !important;
  }

  .page-phones .category-filter-bar,
  .page-laptops .category-filter-bar,
  .page-consoles .category-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 10px !important;
    border-radius: 20px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-phones .category-filter,
  .page-laptops .category-filter,
  .page-consoles .category-filter {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: .82rem !important;
    scroll-snap-align: start !important;
  }

  .page-phones #storeGrid.product-grid,
  .page-laptops #storeGrid.product-grid,
  .page-consoles #storeGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .page-phones .product-card,
  .page-laptops .product-card,
  .page-consoles .product-card {
    border-radius: 18px !important;
    padding: 9px !important;
  }

  .page-phones .product-card .product-image-link,
  .page-laptops .product-card .product-image-link,
  .page-consoles .product-card .product-image-link {
    height: clamp(112px, 35vw, 152px) !important;
    border-radius: 15px !important;
  }

  .page-phones .product-card img,
  .page-laptops .product-card img,
  .page-consoles .product-card img {
    padding: 6px !important;
  }

  .page-phones .product-card h3,
  .page-laptops .product-card h3,
  .page-consoles .product-card h3 {
    font-size: .82rem !important;
    line-height: 1.14 !important;
  }

  .page-phones .product-card p,
  .page-laptops .product-card p,
  .page-consoles .product-card p {
    font-size: .7rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .page-phones .product-card .price-cta,
  .page-laptops .product-card .price-cta,
  .page-consoles .product-card .price-cta {
    min-height: 36px !important;
    font-size: .72rem !important;
    padding: 0 8px !important;
  }

  .mg-page-bottom-cta {
    display: grid !important;
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .mg-page-bottom-cta h2 {
    font-size: clamp(1.85rem, 8vw, 2.75rem) !important;
  }

  .mg-page-bottom-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  .mg-page-bottom-actions .primary-btn,
  .mg-page-bottom-actions .secondary-btn {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .page-phones #storeGrid.product-grid,
  .page-laptops #storeGrid.product-grid,
  .page-consoles #storeGrid.product-grid {
    gap: 8px !important;
  }

  .page-phones .product-card,
  .page-laptops .product-card,
  .page-consoles .product-card {
    padding: 8px !important;
  }

  .page-phones .product-card .product-image-link,
  .page-laptops .product-card .product-image-link,
  .page-consoles .product-card .product-image-link {
    height: 108px !important;
  }

  .page-phones .product-card h3,
  .page-laptops .product-card h3,
  .page-consoles .product-card h3 {
    font-size: .78rem !important;
  }
}


/* V1.101 hard mobile two-product grid fix */

/*
  Hard mobile override.
  Phones, Laptops & PCs, Consoles and Accessories must show two product cards side by side on mobile.
*/

@media (max-width: 760px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid,
  body.page-phones #storeGrid.product-grid,
  body.page-laptops #storeGrid.product-grid,
  body.page-consoles #storeGrid.product-grid,
  body.page-accessories #storeGrid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    width: 100% !important;
    height: clamp(112px, 35vw, 152px) !important;
    min-height: 112px !important;
    max-height: 152px !important;
    border-radius: 15px !important;
  }

  body.page-phones #storeGrid .product-image-link img,
  body.page-laptops #storeGrid .product-image-link img,
  body.page-consoles #storeGrid .product-image-link img,
  body.page-accessories #storeGrid .product-image-link img,
  body.page-phones #storeGrid .product-card img,
  body.page-laptops #storeGrid .product-card img,
  body.page-consoles #storeGrid .product-card img,
  body.page-accessories #storeGrid .product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 6px !important;
  }

  body.page-phones #storeGrid .product-card-body,
  body.page-laptops #storeGrid .product-card-body,
  body.page-consoles #storeGrid .product-card-body,
  body.page-accessories #storeGrid .product-card-body {
    padding: 9px 1px 8px !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .82rem !important;
    line-height: 1.14 !important;
    letter-spacing: -.02em !important;
    overflow-wrap: anywhere !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .7rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta,
  body.page-phones #storeGrid .primary-btn,
  body.page-laptops #storeGrid .primary-btn,
  body.page-consoles #storeGrid .primary-btn,
  body.page-accessories #storeGrid .primary-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.page-phones #storeGrid .tag,
  body.page-laptops #storeGrid .tag,
  body.page-consoles #storeGrid .tag,
  body.page-accessories #storeGrid .tag {
    font-size: .58rem !important;
    padding: 5px 7px !important;
    margin-bottom: 7px !important;
  }
}

@media (max-width: 380px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    height: 104px !important;
    min-height: 104px !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .76rem !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .66rem !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta {
    font-size: .66rem !important;
    min-height: 34px !important;
  }
}

@media (max-width: 310px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: 1fr !important;
  }
}


/* V1.103 desktop restored + mobile-only scoped fixes */

/*
  Desktop/web UI is restored from v1.101.
  Everything in this block is mobile-scoped only.
  No global desktop/footer/card/header rules are applied here.
*/

@media (max-width: 760px) {
  /* Main mobile pages get the corrected spacing without changing desktop. */
  body.page-home .mg-ui-fit-main > section,
  body.page-store .mg-ui-fit-main > section,
  body.page-phones .mg-ui-fit-main > section,
  body.page-laptops .mg-ui-fit-main > section,
  body.page-consoles .mg-ui-fit-main > section,
  body.page-accessories .mg-ui-fit-main > section,
  body.page-trade-in .mg-ui-fit-main > section,
  body.page-repair .mg-ui-fit-main > section,
  body.page-support .mg-ui-fit-main > section,
  body.page-phones .product-listing-section,
  body.page-laptops .product-listing-section,
  body.page-consoles .product-listing-section,
  body.page-accessories .accessories-product-section,
  body.page-store .store-section,
  body.page-store .apple-store-section,
  body.page-store .store-row-section {
    width: min(100% - 24px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile hero only. Desktop hero remains v1.101. */
  body.page-home .hero,
  body.page-home .home-hero,
  body.page-home .apple-hero,
  body.page-store .store-hero,
  body.page-store .apple-store-hero,
  body.page-phones .catalog-header,
  body.page-laptops .catalog-header,
  body.page-consoles .catalog-header,
  body.page-accessories .accessories-hero,
  body.page-trade-in .trade-hero,
  body.page-repair .repair-hero,
  body.page-support .support-hero,
  body.page-support .page-hero {
    width: min(100% - 24px, 1360px) !important;
    padding-top: 28px !important;
    padding-bottom: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.page-home h1,
  body.page-store h1,
  body.page-phones .catalog-header h1,
  body.page-laptops .catalog-header h1,
  body.page-consoles .catalog-header h1,
  body.page-accessories .accessories-hero h1,
  body.page-trade-in .trade-hero h1,
  body.page-repair .repair-hero h1,
  body.page-support .support-hero h1,
  body.page-support .page-hero h1 {
    font-size: clamp(2.35rem, 10vw, 3.7rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
  }

  /* Catalogue filters mobile only. */
  body.page-phones .category-filter-bar,
  body.page-laptops .category-filter-bar,
  body.page-consoles .category-filter-bar,
  body.page-accessories .category-filter-bar,
  body.page-phones [data-category-filter-bar],
  body.page-laptops [data-category-filter-bar],
  body.page-consoles [data-category-filter-bar],
  body.page-accessories [data-category-filter-bar] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.page-phones .category-filter,
  body.page-laptops .category-filter,
  body.page-consoles .category-filter,
  body.page-accessories .category-filter {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: .82rem !important;
    scroll-snap-align: start !important;
  }

  /* Hard mobile two-up product grid. */
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid,
  body.page-phones #storeGrid.product-grid,
  body.page-laptops #storeGrid.product-grid,
  body.page-consoles #storeGrid.product-grid,
  body.page-accessories #storeGrid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    width: 100% !important;
    height: clamp(112px, 35vw, 152px) !important;
    min-height: 112px !important;
    max-height: 152px !important;
    border-radius: 15px !important;
  }

  body.page-phones #storeGrid .product-image-link img,
  body.page-laptops #storeGrid .product-image-link img,
  body.page-consoles #storeGrid .product-image-link img,
  body.page-accessories #storeGrid .product-image-link img,
  body.page-phones #storeGrid .product-card img,
  body.page-laptops #storeGrid .product-card img,
  body.page-consoles #storeGrid .product-card img,
  body.page-accessories #storeGrid .product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 6px !important;
  }

  body.page-phones #storeGrid .product-card-body,
  body.page-laptops #storeGrid .product-card-body,
  body.page-consoles #storeGrid .product-card-body,
  body.page-accessories #storeGrid .product-card-body {
    padding: 9px 1px 8px !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .82rem !important;
    line-height: 1.14 !important;
    letter-spacing: -.02em !important;
    overflow-wrap: anywhere !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .7rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta,
  body.page-phones #storeGrid .primary-btn,
  body.page-laptops #storeGrid .primary-btn,
  body.page-consoles #storeGrid .primary-btn,
  body.page-accessories #storeGrid .primary-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Mobile Store row arrows stay visible without changing desktop. */
  .mg-scroll-frame.has-overflow.can-scroll-left::before,
  .mg-scroll-frame.has-overflow.can-scroll-right::after {
    opacity: .32 !important;
  }

  .mg-scroll-frame.has-overflow.can-scroll-left .mg-scroll-arrow-left,
  .mg-scroll-frame.has-overflow.can-scroll-right .mg-scroll-arrow-right {
    opacity: .88 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) scale(1) !important;
  }

  /* Mobile search only. Desktop search remains v1.101. */
  .mg-search-shell {
    width: min(100% - 18px, 680px) !important;
    margin-top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 24px !important;
    max-height: calc(86dvh - env(safe-area-inset-top, 0px)) !important;
  }

  /* Trade-In/Sell mobile calculator cleanup only. */
  body.page-trade-in .trade-page-grid,
  body.page-trade-in .trade-form-card,
  body.page-trade-in .trade-info-card,
  body.page-trade-in .trade-upgrade-section,
  body.page-repair .repair-main > section,
  body.page-support .support-main > section {
    width: min(100% - 24px, 1360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-trade-in .trade-math-formula,
  body.page-trade-in .trade-formula,
  body.page-trade-in .estimate-box,
  body.page-trade-in .deduction-panel,
  body.page-trade-in .policy-note,
  body.page-store .help-choosing-section,
  body.page-accessories .accessories-bottom-cta,
  body.page-phones .mg-page-bottom-cta,
  body.page-laptops .mg-page-bottom-cta,
  body.page-consoles .mg-page-bottom-cta {
    border-radius: 18px !important;
  }

  /* Footer SVG/icon visibility mobile only. Do not rebuild desktop footer. */
  footer .footer-social-icons,
  footer .footer-socials,
  footer .social-logo-grid,
  footer .support-social-row,
  footer .contact-social-row,
  footer .social-icon-row,
  footer .social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 16px auto 12px !important;
    width: min(100%, 340px) !important;
  }

  footer .footer-social-icons a,
  footer .footer-socials a,
  footer .social-logo-grid a,
  footer .support-social-row a,
  footer .contact-social-row a,
  footer .social-icon-row a,
  footer .social-links a {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }

  footer .footer-social-icons img,
  footer .footer-socials img,
  footer .social-logo-grid img,
  footer .support-social-row img,
  footer .contact-social-row img,
  footer .social-icon-row img,
  footer .social-links img,
  footer img[src*="assets/social/"] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    filter: none !important;
  }
}

@media (max-width: 380px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    height: 104px !important;
    min-height: 104px !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .76rem !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .66rem !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta {
    font-size: .66rem !important;
    min-height: 34px !important;
  }
}

@media (max-width: 310px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: 1fr !important;
  }
}


/* V1.104 mobile typography + autolayout final pass */

/*
  Mobile-only final pass:
  - controlled font scale
  - no overflow
  - clean wrapping
  - two-up product grids
  - compact cards/buttons/forms
  - footer icons visible
  - desktop/web UI untouched
*/

@media (max-width: 760px) {
  html {
    width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body.mobile-layout-safe {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  body.mobile-layout-safe *,
  body.mobile-layout-safe *::before,
  body.mobile-layout-safe *::after {
    box-sizing: border-box !important;
  }

  body.mobile-layout-safe img,
  body.mobile-layout-safe video,
  body.mobile-layout-safe svg,
  body.mobile-layout-safe canvas {
    max-width: 100% !important;
  }

  body.mobile-layout-safe main,
  body.mobile-layout-safe section,
  body.mobile-layout-safe article,
  body.mobile-layout-safe aside,
  body.mobile-layout-safe header,
  body.mobile-layout-safe footer,
  body.mobile-layout-safe nav,
  body.mobile-layout-safe div {
    min-width: 0 !important;
  }

  body.mobile-layout-safe h1,
  body.mobile-layout-safe h2,
  body.mobile-layout-safe h3,
  body.mobile-layout-safe h4,
  body.mobile-layout-safe p,
  body.mobile-layout-safe a,
  body.mobile-layout-safe span,
  body.mobile-layout-safe strong,
  body.mobile-layout-safe small,
  body.mobile-layout-safe label,
  body.mobile-layout-safe button {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Universal mobile page widths */
  body.mobile-layout-safe .mg-ui-fit-main > section,
  body.mobile-layout-safe .mg-ui-fit-main > div,
  body.mobile-layout-safe .catalog-header,
  body.mobile-layout-safe .product-listing-section,
  body.mobile-layout-safe .accessories-product-section,
  body.mobile-layout-safe .trade-page-grid,
  body.mobile-layout-safe .sell-device-grid,
  body.mobile-layout-safe .repair-main > section,
  body.mobile-layout-safe .support-main > section,
  body.mobile-layout-safe .main-support > section,
  body.mobile-layout-safe .store-section,
  body.mobile-layout-safe .apple-store-section,
  body.mobile-layout-safe .store-row-section,
  body.mobile-layout-safe .help-choosing-section,
  body.mobile-layout-safe .mg-page-bottom-cta,
  body.mobile-layout-safe .accessories-bottom-cta {
    width: min(100% - 24px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile type scale */
  body.mobile-layout-safe h1,
  body.mobile-layout-safe .hero h1,
  body.mobile-layout-safe .home-hero h1,
  body.mobile-layout-safe .apple-hero h1,
  body.mobile-layout-safe .store-hero h1,
  body.mobile-layout-safe .apple-store-hero h1,
  body.mobile-layout-safe .catalog-header h1,
  body.mobile-layout-safe .accessories-hero h1,
  body.mobile-layout-safe .trade-hero h1,
  body.mobile-layout-safe .repair-hero h1,
  body.mobile-layout-safe .support-hero h1,
  body.mobile-layout-safe .page-hero h1 {
    font-size: clamp(2.15rem, 9.4vw, 3.45rem) !important;
    line-height: .98 !important;
    letter-spacing: -.052em !important;
    margin-bottom: 10px !important;
  }

  body.mobile-layout-safe h2,
  body.mobile-layout-safe .section-heading h2,
  body.mobile-layout-safe .accessories-grid-head h2,
  body.mobile-layout-safe .mg-page-bottom-cta h2,
  body.mobile-layout-safe .accessories-bottom-cta h2,
  body.mobile-layout-safe .sell-device-form-head h2,
  body.mobile-layout-safe .sell-device-guide-card h2 {
    font-size: clamp(1.55rem, 7vw, 2.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.042em !important;
  }

  body.mobile-layout-safe h3,
  body.mobile-layout-safe .product-card h3,
  body.mobile-layout-safe .product-card-v39 h3,
  body.mobile-layout-safe .accessory-card h3 {
    font-size: .88rem !important;
    line-height: 1.16 !important;
    letter-spacing: -.018em !important;
  }

  body.mobile-layout-safe p,
  body.mobile-layout-safe .muted,
  body.mobile-layout-safe .catalog-header p,
  body.mobile-layout-safe .hero p,
  body.mobile-layout-safe .home-hero p,
  body.mobile-layout-safe .apple-hero p,
  body.mobile-layout-safe .store-hero p,
  body.mobile-layout-safe .apple-store-hero p,
  body.mobile-layout-safe .accessories-hero p,
  body.mobile-layout-safe .trade-hero p,
  body.mobile-layout-safe .repair-hero p,
  body.mobile-layout-safe .support-hero p,
  body.mobile-layout-safe .page-hero p {
    font-size: .9rem !important;
    line-height: 1.45 !important;
  }

  body.mobile-layout-safe .eyebrow {
    font-size: .68rem !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  /* Heroes and panels */
  body.mobile-layout-safe .hero,
  body.mobile-layout-safe .home-hero,
  body.mobile-layout-safe .apple-hero,
  body.mobile-layout-safe .store-hero,
  body.mobile-layout-safe .apple-store-hero,
  body.mobile-layout-safe .catalog-header,
  body.mobile-layout-safe .accessories-hero,
  body.mobile-layout-safe .trade-hero,
  body.mobile-layout-safe .sell-device-hero,
  body.mobile-layout-safe .repair-hero,
  body.mobile-layout-safe .support-hero,
  body.mobile-layout-safe .page-hero {
    width: min(100% - 24px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 26px 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.mobile-layout-safe .accessories-hero,
  body.mobile-layout-safe .sell-device-grid,
  body.mobile-layout-safe .trade-page-grid,
  body.mobile-layout-safe .support-grid,
  body.mobile-layout-safe .repair-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.mobile-layout-safe .accessories-hero-panel {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  body.mobile-layout-safe .accessories-hero-panel > div {
    padding: 10px !important;
    border-radius: 15px !important;
  }

  /* Mobile filters */
  body.mobile-layout-safe .category-filter-bar,
  body.mobile-layout-safe [data-category-filter-bar] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.mobile-layout-safe .category-filter-bar::-webkit-scrollbar,
  body.mobile-layout-safe [data-category-filter-bar]::-webkit-scrollbar {
    display: none !important;
  }

  body.mobile-layout-safe .category-filter {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    max-width: 82vw !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .8rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  body.mobile-layout-safe .category-filter span {
    margin-left: 5px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: .72rem !important;
  }

  /* Hard two-up product grids */
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid,
  body.page-phones #storeGrid.product-grid,
  body.page-laptops #storeGrid.product-grid,
  body.page-consoles #storeGrid.product-grid,
  body.page-accessories #storeGrid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 0 !important;
  }

  body.page-phones #storeGrid .tag,
  body.page-laptops #storeGrid .tag,
  body.page-consoles #storeGrid .tag,
  body.page-accessories #storeGrid .tag {
    font-size: .56rem !important;
    line-height: 1 !important;
    padding: 5px 7px !important;
    margin: 0 0 7px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    width: 100% !important;
    height: clamp(108px, 34vw, 148px) !important;
    min-height: 108px !important;
    max-height: 148px !important;
    border-radius: 15px !important;
    margin: 0 !important;
  }

  body.page-phones #storeGrid .product-image-link img,
  body.page-laptops #storeGrid .product-image-link img,
  body.page-consoles #storeGrid .product-image-link img,
  body.page-accessories #storeGrid .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 6px !important;
  }

  body.page-phones #storeGrid .product-card-body,
  body.page-laptops #storeGrid .product-card-body,
  body.page-consoles #storeGrid .product-card-body,
  body.page-accessories #storeGrid .product-card-body {
    padding: 9px 1px 8px !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .8rem !important;
    line-height: 1.14 !important;
    min-height: 2.28em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .68rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta,
  body.page-phones #storeGrid .primary-btn,
  body.page-laptops #storeGrid .primary-btn,
  body.page-consoles #storeGrid .primary-btn,
  body.page-accessories #storeGrid .primary-btn {
    width: 100% !important;
    min-height: 35px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    line-height: 1.05 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Store rows / horizontal cards */
  body.mobile-layout-safe .apple-store-row,
  body.mobile-layout-safe .store-product-row,
  body.mobile-layout-safe .horizontal-product-row,
  body.mobile-layout-safe .store-scroll-row {
    gap: 10px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body.mobile-layout-safe .apple-store-row > *,
  body.mobile-layout-safe .store-product-row > *,
  body.mobile-layout-safe .horizontal-product-row > *,
  body.mobile-layout-safe .store-scroll-row > * {
    min-width: min(74vw, 230px) !important;
    max-width: min(74vw, 230px) !important;
  }

  body.mobile-layout-safe .mg-scroll-arrow {
    width: 34px !important;
    height: 34px !important;
  }

  body.mobile-layout-safe .mg-scroll-frame.has-overflow.can-scroll-left .mg-scroll-arrow-left,
  body.mobile-layout-safe .mg-scroll-frame.has-overflow.can-scroll-right .mg-scroll-arrow-right {
    opacity: .88 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) scale(1) !important;
  }

  /* Forms/calculators */
  body.mobile-layout-safe form,
  body.mobile-layout-safe .smart-form,
  body.mobile-layout-safe .sell-device-form-card,
  body.mobile-layout-safe .trade-form-card,
  body.mobile-layout-safe .repair-form-card {
    max-width: 100% !important;
  }

  body.mobile-layout-safe .form-grid,
  body.mobile-layout-safe .form-grid.two,
  body.mobile-layout-safe .trade-old-phone-grid,
  body.mobile-layout-safe .sell-device-form-grid,
  body.mobile-layout-safe .recommendation-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body.mobile-layout-safe label {
    font-size: .82rem !important;
    line-height: 1.18 !important;
    gap: 5px !important;
  }

  body.mobile-layout-safe input,
  body.mobile-layout-safe select,
  body.mobile-layout-safe textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    border-radius: 13px !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }

  body.mobile-layout-safe textarea {
    min-height: 96px !important;
  }

  body.mobile-layout-safe small,
  body.mobile-layout-safe .field-hint {
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  body.mobile-layout-safe .estimate-box,
  body.mobile-layout-safe .deduction-panel,
  body.mobile-layout-safe .trade-math-formula,
  body.mobile-layout-safe .trade-formula,
  body.mobile-layout-safe .policy-note,
  body.mobile-layout-safe .sell-device-result-card,
  body.mobile-layout-safe .sell-device-breakdown,
  body.mobile-layout-safe .sell-math-formula {
    padding: 12px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
  }

  body.mobile-layout-safe #sellBreakdown > div,
  body.mobile-layout-safe .deduction-list > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  body.mobile-layout-safe .formula-main,
  body.mobile-layout-safe .formula-balance,
  body.mobile-layout-safe .sell-formula-main {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.mobile-layout-safe .formula-token,
  body.mobile-layout-safe .sell-formula-main span {
    font-size: .68rem !important;
    line-height: 1.2 !important;
    padding: 5px 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Buttons and CTAs */
  body.mobile-layout-safe .primary-btn,
  body.mobile-layout-safe .secondary-btn,
  body.mobile-layout-safe .cta-button,
  body.mobile-layout-safe .price-cta,
  body.mobile-layout-safe button,
  body.mobile-layout-safe .form-actions a,
  body.mobile-layout-safe .form-actions button {
    min-height: 42px !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    font-size: .84rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body.mobile-layout-safe .form-actions,
  body.mobile-layout-safe .sell-device-actions,
  body.mobile-layout-safe .mg-page-bottom-actions,
  body.mobile-layout-safe .accessories-bottom-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.mobile-layout-safe .form-actions > *,
  body.mobile-layout-safe .sell-device-actions > *,
  body.mobile-layout-safe .mg-page-bottom-actions > *,
  body.mobile-layout-safe .accessories-bottom-actions > * {
    width: 100% !important;
  }

  /* Bottom CTAs */
  body.mobile-layout-safe .mg-page-bottom-cta,
  body.mobile-layout-safe .accessories-bottom-cta {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  /* Product detail page */
  body.page-product main,
  body.page-product .product-detail,
  body.page-product .product-page,
  body.page-product #productDetail,
  body.page-product .product-main {
    width: min(100% - 24px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-product .product-detail,
  body.page-product .product-page,
  body.page-product #productDetail {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.page-product .product-title,
  body.page-product h1 {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
  }

  /* Footer icons/logos on mobile */
  body.mobile-layout-safe footer {
    overflow-x: hidden !important;
  }

  body.mobile-layout-safe footer .footer-social-icons,
  body.mobile-layout-safe footer .footer-socials,
  body.mobile-layout-safe footer .social-logo-grid,
  body.mobile-layout-safe footer .support-social-row,
  body.mobile-layout-safe footer .contact-social-row,
  body.mobile-layout-safe footer .social-icon-row,
  body.mobile-layout-safe footer .social-links,
  body.mobile-layout-safe footer .mg-footer-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    width: min(100%, 340px) !important;
    margin: 16px auto 12px !important;
  }

  body.mobile-layout-safe footer .footer-social-icons a,
  body.mobile-layout-safe footer .footer-socials a,
  body.mobile-layout-safe footer .social-logo-grid a,
  body.mobile-layout-safe footer .support-social-row a,
  body.mobile-layout-safe footer .contact-social-row a,
  body.mobile-layout-safe footer .social-icon-row a,
  body.mobile-layout-safe footer .social-links a,
  body.mobile-layout-safe footer .mg-footer-socials a {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }

  body.mobile-layout-safe footer img[src*="assets/social/"],
  body.mobile-layout-safe footer .footer-social-icons img,
  body.mobile-layout-safe footer .footer-socials img,
  body.mobile-layout-safe footer .social-logo-grid img,
  body.mobile-layout-safe footer .support-social-row img,
  body.mobile-layout-safe footer .contact-social-row img,
  body.mobile-layout-safe footer .social-icon-row img,
  body.mobile-layout-safe footer .social-links img,
  body.mobile-layout-safe footer .mg-footer-socials img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    filter: none !important;
  }
}

@media (max-width: 420px) {
  body.mobile-layout-safe h1,
  body.mobile-layout-safe .catalog-header h1,
  body.mobile-layout-safe .hero h1,
  body.mobile-layout-safe .page-hero h1 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
  }

  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    gap: 8px !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    height: 104px !important;
    min-height: 104px !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    font-size: .74rem !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .64rem !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta {
    font-size: .64rem !important;
    min-height: 34px !important;
  }
}

@media (max-width: 330px) {
  body.mobile-layout-safe {
    font-size: 14px !important;
  }

  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    gap: 7px !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    padding: 7px !important;
  }
}

@media (max-width: 300px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: 1fr !important;
  }
}


/* V1.105 web typography + autolayout final pass */

/*
  Web/desktop-only final pass:
  - consistent desktop font scale
  - stable page widths
  - clean product grids
  - even card heights
  - form/layout polish
  - footer icon sizing
  - overflow protection
  Mobile rules from v1.104 stay untouched.
*/

@media (min-width: 761px) {
  html {
    width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body.web-layout-safe {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body.web-layout-safe *,
  body.web-layout-safe *::before,
  body.web-layout-safe *::after {
    box-sizing: border-box !important;
  }

  body.web-layout-safe img,
  body.web-layout-safe video,
  body.web-layout-safe svg,
  body.web-layout-safe canvas {
    max-width: 100% !important;
  }

  body.web-layout-safe main,
  body.web-layout-safe section,
  body.web-layout-safe article,
  body.web-layout-safe aside,
  body.web-layout-safe header,
  body.web-layout-safe footer,
  body.web-layout-safe nav,
  body.web-layout-safe div {
    min-width: 0 !important;
  }

  body.web-layout-safe h1,
  body.web-layout-safe h2,
  body.web-layout-safe h3,
  body.web-layout-safe h4,
  body.web-layout-safe p,
  body.web-layout-safe a,
  body.web-layout-safe span,
  body.web-layout-safe strong,
  body.web-layout-safe small,
  body.web-layout-safe label,
  body.web-layout-safe button {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Web page widths */
  body.web-layout-safe .mg-ui-fit-main > section,
  body.web-layout-safe .mg-ui-fit-main > div,
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .product-listing-section,
  body.web-layout-safe .accessories-product-section,
  body.web-layout-safe .trade-page-grid,
  body.web-layout-safe .sell-device-grid,
  body.web-layout-safe .repair-main > section,
  body.web-layout-safe .support-main > section,
  body.web-layout-safe .main-support > section,
  body.web-layout-safe .store-section,
  body.web-layout-safe .apple-store-section,
  body.web-layout-safe .store-row-section,
  body.web-layout-safe .help-choosing-section,
  body.web-layout-safe .mg-page-bottom-cta,
  body.web-layout-safe .accessories-bottom-cta {
    width: min(100% - 72px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Web type scale */
  body.web-layout-safe h1,
  body.web-layout-safe .hero h1,
  body.web-layout-safe .home-hero h1,
  body.web-layout-safe .apple-hero h1,
  body.web-layout-safe .store-hero h1,
  body.web-layout-safe .apple-store-hero h1,
  body.web-layout-safe .catalog-header h1,
  body.web-layout-safe .accessories-hero h1,
  body.web-layout-safe .trade-hero h1,
  body.web-layout-safe .repair-hero h1,
  body.web-layout-safe .support-hero h1,
  body.web-layout-safe .page-hero h1 {
    font-size: clamp(3.1rem, 5.8vw, 6.2rem) !important;
    line-height: .96 !important;
    letter-spacing: -.06em !important;
    margin-bottom: 16px !important;
  }

  body.web-layout-safe h2,
  body.web-layout-safe .section-heading h2,
  body.web-layout-safe .accessories-grid-head h2,
  body.web-layout-safe .mg-page-bottom-cta h2,
  body.web-layout-safe .accessories-bottom-cta h2,
  body.web-layout-safe .sell-device-form-head h2,
  body.web-layout-safe .sell-device-guide-card h2 {
    font-size: clamp(2.1rem, 3.75vw, 4.1rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.05em !important;
  }

  body.web-layout-safe h3,
  body.web-layout-safe .product-card h3,
  body.web-layout-safe .product-card-v39 h3,
  body.web-layout-safe .accessory-card h3 {
    font-size: clamp(1rem, 1.08vw, 1.12rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.024em !important;
  }

  body.web-layout-safe p,
  body.web-layout-safe .muted,
  body.web-layout-safe .catalog-header p,
  body.web-layout-safe .hero p,
  body.web-layout-safe .home-hero p,
  body.web-layout-safe .apple-hero p,
  body.web-layout-safe .store-hero p,
  body.web-layout-safe .apple-store-hero p,
  body.web-layout-safe .accessories-hero p,
  body.web-layout-safe .trade-hero p,
  body.web-layout-safe .repair-hero p,
  body.web-layout-safe .support-hero p,
  body.web-layout-safe .page-hero p {
    font-size: clamp(.96rem, 1.05vw, 1.1rem) !important;
    line-height: 1.55 !important;
  }

  body.web-layout-safe .eyebrow {
    font-size: .72rem !important;
    line-height: 1.2 !important;
    letter-spacing: .13em !important;
  }

  /* Web hero layout */
  body.web-layout-safe .hero,
  body.web-layout-safe .home-hero,
  body.web-layout-safe .apple-hero,
  body.web-layout-safe .store-hero,
  body.web-layout-safe .apple-store-hero,
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .accessories-hero,
  body.web-layout-safe .trade-hero,
  body.web-layout-safe .sell-device-hero,
  body.web-layout-safe .repair-hero,
  body.web-layout-safe .support-hero,
  body.web-layout-safe .page-hero {
    width: min(100% - 72px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(42px, 5vw, 82px) !important;
    padding-bottom: clamp(20px, 2.8vw, 42px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.web-layout-safe .catalog-header > p,
  body.web-layout-safe .accessories-hero-copy .muted,
  body.web-layout-safe .trade-hero p,
  body.web-layout-safe .repair-hero p,
  body.web-layout-safe .support-hero p,
  body.web-layout-safe .page-hero p {
    max-width: 760px !important;
  }

  /* Web filters */
  body.web-layout-safe .category-filter-bar,
  body.web-layout-safe [data-category-filter-bar] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }

  body.web-layout-safe .category-filter {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.web-layout-safe .category-filter span {
    margin-left: 6px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: .74rem !important;
  }

  /* Web product catalogue grids */
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid,
  body.page-phones #storeGrid.product-grid,
  body.page-laptops #storeGrid.product-grid,
  body.page-consoles #storeGrid.product-grid,
  body.page-accessories #storeGrid.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.4vw, 20px) !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.page-phones #storeGrid > .product-card,
  body.page-laptops #storeGrid > .product-card,
  body.page-consoles #storeGrid > .product-card,
  body.page-accessories #storeGrid > .product-card,
  body.page-accessories #storeGrid > .accessory-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 0 !important;
    min-height: 100% !important;
  }

  body.page-phones #storeGrid .tag,
  body.page-laptops #storeGrid .tag,
  body.page-consoles #storeGrid .tag,
  body.page-accessories #storeGrid .tag {
    font-size: .66rem !important;
    line-height: 1 !important;
    padding: 6px 9px !important;
    margin: 0 0 9px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.page-phones #storeGrid .product-image-link,
  body.page-laptops #storeGrid .product-image-link,
  body.page-consoles #storeGrid .product-image-link,
  body.page-accessories #storeGrid .product-image-link {
    width: 100% !important;
    height: clamp(154px, 15vw, 222px) !important;
    min-height: 154px !important;
    max-height: 222px !important;
    border-radius: 20px !important;
    margin: 0 !important;
  }

  body.page-phones #storeGrid .product-image-link img,
  body.page-laptops #storeGrid .product-image-link img,
  body.page-consoles #storeGrid .product-image-link img,
  body.page-accessories #storeGrid .product-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
  }

  body.page-phones #storeGrid .product-card-body,
  body.page-laptops #storeGrid .product-card-body,
  body.page-consoles #storeGrid .product-card-body,
  body.page-accessories #storeGrid .product-card-body {
    padding: 12px 2px 10px !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  body.page-phones #storeGrid h3,
  body.page-laptops #storeGrid h3,
  body.page-consoles #storeGrid h3,
  body.page-accessories #storeGrid h3 {
    min-height: 2.36em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid p,
  body.page-laptops #storeGrid p,
  body.page-consoles #storeGrid p,
  body.page-accessories #storeGrid p {
    font-size: .82rem !important;
    line-height: 1.38 !important;
    min-height: 2.76em !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.page-phones #storeGrid .price-cta,
  body.page-laptops #storeGrid .price-cta,
  body.page-consoles #storeGrid .price-cta,
  body.page-accessories #storeGrid .price-cta,
  body.page-phones #storeGrid .primary-btn,
  body.page-laptops #storeGrid .primary-btn,
  body.page-consoles #storeGrid .primary-btn,
  body.page-accessories #storeGrid .primary-btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .86rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Store horizontal rows: controlled card widths */
  body.web-layout-safe .apple-store-row,
  body.web-layout-safe .store-product-row,
  body.web-layout-safe .horizontal-product-row,
  body.web-layout-safe .store-scroll-row {
    gap: 14px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body.web-layout-safe .apple-store-row > *,
  body.web-layout-safe .store-product-row > *,
  body.web-layout-safe .horizontal-product-row > *,
  body.web-layout-safe .store-scroll-row > * {
    min-width: clamp(230px, 21vw, 300px) !important;
    max-width: clamp(230px, 21vw, 300px) !important;
  }

  /* Forms/calculators on web */
  body.web-layout-safe form,
  body.web-layout-safe .smart-form,
  body.web-layout-safe .sell-device-form-card,
  body.web-layout-safe .trade-form-card,
  body.web-layout-safe .repair-form-card {
    max-width: 100% !important;
  }

  body.web-layout-safe .form-grid.two,
  body.web-layout-safe .trade-old-phone-grid,
  body.web-layout-safe .sell-device-form-grid,
  body.web-layout-safe .recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    align-items: start !important;
  }

  body.web-layout-safe label {
    font-size: .86rem !important;
    line-height: 1.2 !important;
    gap: 6px !important;
  }

  body.web-layout-safe input,
  body.web-layout-safe select,
  body.web-layout-safe textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
  }

  body.web-layout-safe textarea {
    min-height: 110px !important;
  }

  body.web-layout-safe small,
  body.web-layout-safe .field-hint {
    font-size: .76rem !important;
    line-height: 1.3 !important;
  }

  body.web-layout-safe .estimate-box,
  body.web-layout-safe .deduction-panel,
  body.web-layout-safe .trade-math-formula,
  body.web-layout-safe .trade-formula,
  body.web-layout-safe .policy-note,
  body.web-layout-safe .sell-device-result-card,
  body.web-layout-safe .sell-device-breakdown,
  body.web-layout-safe .sell-math-formula {
    padding: 14px !important;
    border-radius: 18px !important;
    max-width: 100% !important;
  }

  body.web-layout-safe .formula-main,
  body.web-layout-safe .formula-balance,
  body.web-layout-safe .sell-formula-main {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.web-layout-safe .formula-token,
  body.web-layout-safe .sell-formula-main span {
    font-size: .82rem !important;
    line-height: 1.2 !important;
    padding: 6px 10px !important;
    max-width: 100% !important;
  }

  /* Buttons and CTAs on web */
  body.web-layout-safe .primary-btn,
  body.web-layout-safe .secondary-btn,
  body.web-layout-safe .cta-button,
  body.web-layout-safe .price-cta,
  body.web-layout-safe button,
  body.web-layout-safe .form-actions a,
  body.web-layout-safe .form-actions button {
    min-height: 44px !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body.web-layout-safe .form-actions,
  body.web-layout-safe .sell-device-actions,
  body.web-layout-safe .mg-page-bottom-actions,
  body.web-layout-safe .accessories-bottom-actions {
    gap: 10px !important;
  }

  /* Bottom CTAs */
  body.web-layout-safe .mg-page-bottom-cta,
  body.web-layout-safe .accessories-bottom-cta {
    gap: 20px !important;
    padding: clamp(22px, 3vw, 34px) !important;
    border-radius: 30px !important;
  }

  /* Product detail page web layout */
  body.page-product main,
  body.page-product .product-detail,
  body.page-product .product-page,
  body.page-product #productDetail,
  body.page-product .product-main {
    width: min(100% - 72px, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-product .product-detail,
  body.page-product .product-page,
  body.page-product #productDetail {
    gap: clamp(24px, 4vw, 54px) !important;
    align-items: start !important;
  }

  body.page-product .product-title,
  body.page-product h1 {
    font-size: clamp(2.7rem, 5vw, 5.6rem) !important;
    line-height: .98 !important;
  }

  /* Search panel on web */
  body.web-layout-safe .mg-search-shell {
    width: min(820px, calc(100% - 72px)) !important;
    border-radius: 28px !important;
    max-height: 82dvh !important;
  }

  /* Footer icons/logos on web */
  body.web-layout-safe footer {
    overflow-x: hidden !important;
  }

  body.web-layout-safe footer .footer-social-icons,
  body.web-layout-safe footer .footer-socials,
  body.web-layout-safe footer .social-logo-grid,
  body.web-layout-safe footer .support-social-row,
  body.web-layout-safe footer .contact-social-row,
  body.web-layout-safe footer .social-icon-row,
  body.web-layout-safe footer .social-links,
  body.web-layout-safe footer .mg-footer-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: min(100%, 620px) !important;
    margin: 18px auto 12px !important;
  }

  body.web-layout-safe footer .footer-social-icons a,
  body.web-layout-safe footer .footer-socials a,
  body.web-layout-safe footer .social-logo-grid a,
  body.web-layout-safe footer .support-social-row a,
  body.web-layout-safe footer .contact-social-row a,
  body.web-layout-safe footer .social-icon-row a,
  body.web-layout-safe footer .social-links a,
  body.web-layout-safe footer .mg-footer-socials a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }

  body.web-layout-safe footer img[src*="assets/social/"],
  body.web-layout-safe footer .footer-social-icons img,
  body.web-layout-safe footer .footer-socials img,
  body.web-layout-safe footer .social-logo-grid img,
  body.web-layout-safe footer .support-social-row img,
  body.web-layout-safe footer .contact-social-row img,
  body.web-layout-safe footer .social-icon-row img,
  body.web-layout-safe footer .social-links img,
  body.web-layout-safe footer .mg-footer-socials img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    filter: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.web-layout-safe .mg-ui-fit-main > section,
  body.web-layout-safe .mg-ui-fit-main > div,
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .product-listing-section,
  body.web-layout-safe .accessories-product-section,
  body.web-layout-safe .trade-page-grid,
  body.web-layout-safe .sell-device-grid,
  body.web-layout-safe .repair-main > section,
  body.web-layout-safe .support-main > section,
  body.web-layout-safe .main-support > section,
  body.web-layout-safe .store-section,
  body.web-layout-safe .apple-store-section,
  body.web-layout-safe .store-row-section,
  body.web-layout-safe .help-choosing-section,
  body.web-layout-safe .mg-page-bottom-cta,
  body.web-layout-safe .accessories-bottom-cta,
  body.web-layout-safe .hero,
  body.web-layout-safe .home-hero,
  body.web-layout-safe .apple-hero,
  body.web-layout-safe .store-hero,
  body.web-layout-safe .apple-store-hero,
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .accessories-hero,
  body.web-layout-safe .trade-hero,
  body.web-layout-safe .sell-device-hero,
  body.web-layout-safe .repair-hero,
  body.web-layout-safe .support-hero,
  body.web-layout-safe .page-hero {
    width: min(100% - 44px, 1360px) !important;
  }
}

@media (min-width: 1181px) {
  body.page-phones #storeGrid,
  body.page-laptops #storeGrid,
  body.page-consoles #storeGrid,
  body.page-accessories #storeGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* V1.106 customer-centered human copy polish */

/*
  Copy direction:
  - make visitors feel guided, not pushed
  - keep messaging as support/confirmation, not the main headline
  - softer CTAs and calmer helper text
*/

.customer-copy-note {
  max-width: 720px !important;
  margin: 4px 0 0 !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: clamp(.92rem, 1vw, 1.03rem) !important;
  line-height: 1.5 !important;
}

.primary-btn,
.secondary-btn,
.cta-button,
.price-cta {
  letter-spacing: -.01em !important;
}

.price-cta,
.product-card .price-cta,
.product-card-v39 .price-cta,
.accessory-card .price-cta {
  font-weight: 850 !important;
}

@media (max-width: 760px) {
  .customer-copy-note {
    font-size: .84rem !important;
    line-height: 1.42 !important;
    margin-top: 2px !important;
  }
}


/* V1.107 typo audit + final layout safety pass */

/*
  Final safety pass:
  - checks visible copy/typos
  - keeps desktop and mobile spacing stable
  - prevents overflow
  - preserves v1.104 mobile and v1.105 web layout systems
*/

html,
body {
  max-width: 100% !important;
}

body.mobile-layout-safe,
body.web-layout-safe {
  overflow-x: hidden !important;
}

body.mobile-layout-safe main,
body.web-layout-safe main {
  width: 100% !important;
  max-width: 100% !important;
}

body.mobile-layout-safe img,
body.web-layout-safe img {
  max-width: 100% !important;
  height: auto;
}

body.mobile-layout-safe h1,
body.mobile-layout-safe h2,
body.mobile-layout-safe h3,
body.mobile-layout-safe p,
body.mobile-layout-safe a,
body.mobile-layout-safe button,
body.web-layout-safe h1,
body.web-layout-safe h2,
body.web-layout-safe h3,
body.web-layout-safe p,
body.web-layout-safe a,
body.web-layout-safe button {
  overflow-wrap: break-word !important;
}

@media (min-width: 761px) {
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .product-listing-section,
  body.web-layout-safe .accessories-product-section,
  body.web-layout-safe .store-section,
  body.web-layout-safe .apple-store-section,
  body.web-layout-safe .store-row-section,
  body.web-layout-safe .trade-page-grid,
  body.web-layout-safe .sell-device-grid,
  body.web-layout-safe .repair-main > section,
  body.web-layout-safe .support-main > section,
  body.web-layout-safe .mg-page-bottom-cta,
  body.web-layout-safe .accessories-bottom-cta {
    width: min(100% - 72px, 1360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.web-layout-safe .catalog-header,
  body.web-layout-safe .page-hero,
  body.web-layout-safe .hero,
  body.web-layout-safe .store-hero,
  body.web-layout-safe .apple-store-hero,
  body.web-layout-safe .trade-hero,
  body.web-layout-safe .repair-hero,
  body.web-layout-safe .support-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.web-layout-safe #storeGrid.product-grid {
    align-items: stretch !important;
  }

  body.web-layout-safe #storeGrid.product-grid > .product-card,
  body.web-layout-safe #storeGrid.product-grid > .accessory-card {
    min-width: 0 !important;
    height: 100% !important;
  }

  body.web-layout-safe .primary-btn,
  body.web-layout-safe .secondary-btn,
  body.web-layout-safe .cta-button,
  body.web-layout-safe .price-cta {
    white-space: normal !important;
  }

  body.web-layout-safe .smart-form,
  body.web-layout-safe .trade-form-card,
  body.web-layout-safe .repair-form-card,
  body.web-layout-safe .sell-device-form-card {
    min-width: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.web-layout-safe .catalog-header,
  body.web-layout-safe .product-listing-section,
  body.web-layout-safe .accessories-product-section,
  body.web-layout-safe .store-section,
  body.web-layout-safe .apple-store-section,
  body.web-layout-safe .store-row-section,
  body.web-layout-safe .trade-page-grid,
  body.web-layout-safe .sell-device-grid,
  body.web-layout-safe .repair-main > section,
  body.web-layout-safe .support-main > section,
  body.web-layout-safe .mg-page-bottom-cta,
  body.web-layout-safe .accessories-bottom-cta {
    width: min(100% - 44px, 1360px) !important;
  }
}

@media (max-width: 760px) {
  body.mobile-layout-safe .catalog-header,
  body.mobile-layout-safe .product-listing-section,
  body.mobile-layout-safe .accessories-product-section,
  body.mobile-layout-safe .store-section,
  body.mobile-layout-safe .apple-store-section,
  body.mobile-layout-safe .store-row-section,
  body.mobile-layout-safe .trade-page-grid,
  body.mobile-layout-safe .sell-device-grid,
  body.mobile-layout-safe .repair-main > section,
  body.mobile-layout-safe .support-main > section,
  body.mobile-layout-safe .mg-page-bottom-cta,
  body.mobile-layout-safe .accessories-bottom-cta,
  body.mobile-layout-safe .page-hero,
  body.mobile-layout-safe .hero,
  body.mobile-layout-safe .store-hero,
  body.mobile-layout-safe .apple-store-hero,
  body.mobile-layout-safe .trade-hero,
  body.mobile-layout-safe .repair-hero,
  body.mobile-layout-safe .support-hero {
    width: min(100% - 24px, 1360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.mobile-layout-safe .catalog-header,
  body.mobile-layout-safe .page-hero,
  body.mobile-layout-safe .hero,
  body.mobile-layout-safe .store-hero,
  body.mobile-layout-safe .apple-store-hero,
  body.mobile-layout-safe .trade-hero,
  body.mobile-layout-safe .repair-hero,
  body.mobile-layout-safe .support-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.mobile-layout-safe #storeGrid.product-grid,
  body.mobile-layout-safe #storeGrid {
    min-width: 0 !important;
  }

  body.mobile-layout-safe #storeGrid.product-grid > .product-card,
  body.mobile-layout-safe #storeGrid.product-grid > .accessory-card,
  body.mobile-layout-safe #storeGrid > .product-card,
  body.mobile-layout-safe #storeGrid > .accessory-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-layout-safe .primary-btn,
  body.mobile-layout-safe .secondary-btn,
  body.mobile-layout-safe .cta-button,
  body.mobile-layout-safe .price-cta {
    white-space: normal !important;
  }

  body.mobile-layout-safe input,
  body.mobile-layout-safe select,
  body.mobile-layout-safe textarea {
    min-width: 0 !important;
  }
}


/* V1.108 filter + sort system */

/*
  Product catalogue pages no longer show the old category ribbon.
  They now use a standard Filter & Sort control:
  - desktop: top-right of product area
  - mobile: compact sticky product toolbar above the grid
*/

body.has-filter-sort-system [data-category-filter-bar],
body.has-filter-sort-system .category-filter-bar,
body.has-filter-sort-system .accessories-filter-shell {
  display: none !important;
}

.mg-product-tools {
  width: min(100% - 72px, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  position: relative !important;
  z-index: 19 !important;
}

.mg-product-tools-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.mg-product-tools-title {
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  line-height: 1.2 !important;
}

.mg-product-tools-summary {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .84rem !important;
  line-height: 1.28 !important;
}

.mg-filter-sort-open {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 88%, transparent), var(--slick-card, rgba(255,255,255,.78))) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  box-shadow: var(--slick-shadow, 0 14px 38px rgba(18,13,34,.075)) !important;
  font: inherit !important;
  font-weight: 850 !important;
  font-size: .9rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.mg-filter-sort-open:hover,
.mg-filter-sort-open:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(252,101,1,.34) !important;
  box-shadow: var(--slick-shadow-hover, 0 22px 64px rgba(18,13,34,.12)) !important;
  outline: none !important;
}

.mg-filter-sort-open svg {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 auto !important;
  display: block !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

.mg-filter-sort-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9200 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

.mg-filter-sort-layer.is-open {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.mg-filter-sort-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(13, 8, 27, .22) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}

.mg-filter-sort-panel {
  position: absolute !important;
  right: max(24px, calc((100vw - 1360px) / 2)) !important;
  top: 86px !important;
  width: min(392px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - 112px) !important;
  overflow: auto !important;
  border-radius: 28px !important;
  padding: 16px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, #fff) 86%, transparent), var(--slick-card, rgba(255,255,255,.82))) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  box-shadow: 0 28px 90px rgba(18,13,34,.22) !important;
  transform: translateY(-10px) scale(.985) !important;
  opacity: 0 !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

.mg-filter-sort-layer.is-open .mg-filter-sort-panel {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.mg-filter-sort-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 2px 2px 14px !important;
  border-bottom: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
}

.mg-filter-sort-head h2 {
  margin: 0 !important;
  font-size: 1.22rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.mg-filter-sort-head p {
  margin: 4px 0 0 !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

.mg-filter-sort-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  background: var(--slick-soft, rgba(18,13,34,.045)) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.mg-filter-sort-group {
  display: grid !important;
  gap: 10px !important;
  padding-top: 16px !important;
}

.mg-filter-sort-label {
  margin: 0 !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
}

.mg-filter-options,
.mg-sort-options {
  display: grid !important;
  gap: 8px !important;
}

.mg-filter-option,
.mg-sort-option {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  background: transparent !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font: inherit !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.mg-filter-option span:last-child,
.mg-sort-option span:last-child {
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
}

.mg-filter-option.is-active,
.mg-sort-option.is-active {
  background: rgba(252,101,1,.10) !important;
  border-color: rgba(252,101,1,.34) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

.mg-filter-sort-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding-top: 16px !important;
}

.mg-filter-sort-reset,
.mg-filter-sort-apply {
  min-height: 42px !important;
  border-radius: 999px !important;
  font: inherit !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.mg-filter-sort-reset {
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  background: transparent !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
}

.mg-filter-sort-apply {
  border: 1px solid rgba(252,101,1,.34) !important;
  background: linear-gradient(135deg, #fc6501, #ffa569) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="dark"] .mg-filter-sort-open,
html[data-theme="dark"] .mg-filter-sort-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--slick-card-strong, rgba(22,13,54,.92)) 86%, transparent), var(--slick-card, rgba(22,13,54,.74))) !important;
  border-color: rgba(255,255,255,.13) !important;
}

html[data-theme="dark"] .mg-filter-sort-layer .mg-filter-sort-backdrop {
  background: rgba(4, 3, 12, .42) !important;
}

@media (max-width: 760px) {
  .mg-product-tools {
    width: min(100% - 24px, 1360px) !important;
    margin-bottom: 10px !important;
    padding: 8px 0 !important;
    position: sticky !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    background: color-mix(in srgb, var(--slick-bg, #f7f6f8) 74%, transparent) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    border-radius: 18px !important;
  }

  html[data-theme="dark"] .mg-product-tools {
    background: color-mix(in srgb, var(--slick-bg, #0b071c) 74%, transparent) !important;
  }

  .mg-product-tools-title {
    font-size: .9rem !important;
  }

  .mg-product-tools-summary {
    font-size: .74rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .mg-filter-sort-open {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .mg-filter-sort-open span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .mg-filter-sort-panel {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: min(82dvh, 680px) !important;
    border-radius: 28px 28px 0 0 !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(18px) !important;
  }

  .mg-filter-sort-layer.is-open .mg-filter-sort-panel {
    transform: translateY(0) !important;
  }

  .mg-filter-sort-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    padding-bottom: 2px !important;
  }
}


/* V1.109 filter sweep + catalogue pagination */

/*
  Clean sweep:
  - hidden legacy filter bars are rebuilt from real product cards
  - Filter & Sort panel now reads every real product family/type
  - catalogue pages get pagination when products exceed the standard page size
*/

.mg-pagination {
  width: min(100% - 72px, 1360px) !important;
  max-width: 1360px !important;
  margin: 18px auto 36px !important;
  display: none;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--slick-card, rgba(255,255,255,.76)) 74%, transparent) !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.085)) !important;
  box-shadow: none !important;
}

.mg-pagination.is-visible {
  display: flex !important;
}

.mg-pagination-info {
  min-width: 0 !important;
  color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  -webkit-text-fill-color: var(--slick-muted, var(--muted, rgba(18,13,34,.68))) !important;
  font-size: .88rem !important;
  line-height: 1.3 !important;
}

.mg-pagination-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mg-page-btn {
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--slick-border, rgba(18,13,34,.10)) !important;
  background: transparent !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: var(--slick-text, var(--text, #120d22)) !important;
  font: inherit !important;
  font-size: .84rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.mg-page-btn:hover,
.mg-page-btn:focus-visible {
  border-color: rgba(252,101,1,.34) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  outline: none !important;
}

.mg-page-btn.is-active {
  background: rgba(252,101,1,.12) !important;
  border-color: rgba(252,101,1,.38) !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

.mg-page-btn:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

html[data-theme="dark"] .mg-pagination {
  background: color-mix(in srgb, var(--slick-card, rgba(22,13,54,.72)) 74%, transparent) !important;
  border-color: rgba(255,255,255,.12) !important;
}

@media (max-width: 760px) {
  .mg-pagination {
    width: min(100% - 24px, 1360px) !important;
    margin: 14px auto 28px !important;
    display: none;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .mg-pagination.is-visible {
    display: flex !important;
  }

  .mg-pagination-info {
    font-size: .78rem !important;
    text-align: center !important;
  }

  .mg-pagination-controls {
    justify-content: center !important;
    gap: 6px !important;
  }

  .mg-page-btn {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: .76rem !important;
  }
}


/* V1.111 iPhone image refresh + consistent missing-image placeholder */

img[src*="assets/products/placeholders/image-needed.svg"] {
  background:
    radial-gradient(circle at 30% 15%, rgba(252, 101, 1, .10), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(246,242,251,.72)) !important;
  border-radius: inherit !important;
  object-fit: contain !important;
  padding: 10px !important;
}

.product-card img[src*="assets/products/placeholders/image-needed.svg"],
.product-card-v39 img[src*="assets/products/placeholders/image-needed.svg"],
.accessory-card img[src*="assets/products/placeholders/image-needed.svg"] {
  opacity: .98 !important;
}

.product-image-link:has(img[src*="assets/products/placeholders/image-needed.svg"]) {
  outline: 1px dashed rgba(252, 101, 1, .34) !important;
  outline-offset: -8px !important;
}


/* V1.112 fine tune: product photo fallback + catalogue image polish */
img[src*="assets/products/placeholders/image-needed.svg"] {
  padding: 0 !important;
  background: linear-gradient(135deg, #fff8f2, #f6f3fb 52%, #f8fbff) !important;
  box-shadow: inset 0 0 0 1px rgba(18, 13, 34, .07) !important;
}

.product-image-link:has(img[src*="assets/products/placeholders/image-needed.svg"]),
.store-feature-image:has(img[src*="assets/products/placeholders/image-needed.svg"]) {
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(252, 101, 1, .18) !important;
}

.product-card img[src*="assets/products/iphone/"],
.product-card-v39 img[src*="assets/products/iphone/"],
.store-feature-card img[src*="assets/products/iphone/"] {
  object-position: center center !important;
}

html[data-theme="dark"] img[src*="assets/products/placeholders/image-needed.svg"] {
  background: linear-gradient(135deg, rgba(255, 248, 242, .92), rgba(246, 243, 251, .9) 52%, rgba(248, 251, 255, .92)) !important;
}


/* V1.113 international UX guardrails */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(252, 101, 1, .72) !important;
  outline-offset: 3px !important;
}

:where(button, .primary-btn, .secondary-btn, .category-filter, .option, .header-icon-button, .mg-page-btn, .mg-filter-option, .mg-sort-option) {
  min-height: 44px;
}

:where(.product-card, .product-card-v39, .store-feature-card, .accessory-card) {
  -webkit-tap-highlight-color: rgba(252, 101, 1, .16);
  scroll-margin-top: 96px;
}

:where(.product-card, .product-card-v39, .store-feature-card, .accessory-card) h3,
:where(.product-card, .product-card-v39, .store-feature-card, .accessory-card) p,
:where(.price-cta, .cta-button, .primary-btn, .secondary-btn, .option, .category-filter, .mg-page-btn) {
  overflow-wrap: anywhere;
}

.top-nav a[aria-current="page"],
.mobile-drawer a[aria-current="page"] {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

.mg-filter-sort-is-open,
.mg-filter-sort-is-open body,
body.mg-search-open {
  overflow: hidden !important;
}

.mg-back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 80;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(252, 101, 1, .28);
  background: color-mix(in srgb, var(--slick-card, #fff) 86%, transparent);
  color: var(--orange, #fc6501);
  -webkit-text-fill-color: var(--orange, #fc6501);
  box-shadow: 0 18px 46px rgba(18, 13, 34, .14);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 950;
  cursor: pointer;
}

.mg-back-to-top[hidden] {
  display: none !important;
}

html[data-theme="dark"] .mg-back-to-top {
  background: color-mix(in srgb, var(--slick-card, rgba(22, 13, 54, .82)) 86%, transparent);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
}

@media (max-width: 760px) {
  :where(.primary-btn, .secondary-btn, .category-filter, .option, .mg-filter-sort-open, .mg-page-btn) {
    min-height: 46px !important;
  }

  .mg-back-to-top {
    right: max(14px, env(safe-area-inset-right, 0px) + 12px);
    bottom: max(74px, env(safe-area-inset-bottom, 0px) + 68px);
    width: 44px;
    height: 44px;
  }

  .product-card-v39 .price-cta,
  .product-card .price-cta {
    white-space: normal !important;
    line-height: 1.18 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V1.114 glass ribbon + unified CTA profile */
:root {
  --mg-glass-surface: rgba(255, 255, 255, .56);
  --mg-glass-surface-strong: rgba(255, 255, 255, .76);
  --mg-glass-border: rgba(255, 255, 255, .38);
  --mg-glass-border-active: rgba(252, 101, 1, .42);
  --mg-glass-shadow: 0 14px 34px rgba(18, 13, 34, .10);
  --mg-glass-shadow-active: 0 18px 46px rgba(252, 101, 1, .22);
  --mg-cta-bg: linear-gradient(135deg, rgba(255, 149, 72, .98), rgba(252, 101, 1, .98) 48%, rgba(226, 76, 0, .98));
  --mg-cta-bg-active: linear-gradient(135deg, rgba(255, 164, 92, .98), rgba(252, 101, 1, .98) 46%, rgba(197, 63, 0, .98));
  --mg-cta-border: rgba(255, 255, 255, .34);
}

html[data-theme="dark"] {
  --mg-glass-surface: rgba(31, 22, 58, .58);
  --mg-glass-surface-strong: rgba(43, 31, 78, .78);
  --mg-glass-border: rgba(255, 255, 255, .16);
  --mg-glass-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

.top-nav {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mg-glass-surface-strong) 84%, transparent), color-mix(in srgb, var(--mg-glass-surface) 76%, transparent)),
    radial-gradient(circle at 18% 0%, rgba(252, 101, 1, .12), transparent 36%) !important;
  border-bottom: 1px solid var(--mg-glass-border) !important;
  box-shadow: 0 12px 36px rgba(18, 13, 34, .08) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
}

.top-nav .nav-inner {
  gap: clamp(8px, 1.7vw, 20px) !important;
}

.top-nav a:not(.logo-mark),
.top-nav button,
.mobile-drawer a,
.header-icon-button,
.menu-icon-button,
.mode-icon-button,
.search-icon-button,
.whatsapp-icon-button,
.theme-toggle,
.mode-toggle,
.search-toggle,
.whatsapp-toggle {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: currentColor !important;
  background: color-mix(in srgb, var(--mg-glass-surface) 62%, transparent) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.top-nav a:not(.logo-mark) {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
}

.top-nav .mega-menu a,
.top-nav .mega-panel a,
.top-nav .mega-dropdown a,
.top-nav .nav-dropdown a,
.top-nav .dropdown-panel a,
.top-nav .dropdown-menu a {
  min-height: 38px !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

.top-nav a:not(.logo-mark)::before,
.top-nav button::before,
.mobile-drawer a::before,
.header-icon-button::before,
.menu-icon-button::before,
.mode-icon-button::before,
.search-icon-button::before,
.whatsapp-icon-button::before,
.theme-toggle::before,
.mode-toggle::before,
.search-toggle::before,
.whatsapp-toggle::before,
.primary-btn::before,
.secondary-btn::before,
.cta-button::before,
.price-cta::before,
.store-section-link::before,
.mg-filter-sort-open::before,
.mg-filter-option::before,
.mg-sort-option::before,
.mg-page-btn::before,
#checkoutBtn::before,
#sendTradeBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .42), transparent 40%),
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .55), transparent 34%),
    radial-gradient(circle at 72% 100%, rgba(252, 101, 1, .22), transparent 38%);
  opacity: 0;
  transition: opacity .18s ease !important;
}

.top-nav a:not(.logo-mark):hover,
.top-nav a:not(.logo-mark):focus-visible,
.top-nav a:not(.logo-mark):active,
.top-nav a:not(.logo-mark).mg-glass-press,
.top-nav button:hover,
.top-nav button:focus-visible,
.top-nav button:active,
.top-nav button.mg-glass-press,
.mobile-drawer a:hover,
.mobile-drawer a:focus-visible,
.mobile-drawer a:active,
.mobile-drawer a.mg-glass-press,
.header-icon-button:hover,
.header-icon-button:focus-visible,
.header-icon-button:active,
.header-icon-button.mg-glass-press,
.menu-icon-button:hover,
.menu-icon-button:focus-visible,
.menu-icon-button:active,
.menu-icon-button.mg-glass-press,
.mode-icon-button:hover,
.mode-icon-button:focus-visible,
.mode-icon-button:active,
.mode-icon-button.mg-glass-press,
.search-icon-button:hover,
.search-icon-button:focus-visible,
.search-icon-button:active,
.search-icon-button.mg-glass-press,
.whatsapp-icon-button:hover,
.whatsapp-icon-button:focus-visible,
.whatsapp-icon-button:active,
.whatsapp-icon-button.mg-glass-press,
.theme-toggle:hover,
.theme-toggle:focus-visible,
.theme-toggle:active,
.theme-toggle.mg-glass-press,
.mode-toggle:hover,
.mode-toggle:focus-visible,
.mode-toggle:active,
.mode-toggle.mg-glass-press,
.search-toggle:hover,
.search-toggle:focus-visible,
.search-toggle:active,
.search-toggle.mg-glass-press,
.whatsapp-toggle:hover,
.whatsapp-toggle:focus-visible,
.whatsapp-toggle:active,
.whatsapp-toggle.mg-glass-press {
  color: var(--slick-orange, #fc6501) !important;
  -webkit-text-fill-color: var(--slick-orange, #fc6501) !important;
  background: var(--mg-glass-surface-strong) !important;
  border-color: var(--mg-glass-border-active) !important;
  box-shadow: var(--mg-glass-shadow) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

.top-nav a:not(.logo-mark):active,
.top-nav a:not(.logo-mark).mg-glass-press,
.top-nav button:active,
.top-nav button.mg-glass-press,
.mobile-drawer a:active,
.mobile-drawer a.mg-glass-press,
.header-icon-button:active,
.header-icon-button.mg-glass-press,
.menu-icon-button:active,
.menu-icon-button.mg-glass-press,
.mode-icon-button:active,
.mode-icon-button.mg-glass-press,
.search-icon-button:active,
.search-icon-button.mg-glass-press,
.whatsapp-icon-button:active,
.whatsapp-icon-button.mg-glass-press,
.theme-toggle:active,
.theme-toggle.mg-glass-press,
.mode-toggle:active,
.mode-toggle.mg-glass-press,
.search-toggle:active,
.search-toggle.mg-glass-press,
.whatsapp-toggle:active,
.whatsapp-toggle.mg-glass-press {
  transform: translateY(0) scale(.985) !important;
  box-shadow: inset 0 2px 10px rgba(18, 13, 34, .10), 0 10px 26px rgba(252, 101, 1, .16) !important;
}

.top-nav a:not(.logo-mark):hover::before,
.top-nav a:not(.logo-mark):focus-visible::before,
.top-nav a:not(.logo-mark):active::before,
.top-nav a:not(.logo-mark).mg-glass-press::before,
.top-nav button:hover::before,
.top-nav button:focus-visible::before,
.top-nav button:active::before,
.top-nav button.mg-glass-press::before,
.mobile-drawer a:hover::before,
.mobile-drawer a:focus-visible::before,
.mobile-drawer a:active::before,
.mobile-drawer a.mg-glass-press::before,
.header-icon-button:hover::before,
.header-icon-button:focus-visible::before,
.header-icon-button:active::before,
.header-icon-button.mg-glass-press::before,
.menu-icon-button:hover::before,
.menu-icon-button:focus-visible::before,
.menu-icon-button:active::before,
.menu-icon-button.mg-glass-press::before,
.mode-icon-button:hover::before,
.mode-icon-button:focus-visible::before,
.mode-icon-button:active::before,
.mode-icon-button.mg-glass-press::before,
.search-icon-button:hover::before,
.search-icon-button:focus-visible::before,
.search-icon-button:active::before,
.search-icon-button.mg-glass-press::before,
.whatsapp-icon-button:hover::before,
.whatsapp-icon-button:focus-visible::before,
.whatsapp-icon-button:active::before,
.whatsapp-icon-button.mg-glass-press::before,
.theme-toggle:hover::before,
.theme-toggle:focus-visible::before,
.theme-toggle:active::before,
.theme-toggle.mg-glass-press::before,
.mode-toggle:hover::before,
.mode-toggle:focus-visible::before,
.mode-toggle:active::before,
.mode-toggle.mg-glass-press::before,
.search-toggle:hover::before,
.search-toggle:focus-visible::before,
.search-toggle:active::before,
.search-toggle.mg-glass-press::before,
.whatsapp-toggle:hover::before,
.whatsapp-toggle:focus-visible::before,
.whatsapp-toggle:active::before,
.whatsapp-toggle.mg-glass-press::before,
.primary-btn:hover::before,
.primary-btn:focus-visible::before,
.primary-btn:active::before,
.primary-btn.mg-glass-press::before,
.secondary-btn:hover::before,
.secondary-btn:focus-visible::before,
.secondary-btn:active::before,
.secondary-btn.mg-glass-press::before,
.cta-button:hover::before,
.cta-button:focus-visible::before,
.cta-button:active::before,
.cta-button.mg-glass-press::before,
.price-cta:hover::before,
.price-cta:focus-visible::before,
.price-cta:active::before,
.price-cta.mg-glass-press::before,
.store-section-link:hover::before,
.store-section-link:focus-visible::before,
.store-section-link:active::before,
.store-section-link.mg-glass-press::before,
.mg-filter-sort-open:hover::before,
.mg-filter-sort-open:focus-visible::before,
.mg-filter-sort-open:active::before,
.mg-filter-sort-open.mg-glass-press::before,
.mg-filter-option:hover::before,
.mg-filter-option:focus-visible::before,
.mg-filter-option:active::before,
.mg-filter-option.mg-glass-press::before,
.mg-sort-option:hover::before,
.mg-sort-option:focus-visible::before,
.mg-sort-option:active::before,
.mg-sort-option.mg-glass-press::before,
.mg-page-btn:hover::before,
.mg-page-btn:focus-visible::before,
.mg-page-btn:active::before,
.mg-page-btn.mg-glass-press::before,
#checkoutBtn:hover::before,
#checkoutBtn:focus-visible::before,
#checkoutBtn:active::before,
#checkoutBtn.mg-glass-press::before,
#sendTradeBtn:hover::before,
#sendTradeBtn:focus-visible::before,
#sendTradeBtn:active::before,
#sendTradeBtn.mg-glass-press::before {
  opacity: 1;
}

.top-nav a[aria-current="page"]:not(.logo-mark),
.mobile-drawer a[aria-current="page"] {
  color: var(--slick-orange, #fc6501) !important;
  -webkit-text-fill-color: var(--slick-orange, #fc6501) !important;
  background: color-mix(in srgb, var(--mg-glass-surface-strong) 74%, transparent) !important;
  border-color: rgba(252, 101, 1, .28) !important;
}

.primary-btn,
button.primary-btn,
a.primary-btn,
.cta-button,
.price-cta,
.global-search-submit,
.repair-submit-btn,
.help-choosing-section .help-choosing-link,
#checkoutBtn,
#sendTradeBtn,
.purchase-summary-card .primary-btn,
.summary-action-stack .primary-btn,
.form-actions .primary-btn,
.sell-device-actions .primary-btn,
a[href*="wa.me"].primary-btn,
a[href*="wa.link"].primary-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mg-cta-border) !important;
  background: var(--mg-cta-bg) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--mg-glass-shadow-active) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18) !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease !important;
}

.primary-btn:hover,
.primary-btn:focus-visible,
.primary-btn:active,
.primary-btn.mg-glass-press,
button.primary-btn:hover,
button.primary-btn:focus-visible,
button.primary-btn:active,
a.primary-btn:hover,
a.primary-btn:focus-visible,
a.primary-btn:active,
.cta-button:hover,
.cta-button:focus-visible,
.cta-button:active,
.cta-button.mg-glass-press,
.price-cta:hover,
.price-cta:focus-visible,
.price-cta:active,
.price-cta.mg-glass-press,
.global-search-submit:hover,
.global-search-submit:focus-visible,
.repair-submit-btn:hover,
.repair-submit-btn:focus-visible,
#checkoutBtn:hover,
#checkoutBtn:focus-visible,
#checkoutBtn:active,
#checkoutBtn.mg-glass-press,
#sendTradeBtn:hover,
#sendTradeBtn:focus-visible,
#sendTradeBtn:active,
#sendTradeBtn.mg-glass-press {
  background: var(--mg-cta-bg-active) !important;
  border-color: rgba(255, 255, 255, .52) !important;
  box-shadow: 0 20px 52px rgba(252, 101, 1, .28), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  filter: saturate(1.08) brightness(1.02) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px) scale(1.015) !important;
}

.primary-btn:active,
.primary-btn.mg-glass-press,
button.primary-btn:active,
a.primary-btn:active,
.cta-button:active,
.cta-button.mg-glass-press,
.price-cta:active,
.price-cta.mg-glass-press,
#checkoutBtn:active,
#checkoutBtn.mg-glass-press,
#sendTradeBtn:active,
#sendTradeBtn.mg-glass-press {
  transform: translateY(0) scale(.985) !important;
  box-shadow: inset 0 2px 12px rgba(83, 24, 0, .24), 0 12px 28px rgba(252, 101, 1, .24) !important;
}

.secondary-btn,
button.secondary-btn,
a.secondary-btn,
.store-section-link,
.mg-filter-sort-open,
.mg-filter-option,
.mg-sort-option,
.mg-page-btn,
#backToCatalogBtn,
#resetTradeBtn,
.form-actions .secondary-btn,
.sell-device-actions .secondary-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mg-glass-border) !important;
  background: color-mix(in srgb, var(--mg-glass-surface) 74%, transparent) !important;
  color: var(--slick-text, var(--text, #120d22)) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  transform: translateY(0) scale(1) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}

.secondary-btn:hover,
.secondary-btn:focus-visible,
.secondary-btn:active,
.secondary-btn.mg-glass-press,
button.secondary-btn:hover,
button.secondary-btn:focus-visible,
button.secondary-btn:active,
a.secondary-btn:hover,
a.secondary-btn:focus-visible,
a.secondary-btn:active,
.store-section-link:hover,
.store-section-link:focus-visible,
.store-section-link:active,
.store-section-link.mg-glass-press,
.mg-filter-sort-open:hover,
.mg-filter-sort-open:focus-visible,
.mg-filter-sort-open:active,
.mg-filter-sort-open.mg-glass-press,
.mg-filter-option:hover,
.mg-filter-option:focus-visible,
.mg-filter-option:active,
.mg-filter-option.mg-glass-press,
.mg-sort-option:hover,
.mg-sort-option:focus-visible,
.mg-sort-option:active,
.mg-sort-option.mg-glass-press,
.mg-page-btn:hover,
.mg-page-btn:focus-visible,
.mg-page-btn:active,
.mg-page-btn.mg-glass-press,
#backToCatalogBtn:hover,
#backToCatalogBtn:focus-visible,
#resetTradeBtn:hover,
#resetTradeBtn:focus-visible {
  background: var(--mg-glass-surface-strong) !important;
  border-color: var(--mg-glass-border-active) !important;
  color: var(--slick-orange, #fc6501) !important;
  -webkit-text-fill-color: var(--slick-orange, #fc6501) !important;
  box-shadow: var(--mg-glass-shadow) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

.secondary-btn:active,
.secondary-btn.mg-glass-press,
button.secondary-btn:active,
a.secondary-btn:active,
.store-section-link:active,
.store-section-link.mg-glass-press,
.mg-filter-sort-open:active,
.mg-filter-sort-open.mg-glass-press,
.mg-filter-option:active,
.mg-filter-option.mg-glass-press,
.mg-sort-option:active,
.mg-sort-option.mg-glass-press,
.mg-page-btn:active,
.mg-page-btn.mg-glass-press {
  transform: translateY(0) scale(.985) !important;
  box-shadow: inset 0 2px 10px rgba(18, 13, 34, .10), 0 10px 26px rgba(252, 101, 1, .14) !important;
}

.product-card:hover .price-cta,
.product-card-v39:hover .price-cta,
.product-card:hover .cta-button,
.product-card-v39:hover .cta-button,
.interactive-card:hover .price-cta,
.interactive-card:hover .cta-button {
  background: var(--mg-cta-bg-active) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(252, 101, 1, .24), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

@media (max-width: 760px) {
  .top-nav a:not(.logo-mark),
  .top-nav button,
  .mobile-drawer a,
  .primary-btn,
  .secondary-btn,
  .cta-button,
  .price-cta,
  .mg-filter-sort-open,
  .mg-filter-option,
  .mg-sort-option,
  .mg-page-btn {
    min-height: 46px !important;
  }

  .top-nav a:not(.logo-mark) {
    padding: 10px 12px !important;
  }

  .primary-btn,
  .secondary-btn,
  .cta-button,
  .price-cta,
  #checkoutBtn,
  #sendTradeBtn {
    width: auto;
    max-width: 100% !important;
    white-space: normal !important;
  }
}


/* V1.115 light/dark writing consistency */
:root {
  --mg-mode-text: #120d22;
  --mg-mode-heading: #120d22;
  --mg-mode-muted: rgba(18, 13, 34, .70);
  --mg-mode-soft: rgba(18, 13, 34, .58);
  --mg-mode-label: rgba(18, 13, 34, .78);
  --mg-mode-field-bg: rgba(255, 255, 255, .72);
  --mg-mode-field-border: rgba(18, 13, 34, .12);
}

html[data-theme="dark"] {
  --mg-mode-text: #fbf8ff;
  --mg-mode-heading: #ffffff;
  --mg-mode-muted: rgba(251, 248, 255, .74);
  --mg-mode-soft: rgba(251, 248, 255, .62);
  --mg-mode-label: rgba(251, 248, 255, .82);
  --mg-mode-field-bg: rgba(255, 255, 255, .075);
  --mg-mode-field-border: rgba(255, 255, 255, .15);
}

body,
.mg-ui-fit-body,
.mobile-layout-safe,
.web-layout-safe {
  color: var(--mg-mode-text) !important;
}

:where(main, footer, .page-hero, .section, .page-title, .product-page-wrap, .form-page, .mobile-drawer, .mg-search-shell, .global-search-box, .mg-filter-sort-panel) {
  color: var(--mg-mode-text) !important;
}

:where(main, footer, .mobile-drawer, .mg-search-shell, .global-search-box, .mg-filter-sort-panel)
  :where(h1, h2, h3, h4, h5, h6, strong, legend, .headline, .page-heading, .section-title, .product-title, .summary-total, .summary-value, .store-section-title, .support-section-title, .repair-section-title, .trade-section-title) {
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
}

:where(.product-card, .product-card-v39, .store-feature-card, .category-card, .service-card, .support-card, .support-help-card, .support-policy-card, .support-contact-card, .repair-type-card, .repair-form-card, .repair-guide-card, .repair-note-card, .trade-form-card, .trade-info-card, .trade-upgrade-section, .sell-device-card, .form-card, .product-panel, .purchase-summary-card, .estimate-box, .deduction-panel, .policy-note, .info-steps > div, .trade-formula, .mg-pagination, .mg-product-tools) {
  color: var(--mg-mode-text) !important;
}

:where(.product-card, .product-card-v39, .store-feature-card, .category-card, .service-card, .support-card, .support-help-card, .support-policy-card, .support-contact-card, .repair-type-card, .repair-form-card, .repair-guide-card, .repair-note-card, .trade-form-card, .trade-info-card, .trade-upgrade-section, .sell-device-card, .form-card, .product-panel, .purchase-summary-card)
  :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
}

:where(.page-title p, .section-heading p, .ad-copy p:not(.eyebrow), .product-card p, .product-card-v39 p, .store-feature-card p, .category-card p, .service-card p, .support-card p, .support-help-card p, .support-policy-card p, .support-contact-card p, .repair-type-card p, .repair-form-card p, .repair-guide-card p, .repair-note-card p, .trade-form-card p, .trade-info-card p, .trade-upgrade-section p, .sell-device-card p, .product-panel p, .purchase-summary-card p, .summary-line, .summary-meta, .field-hint, .form-hint, .mg-filter-sort-summary, .mg-pagination-info, .global-search-empty, .global-search-result span, .mg-search-result span, .mg-search-quick span, .contact-link-list span, .support-social-row span, .footer, .footer p, .muted) {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}

:where(label, .form-label, .field-label, .option-label, .summary-label, .mg-filter-sort-title, .mg-filter-sort-section-title) {
  color: var(--mg-mode-label) !important;
  -webkit-text-fill-color: var(--mg-mode-label) !important;
}

:where(input, select, textarea, .global-search-input, .mg-search-input) {
  background: var(--mg-mode-field-bg) !important;
  border-color: var(--mg-mode-field-border) !important;
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
  caret-color: var(--orange, #fc6501) !important;
}

:where(input, textarea, .global-search-input, .mg-search-input)::placeholder {
  color: var(--mg-mode-soft) !important;
  -webkit-text-fill-color: var(--mg-mode-soft) !important;
  opacity: 1 !important;
}

:where(select option) {
  color: #171124 !important;
  -webkit-text-fill-color: #171124 !important;
  background: #ffffff !important;
}

:where(.eyebrow, .kicker, .store-card-kicker, .product-kicker, .card-kicker, .tag, .price, .orange-text, .formula-positive, .formula-result, .mg-back-to-top, .top-nav a[aria-current="page"]:not(.logo-mark), .mobile-drawer a[aria-current="page"]) {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

:where(.primary-btn, button.primary-btn, a.primary-btn, .cta-button, .price-cta, .global-search-submit, .repair-submit-btn, #checkoutBtn, #sendTradeBtn, .purchase-summary-card .primary-btn, .summary-action-stack .primary-btn, .form-actions .primary-btn, .sell-device-actions .primary-btn) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(.primary-btn, .secondary-btn, .cta-button, .price-cta, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn, .top-nav a, .top-nav button, .mobile-drawer a) :where(span, strong, b, small) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

:where(.secondary-btn, button.secondary-btn, a.secondary-btn, .store-section-link, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn, #backToCatalogBtn, #resetTradeBtn, .form-actions .secondary-btn, .sell-device-actions .secondary-btn) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

:where(.secondary-btn:hover, .secondary-btn:focus-visible, .secondary-btn:active, .secondary-btn.mg-glass-press, .store-section-link:hover, .store-section-link:focus-visible, .store-section-link:active, .store-section-link.mg-glass-press, .mg-filter-sort-open:hover, .mg-filter-sort-open:focus-visible, .mg-filter-sort-open:active, .mg-filter-sort-open.mg-glass-press, .mg-filter-option:hover, .mg-filter-option:focus-visible, .mg-filter-option:active, .mg-filter-option.mg-glass-press, .mg-sort-option:hover, .mg-sort-option:focus-visible, .mg-sort-option:active, .mg-sort-option.mg-glass-press, .mg-page-btn:hover, .mg-page-btn:focus-visible, .mg-page-btn:active, .mg-page-btn.mg-glass-press) {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}

html[data-theme="dark"] :where(.primary-btn, button.primary-btn, a.primary-btn, .cta-button, .price-cta, .global-search-submit, .repair-submit-btn, #checkoutBtn, #sendTradeBtn) {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28) !important;
}


/* V1.116 light mode text visibility + full contrast safety pass */
:root, html[data-theme="light"] {
  --mg-readable-text:#120d22; --mg-readable-heading:#110933; --mg-readable-muted:#4d4564; --mg-readable-soft:#655d78; --mg-readable-border:rgba(18,13,34,.12);
  --slick-text:#120d22; --slick-heading:#110933; --slick-muted:#4d4564; --text:#120d22; --muted:#4d4564; --heading:#110933;
}
html[data-theme="dark"] { --mg-readable-text:#f8f5ff; --mg-readable-heading:#fff; --mg-readable-muted:rgba(255,255,255,.76); --mg-readable-soft:rgba(255,255,255,.66); --mg-readable-border:rgba(255,255,255,.14); }
html:not([data-theme="dark"]) body, html[data-theme="light"] body { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text); }
html:not([data-theme="dark"]) h1, html:not([data-theme="dark"]) h2, html:not([data-theme="dark"]) h3, html:not([data-theme="dark"]) h4, html:not([data-theme="dark"]) h5, html:not([data-theme="dark"]) h6,
html:not([data-theme="dark"]) .hero h1, html:not([data-theme="dark"]) .page-hero h1, html:not([data-theme="dark"]) .catalog-header h1, html:not([data-theme="dark"]) .product-title,
html:not([data-theme="dark"]) .section-heading h2, html:not([data-theme="dark"]) .mg-product-tools-title, html:not([data-theme="dark"]) .mg-filter-sort-head h2, html:not([data-theme="dark"]) .mg-page-bottom-cta h2,
html:not([data-theme="dark"]) .accessories-bottom-cta h2, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5,
html[data-theme="light"] h6, html[data-theme="light"] .hero h1, html[data-theme="light"] .page-hero h1, html[data-theme="light"] .catalog-header h1, html[data-theme="light"] .product-title,
html[data-theme="light"] .section-heading h2, html[data-theme="light"] .mg-product-tools-title, html[data-theme="light"] .mg-filter-sort-head h2, html[data-theme="light"] .mg-page-bottom-cta h2,
html[data-theme="light"] .accessories-bottom-cta h2 { color:var(--mg-readable-heading)!important; -webkit-text-fill-color:var(--mg-readable-heading)!important; }
html:not([data-theme="dark"]) p, html:not([data-theme="dark"]) li, html:not([data-theme="dark"]) span, html:not([data-theme="dark"]) small, html:not([data-theme="dark"]) label, html:not([data-theme="dark"]) legend,
html:not([data-theme="dark"]) .muted, html:not([data-theme="dark"]) .customer-copy-note, html:not([data-theme="dark"]) .product-card p, html:not([data-theme="dark"]) .product-card-body p,
html:not([data-theme="dark"]) .product-meta, html:not([data-theme="dark"]) .field-hint, html:not([data-theme="dark"]) .mg-product-tools-summary, html:not([data-theme="dark"]) .mg-filter-sort-head p,
html:not([data-theme="dark"]) .mg-pagination-info, html:not([data-theme="dark"]) .support-card p, html:not([data-theme="dark"]) .repair-card p, html:not([data-theme="dark"]) .trade-info-card p,
html:not([data-theme="dark"]) .sell-device-card p, html[data-theme="light"] p, html[data-theme="light"] li, html[data-theme="light"] span, html[data-theme="light"] small, html[data-theme="light"] label,
html[data-theme="light"] legend, html[data-theme="light"] .muted, html[data-theme="light"] .customer-copy-note, html[data-theme="light"] .product-card p, html[data-theme="light"] .product-card-body p,
html[data-theme="light"] .product-meta, html[data-theme="light"] .field-hint, html[data-theme="light"] .mg-product-tools-summary, html[data-theme="light"] .mg-filter-sort-head p, html[data-theme="light"] .mg-pagination-info,
html[data-theme="light"] .support-card p, html[data-theme="light"] .repair-card p, html[data-theme="light"] .trade-info-card p, html[data-theme="light"] .sell-device-card p { color:var(--mg-readable-muted)!important; -webkit-text-fill-color:var(--mg-readable-muted)!important; }
html:not([data-theme="dark"]) strong, html:not([data-theme="dark"]) b, html:not([data-theme="dark"]) .price, html:not([data-theme="dark"]) .product-card h3, html:not([data-theme="dark"]) .product-card-v39 h3,
html:not([data-theme="dark"]) .accessory-card h3, html:not([data-theme="dark"]) .card-title, html:not([data-theme="dark"]) .option-title, html:not([data-theme="dark"]) .summary-title,
html[data-theme="light"] strong, html[data-theme="light"] b, html[data-theme="light"] .price, html[data-theme="light"] .product-card h3, html[data-theme="light"] .product-card-v39 h3,
html[data-theme="light"] .accessory-card h3, html[data-theme="light"] .card-title, html[data-theme="light"] .option-title, html[data-theme="light"] .summary-title { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) header a, html:not([data-theme="dark"]) nav a, html:not([data-theme="dark"]) .nav-link, html:not([data-theme="dark"]) .mobile-drawer a, html:not([data-theme="dark"]) #mobileDrawer a,
html:not([data-theme="dark"]) .drawer-menu a, html:not([data-theme="dark"]) .mobile-menu a, html[data-theme="light"] header a, html[data-theme="light"] nav a, html[data-theme="light"] .nav-link,
html[data-theme="light"] .mobile-drawer a, html[data-theme="light"] #mobileDrawer a, html[data-theme="light"] .drawer-menu a, html[data-theme="light"] .mobile-menu a { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) input, html:not([data-theme="dark"]) select, html:not([data-theme="dark"]) textarea, html:not([data-theme="dark"]) option,
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea, html[data-theme="light"] option { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; caret-color:var(--orange,#fc6501)!important; background-color:rgba(255,255,255,.92)!important; border-color:var(--mg-readable-border)!important; }
html:not([data-theme="dark"]) input::placeholder, html:not([data-theme="dark"]) textarea::placeholder, html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color:#716983!important; -webkit-text-fill-color:#716983!important; opacity:1!important; }
html:not([data-theme="dark"]) .mg-filter-sort-open, html:not([data-theme="dark"]) .mg-filter-option, html:not([data-theme="dark"]) .mg-sort-option, html:not([data-theme="dark"]) .mg-filter-sort-reset,
html:not([data-theme="dark"]) .mg-page-btn, html[data-theme="light"] .mg-filter-sort-open, html[data-theme="light"] .mg-filter-option, html[data-theme="light"] .mg-sort-option,
html[data-theme="light"] .mg-filter-sort-reset, html[data-theme="light"] .mg-page-btn { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) .mg-filter-option span:last-child, html:not([data-theme="dark"]) .mg-sort-option span:last-child, html[data-theme="light"] .mg-filter-option span:last-child, html[data-theme="light"] .mg-sort-option span:last-child { color:var(--mg-readable-soft)!important; -webkit-text-fill-color:var(--mg-readable-soft)!important; }
html:not([data-theme="dark"]) .mg-filter-option.is-active, html:not([data-theme="dark"]) .mg-sort-option.is-active, html:not([data-theme="dark"]) .mg-page-btn.is-active,
html[data-theme="light"] .mg-filter-option.is-active, html[data-theme="light"] .mg-sort-option.is-active, html[data-theme="light"] .mg-page-btn.is-active { color:var(--orange,#fc6501)!important; -webkit-text-fill-color:var(--orange,#fc6501)!important; }
html:not([data-theme="dark"]) .mg-search-shell, html:not([data-theme="dark"]) .mg-search-shell *, html:not([data-theme="dark"]) .mg-search-result, html:not([data-theme="dark"]) .mg-search-result *,
html[data-theme="light"] .mg-search-shell, html[data-theme="light"] .mg-search-shell *, html[data-theme="light"] .mg-search-result, html[data-theme="light"] .mg-search-result * { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) .mg-search-muted, html:not([data-theme="dark"]) .mg-search-result p, html[data-theme="light"] .mg-search-muted, html[data-theme="light"] .mg-search-result p { color:var(--mg-readable-muted)!important; -webkit-text-fill-color:var(--mg-readable-muted)!important; }
html:not([data-theme="dark"]) footer, html:not([data-theme="dark"]) footer p, html:not([data-theme="dark"]) footer a, html:not([data-theme="dark"]) .site-footer, html:not([data-theme="dark"]) .site-footer *,
html[data-theme="light"] footer, html[data-theme="light"] footer p, html[data-theme="light"] footer a, html[data-theme="light"] .site-footer, html[data-theme="light"] .site-footer * { color:var(--mg-readable-muted)!important; -webkit-text-fill-color:var(--mg-readable-muted)!important; }
html:not([data-theme="dark"]) footer strong, html:not([data-theme="dark"]) footer h2, html:not([data-theme="dark"]) footer h3, html[data-theme="light"] footer strong, html[data-theme="light"] footer h2, html[data-theme="light"] footer h3 { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) .primary-btn, html:not([data-theme="dark"]) .price-cta, html:not([data-theme="dark"]) .cta-button, html:not([data-theme="dark"]) .mg-filter-sort-apply,
html:not([data-theme="dark"]) button.primary-btn, html:not([data-theme="dark"]) a.primary-btn, html:not([data-theme="dark"]) a.price-cta, html:not([data-theme="dark"]) a.cta-button,
html[data-theme="light"] .primary-btn, html[data-theme="light"] .price-cta, html[data-theme="light"] .cta-button, html[data-theme="light"] .mg-filter-sort-apply,
html[data-theme="light"] button.primary-btn, html[data-theme="light"] a.primary-btn, html[data-theme="light"] a.price-cta, html[data-theme="light"] a.cta-button { color:#fff!important; -webkit-text-fill-color:#fff!important; }
html:not([data-theme="dark"]) .secondary-btn, html:not([data-theme="dark"]) .ghost-btn, html:not([data-theme="dark"]) button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply),
html[data-theme="light"] .secondary-btn, html[data-theme="light"] .ghost-btn, html[data-theme="light"] button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply) { color:var(--mg-readable-text)!important; -webkit-text-fill-color:var(--mg-readable-text)!important; }
html:not([data-theme="dark"]) .tag, html:not([data-theme="dark"]) .badge, html:not([data-theme="dark"]) .pill, html:not([data-theme="dark"]) .eyebrow, html:not([data-theme="dark"]) .mg-filter-sort-label,
html[data-theme="light"] .tag, html[data-theme="light"] .badge, html[data-theme="light"] .pill, html[data-theme="light"] .eyebrow, html[data-theme="light"] .mg-filter-sort-label { color:var(--orange,#fc6501)!important; -webkit-text-fill-color:var(--orange,#fc6501)!important; }
html:not([data-theme="dark"]) .gradient-text, html:not([data-theme="dark"]) .text-gradient, html[data-theme="light"] .gradient-text, html[data-theme="light"] .text-gradient { background:none!important; color:var(--mg-readable-heading)!important; -webkit-text-fill-color:var(--mg-readable-heading)!important; }
html:not([data-theme="dark"]) [disabled], html:not([data-theme="dark"]) .disabled, html[data-theme="light"] [disabled], html[data-theme="light"] .disabled { opacity:.62!important; }


/* V1.117 hard light-mode readable text guard */

/*
  This is stronger than v1.116.
  It handles cases where older CSS used more specific selectors, white text,
  transparent gradient text, or inherited -webkit-text-fill-color.
  It only activates in light mode.
*/

html.mg-light-readable,
html.mg-light-readable:not([data-theme="dark"]) {
  --mg-readable-text: #120d22 !important;
  --mg-readable-heading: #110933 !important;
  --mg-readable-muted: #403854 !important;
  --mg-readable-soft: #5c536f !important;
  --mg-readable-orange: #fc6501 !important;
}

html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode),
html[data-theme="light"].mg-light-readable body {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
}

/* High-specificity readable headings */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(h1,h2,h3,h4,h5,h6,.hero-title,.product-title,.section-title,.section-heading h2,.catalog-header h1,.page-hero h1,.store-hero h1,.apple-store-hero h1,.trade-hero h1,.repair-hero h1,.support-hero h1,.mg-filter-sort-head h2,.mg-product-tools-title),
html[data-theme="light"].mg-light-readable body :is(h1,h2,h3,h4,h5,h6,.hero-title,.product-title,.section-title,.section-heading h2,.catalog-header h1,.page-hero h1,.store-hero h1,.apple-store-hero h1,.trade-hero h1,.repair-hero h1,.support-hero h1,.mg-filter-sort-head h2,.mg-product-tools-title) {
  color: var(--mg-readable-heading) !important;
  -webkit-text-fill-color: var(--mg-readable-heading) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  text-shadow: none !important;
}

/* High-specificity normal readable text */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(p,li,small,label,legend,summary,dt,dd,.muted,.customer-copy-note,.field-hint,.product-card p,.product-card-body p,.product-meta,.mg-product-tools-summary,.mg-filter-sort-head p,.mg-pagination-info,.support-card p,.repair-card p,.trade-info-card p,.sell-device-card p,.policy-note,.estimate-box,.deduction-panel,.sell-device-breakdown,.trade-math-formula,.sell-math-formula),
html[data-theme="light"].mg-light-readable body :is(p,li,small,label,legend,summary,dt,dd,.muted,.customer-copy-note,.field-hint,.product-card p,.product-card-body p,.product-meta,.mg-product-tools-summary,.mg-filter-sort-head p,.mg-pagination-info,.support-card p,.repair-card p,.trade-info-card p,.sell-device-card p,.policy-note,.estimate-box,.deduction-panel,.sell-device-breakdown,.trade-math-formula,.sell-math-formula) {
  color: var(--mg-readable-muted) !important;
  -webkit-text-fill-color: var(--mg-readable-muted) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* Product names, prices, form labels, strong text */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(strong,b,.price,.product-card h3,.product-card-v39 h3,.accessory-card h3,.card-title,.option-title,.summary-title,.product-summary-title,.checkout-summary-title,.filter-title,.sort-title),
html[data-theme="light"].mg-light-readable body :is(strong,b,.price,.product-card h3,.product-card-v39 h3,.accessory-card h3,.card-title,.option-title,.summary-title,.product-summary-title,.checkout-summary-title,.filter-title,.sort-title) {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* Header, nav, mobile drawer and menu links */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(header,nav,.site-header,.desktop-nav,.mobile-drawer,#mobileDrawer,.mobile-menu,.drawer-menu,.mega-menu) :is(a,button,span,strong),
html[data-theme="light"].mg-light-readable body :is(header,nav,.site-header,.desktop-nav,.mobile-drawer,#mobileDrawer,.mobile-menu,.drawer-menu,.mega-menu) :is(a,button,span,strong) {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
}

/* Search overlay, filter/sort, pagination */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.mg-search-shell,.mg-search-shell *,.mg-search-result,.mg-search-result *,.mg-filter-sort-panel,.mg-filter-sort-panel *,.mg-product-tools,.mg-product-tools *,.mg-pagination,.mg-pagination *),
html[data-theme="light"].mg-light-readable body :is(.mg-search-shell,.mg-search-shell *,.mg-search-result,.mg-search-result *,.mg-filter-sort-panel,.mg-filter-sort-panel *,.mg-product-tools,.mg-product-tools *,.mg-pagination,.mg-pagination *) {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
}

html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.mg-search-result p,.mg-search-muted,.mg-filter-sort-head p,.mg-product-tools-summary,.mg-pagination-info),
html[data-theme="light"].mg-light-readable body :is(.mg-search-result p,.mg-search-muted,.mg-filter-sort-head p,.mg-product-tools-summary,.mg-pagination-info) {
  color: var(--mg-readable-muted) !important;
  -webkit-text-fill-color: var(--mg-readable-muted) !important;
}

/* Forms */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(input,select,textarea,option),
html[data-theme="light"].mg-light-readable body :is(input,select,textarea,option) {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
  background-color: rgba(255,255,255,.94) !important;
  caret-color: var(--mg-readable-orange) !important;
}

html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(input,textarea)::placeholder,
html[data-theme="light"].mg-light-readable body :is(input,textarea)::placeholder {
  color: #6d647f !important;
  -webkit-text-fill-color: #6d647f !important;
  opacity: 1 !important;
}

/* Footer */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) footer :is(p,a,span,small,li),
html[data-theme="light"].mg-light-readable body footer :is(p,a,span,small,li) {
  color: var(--mg-readable-muted) !important;
  -webkit-text-fill-color: var(--mg-readable-muted) !important;
}

html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) footer :is(h2,h3,strong,b),
html[data-theme="light"].mg-light-readable body footer :is(h2,h3,strong,b) {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
}

/* Orange accent labels should stay orange and readable */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.tag,.badge,.pill,.eyebrow,.mg-filter-sort-label,.category-label,.status-pill),
html[data-theme="light"].mg-light-readable body :is(.tag,.badge,.pill,.eyebrow,.mg-filter-sort-label,.category-label,.status-pill) {
  color: var(--mg-readable-orange) !important;
  -webkit-text-fill-color: var(--mg-readable-orange) !important;
}

/* Keep real primary/gradient CTAs white, including inner spans */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply),
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) *,
html[data-theme="light"].mg-light-readable body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply),
html[data-theme="light"].mg-light-readable body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Secondary/neutral buttons readable */
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)),
html.mg-light-readable:not([data-theme="dark"]) body:not(.dark-mode) :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)) *,
html[data-theme="light"].mg-light-readable body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)),
html[data-theme="light"].mg-light-readable body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)) * {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
}

/* Runtime guard classes added by JS when it detects bad light-mode text */
html.mg-light-readable body .mg-force-readable-text {
  color: var(--mg-readable-text) !important;
  -webkit-text-fill-color: var(--mg-readable-text) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

html.mg-light-readable body .mg-force-readable-heading {
  color: var(--mg-readable-heading) !important;
  -webkit-text-fill-color: var(--mg-readable-heading) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

html.mg-light-readable body .mg-force-readable-muted {
  color: var(--mg-readable-muted) !important;
  -webkit-text-fill-color: var(--mg-readable-muted) !important;
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

html.mg-light-readable body .mg-force-readable-orange {
  color: var(--mg-readable-orange) !important;
  -webkit-text-fill-color: var(--mg-readable-orange) !important;
}

html.mg-light-readable body .mg-force-readable-white,
html.mg-light-readable body .mg-force-readable-white * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* =====================================================================
   V1.118 Perfect UI/UX Pass — web + mobile
   Fixes:
   1. Hero section height reduced on mobile (100vh → auto)
   2. Homepage promo CTA button text fixed
   3. Category filter bar horizontally scrollable on mobile
   4. Nav font and colour consistent across modes
   5. Footer social icon layout improved for mobile
   6. Search overlay width/padding corrected on mobile
   7. Product card consistent aspect-ratio + text clamping on all viewports
   8. Promo card image order corrected on mobile (image on top)
   9. Back-to-top button improved styling
   10. Touch area safety on all interactive elements 44px min
   11. Card hover: no transform jump on mobile (already set, reinforced)
   12. Reduced motion respected for all transitions
   13. Focus ring consistent (orange outline, not browser default)
   14. Ad banner cards: text contrast hardened
   15. Homepage promo section spacing tightened on mobile
   16. Service grid collapses to 2 columns on tablet correctly
   17. Trust box / store info section improves on small screens
   18. Mobile drawer close indicator (X) on active state
   19. Sticky nav top position corrected for iOS safe area
   20. Footer bottom padding accounts for mobile home indicator
   ===================================================================== */

/* 1. Hero height: full-viewport only on desktop, auto on mobile */
@media (max-width: 760px) {
  .hero-ad {
    min-height: auto !important;
    padding: 48px 20px 32px !important;
  }
  .ad-copy {
    margin-bottom: 18px !important;
  }
  .hero-image {
    max-height: 280px;
    overflow: hidden;
    border-radius: 24px;
  }
  .hero-image img {
    max-height: 280px;
    object-fit: contain;
    width: 100%;
  }
}

/* 2. Homepage hero headings scale nicely on small screens */
@media (max-width: 480px) {
  .hero-ad h1 {
    font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
    letter-spacing: -.055em !important;
    line-height: .96 !important;
  }
  .hero-ad .ad-copy p:not(.eyebrow) {
    font-size: .92rem !important;
    margin-top: 10px !important;
  }
}

/* 3. Category filter bar: horizontal scroll on mobile, no wrap */
@media (max-width: 760px) {
  .category-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    /* hide scrollbar on all browsers */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .category-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
  .category-filter {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }
}

/* 4. Nav text colour consistent: always readable, regardless of page mode */
.top-nav {
  --navText: rgba(255, 255, 255, .88) !important;
}
.top-nav .logo-mark,
.top-nav .nav-links a,
.top-nav .nav-icons a,
.top-nav .nav-icons button {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}
.top-nav .nav-links a.active,
.top-nav .nav-links a[aria-current="page"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
/* Nav background stays dark regardless of theme */
.top-nav {
  background: rgba(17, 9, 51, .96) !important;
}

/* 5. Footer: social icons wrap cleanly and have breathing room */
.footer-social-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
.footer-social-icons a {
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--soft) !important;
  transition: background .16s ease, transform .16s ease !important;
  padding: 6px !important;
}
.footer-social-icons a:hover,
.footer-social-icons a:focus-visible {
  background: rgba(252, 101, 1, .18) !important;
  transform: translateY(-2px) !important;
}
.social-svg-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}
.footer {
  padding-bottom: max(34px, env(safe-area-inset-bottom, 20px)) !important;
}

/* 6. Search overlay: full-width on mobile, proper padding */
@media (max-width: 760px) {
  .mg-search-shell {
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .mg-search-inner {
    padding: 16px 14px 20px !important;
  }
  .mg-search-input {
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }
}

/* 7. Product card: consistent body text clamping on all viewports */
.product-card-v39 .product-card-body p {
  -webkit-line-clamp: 2 !important;
  min-height: 3.1em !important;
}

/* 8. Promo cards: on mobile, always show image ABOVE copy */
@media (max-width: 760px) {
  .promo-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 20px !important;
    gap: 18px !important;
  }
  .promo-card .promo-image {
    order: -1 !important;
  }
  .promo-card .promo-image img {
    max-height: 200px !important;
    object-fit: contain !important;
    width: 100% !important;
    border-radius: 18px !important;
  }
  .promo-card .promo-copy {
    text-align: left !important;
  }
  .promo-card .promo-copy h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }
  .promo-card .actions {
    justify-content: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .promo-card .actions .btn {
    width: auto !important;
    min-width: min-content !important;
  }
}

/* 9. Back-to-top button polished */
.mg-back-to-top {
  position: fixed !important;
  bottom: max(28px, env(safe-area-inset-bottom, 20px) + 12px) !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--orange) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(252, 101, 1, .32) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  z-index: 300 !important;
}
.mg-back-to-top svg {
  stroke: #fff !important;
}

/* 10. Touch targets: universal 44px min for all interactive elements */
.header-icon-button,
.nav-icon,
.theme-toggle,
.search-toggle,
.mobile-menu,
.mobile-menu-left {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* 11. Calm hover on mobile: never any translateY movement */
@media (hover: none) {
  .product-card:hover,
  .product-card-v39:hover,
  .product-card-v35:hover,
  .category-hub-card:hover,
  .card:hover,
  .service-card:hover,
  .footer-social-icons a:hover,
  .btn:hover,
  .option:hover,
  .condition-card:hover,
  .category-filter:hover {
    transform: none !important;
  }
}

/* 12. Reduced motion: disable all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 13. Focus ring: consistent orange outline on all focusable elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--orange, #fc6501) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(252, 101, 1, .18) !important;
}

/* 14. Ad banner cards: text always readable in both modes */
.ad-banner {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 28px !important;
  padding: clamp(20px, 4vw, 36px) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.ad-banner h3 {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
.ad-banner p,
.ad-banner span {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}
.ad-banner.ad-banner-primary {
  background: linear-gradient(135deg, var(--deep), var(--purple)) !important;
}
.ad-banner.ad-banner-primary h3,
.ad-banner.ad-banner-primary .eyebrow,
.ad-banner.ad-banner-primary p,
.ad-banner.ad-banner-primary span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.ad-banner.ad-banner-primary .eyebrow {
  color: var(--peach) !important;
  -webkit-text-fill-color: var(--peach) !important;
}
.ad-banner:hover {
  border-color: rgba(252, 101, 1, .5) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .1) !important;
}

/* 15. Homepage promo section spacing on mobile */
@media (max-width: 760px) {
  .promo,
  .section {
    padding: 16px 0 !important;
  }
  .section.pad {
    padding: 36px 0 !important;
  }
  .section-heading {
    margin-bottom: 16px !important;
  }
  .section-heading h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.8rem) !important;
  }
}

/* 16. Service grid: 2×2 on tablet, 1×4 on desktop, 2×2 on mobile */
@media (max-width: 980px) and (min-width: 621px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 620px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .service-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .service-card img {
    max-height: 80px !important;
    object-fit: contain !important;
  }
  .service-card h3 {
    font-size: .95rem !important;
  }
  .service-card p {
    font-size: .8rem !important;
  }
}

/* 17. Trust box / store info section on small screens */
@media (max-width: 760px) {
  .trust-box {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .trust-box h2 {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
  }
  .trust-list {
    gap: 8px !important;
  }
}

/* 18. Mobile drawer: X button on hamburger when open, polish the active state */
body.mobile-menu-open .mobile-menu-left .header-control-svg path,
body.mobile-menu-open #mobileMenu .header-control-svg path {
  /* Animate from hamburger to X */
  transition: d .18s ease !important;
}

/* 19. Safe area: nav top + body top clearance for notched phones */
.top-nav {
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(44px + env(safe-area-inset-top, 0px)) !important;
}
body {
  padding-top: 0 !important;
}
.skip-link {
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 20. Homepage card grid: 2×2 on very small screens */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .card {
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .card img {
    max-height: 90px !important;
    object-fit: contain !important;
  }
  .card h3 {
    font-size: .88rem !important;
    line-height: 1.15 !important;
    margin-top: 8px !important;
  }
  .card p {
    font-size: .76rem !important;
    display: none !important;
  }
}

/* Ad banner grid: stacks on mobile */
@media (max-width: 760px) {
  .ad-banner-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Product detail page: tighter on tablet */
@media (max-width: 980px) {
  .product-detail-grid-v39 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .purchase-summary-card {
    position: static !important;
    max-height: none !important;
    margin: 0 !important;
    box-shadow: var(--shadow) !important;
    border-radius: 28px !important;
  }
}

/* Better image rendering across all product images */
.product-card-v39 .product-image-link img,
.product-card .product-image-link img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Placeholder image: better centering */
img[src*="image-needed"] {
  object-fit: contain !important;
  background: var(--bg) !important;
  padding: 12px !important;
}

/* V1.118 validation marker */
/* mg-v118-perfect-ui: true */

/* V1.118b: hamburger icon morphs to X when drawer is open */
.mobile-menu-left .header-control-svg,
#mobileMenu .header-control-svg {
  transition: transform .22s ease !important;
}

/* When drawer is open: show an X using SVG path animation via CSS transforms */
body.mobile-menu-open .mobile-menu-left,
body.mobile-menu-open #mobileMenu {
  /* The button gets a subtle background change to signal it's active */
  background: rgba(252, 101, 1, .18) !important;
  border-color: rgba(252, 101, 1, .48) !important;
}

/* Scroll lock when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Page-level padding consistency */
.page-hero,
.section,
.page-wrap,
.product-grid-section,
.form-page,
.catalog-header,
.product-page-wrap,
.trade-value-section,
.page-title {
  width: min(1180px, 94%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Consistent section-heading typography */
.section-heading h2 {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Price label in store info should be orange, not accidentally muted */
.trust-box .price {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
  font-size: 1.05rem !important;
}

/* Ensure the mobile-drawer closes properly on link tap (already in JS but belt + suspenders) */
.mobile-drawer a {
  -webkit-tap-highlight-color: rgba(252, 101, 1, .15) !important;
}

/* Confirm actions/buttons on homepage all have proper mobile sizing */
@media (max-width: 760px) {
  .actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .actions .btn {
    width: auto !important;
    min-width: 140px !important;
    flex: 1 1 auto !important;
    max-width: calc(50% - 5px) !important;
  }
  /* hero actions always stack on very small screens */
  .hero-ad .actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-ad .actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Card grid on home: photos get proper sizing on desktop too */
.card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  padding: 8px !important;
}

/* Tighten the promo section section spacing on mobile */
@media (max-width: 760px) {
  .homepage-adverts.section {
    padding: 20px 0 !important;
  }
  .homepage-adverts .section-heading {
    margin-bottom: 14px !important;
  }
}

/* Keyboard navigation visual consistency */
.category-filter:focus-visible {
  outline: 2.5px solid var(--orange, #fc6501) !important;
  outline-offset: 2px !important;
}

/* mg-v118b-final: true */


/* V1.119 balanced mode-consistent text + button contrast */

/*
  Light mode: dark readable writing.
  Dark mode: bright readable writing.
  Buttons: clear and not too dark.
  Applies across desktop and mobile.
*/

:root,
html:not([data-theme="dark"]),
html[data-theme="light"] {
  --mg-mode-bg: #fbf8ff;
  --mg-mode-card: rgba(255,255,255,.88);
  --mg-mode-card-strong: #ffffff;
  --mg-mode-border: rgba(18,13,34,.12);
  --mg-mode-heading: #110933;
  --mg-mode-text: #171126;
  --mg-mode-muted: #4b435e;
  --mg-mode-soft-text: #665d79;
  --mg-mode-btn-text: #171126;
  --mg-mode-btn-bg: rgba(255,255,255,.90);
  --mg-mode-btn-border: rgba(18,13,34,.13);
  --mg-mode-btn-hover: rgba(252,101,1,.10);
  --mg-mode-primary-a: #fc6501;
  --mg-mode-primary-b: #ffa569;
  --mg-mode-primary-text: #ffffff;
  --slick-text: var(--mg-mode-text);
  --slick-heading: var(--mg-mode-heading);
  --slick-muted: var(--mg-mode-muted);
  --text: var(--mg-mode-text);
  --heading: var(--mg-mode-heading);
  --muted: var(--mg-mode-muted);
}

html[data-theme="dark"],
html.dark,
html.dark-mode,
body.dark,
body.dark-mode {
  --mg-mode-bg: #0b071c;
  --mg-mode-card: rgba(30,20,66,.74);
  --mg-mode-card-strong: rgba(43,30,88,.90);
  --mg-mode-border: rgba(255,255,255,.16);
  --mg-mode-heading: #ffffff;
  --mg-mode-text: #f8f4ff;
  --mg-mode-muted: rgba(240,234,255,.80);
  --mg-mode-soft-text: rgba(240,234,255,.70);
  --mg-mode-btn-text: #fffaff;
  --mg-mode-btn-bg: rgba(255,255,255,.14);
  --mg-mode-btn-border: rgba(255,255,255,.22);
  --mg-mode-btn-hover: rgba(255,165,105,.18);
  --mg-mode-primary-a: #fc6501;
  --mg-mode-primary-b: #ffa569;
  --mg-mode-primary-text: #ffffff;
  --slick-text: var(--mg-mode-text);
  --slick-heading: var(--mg-mode-heading);
  --slick-muted: var(--mg-mode-muted);
  --text: var(--mg-mode-text);
  --heading: var(--mg-mode-heading);
  --muted: var(--mg-mode-muted);
}

/* Base readable text */
body {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text);
}

/* Headings */
body :is(h1,h2,h3,h4,h5,h6,.hero-title,.page-title,.product-title,.section-title,.catalog-header h1,.section-heading h2,.mg-product-tools-title,.mg-filter-sort-head h2) {
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Normal writing */
body :is(p,li,small,label,legend,summary,dt,dd,.muted,.customer-copy-note,.field-hint,.product-card p,.product-card-body p,.product-meta,.mg-product-tools-summary,.mg-filter-sort-head p,.mg-pagination-info,.support-card p,.repair-card p,.trade-info-card p,.sell-device-card p,.policy-note,.estimate-box,.deduction-panel,.sell-device-breakdown,.trade-math-formula,.sell-math-formula) {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}

/* Important writing, names and prices */
body :is(strong,b,.price,.product-card h3,.product-card-v39 h3,.accessory-card h3,.card-title,.option-title,.summary-title,.product-summary-title,.checkout-summary-title,.filter-title,.sort-title) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}

/* Header/nav/mobile drawer/footer */
body :is(header,nav,.site-header,.desktop-nav,.mobile-drawer,#mobileDrawer,.mobile-menu,.drawer-menu,.mega-menu) :is(a,button,span,strong) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}

body footer :is(p,a,span,small,li) {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}

body footer :is(h2,h3,strong,b) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}

/* Search, Filter & Sort, pagination and dynamic panels */
body :is(.mg-search-shell,.mg-search-result,.mg-filter-sort-panel,.mg-product-tools,.mg-pagination,.product-card,.product-card-v39,.accessory-card,.smart-form,.trade-form-card,.sell-device-form-card,.repair-form-card,.support-card,.policy-note) {
  color: var(--mg-mode-text) !important;
}

body :is(.mg-search-shell,.mg-search-result,.mg-filter-sort-panel,.mg-product-tools,.mg-pagination) :is(h1,h2,h3,h4,strong,b) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}

body :is(.mg-search-result p,.mg-search-muted,.mg-filter-sort-head p,.mg-product-tools-summary,.mg-pagination-info) {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}

/* Forms */
body :is(input,select,textarea,option) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
  background-color: color-mix(in srgb, var(--mg-mode-card-strong) 86%, transparent) !important;
  border-color: var(--mg-mode-border) !important;
  caret-color: var(--mg-mode-primary-a) !important;
}

body :is(input,textarea)::placeholder {
  color: var(--mg-mode-soft-text) !important;
  -webkit-text-fill-color: var(--mg-mode-soft-text) !important;
  opacity: 1 !important;
}

/* Orange accents */
body :is(.tag,.badge,.pill,.eyebrow,.mg-filter-sort-label,.category-label,.status-pill) {
  color: var(--mg-mode-primary-a) !important;
  -webkit-text-fill-color: var(--mg-mode-primary-a) !important;
}

/* Neutral buttons: lighter, clearer and not too dark */
body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)) {
  color: var(--mg-mode-btn-text) !important;
  -webkit-text-fill-color: var(--mg-mode-btn-text) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-mode-btn-bg) 98%, transparent), color-mix(in srgb, var(--mg-mode-btn-bg) 80%, transparent)) !important;
  border-color: var(--mg-mode-btn-border) !important;
}

body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-mode-btn-hover) 70%, var(--mg-mode-btn-bg)), color-mix(in srgb, var(--mg-mode-btn-bg) 82%, transparent)) !important;
}

/* Filter button should not look black/dull */
body .mg-filter-sort-open {
  color: var(--mg-mode-btn-text) !important;
  -webkit-text-fill-color: var(--mg-mode-btn-text) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-mode-card-strong) 84%, transparent), color-mix(in srgb, var(--mg-mode-btn-bg) 84%, transparent)) !important;
  border-color: var(--mg-mode-btn-border) !important;
}

body .mg-filter-sort-open svg,
body .mg-filter-sort-open svg * {
  color: var(--mg-mode-primary-a) !important;
  -webkit-text-fill-color: var(--mg-mode-primary-a) !important;
}

/* Primary CTAs: bright orange, readable and not too dark */
body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply),
body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) * {
  color: var(--mg-mode-primary-text) !important;
  -webkit-text-fill-color: var(--mg-mode-primary-text) !important;
}

body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) {
  background: linear-gradient(135deg, var(--mg-mode-primary-a), var(--mg-mode-primary-b)) !important;
  border-color: rgba(252,101,1,.30) !important;
  box-shadow: 0 12px 28px rgba(252,101,1,.20) !important;
}

body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply):hover {
  filter: brightness(1.04) saturate(1.05) !important;
  box-shadow: 0 18px 42px rgba(252,101,1,.26) !important;
}

/* Product card CTA */
body .product-card :is(.price-cta,.cta-button),
body .product-card-v39 :is(.price-cta,.cta-button),
body .accessory-card :is(.price-cta,.cta-button) {
  background: linear-gradient(135deg, #fc6501, #ffa569) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Prevent transparent/gradient text failures in both modes */
body :is(.gradient-text,.text-gradient) {
  background-image: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
}

/* Runtime sync classes */
body .mg-mode-heading-text {
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
}

body .mg-mode-body-text {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}

body .mg-mode-muted-text {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}

body .mg-mode-cta-text,
body .mg-mode-cta-text * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .mg-mode-accent-text {
  color: var(--mg-mode-primary-a) !important;
  -webkit-text-fill-color: var(--mg-mode-primary-a) !important;
}

/* Mobile follows same mode rules with softer button depth */
@media (max-width: 760px) {
  body .mg-filter-sort-open,
  body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mg-mode-card-strong) 80%, transparent), color-mix(in srgb, var(--mg-mode-btn-bg) 76%, transparent)) !important;
  }

  body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) {
    box-shadow: 0 10px 22px rgba(252,101,1,.18) !important;
  }
}


/* V1.120 theme toggle text recovery */

/* Fix dark -> light -> dark invisible text by making dark mode win after every toggle. */
html[data-theme="dark"], html.mg-mode-dark, html.dark, html.dark-mode, body.dark, body.dark-mode {
  --mg-mode-heading: #ffffff !important;
  --mg-mode-text: #f8f4ff !important;
  --mg-mode-muted: rgba(240,234,255,.82) !important;
  --mg-mode-soft-text: rgba(240,234,255,.72) !important;
  --mg-mode-btn-text: #fffaff !important;
  --mg-mode-btn-bg: rgba(255,255,255,.16) !important;
  --mg-mode-btn-border: rgba(255,255,255,.24) !important;
  --slick-text: var(--mg-mode-text) !important;
  --slick-heading: var(--mg-mode-heading) !important;
  --slick-muted: var(--mg-mode-muted) !important;
  --text: var(--mg-mode-text) !important;
  --heading: var(--mg-mode-heading) !important;
  --muted: var(--mg-mode-muted) !important;
}
html[data-theme="dark"] body, html.mg-mode-dark body, html.dark body, html.dark-mode body, body.dark, body.dark-mode {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}
html[data-theme="dark"] body :is(h1,h2,h3,h4,h5,h6,.hero-title,.page-title,.product-title,.section-title,.catalog-header h1,.section-heading h2,.mg-product-tools-title,.mg-filter-sort-head h2,.product-card h3,.product-card-v39 h3,.accessory-card h3),
html.mg-mode-dark body :is(h1,h2,h3,h4,h5,h6,.hero-title,.page-title,.product-title,.section-title,.catalog-header h1,.section-heading h2,.mg-product-tools-title,.mg-filter-sort-head h2,.product-card h3,.product-card-v39 h3,.accessory-card h3) {
  color: var(--mg-mode-heading) !important;
  -webkit-text-fill-color: var(--mg-mode-heading) !important;
}
html[data-theme="dark"] body :is(p,li,small,label,legend,summary,dt,dd,.muted,.customer-copy-note,.field-hint,.product-card p,.product-card-body p,.product-meta,.mg-product-tools-summary,.mg-filter-sort-head p,.mg-pagination-info,.support-card p,.repair-card p,.trade-info-card p,.sell-device-card p,footer p,footer a,footer span,footer small),
html.mg-mode-dark body :is(p,li,small,label,legend,summary,dt,dd,.muted,.customer-copy-note,.field-hint,.product-card p,.product-card-body p,.product-meta,.mg-product-tools-summary,.mg-filter-sort-head p,.mg-pagination-info,.support-card p,.repair-card p,.trade-info-card p,.sell-device-card p,footer p,footer a,footer span,footer small) {
  color: var(--mg-mode-muted) !important;
  -webkit-text-fill-color: var(--mg-mode-muted) !important;
}
html[data-theme="dark"] body :is(strong,b,.price,.card-title,.option-title,.summary-title,.product-summary-title,.checkout-summary-title,header a,nav a,header button,nav button,.mobile-drawer a,#mobileDrawer a,.drawer-menu a,.mobile-menu a),
html.mg-mode-dark body :is(strong,b,.price,.card-title,.option-title,.summary-title,.product-summary-title,.checkout-summary-title,header a,nav a,header button,nav button,.mobile-drawer a,#mobileDrawer a,.drawer-menu a,.mobile-menu a) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
}
html[data-theme="dark"] body :is(input,select,textarea,option), html.mg-mode-dark body :is(input,select,textarea,option) {
  color: var(--mg-mode-text) !important;
  -webkit-text-fill-color: var(--mg-mode-text) !important;
  background-color: rgba(255,255,255,.12) !important;
  border-color: var(--mg-mode-btn-border) !important;
}
html[data-theme="dark"] body :is(input,textarea)::placeholder, html.mg-mode-dark body :is(input,textarea)::placeholder {
  color: var(--mg-mode-soft-text) !important;
  -webkit-text-fill-color: var(--mg-mode-soft-text) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)),
html.mg-mode-dark body :is(.secondary-btn,.ghost-btn,.mg-filter-sort-reset,.mg-page-btn,button:not(.primary-btn):not(.price-cta):not(.cta-button):not(.mg-filter-sort-apply)) {
  color: var(--mg-mode-btn-text) !important;
  -webkit-text-fill-color: var(--mg-mode-btn-text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.09)) !important;
  border-color: var(--mg-mode-btn-border) !important;
}
html[data-theme="dark"] body .mg-filter-sort-open, html.mg-mode-dark body .mg-filter-sort-open {
  color: var(--mg-mode-btn-text) !important;
  -webkit-text-fill-color: var(--mg-mode-btn-text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
  border-color: var(--mg-mode-btn-border) !important;
}
body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply), body :is(.primary-btn,.price-cta,.cta-button,.mg-filter-sort-apply) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* V1.123 new customer inventory + product family cards */
.family-option-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  background: rgba(252, 101, 1, .10) !important;
  border: 1px solid rgba(252, 101, 1, .18) !important;
}
.product-card .family-option-count,
.product-card-v39 .family-option-count,
.accessory-card .family-option-count {
  align-self: flex-start !important;
}
@media (max-width: 760px) {
  .family-option-count {
    font-size: .68rem !important;
    padding: 5px 8px !important;
  }
}


/* V1.125 Open Box condition + future hot deals placeholder */
.condition-chip-open-box,
.product-card[data-condition*="Open Box"] .tag {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
  background: rgba(252, 101, 1, .10) !important;
  border-color: rgba(252, 101, 1, .18) !important;
}

.future-hot-deals-placeholder {
  border: 1px dashed rgba(252, 101, 1, .28) !important;
  background: rgba(252, 101, 1, .06) !important;
}

html.mg-has-hot-deals .future-hot-deals-placeholder {
  display: none !important;
}

@media (max-width: 760px) {
  .future-hot-deals-placeholder {
    border-radius: 22px !important;
  }
}


/* V1.126 connectivity + full brand/model + accessory cleanup */
.product-card[data-category="accessories"] .tag {
  color: var(--orange, #fc6501) !important;
  -webkit-text-fill-color: var(--orange, #fc6501) !important;
}
.mg-product-connectivity-note {
  color: var(--mg-mode-muted, #4b435e) !important;
  -webkit-text-fill-color: var(--mg-mode-muted, #4b435e) !important;
}
@media (max-width: 760px) {
  .product-card h3,
  .product-card-v39 h3,
  .accessory-card h3 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* V1.134 requested theme calibration: #1A1A1A dark, #FFFFFF light */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --orange: #FC6501 !important;
  --deep: #1A1A1A !important;
  --purple: #7C5CFF !important;
  --bg: #FFFFFF !important;
  --surface: #FFFFFF !important;
  --text: #1A1A1A !important;
  --heading: #1A1A1A !important;
  --muted: #55505F !important;
  --line: rgba(26,26,26,.12) !important;
  --nav: rgba(255,255,255,.94) !important;
  --navText: rgba(26,26,26,.82) !important;
  --soft: rgba(252,101,1,.10) !important;
  --shadow: 0 18px 48px rgba(26,26,26,.10) !important;
  --mg-mode-bg: #FFFFFF !important;
  --mg-mode-card: rgba(255,255,255,.94) !important;
  --mg-mode-card-strong: #FFFFFF !important;
  --mg-mode-border: rgba(26,26,26,.12) !important;
  --mg-mode-heading: #1A1A1A !important;
  --mg-mode-text: #1A1A1A !important;
  --mg-mode-muted: #55505F !important;
  --mg-mode-soft-text: #6C6675 !important;
  --mg-mode-btn-text: #1A1A1A !important;
  --mg-mode-btn-bg: rgba(255,255,255,.92) !important;
  --mg-mode-btn-border: rgba(26,26,26,.14) !important;
  --mg-mode-btn-hover: rgba(252,101,1,.10) !important;
  --mg-mode-primary-a: #FC6501 !important;
  --mg-mode-primary-b: #FFA569 !important;
  --mg-readable-text: #1A1A1A !important;
  --mg-readable-heading: #1A1A1A !important;
  --mg-readable-muted: #55505F !important;
  --mg-readable-soft: #6C6675 !important;
  --mg-readable-orange: #FC6501 !important;
  --slick-text: #1A1A1A !important;
  --slick-heading: #1A1A1A !important;
  --slick-muted: #55505F !important;
}

html[data-theme="dark"],
html.mg-mode-dark,
html.dark,
html.dark-mode,
body.dark,
body.dark-mode {
  --orange: #FC6501 !important;
  --deep: #1A1A1A !important;
  --purple: #7C5CFF !important;
  --bg: #1A1A1A !important;
  --surface: #1A1A1A !important;
  --text: #FFFFFF !important;
  --heading: #FFFFFF !important;
  --muted: rgba(255,255,255,.74) !important;
  --line: rgba(255,255,255,.14) !important;
  --nav: rgba(26,26,26,.94) !important;
  --navText: rgba(255,255,255,.86) !important;
  --soft: rgba(252,101,1,.16) !important;
  --shadow: 0 18px 48px rgba(0,0,0,.38) !important;
  --mg-mode-bg: #1A1A1A !important;
  --mg-mode-card: rgba(26,26,26,.96) !important;
  --mg-mode-card-strong: #1A1A1A !important;
  --mg-mode-border: rgba(255,255,255,.14) !important;
  --mg-mode-heading: #FFFFFF !important;
  --mg-mode-text: #FFFFFF !important;
  --mg-mode-muted: rgba(255,255,255,.76) !important;
  --mg-mode-soft-text: rgba(255,255,255,.64) !important;
  --mg-mode-btn-text: #FFFFFF !important;
  --mg-mode-btn-bg: rgba(124,92,255,.16) !important;
  --mg-mode-btn-border: rgba(124,92,255,.30) !important;
  --mg-mode-btn-hover: rgba(252,101,1,.14) !important;
  --mg-mode-primary-a: #FC6501 !important;
  --mg-mode-primary-b: #FF8A3D !important;
  --mg-readable-text: #FFFFFF !important;
  --mg-readable-heading: #FFFFFF !important;
  --mg-readable-muted: rgba(255,255,255,.76) !important;
  --mg-readable-soft: rgba(255,255,255,.64) !important;
  --mg-readable-orange: #FC6501 !important;
  --slick-text: #FFFFFF !important;
  --slick-heading: #FFFFFF !important;
  --slick-muted: rgba(255,255,255,.76) !important;
}

html[data-theme="light"] body,
html:not([data-theme="dark"]) body {
  background: #FFFFFF !important;
}

html[data-theme="dark"] body,
html.mg-mode-dark body {
  background: #1A1A1A !important;
}

html[data-theme="dark"] :where(.top-nav, .mobile-drawer, .mega-menu) {
  background-color: rgba(26,26,26,.94) !important;
  border-color: rgba(124,92,255,.24) !important;
}

html[data-theme="light"] :where(.top-nav, .mobile-drawer) {
  background-color: rgba(255,255,255,.94) !important;
}

html[data-theme="light"] :where(.logo-mark, .nav-links a.active, .mobile-menu),
html:not([data-theme="dark"]) :where(.logo-mark, .nav-links a.active, .mobile-menu) {
  color: #1A1A1A !important;
}

html[data-theme="dark"] :where(.card, .product-card, .service-card, .support-card, .form-card, .product-panel, .trust-box, .filter-box, .search-panel, .product-media-card, .product-config-card, .purchase-summary-card, .selection-step, .mg-search-shell, .mg-filter-sort-panel) {
  background-color: var(--surface) !important;
  border-color: rgba(124,92,255,.20) !important;
}

html[data-theme="dark"] :where(.btn.soft, .secondary-btn, .ghost-btn, .option, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn) {
  background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(255,255,255,.07)) !important;
  border-color: rgba(124,92,255,.28) !important;
}

html[data-theme="dark"] :where(.option.active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  border-color: rgba(252,101,1,.76) !important;
  box-shadow: 0 0 0 2px rgba(252,101,1,.18), 0 12px 28px rgba(124,92,255,.18) !important;
}


/* V1.135 full-site dark sweep: keep dark mode anchored to #1A1A1A everywhere */
html[data-theme="dark"],
html.mg-mode-dark,
html.dark,
html.dark-mode,
body.dark,
body.dark-mode {
  --bg: #1A1A1A !important;
  --surface: #1A1A1A !important;
  --deep: #1A1A1A !important;
  --text: #FFFFFF !important;
  --heading: #FFFFFF !important;
  --muted: rgba(255,255,255,.76) !important;
  --line: rgba(124,92,255,.24) !important;
  --nav: rgba(26,26,26,.96) !important;
  --navText: rgba(255,255,255,.88) !important;
  --soft: rgba(124,92,255,.12) !important;
  --shadow: 0 18px 48px rgba(0,0,0,.36) !important;
  --mg-mode-bg: #1A1A1A !important;
  --mg-mode-card: rgba(26,26,26,.96) !important;
  --mg-mode-card-strong: #1A1A1A !important;
  --mg-mode-border: rgba(124,92,255,.24) !important;
  --mg-mode-field-bg: #1A1A1A !important;
  --mg-mode-field-border: rgba(124,92,255,.28) !important;
  --slick-bg: #1A1A1A !important;
  --slick-bg-2: #1A1A1A !important;
  --slick-card: rgba(26,26,26,.96) !important;
  --slick-card-strong: #1A1A1A !important;
  --slick-soft: rgba(124,92,255,.12) !important;
  --slick-border: rgba(124,92,255,.24) !important;
  --clean-bg-dark: #1A1A1A !important;
  --clean-surface-dark: rgba(26,26,26,.96) !important;
  --clean-surface-strong-dark: #1A1A1A !important;
  --trade-card-bg: rgba(26,26,26,.96) !important;
  --trade-card-bg-strong: #1A1A1A !important;
  --trade-subcard-bg: rgba(124,92,255,.10) !important;
  --trade-input-bg: #1A1A1A !important;
  --trade-border: rgba(124,92,255,.24) !important;
  --support-card-bg: rgba(26,26,26,.96) !important;
  --support-card-strong: #1A1A1A !important;
  --support-soft-bg: rgba(124,92,255,.10) !important;
  --support-border: rgba(124,92,255,.24) !important;
  --repair-card-bg: rgba(26,26,26,.96) !important;
  --repair-card-strong: #1A1A1A !important;
  --repair-soft-bg: rgba(124,92,255,.10) !important;
  --repair-input-bg: #1A1A1A !important;
  --repair-border: rgba(124,92,255,.24) !important;
  --mega-bg: rgba(26,26,26,.98) !important;
  --mega-bg-soft: rgba(124,92,255,.10) !important;
  --mega-border: rgba(124,92,255,.24) !important;
  --social-button-bg: rgba(26,26,26,.96) !important;
  --social-button-border: rgba(124,92,255,.24) !important;
  --mg-search-bg: #1A1A1A !important;
  --mg-search-panel: #1A1A1A !important;
  --mg-search-backdrop: rgba(26,26,26,.82) !important;
  --mg-search-panel-float: rgba(26,26,26,.98) !important;
  --mg-search-input-solid: #1A1A1A !important;
  --mg-search-panel-border: rgba(124,92,255,.24) !important;
  --mg-search-soft: rgba(124,92,255,.12) !important;
  --mg-search-hover: rgba(252,101,1,.12) !important;
  --mg-glass-surface: rgba(26,26,26,.76) !important;
  --mg-glass-surface-strong: rgba(26,26,26,.94) !important;
  --mg-glass-border: rgba(124,92,255,.22) !important;
}

html[data-theme="dark"] body,
html.mg-mode-dark body,
html.dark body,
html.dark-mode body,
body.dark,
body.dark-mode {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] :where(main, header, footer, nav, .top-nav, .mobile-drawer, .mega-menu, .page-wrap, .section, .page-hero, .main-home, .store-main, .product-main, .catalog-page, .sell-device-main, .trade-main, .repair-main, .support-main, .recommendation-main, .contact-main, .faq-main) {
  background-color: #1A1A1A !important;
}

html[data-theme="dark"] :where(.top-nav, .mobile-drawer, .mega-menu, .footer, .search-panel, .mg-search-shell, .mg-search-inner, .mg-filter-sort-panel, .filter-box, .card, .promo-card, .ad-banner, .service-card, .support-card, .support-help-card, .repair-card, .repair-type-card, .trade-form-card, .trade-info-card, .trade-upgrade-section, .sell-device-card, .sell-device-result-card, .sell-device-guide-card, .sell-policy-note, .sell-math-formula, .product-card, .product-card-v39, .accessory-card, .product-panel, .product-media-card, .product-config-card, .purchase-summary-card, .selection-step, .summary-box, .estimate-box, .trust-box, .store-feature-card, .store-card, .mg-product-tools, .mg-page-bottom-cta) {
  background: #1A1A1A !important;
  background-color: #1A1A1A !important;
  border-color: rgba(124,92,255,.24) !important;
}

html[data-theme="dark"] :where(input, select, textarea, option, .mg-search-input, .filter-box input, .filter-box select) {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: rgba(124,92,255,.28) !important;
}

html[data-theme="dark"] :where(.btn.soft, .secondary-btn, .ghost-btn, .option, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn, .header-icon-button, .mode-icon-button, .search-icon-button, .whatsapp-icon-button) {
  background: #1A1A1A !important;
  border-color: rgba(124,92,255,.28) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] :where(.search-overlay, .mg-search-overlay) {
  background: rgba(26,26,26,.82) !important;
}

html[data-theme="dark"] :where(.option.active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  background: rgba(252,101,1,.14) !important;
  border-color: rgba(252,101,1,.78) !important;
}

html[data-theme="dark"] body.page-home,
html[data-theme="dark"] body.page-store,
html[data-theme="dark"] body.page-phones,
html[data-theme="dark"] body.page-laptops,
html[data-theme="dark"] body.page-consoles,
html[data-theme="dark"] body.page-accessories,
html[data-theme="dark"] body.page-product,
html[data-theme="dark"] body.page-trade-in,
html[data-theme="dark"] body.page-repair,
html[data-theme="dark"] body.page-support,
html[data-theme="dark"] body.page-sell,
html[data-theme="dark"] body.page-recommendation,
html[data-theme="dark"] body.page-contact,
html[data-theme="dark"] body.page-faq {
  background: #1A1A1A !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] body.page-store :is(.apple-store-main, .main-store, .apple-store-hero, .apple-store-section, .apple-store-row, .store-feature-card, .store-icon-card, .apple-store-help, .help-choosing-section, .future-hot-deals-placeholder),
html[data-theme="dark"] body.page-trade-in :is(.trade-main, .trade-hero, .trade-page-grid, .trade-form-card, .trade-info-card, .trade-upgrade-section, .trade-math-formula, .trade-formula, .estimate-box, .deduction-panel, .policy-note),
html[data-theme="dark"] body.page-repair :is(.repair-main, .repair-hero, .repair-form-card, .repair-guide-card, .repair-note-card, .repair-type-card, .repair-soft-card),
html[data-theme="dark"] body.page-support :is(.support-main, .support-hero, .support-card, .support-help-card, .support-policy-card, .support-contact-card),
html[data-theme="dark"] body.page-sell :is(.sell-device-main, .sell-device-hero, .sell-device-card, .sell-device-result-card, .sell-device-guide-card, .sell-policy-note, .sell-math-formula),
html[data-theme="dark"] body.page-product :is(.product-detail, .product-page, #productDetail, .product-main, .product-panel, .product-media-card, .product-config-card, .purchase-summary-card, .selection-step),
html[data-theme="dark"] body :is(.product-card, .product-card-v39, .accessory-card, .card, .service-card, .form-card, .smart-form, .mg-product-tools, .mg-pagination, .mg-filter-sort-panel, .mg-search-shell, .mg-search-result, .search-panel, .mobile-drawer, .mega-menu, .footer) {
  background: #1A1A1A !important;
  background-image: none !important;
  background-color: #1A1A1A !important;
  border-color: rgba(124,92,255,.24) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] body.page-trade-in :is(input, select, textarea, option),
html[data-theme="dark"] body.page-repair :is(input, select, textarea, option),
html[data-theme="dark"] body.page-support :is(input, select, textarea, option),
html[data-theme="dark"] body.page-sell :is(input, select, textarea, option),
html[data-theme="dark"] body.page-contact :is(input, select, textarea, option),
html[data-theme="dark"] body.page-recommendation :is(input, select, textarea, option),
html[data-theme="dark"] body :is(.option, .btn.soft, .secondary-btn, .ghost-btn, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn) {
  background: #1A1A1A !important;
  background-image: none !important;
  background-color: #1A1A1A !important;
  border-color: rgba(124,92,255,.28) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(.option.active, .option[aria-pressed="true"], .option[aria-selected="true"], .category-filter.active, .category-filter.is-active, .category-filter[aria-pressed="true"], .filter-pill.active, .filter-pill.is-active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  background: rgba(252,101,1,.14) !important;
  background-image: none !important;
  background-color: rgba(252,101,1,.14) !important;
  border-color: rgba(252,101,1,.78) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(252,101,1,.16), 0 12px 28px rgba(0,0,0,.24) !important;
}


/* V1.136 split accent modes: orange for light, purple for dark */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --orange: #FC6501 !important;
  --purple: #FC6501 !important;
  --soft: rgba(252,101,1,.10) !important;
  --line: rgba(26,26,26,.12) !important;
  --mg-readable-orange: #FC6501 !important;
  --mg-mode-primary-a: #FC6501 !important;
  --mg-mode-primary-b: #FFA569 !important;
  --mg-mode-btn-hover: rgba(252,101,1,.10) !important;
  --btn-orange-solid: #FC6501 !important;
  --btn-orange-hover: #FF7A22 !important;
  --btn-border-orange: rgba(252,101,1,.72) !important;
  --slick-orange: #FC6501 !important;
  --slick-orange-2: #FFA569 !important;
  --slick-glow: 0 18px 46px rgba(252,101,1,.18) !important;
  --mg-focus: 0 0 0 4px rgba(252,101,1,.22) !important;
}

html[data-theme="dark"],
html.mg-mode-dark,
html.dark,
html.dark-mode,
body.dark,
body.dark-mode {
  --orange: #A78BFA !important;
  --purple: #A78BFA !important;
  --soft: rgba(167,139,250,.14) !important;
  --line: rgba(167,139,250,.24) !important;
  --mg-readable-orange: #A78BFA !important;
  --mg-mode-primary-a: #8B5CF6 !important;
  --mg-mode-primary-b: #C4B5FD !important;
  --mg-mode-btn-bg: rgba(139,92,246,.16) !important;
  --mg-mode-btn-border: rgba(167,139,250,.32) !important;
  --mg-mode-btn-hover: rgba(167,139,250,.18) !important;
  --btn-orange-solid: #8B5CF6 !important;
  --btn-orange-hover: #A78BFA !important;
  --btn-border-orange: rgba(167,139,250,.72) !important;
  --slick-orange: #A78BFA !important;
  --slick-orange-2: #C4B5FD !important;
  --slick-soft: rgba(167,139,250,.12) !important;
  --slick-border: rgba(167,139,250,.24) !important;
  --slick-glow: 0 20px 56px rgba(139,92,246,.24) !important;
  --trade-orange-soft: rgba(139,92,246,.16) !important;
  --trade-orange-soft-2: rgba(196,181,253,.10) !important;
  --trade-subcard-bg: rgba(139,92,246,.10) !important;
  --trade-border: rgba(167,139,250,.24) !important;
  --support-soft-bg: rgba(139,92,246,.10) !important;
  --support-border: rgba(167,139,250,.24) !important;
  --repair-soft-bg: rgba(139,92,246,.10) !important;
  --repair-border: rgba(167,139,250,.24) !important;
  --mega-bg-soft: rgba(139,92,246,.10) !important;
  --mega-border: rgba(167,139,250,.24) !important;
  --social-button-border: rgba(167,139,250,.24) !important;
  --mg-search-soft: rgba(139,92,246,.12) !important;
  --mg-search-hover: rgba(167,139,250,.16) !important;
  --mg-search-panel-border: rgba(167,139,250,.24) !important;
  --mg-glass-border: rgba(167,139,250,.24) !important;
  --mg-focus: 0 0 0 4px rgba(167,139,250,.22) !important;
}

html[data-theme="light"] :where(.top-nav, .mobile-drawer, .mega-menu, .card, .product-card, .product-card-v39, .accessory-card, .service-card, .support-card, .form-card, .product-panel, .trust-box, .filter-box, .search-panel, .product-media-card, .product-config-card, .purchase-summary-card, .selection-step, .mg-search-shell, .mg-filter-sort-panel, .mg-page-bottom-cta) {
  border-color: rgba(252,101,1,.18) !important;
}

html[data-theme="light"] :where(.btn.soft, .secondary-btn, .ghost-btn, .option, .category-filter, .filter-pill, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn, .header-icon-button, .mode-icon-button, .search-icon-button, .whatsapp-icon-button) {
  border-color: rgba(252,101,1,.22) !important;
}

html[data-theme="light"] :where(.option.active, .option[aria-pressed="true"], .option[aria-selected="true"], .category-filter.active, .category-filter.is-active, .category-filter[aria-pressed="true"], .filter-pill.active, .filter-pill.is-active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  background: rgba(252,101,1,.12) !important;
  background-image: none !important;
  border-color: rgba(252,101,1,.78) !important;
  color: #FC6501 !important;
  -webkit-text-fill-color: #FC6501 !important;
  box-shadow: 0 0 0 2px rgba(252,101,1,.14), 0 12px 28px rgba(252,101,1,.12) !important;
}

html[data-theme="dark"] :where(.eyebrow, .kicker, .store-card-kicker, .product-kicker, .card-kicker, .tag, .price, .orange-text, .formula-positive, .formula-result, .mg-back-to-top, .top-nav a[aria-current="page"]:not(.logo-mark), .mobile-drawer a[aria-current="page"], .mg-filter-sort-label, .product-card[data-category="accessories"] .tag, .condition-chip-open-box, .product-card[data-condition*="Open Box"] .tag) {
  color: #A78BFA !important;
  -webkit-text-fill-color: #A78BFA !important;
}

html[data-theme="dark"] :where(:focus-visible) {
  outline-color: rgba(167,139,250,.72) !important;
}

html[data-theme="dark"] :where(.primary-btn, button.primary-btn, a.primary-btn, .btn.orange, .cta-button, .price-cta, #checkoutBtn, #sendTradeBtn) {
  background: linear-gradient(180deg, #A78BFA, #8B5CF6) !important;
  border-color: rgba(167,139,250,.38) !important;
  box-shadow: 0 14px 34px rgba(139,92,246,.24) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] :where(.primary-btn:hover, .primary-btn:focus-visible, .btn.orange:hover, .btn.orange:focus-visible, .cta-button:hover, .cta-button:focus-visible, .price-cta:hover, .price-cta:focus-visible, #checkoutBtn:hover, #checkoutBtn:focus-visible, #sendTradeBtn:hover, #sendTradeBtn:focus-visible) {
  background: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  border-color: rgba(196,181,253,.48) !important;
}

html[data-theme="dark"] :where(.secondary-btn:hover, .secondary-btn:focus-visible, .ghost-btn:hover, .ghost-btn:focus-visible, .btn.soft:hover, .btn.soft:focus-visible, .mg-filter-sort-open:hover, .mg-filter-sort-open:focus-visible, .mg-filter-option:hover, .mg-sort-option:hover, .mg-page-btn:hover, .category-filter:hover, .filter-pill:hover) {
  background: rgba(139,92,246,.16) !important;
  border-color: rgba(167,139,250,.58) !important;
}

html[data-theme="dark"] :where(.option.active, .option[aria-pressed="true"], .option[aria-selected="true"], .category-filter.active, .category-filter.is-active, .category-filter[aria-pressed="true"], .filter-pill.active, .filter-pill.is-active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  background: rgba(139,92,246,.18) !important;
  background-image: none !important;
  background-color: rgba(139,92,246,.18) !important;
  border-color: rgba(167,139,250,.82) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.18), 0 12px 28px rgba(139,92,246,.18) !important;
}

html[data-theme="dark"] :where(.family-option-count, .future-hot-deals-placeholder, .mg-search-result:hover, .mg-search-quick a:hover, .trade-math-formula, .sell-math-formula, .policy-note, .estimate-box, .deduction-panel) {
  background: rgba(139,92,246,.12) !important;
  border-color: rgba(167,139,250,.26) !important;
}

html[data-theme="dark"] body :is(.eyebrow, .kicker, .store-card-kicker, .product-kicker, .card-kicker, .tag, .price, .orange-text, .formula-positive, .formula-result, .mg-back-to-top, .mg-filter-sort-label) {
  color: #A78BFA !important;
  -webkit-text-fill-color: #A78BFA !important;
}

html[data-theme="dark"] body :is(.primary-btn, button.primary-btn, a.primary-btn, .btn.orange, .cta-button, .price-cta, #checkoutBtn, #sendTradeBtn) {
  background: linear-gradient(180deg, #A78BFA, #8B5CF6) !important;
  background-image: linear-gradient(180deg, #A78BFA, #8B5CF6) !important;
  border-color: rgba(167,139,250,.38) !important;
  box-shadow: 0 14px 34px rgba(139,92,246,.24) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(.primary-btn:hover, .primary-btn:focus-visible, .btn.orange:hover, .btn.orange:focus-visible, .cta-button:hover, .cta-button:focus-visible, .price-cta:hover, .price-cta:focus-visible, #checkoutBtn:hover, #checkoutBtn:focus-visible, #sendTradeBtn:hover, #sendTradeBtn:focus-visible) {
  background: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  background-image: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  border-color: rgba(196,181,253,.48) !important;
}

html[data-theme="dark"] body :is(.top-nav a:not(.logo-mark), .top-nav button, .nav-links a, .mobile-drawer a, .mega-menu a, .category-filter, .filter-pill, .store-section-link, .apple-store-section-head a, .apple-store-help a, .contact-link-list a, .social-logo-grid a, .support-card a, .secondary-btn, .ghost-btn, .btn.soft, .mg-filter-sort-open, .mg-filter-option, .mg-sort-option, .mg-page-btn) {
  border-color: rgba(167,139,250,.32) !important;
}

html[data-theme="dark"] body :is(.secondary-btn:hover, .secondary-btn:focus-visible, .ghost-btn:hover, .ghost-btn:focus-visible, .btn.soft:hover, .btn.soft:focus-visible, .category-filter:hover, .category-filter:focus-visible, .filter-pill:hover, .filter-pill:focus-visible, .store-section-link:hover, .store-section-link:focus-visible, .apple-store-section-head a:hover, .apple-store-help a:hover, .contact-link-list a:hover, .social-logo-grid a:hover, .support-card a:hover, .mg-filter-sort-open:hover, .mg-filter-sort-open:focus-visible, .mg-filter-option:hover, .mg-sort-option:hover, .mg-page-btn:hover) {
  background: rgba(139,92,246,.16) !important;
  background-image: none !important;
  border-color: rgba(167,139,250,.58) !important;
}

html[data-theme="dark"] body :is(.option.active, .option[aria-pressed="true"], .option[aria-selected="true"], .category-filter.active, .category-filter.is-active, .category-filter[aria-pressed="true"], .filter-pill.active, .filter-pill.is-active, .mg-filter-option.is-active, .mg-sort-option.is-active, .mg-page-btn.is-active) {
  background: rgba(139,92,246,.18) !important;
  background-image: none !important;
  background-color: rgba(139,92,246,.18) !important;
  border-color: rgba(167,139,250,.82) !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.18), 0 12px 28px rgba(139,92,246,.18) !important;
}

html[data-theme="dark"] body.mobile-layout-safe :is(.eyebrow, .kicker, .store-card-kicker, .product-kicker, .card-kicker),
html[data-theme="dark"] body.web-layout-safe :is(.eyebrow, .kicker, .store-card-kicker, .product-kicker, .card-kicker),
html[data-theme="dark"] body :is(.catalog-header .eyebrow, .section-heading .eyebrow, .page-hero .eyebrow, .product-card .tag, .product-card-v39 .tag, .accessory-card .tag) {
  color: #A78BFA !important;
  -webkit-text-fill-color: #A78BFA !important;
}

html[data-theme="dark"] body :is(.product-image-link, .product-card .product-image-link, .product-card-v18 .product-image-link, .product-card-v24 .product-image-link, .product-card-v27 .product-image-link, .product-card-v35 .product-image-link, .product-card-v39 .product-image-link, .accessory-card .product-image-link, .product-grid-locked > .product-card .product-image-link) {
  background:
    radial-gradient(circle at 50% 0%, rgba(167,139,250,.12), transparent 40%),
    rgba(255,255,255,.043) !important;
  background-color: rgba(255,255,255,.043) !important;
  border-color: rgba(167,139,250,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.18) !important;
}

html[data-theme="dark"] body :is(.product-image-link:has(img[src*="assets/products/placeholders/image-needed.svg"]), .accessory-card .product-image-link:has(img[src*="assets/products/placeholders/image-needed.svg"])) {
  outline-color: rgba(167,139,250,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.18) !important;
}

/* V1.137 dark ribbon cleanup: plain titles until current, hover, or press */
html[data-theme="dark"] body .top-nav {
  background:
    linear-gradient(180deg, rgba(26,26,26,.94), rgba(26,26,26,.88)) !important;
  border-bottom-color: rgba(167,139,250,.22) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] body :is(
  .top-nav .nav-links > .nav-item > a:not(.active):not([aria-current="page"]),
  .top-nav .nav-links > a:not(.active):not([aria-current="page"])
) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
}

html[data-theme="dark"] body :is(
  .top-nav .nav-links > .nav-item > a:not(.active):not([aria-current="page"]):hover,
  .top-nav .nav-links > .nav-item > a:not(.active):not([aria-current="page"]):focus-visible,
  .top-nav .nav-links > .nav-item > a:not(.active):not([aria-current="page"]):active,
  .top-nav .nav-links > .nav-item > a:not(.active):not([aria-current="page"]).mg-glass-press,
  .top-nav .nav-links > a:not(.active):not([aria-current="page"]):hover,
  .top-nav .nav-links > a:not(.active):not([aria-current="page"]):focus-visible,
  .top-nav .nav-links > a:not(.active):not([aria-current="page"]):active,
  .top-nav .nav-links > a:not(.active):not([aria-current="page"]).mg-glass-press
) {
  background: rgba(139,92,246,.16) !important;
  background-image: none !important;
  border-color: rgba(167,139,250,.58) !important;
  box-shadow: 0 10px 26px rgba(139,92,246,.18) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .top-nav .nav-links > .nav-item > a.active,
  .top-nav .nav-links > .nav-item > a[aria-current="page"],
  .top-nav .nav-links > a.active,
  .top-nav .nav-links > a[aria-current="page"]
) {
  background: rgba(139,92,246,.20) !important;
  background-image: none !important;
  border-color: rgba(167,139,250,.78) !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.16), 0 12px 28px rgba(139,92,246,.22) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .top-nav a:not(.logo-mark),
  .top-nav button,
  .mobile-drawer a,
  .header-icon-button,
  .menu-icon-button,
  .mode-icon-button,
  .search-icon-button,
  .whatsapp-icon-button,
  .theme-toggle,
  .mode-toggle,
  .search-toggle,
  .whatsapp-toggle,
  .primary-btn,
  .secondary-btn,
  .cta-button,
  .price-cta,
  .store-section-link,
  .mg-filter-sort-open,
  .mg-filter-option,
  .mg-sort-option,
  .mg-page-btn,
  #checkoutBtn,
  #sendTradeBtn
)::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), transparent 42%),
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.38), transparent 34%),
    radial-gradient(circle at 72% 100%, rgba(167,139,250,.26), transparent 38%) !important;
}

html[data-theme="dark"] body :is(
  .top-nav a:not(.logo-mark):active,
  .top-nav a:not(.logo-mark).mg-glass-press,
  .top-nav button:active,
  .top-nav button.mg-glass-press,
  .mobile-drawer a:active,
  .mobile-drawer a.mg-glass-press,
  .header-icon-button:active,
  .header-icon-button.mg-glass-press,
  .menu-icon-button:active,
  .menu-icon-button.mg-glass-press,
  .mode-icon-button:active,
  .mode-icon-button.mg-glass-press,
  .search-icon-button:active,
  .search-icon-button.mg-glass-press,
  .whatsapp-icon-button:active,
  .whatsapp-icon-button.mg-glass-press,
  .theme-toggle:active,
  .theme-toggle.mg-glass-press,
  .mode-toggle:active,
  .mode-toggle.mg-glass-press,
  .search-toggle:active,
  .search-toggle.mg-glass-press,
  .whatsapp-toggle:active,
  .whatsapp-toggle.mg-glass-press
) {
  box-shadow: inset 0 2px 10px rgba(0,0,0,.28), 0 10px 26px rgba(139,92,246,.20) !important;
}

html[data-theme="dark"] body :is(
  .primary-btn:active,
  .primary-btn.mg-glass-press,
  button.primary-btn:active,
  a.primary-btn:active,
  .cta-button:active,
  .cta-button.mg-glass-press,
  .price-cta:active,
  .price-cta.mg-glass-press,
  #checkoutBtn:active,
  #checkoutBtn.mg-glass-press,
  #sendTradeBtn:active,
  #sendTradeBtn.mg-glass-press
) {
  background: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  background-image: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  border-color: rgba(196,181,253,.48) !important;
  box-shadow: inset 0 2px 12px rgba(0,0,0,.24), 0 12px 28px rgba(139,92,246,.26) !important;
}

html[data-theme="dark"] body :is(
  .secondary-btn:active,
  .secondary-btn.mg-glass-press,
  button.secondary-btn:active,
  a.secondary-btn:active,
  .store-section-link:active,
  .store-section-link.mg-glass-press,
  .mg-filter-sort-open:active,
  .mg-filter-sort-open.mg-glass-press,
  .mg-filter-option:active,
  .mg-filter-option.mg-glass-press,
  .mg-sort-option:active,
  .mg-sort-option.mg-glass-press,
  .mg-page-btn:active,
  .mg-page-btn.mg-glass-press
) {
  background: rgba(139,92,246,.18) !important;
  background-image: none !important;
  border-color: rgba(167,139,250,.62) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.20), 0 10px 26px rgba(139,92,246,.18) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .product-card:hover .price-cta,
  .product-card-v39:hover .price-cta,
  .product-card:hover .cta-button,
  .product-card-v39:hover .cta-button,
  .interactive-card:hover .price-cta,
  .interactive-card:hover .cta-button
) {
  background: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  background-image: linear-gradient(180deg, #C4B5FD, #8B5CF6) !important;
  box-shadow: 0 18px 42px rgba(139,92,246,.24), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* V1.138 dark mode warm-accent sweep: purple only on interactive states */
html[data-theme="dark"],
html.mg-mode-dark,
html.dark,
html.dark-mode,
body.dark,
body.dark-mode {
  --mg-glass-border-active: rgba(167,139,250,.64) !important;
  --mg-glass-shadow-active: 0 18px 46px rgba(139,92,246,.22) !important;
  --mg-cta-bg: linear-gradient(135deg, rgba(196,181,253,.98), rgba(139,92,246,.98) 48%, rgba(109,40,217,.98)) !important;
  --mg-cta-bg-active: linear-gradient(135deg, rgba(221,214,254,.98), rgba(139,92,246,.98) 46%, rgba(91,33,182,.98)) !important;
}

html[data-theme="dark"] body :is(
  .top-nav .nav-links > .nav-item > a.active,
  .top-nav .nav-links > .nav-item > a[aria-current="page"],
  .top-nav .nav-links > a.active,
  .top-nav .nav-links > a[aria-current="page"],
  .top-nav .mega-menu a:hover,
  .top-nav .mega-menu a:focus-visible,
  .top-nav .mega-menu a:active,
  .top-nav .mega-menu a.mg-glass-press,
  .top-nav .mega-menu a[aria-current="page"],
  .dropdown-menu a:hover,
  .dropdown-menu a:focus-visible,
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible,
  .submenu a:hover,
  .submenu a:focus-visible,
  .category-filter:hover,
  .category-filter:focus-visible,
  .category-filter:active,
  .category-filter.mg-glass-press,
  .category-filter.active,
  .category-filter.is-active,
  .category-filter[aria-pressed="true"],
  .filter-pill:hover,
  .filter-pill:focus-visible,
  .filter-pill:active,
  .filter-pill.mg-glass-press,
  .filter-pill.active,
  .filter-pill.is-active,
  .option:hover,
  .option:focus-visible,
  .option.active,
  .option[aria-pressed="true"],
  .option[aria-selected="true"],
  .mg-filter-option:hover,
  .mg-filter-option:focus-visible,
  .mg-filter-option:active,
  .mg-filter-option.mg-glass-press,
  .mg-filter-option.is-active,
  .mg-sort-option:hover,
  .mg-sort-option:focus-visible,
  .mg-sort-option:active,
  .mg-sort-option.mg-glass-press,
  .mg-sort-option.is-active,
  .mg-page-btn:hover,
  .mg-page-btn:focus-visible,
  .mg-page-btn:active,
  .mg-page-btn.mg-glass-press,
  .mg-page-btn.is-active
) {
  background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(139,92,246,.16)) !important;
  background-image: linear-gradient(135deg, rgba(167,139,250,.22), rgba(139,92,246,.16)) !important;
  background-color: rgba(139,92,246,.18) !important;
  border-color: rgba(196,181,253,.68) !important;
  box-shadow: 0 0 0 2px rgba(167,139,250,.16), 0 12px 28px rgba(139,92,246,.18) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .top-nav .mega-menu a,
  .dropdown-menu a,
  .nav-dropdown-menu a,
  .submenu a
)::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 42%),
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.30), transparent 34%),
    radial-gradient(circle at 72% 100%, rgba(167,139,250,.28), transparent 38%) !important;
}

html[data-theme="dark"] body :is(
  .product-grid-locked > .product-card,
  .product-card,
  .product-card-v18,
  .product-card-v24,
  .product-card-v27,
  .product-card-v35,
  .product-card-v39,
  .accessory-card,
  .store-feature-card,
  .store-icon-card,
  .store-scroll-card
) {
  border-color: rgba(167,139,250,.26) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] body :is(
  .product-grid-locked > .product-card:hover,
  .product-card:hover,
  .product-card.card-pressed,
  .product-card-v18:hover,
  .product-card-v24:hover,
  .product-card-v27:hover,
  .product-card-v35:hover,
  .product-card-v35.card-pressed,
  .product-card-v39:hover,
  .product-card-v39.card-pressed,
  .accessory-card:hover,
  .store-feature-card:hover,
  .store-feature-card.card-pressed,
  .store-icon-card:hover,
  .store-scroll-card:hover
) {
  border-color: rgba(196,181,253,.58) !important;
  box-shadow: 0 18px 44px rgba(139,92,246,.18), 0 28px 72px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] body :is(
  a.product-card.interactive-card,
  a.product-card-v35,
  a.product-card-v39,
  .store-feature-card.interactive-card,
  .store-icon-card.interactive-card,
  .store-scroll-card.interactive-card
)::after {
  background: rgba(139,92,246,.14) !important;
  border-color: rgba(167,139,250,.26) !important;
}

html[data-theme="dark"] body :is(
  .product-card .family-option-count,
  .product-card-v39 .family-option-count,
  .accessory-card .family-option-count,
  .product-card .tag,
  .product-card-v39 .tag,
  .accessory-card .tag
) {
  background: rgba(139,92,246,.18) !important;
  background-image: none !important;
  border-color: rgba(196,181,253,.38) !important;
  color: #C4B5FD !important;
  -webkit-text-fill-color: #C4B5FD !important;
}

html[data-theme="dark"] body :is(
  .mg-filter-sort-apply,
  .mg-mode-cta-text,
  .global-search-submit,
  .repair-submit-btn,
  .help-choosing-section .help-choosing-link
) {
  background: linear-gradient(135deg, #8B5CF6, #C4B5FD) !important;
  background-image: linear-gradient(135deg, #8B5CF6, #C4B5FD) !important;
  border-color: rgba(196,181,253,.44) !important;
  box-shadow: 0 14px 34px rgba(139,92,246,.24) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .mg-back-to-top,
  .mg-field-toast
) {
  border-color: rgba(167,139,250,.38) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34), 0 10px 28px rgba(139,92,246,.16) !important;
}

/* V1.140 final dark ribbon lock: no warm hover/current indicator */
html[data-theme="dark"] body .top-nav,
html.mg-mode-dark body .top-nav,
html.dark body .top-nav,
body.dark .top-nav {
  --slick-orange: #C4B5FD !important;
  --slick-orange-2: #DDD6FE !important;
  --mg-glass-border-active: rgba(196,181,253,.70) !important;
  --mg-glass-shadow: 0 14px 34px rgba(139,92,246,.18) !important;
  --mg-glass-shadow-active: 0 18px 46px rgba(139,92,246,.24) !important;
}

html[data-theme="dark"] body .top-nav :is(
  .nav-links > .nav-item > a:not(.logo-mark):hover,
  .nav-links > .nav-item > a:not(.logo-mark):focus-visible,
  .nav-links > .nav-item > a:not(.logo-mark):active,
  .nav-links > .nav-item > a:not(.logo-mark).mg-glass-press,
  .nav-links > .nav-item > a:not(.logo-mark).active,
  .nav-links > .nav-item > a:not(.logo-mark)[aria-current="page"],
  .nav-links > .nav-item:hover > a:not(.logo-mark),
  .nav-links > .nav-item:focus-within > a:not(.logo-mark),
  .nav-links > a:not(.logo-mark):hover,
  .nav-links > a:not(.logo-mark):focus-visible,
  .nav-links > a:not(.logo-mark):active,
  .nav-links > a:not(.logo-mark).mg-glass-press,
  .nav-links > a:not(.logo-mark).active,
  .nav-links > a:not(.logo-mark)[aria-current="page"]
) {
  background: linear-gradient(135deg, rgba(196,181,253,.26), rgba(139,92,246,.20)) !important;
  background-image: linear-gradient(135deg, rgba(196,181,253,.26), rgba(139,92,246,.20)) !important;
  background-color: rgba(139,92,246,.20) !important;
  border-color: rgba(221,214,254,.74) !important;
  box-shadow: 0 0 0 2px rgba(196,181,253,.18), 0 14px 32px rgba(139,92,246,.24) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  outline-color: rgba(221,214,254,.78) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body .top-nav :is(
  .nav-links > .nav-item > a:not(.logo-mark):hover,
  .nav-links > .nav-item > a:not(.logo-mark):focus-visible,
  .nav-links > .nav-item > a:not(.logo-mark):active,
  .nav-links > .nav-item > a:not(.logo-mark).mg-glass-press,
  .nav-links > .nav-item > a:not(.logo-mark).active,
  .nav-links > .nav-item > a:not(.logo-mark)[aria-current="page"],
  .nav-links > .nav-item:hover > a:not(.logo-mark),
  .nav-links > .nav-item:focus-within > a:not(.logo-mark),
  .nav-links > a:not(.logo-mark):hover,
  .nav-links > a:not(.logo-mark):focus-visible,
  .nav-links > a:not(.logo-mark):active,
  .nav-links > a:not(.logo-mark).mg-glass-press,
  .nav-links > a:not(.logo-mark).active,
  .nav-links > a:not(.logo-mark)[aria-current="page"]
)::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 42%),
    radial-gradient(circle at 28% 0%, rgba(221,214,254,.34), transparent 34%),
    radial-gradient(circle at 72% 100%, rgba(139,92,246,.36), transparent 40%) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body .top-nav :is(
  .nav-links > .nav-item > a:not(.logo-mark):hover,
  .nav-links > .nav-item > a:not(.logo-mark):focus-visible,
  .nav-links > .nav-item > a:not(.logo-mark):active,
  .nav-links > .nav-item > a:not(.logo-mark).mg-glass-press,
  .nav-links > .nav-item > a:not(.logo-mark).active,
  .nav-links > .nav-item > a:not(.logo-mark)[aria-current="page"],
  .nav-links > .nav-item:hover > a:not(.logo-mark),
  .nav-links > .nav-item:focus-within > a:not(.logo-mark),
  .nav-links > a:not(.logo-mark):hover,
  .nav-links > a:not(.logo-mark):focus-visible,
  .nav-links > a:not(.logo-mark):active,
  .nav-links > a:not(.logo-mark).mg-glass-press,
  .nav-links > a:not(.logo-mark).active,
  .nav-links > a:not(.logo-mark)[aria-current="page"]
)::after {
  background: rgba(167,139,250,.28) !important;
  background-image: none !important;
  border-color: rgba(196,181,253,.42) !important;
  box-shadow: 0 8px 22px rgba(139,92,246,.20) !important;
}

/* V1.141 dark UI sweep: no warm side-card, summary, timeline, or social drift */
html[data-theme="dark"] body :is(
  .summary-total,
  .repair-hero-card,
  .support-hero-card,
  .support-priority
) {
  background:
    radial-gradient(circle at 92% 0%, rgba(167,139,250,.14), transparent 34%),
    #1A1A1A !important;
  background-color: #1A1A1A !important;
  border-color: rgba(167,139,250,.30) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 12px 32px rgba(139,92,246,.14) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .summary-total span,
  .summary-total strong,
  .repair-hero-card h2,
  .repair-hero-card p,
  .support-hero-card strong,
  .support-hero-card p
) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html[data-theme="dark"] body :is(
  .repair-hero-card .eyebrow,
  .support-hero-card span,
  .support-policy-card span
) {
  color: #C4B5FD !important;
  -webkit-text-fill-color: #C4B5FD !important;
}

html[data-theme="dark"] body .trade-mobile-summary-strip span {
  background: rgba(139,92,246,.14) !important;
  background-image: none !important;
  border-color: rgba(167,139,250,.30) !important;
  box-shadow: none !important;
  color: #F8F5FF !important;
  -webkit-text-fill-color: #F8F5FF !important;
}

body :is(.social-logo-grid, .footer-social-icons) a {
  font-size: 0 !important;
  line-height: 0 !important;
}

body :is(.social-logo-grid, .footer-social-icons) a > :is(span, strong) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body :is(.social-logo-grid, .footer-social-icons) a > img,
body :is(.social-logo-grid, .footer-social-icons) a > svg {
  flex: 0 0 auto !important;
}

/* V1.142 ribbon label fit: keep desktop nav text from pinching */
body .top-nav .nav-links {
  min-width: 0 !important;
}

body .top-nav .nav-links > a:not(.logo-mark),
body .top-nav .nav-links > .nav-item,
body .top-nav .nav-links > .nav-item > a:not(.logo-mark) {
  flex: 0 0 auto !important;
}

body .top-nav .nav-links > a:not(.logo-mark),
body .top-nav .nav-links > .nav-item > a:not(.logo-mark) {
  min-width: max-content !important;
  padding-inline: 14px !important;
  white-space: nowrap !important;
}


/* V1.143 Shopify Warehouse-style product design */
body.warehouse-product-design .product-detail-section {
  padding-top: clamp(24px, 5vw, 54px) !important;
}

.warehouse-product-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  width: 100%;
  margin: 0 0 6px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,.12)) 70%, var(--orange, #fc6501) 30%);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(252, 101, 1, .18), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface, #ffffff) 94%, var(--orange, #fc6501) 6%), color-mix(in srgb, var(--surface, #ffffff) 98%, var(--purple, #110933) 2%));
  box-shadow: 0 20px 55px rgba(17, 9, 51, .14);
}

.warehouse-product-header h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.35rem, 2.6vw, 2.5rem);
  letter-spacing: -.045em;
  color: var(--text, #110933);
  -webkit-text-fill-color: var(--text, #110933);
}

.warehouse-product-header p {
  margin: 0;
  color: var(--muted, #5a536a);
  -webkit-text-fill-color: var(--muted, #5a536a);
}

.warehouse-status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 460px;
}

.warehouse-status-strip span,
.warehouse-quick-promises span,
.warehouse-media-checks span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid rgba(252, 101, 1, .22);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(252, 101, 1, .09);
  color: var(--orange, #fc6501);
  -webkit-text-fill-color: var(--orange, #fc6501);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1;
}

body.warehouse-product-design .product-detail-grid-v39,
body.warehouse-product-design .product-detail-grid {
  grid-template-columns: minmax(270px, .92fr) minmax(0, 1.16fr) minmax(310px, .72fr) !important;
  align-items: start !important;
}

body.warehouse-product-design .product-media-card,
body.warehouse-product-design .product-config-card,
body.warehouse-product-design .purchase-summary-card {
  border-radius: 28px !important;
  border-color: color-mix(in srgb, var(--line, rgba(255,255,255,.12)) 68%, var(--orange, #fc6501) 32%) !important;
  box-shadow: 0 24px 70px rgba(17, 9, 51, .15) !important;
  overflow: hidden;
}

body.warehouse-product-design .product-media-card,
body.warehouse-product-design .purchase-summary-card {
  position: sticky;
  top: 96px;
}

body.warehouse-product-design .product-media-card img#productImage {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  padding: clamp(12px, 2vw, 22px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(252,101,1,.08)),
    radial-gradient(circle at center, rgba(252,101,1,.12), transparent 42%);
  border: 1px solid rgba(252, 101, 1, .14);
}

.warehouse-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.warehouse-gallery-tile {
  min-height: 42px;
  border: 1px solid var(--line, rgba(255,255,255,.13));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--orange, #fc6501) 8%);
  color: var(--text, #110933);
  -webkit-text-fill-color: var(--text, #110933);
  font-weight: 850;
  font-size: .76rem;
  cursor: default;
}

.warehouse-gallery-tile.active {
  border-color: rgba(252, 101, 1, .40);
  color: var(--orange, #fc6501);
  -webkit-text-fill-color: var(--orange, #fc6501);
  background: rgba(252, 101, 1, .13);
}

.warehouse-media-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.warehouse-product-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.warehouse-meta-card {
  border: 1px solid var(--line, rgba(255,255,255,.13));
  border-radius: 18px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 90%, var(--orange, #fc6501) 10%);
}

.warehouse-meta-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted, #5a536a);
  -webkit-text-fill-color: var(--muted, #5a536a);
  font-size: .72rem;
  font-weight: 750;
}

.warehouse-meta-card strong {
  display: block;
  color: var(--text, #110933);
  -webkit-text-fill-color: var(--text, #110933);
  font-size: clamp(.82rem, 1.2vw, .98rem);
  letter-spacing: -.02em;
}

.warehouse-quick-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 2px;
}

body.warehouse-product-design .selection-step {
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface, #fff) 96%, var(--orange, #fc6501) 4%), color-mix(in srgb, var(--bg, #fff) 94%, var(--orange, #fc6501) 6%)) !important;
}

body.warehouse-product-design .selection-step h3 {
  font-size: .9rem !important;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

body.warehouse-product-design .option {
  border-radius: 16px !important;
  min-height: 54px;
  justify-content: center;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--orange, #fc6501) 6%) !important;
}

body.warehouse-product-design .option.active {
  border-color: var(--orange, #fc6501) !important;
  box-shadow: 0 10px 30px rgba(252, 101, 1, .18) !important;
}

body.warehouse-product-design .purchase-summary-card {
  background:
    radial-gradient(circle at top right, rgba(252,101,1,.16), transparent 35%),
    var(--surface, #fff) !important;
}

.warehouse-summary-benefits {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

.warehouse-summary-benefits div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--orange, #fc6501) 8%);
}

.warehouse-summary-benefits strong {
  color: var(--text, #110933);
  -webkit-text-fill-color: var(--text, #110933);
  font-size: .83rem;
}

.warehouse-summary-benefits span {
  color: var(--muted, #5a536a);
  -webkit-text-fill-color: var(--muted, #5a536a);
  font-size: .76rem;
  line-height: 1.35;
}

body.warehouse-product-design .summary-total {
  border-radius: 20px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(252,101,1,.18), rgba(255,165,105,.10)) !important;
  border: 1px solid rgba(252, 101, 1, .26) !important;
}

body.warehouse-product-design #summaryPrice {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem) !important;
}

body.warehouse-product-design #checkoutBtn {
  min-height: 54px !important;
  border-radius: 18px !important;
  font-size: .98rem !important;
  box-shadow: 0 18px 42px rgba(252, 101, 1, .24) !important;
}

.product-card.product-card-v39,
.accessory-card,
.store-feature-card {
  border-radius: 22px !important;
  border-color: color-mix(in srgb, var(--line, rgba(255,255,255,.12)) 78%, var(--orange, #fc6501) 22%) !important;
}

.product-card.product-card-v39:hover,
.accessory-card:hover,
.store-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(17, 9, 51, .16) !important;
}

.product-card .price-cta,
.store-feature-card strong {
  border-radius: 14px !important;
}

html[data-theme="dark"] .warehouse-product-header,
html[data-theme="dark"] .warehouse-meta-card,
html[data-theme="dark"] .warehouse-summary-benefits div,
html[data-theme="dark"] .warehouse-gallery-tile {
  background: rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] body.warehouse-product-design .selection-step {
  background: rgba(255, 255, 255, .045) !important;
}

@media (max-width: 1180px) {
  body.warehouse-product-design .product-detail-grid-v39,
  body.warehouse-product-design .product-detail-grid {
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr) !important;
  }

  body.warehouse-product-design .purchase-summary-card {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 760px) {
  .warehouse-product-header {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 1360px);
    margin-inline: auto;
    padding: 16px;
    border-radius: 24px;
  }

  .warehouse-status-strip {
    justify-content: flex-start;
  }

  body.warehouse-product-design .product-detail-grid-v39,
  body.warehouse-product-design .product-detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.warehouse-product-design .product-media-card,
  body.warehouse-product-design .purchase-summary-card {
    position: static;
  }

  .warehouse-product-meta-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-gallery-strip {
    grid-template-columns: 1fr 1fr;
  }

  .warehouse-gallery-tile:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .warehouse-status-strip span,
  .warehouse-quick-promises span,
  .warehouse-media-checks span {
    font-size: .68rem;
    padding: 7px 8px;
  }
}

/* V1.144 launch cleanup: keep desktop nav links from colliding with header icons. */
@media (min-width: 901px) {
  .top-nav .nav-inner {
    width: min(1240px, calc(100% - 28px)) !important;
    gap: 12px !important;
  }

  .top-nav .logo-mark {
    flex: 0 0 auto !important;
  }

  .top-nav .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: clamp(8px, 1.25vw, 18px) !important;
  }

  .top-nav .nav-links > a,
  .top-nav .nav-links > .nav-item > a {
    padding-left: clamp(8px, .9vw, 14px) !important;
    padding-right: clamp(8px, .9vw, 14px) !important;
    font-size: clamp(12px, .95vw, 14px) !important;
  }

  .top-nav .nav-icons {
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin-left: 2px !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .top-nav .nav-inner {
    width: min(calc(100% - 20px), 1120px) !important;
    gap: 8px !important;
  }

  .top-nav .nav-links {
    gap: 6px !important;
  }

  .top-nav .nav-links > a,
  .top-nav .nav-links > .nav-item > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }
}


/* V1.145 launch cleanup fixes: section ribbon, menu hover, settlement copy */
.mg-floating-section-name {
  position: sticky;
  top: 44px;
  z-index: 198;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line, rgba(26,26,26,.12));
  background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 28px rgba(17, 9, 51, .06);
}

.mg-floating-section-name span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 14px;
  border: 1px solid rgba(252,101,1,.22);
  border-radius: 999px;
  background: rgba(252,101,1,.09);
  color: var(--orange, #fc6501);
  -webkit-text-fill-color: var(--orange, #fc6501);
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.formula-cashback-note {
  margin: 12px 0 0;
  color: var(--muted, #55505f);
  font-weight: 800;
}

@media (min-width: 901px) {
  body .top-nav .has-mega {
    position: relative !important;
  }

  body .top-nav .has-mega > .mega-menu {
    display: grid !important;
    top: calc(100% + 1px) !important;
    left: 50% !important;
    right: auto !important;
    min-width: min(760px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    transform: translate(-50%, 10px) scale(.985) !important;
  }

  body .top-nav .has-mega > .mega-menu.compact {
    min-width: min(520px, calc(100vw - 32px)) !important;
  }

  body .top-nav .has-mega > .mega-menu.wide {
    min-width: min(860px, calc(100vw - 32px)) !important;
  }

  body .top-nav .has-mega:hover > .mega-menu,
  body .top-nav .has-mega:focus-within > .mega-menu,
  body .top-nav .has-mega.mega-open > .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  body .top-nav .has-mega:not(:hover):not(:focus-within):not(.mega-open) > .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

html[data-theme="dark"] .mg-floating-section-name {
  background: rgba(26,26,26,.88);
  border-bottom-color: rgba(167,139,250,.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

html[data-theme="dark"] .mg-floating-section-name span {
  border-color: rgba(167,139,250,.34);
  background: rgba(139,92,246,.16);
  color: #c4b5fd;
  -webkit-text-fill-color: #c4b5fd;
}

html[data-theme="dark"] .formula-cashback-note {
  color: rgba(255,255,255,.76);
}

@media (max-width: 760px) {
  .mg-floating-section-name {
    min-height: 34px;
    padding: 6px 12px;
  }

  .mg-floating-section-name span {
    font-size: .75rem;
  }
}


/* V1.146 light-first UI stabilization + dark override + bug fixes */
:root,
html:not([data-theme="dark"]),
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf9ff;
  --surface: #ffffff;
  --surface-2: #f6f1ff;
  --text: #110933;
  --muted: #514766;
  --line: rgba(17, 9, 51, .13);
  --card: #ffffff;
  --button-soft: rgba(252, 101, 1, .09);
  --button-soft-text: #110933;
  --mg-sticky-section-top: 64px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #110933;
  --surface: #19122f;
  --surface-2: #241b42;
  --text: #fff9f3;
  --muted: rgba(255, 249, 243, .74);
  --line: rgba(255, 255, 255, .14);
  --card: #19122f;
  --button-soft: rgba(255, 255, 255, .075);
  --button-soft-text: #fff9f3;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .section,
html:not([data-theme="dark"]) .product-card,
html:not([data-theme="dark"]) .store-feature-card,
html:not([data-theme="dark"]) .product-config-card,
html:not([data-theme="dark"]) .purchase-summary-card,
html:not([data-theme="dark"]) .trade-card,
html:not([data-theme="dark"]) .smart-form,
html:not([data-theme="dark"]) .mg-filter-sort-panel {
  color: var(--text) !important;
  -webkit-text-fill-color: initial;
}

html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) strong,
html:not([data-theme="dark"]) label,
html:not([data-theme="dark"]) .summary-row span,
html:not([data-theme="dark"]) .summary-row strong {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) small,
html:not([data-theme="dark"]) .muted,
html:not([data-theme="dark"]) .field-hint,
html:not([data-theme="dark"]) .product-card p,
html:not([data-theme="dark"]) .store-feature-card p {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .section,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .store-feature-card,
html[data-theme="dark"] .product-config-card,
html[data-theme="dark"] .purchase-summary-card,
html[data-theme="dark"] .trade-card,
html[data-theme="dark"] .smart-form,
html[data-theme="dark"] .mg-filter-sort-panel {
  color: var(--text) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] label {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .store-feature-card p {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

.secondary-btn,
.mg-filter-sort-open,
.mg-filter-option,
.mg-sort-option,
.mg-page-btn,
.option {
  background: var(--button-soft) !important;
  color: var(--button-soft-text) !important;
  -webkit-text-fill-color: var(--button-soft-text) !important;
  border-color: var(--line) !important;
}

.primary-btn,
.cta-button,
.price-cta,
#checkoutBtn,
#sendTradeBtn,
#sellWhatsappBtn {
  background: linear-gradient(135deg, #fc6501, #ffa569) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
}

.mg-floating-section-name {
  position: sticky !important;
  top: var(--mg-sticky-section-top, 64px) !important;
  z-index: 998 !important;
  width: 100%;
  min-height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.mg-floating-section-name span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(252, 101, 1, .28);
  background: rgba(252, 101, 1, .10);
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  font-weight: 950;
  font-size: .82rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.mg-product-tools {
  position: sticky;
  top: calc(var(--mg-sticky-section-top, 64px) + 40px);
  z-index: 990;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: min(100% - 72px, 1360px);
  margin: 0 auto 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 14px 34px rgba(17, 9, 51, .09);
}

.mg-product-tools-copy {
  display: grid;
  gap: 2px;
}

.mg-product-tools-copy strong {
  font-size: .95rem;
}

.mg-product-tools-copy span {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  font-size: .78rem;
  font-weight: 800;
}

.mg-filter-sort-layer[hidden] {
  display: none !important;
}

.mg-filter-sort-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.mg-filter-sort-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 9, 51, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mg-filter-sort-panel {
  position: absolute;
  right: 18px;
  top: 86px;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

.mg-filter-sort-head,
.mg-filter-sort-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mg-filter-sort-head button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--button-soft);
  color: var(--button-soft-text);
  font-weight: 900;
}

.mg-filter-sort-group {
  margin-top: 16px;
}

.mg-filter-sort-group h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}

.mg-filter-options,
.mg-sort-options {
  display: grid;
  gap: 8px;
}

.mg-filter-option,
.mg-sort-option {
  min-height: 42px;
  border-radius: 14px;
  text-align: left;
  padding: 8px 12px;
  font-weight: 850;
}

.mg-filter-option.is-active,
.mg-sort-option.is-active,
.mg-page-btn.is-active {
  background: rgba(252, 101, 1, .16) !important;
  border-color: rgba(252, 101, 1, .38) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
}

.mg-filter-sort-actions {
  margin-top: 18px;
}

.mg-pagination {
  width: min(100% - 72px, 1360px);
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mg-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mg-page-btn {
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  font-weight: 900;
}

.formula-cashback-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(252, 101, 1, .22);
  border-radius: 18px;
  background: rgba(252, 101, 1, .08);
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-weight: 850;
}

@media (min-width: 901px) {
  .top-nav .has-mega {
    position: relative !important;
  }

  .top-nav .has-mega > .mega-menu {
    display: grid !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(.985);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  .top-nav .has-mega:hover > .mega-menu,
  .top-nav .has-mega:focus-within > .mega-menu,
  .top-nav .has-mega.mega-open > .mega-menu,
  .top-nav .has-mega.is-open > .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }
}

@media (max-width: 760px) {
  .mg-product-tools,
  .mg-pagination {
    width: min(100% - 24px, 1360px);
  }

  .mg-product-tools {
    top: calc(var(--mg-sticky-section-top, 58px) + 34px);
    padding: 10px 12px;
  }

  .mg-filter-sort-open span:last-child {
    display: none;
  }

  .mg-filter-sort-panel {
    left: 12px;
    right: 12px;
    top: 72px;
    width: auto;
    max-height: calc(100vh - 90px);
  }

  .mg-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .mg-pagination-controls {
    justify-content: flex-start;
  }
}


/* V1.147 locked floating section title */
:root {
  --mg-floating-section-top: 0px;
  --mg-section-name-height: 40px;
}

.mg-floating-section-name {
  position: fixed !important;
  top: var(--mg-floating-section-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1800 !important;
  width: 100% !important;
  min-height: var(--mg-section-name-height, 40px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 16px !important;
  border-bottom: 1px solid var(--line, rgba(17, 9, 51, .13)) !important;
  background: color-mix(in srgb, var(--bg, #fbf9ff) 88%, transparent) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  transform: translateZ(0) !important;
  will-change: top !important;
}

body.mg-has-locked-section-name {
  scroll-padding-top: calc(var(--mg-sticky-section-top, 90px) + 14px) !important;
}

body.mg-has-locked-section-name .mg-product-tools {
  top: calc(var(--mg-sticky-section-top, 90px) + 8px) !important;
}

body.mg-has-locked-section-name .product-detail-section,
body.mg-has-locked-section-name .catalogue-section,
body.mg-has-locked-section-name .apple-store-section:first-of-type,
body.mg-has-locked-section-name main > section:first-child {
  scroll-margin-top: calc(var(--mg-sticky-section-top, 90px) + 16px) !important;
}

html[data-theme="dark"] .mg-floating-section-name {
  background: color-mix(in srgb, var(--bg, #110933) 88%, transparent) !important;
  border-bottom-color: var(--line, rgba(255,255,255,.14)) !important;
}

.mg-floating-section-name span {
  box-shadow: 0 8px 22px rgba(252, 101, 1, .12) !important;
}

@media (max-width: 760px) {
  .mg-floating-section-name {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }

  .mg-floating-section-name span {
    min-height: 24px !important;
    padding: 4px 12px !important;
    font-size: .74rem !important;
  }

  body.mg-has-locked-section-name .mg-product-tools {
    top: calc(var(--mg-sticky-section-top, 76px) + 6px) !important;
  }
}


/* V1.148 hard filter/sort + hover subcategory relink repair */
.v148-filter-sort-repaired #storeGrid [hidden] {
  display: none !important;
}

.v148-filter-sort-repaired .filter-hidden {
  display: none !important;
}

.v148-filter-sort-repaired .mg-product-tools {
  display: flex !important;
}

.mg-filter-sort-layer[hidden] {
  display: none !important;
}

.mg-filter-sort-layer.is-open {
  display: block !important;
}

.mg-filter-option.is-active,
.mg-sort-option.is-active,
.category-filter.is-active,
.category-filter.active,
.mg-page-btn.is-active {
  background: rgba(252, 101, 1, .16) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  border-color: rgba(252, 101, 1, .42) !important;
}

.mg-pagination[hidden] {
  display: none !important;
}

@media (min-width: 901px) {
  .top-nav .has-mega,
  .has-mega {
    position: relative;
  }

  .top-nav .has-mega > .mega-menu,
  .has-mega > .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(.985);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  .top-nav .has-mega:hover > .mega-menu,
  .top-nav .has-mega:focus-within > .mega-menu,
  .top-nav .has-mega.mega-open > .mega-menu,
  .top-nav .has-mega.is-open > .mega-menu,
  .has-mega:hover > .mega-menu,
  .has-mega:focus-within > .mega-menu,
  .has-mega.mega-open > .mega-menu,
  .has-mega.is-open > .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }
}


/* V1.149 FINAL filter/sort hardfix */
.mg-final-filter-ready #storeGrid [hidden],
.mg-final-filter-ready #storeGrid .mg-hard-hidden,
.v149-filter-sort-hardfixed #storeGrid [data-mg-visible-final="false"] {
  display: none !important;
}

.v149-filter-sort-hardfixed #storeGrid [data-mg-visible-final="true"] {
  display: flex !important;
}

.v149-filter-sort-hardfixed .mg-product-tools {
  display: flex !important;
}

.mg-filter-sort-layer[hidden] {
  display: none !important;
}

.mg-filter-sort-layer.is-open {
  display: block !important;
}

.v149-filter-sort-hardfixed .category-filter.active,
.v149-filter-sort-hardfixed .category-filter.is-active,
.v149-filter-sort-hardfixed .mg-filter-option.is-active,
.v149-filter-sort-hardfixed .mg-sort-option.is-active,
.v149-filter-sort-hardfixed .mg-page-btn.is-active {
  background: rgba(252, 101, 1, .16) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  border-color: rgba(252, 101, 1, .42) !important;
}

.v149-filter-sort-hardfixed .mg-pagination[hidden] {
  display: none !important;
}

@media (min-width: 901px) {
  .has-mega > .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .has-mega:hover > .mega-menu,
  .has-mega:focus-within > .mega-menu,
  .has-mega.mega-open > .mega-menu,
  .has-mega.is-open > .mega-menu,
  .has-mega.mg-mega-open > .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* V1.150 small right-side Filter & Sort pill UI */
.mg-final-filter-ready .category-filter-bar,
.mg-final-filter-ready [data-category-filter-bar],
.category-filter-bar.mg-filter-source-only,
[data-category-filter-bar].mg-filter-source-only {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.mg-final-filter-ready .mg-product-tools,
.mg-small-filter-pill-tools {
  width: min(100% - 72px, 1360px) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: none !important;
}

.mg-final-filter-ready .mg-product-tools-copy,
.mg-small-filter-pill-tools .mg-product-tools-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mg-filter-sort-open.mg-small-filter-pill,
.mg-small-filter-pill-tools .mg-filter-sort-open,
.mg-final-filter-ready .mg-filter-sort-open {
  pointer-events: auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(252, 101, 1, .28) !important;
  background: color-mix(in srgb, var(--surface, #fff) 82%, var(--orange, #fc6501) 18%) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(17, 9, 51, .12) !important;
}

.mg-filter-sort-open.mg-small-filter-pill:hover,
.mg-small-filter-pill-tools .mg-filter-sort-open:hover,
.mg-final-filter-ready .mg-filter-sort-open:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(17, 9, 51, .16) !important;
}

html[data-theme="dark"] .mg-filter-sort-open.mg-small-filter-pill,
html[data-theme="dark"] .mg-small-filter-pill-tools .mg-filter-sort-open,
html[data-theme="dark"] .mg-final-filter-ready .mg-filter-sort-open {
  background: rgba(252, 101, 1, .15) !important;
  border-color: rgba(252, 101, 1, .36) !important;
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
}

@media (max-width: 760px) {
  .mg-final-filter-ready .mg-product-tools,
  .mg-small-filter-pill-tools {
    width: min(100% - 24px, 1360px) !important;
    margin-bottom: 12px !important;
  }

  .mg-small-filter-pill-tools .mg-filter-sort-open,
  .mg-final-filter-ready .mg-filter-sort-open {
    min-height: 36px !important;
    padding: 9px 12px !important;
    font-size: .78rem !important;
  }
}


/* V1.151 single Filter & Sort pill cleanup */
body.mg-final-filter-ready .mg-product-tools:not(.mg-final-filter-tools),
body.mg-final-filter-ready .filter-sort-toolbar,
body.mg-final-filter-ready .filter-sort-system,
body.mg-final-filter-ready .catalogue-tools,
body.mg-final-filter-ready .catalog-tools {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.mg-final-filter-ready .mg-final-filter-tools {
  width: min(100% - 72px, 1360px) !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  pointer-events: auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(252, 101, 1, .30) !important;
  background: #ffffff !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 12px 30px rgba(17, 9, 51, .13) !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 36px rgba(17, 9, 51, .17) !important;
  border-color: rgba(252, 101, 1, .45) !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(252, 101, 1, .34) !important;
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  color: #fff9f3 !important;
  -webkit-text-fill-color: #fff9f3 !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
}

@media (max-width: 760px) {
  body.mg-final-filter-ready .mg-final-filter-tools {
    width: min(100% - 24px, 1360px) !important;
    margin-bottom: 12px !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
    min-height: 36px !important;
    padding: 9px 12px !important;
    font-size: .78rem !important;
  }
}


/* V1.152 filter pill position + product card click fix */
body.mg-final-filter-ready .mg-final-filter-tools,
body.mg-has-locked-section-name .mg-final-filter-tools,
body.mg-has-locked-section-name .mg-product-tools.mg-final-filter-tools,
.mg-final-filter-tools.mg-small-filter-pill-tools {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5 !important;
  width: min(100% - 72px, 1360px) !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools::before,
body.mg-final-filter-ready .mg-final-filter-tools::after {
  display: none !important;
  content: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}

#storeGrid {
  position: relative !important;
  z-index: 1 !important;
}

#storeGrid a[href*="product.html?id="],
#storeGrid .mg-clickable-product-card,
#storeGrid [data-card-product][href*="product.html?id="],
#storeGrid .product-card[href*="product.html?id="] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#storeGrid a[href*="product.html?id="] *,
#storeGrid .mg-clickable-product-card * {
  pointer-events: none !important;
}

#storeGrid a[href*="product.html?id="] button,
#storeGrid a[href*="product.html?id="] input,
#storeGrid a[href*="product.html?id="] select,
#storeGrid a[href*="product.html?id="] textarea {
  pointer-events: auto !important;
}

.mg-filter-source-only + .mg-final-filter-tools {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body.mg-final-filter-ready .mg-final-filter-tools,
  body.mg-has-locked-section-name .mg-final-filter-tools,
  .mg-final-filter-tools.mg-small-filter-pill-tools {
    width: min(100% - 24px, 1360px) !important;
    margin-bottom: 14px !important;
  }
}


/* V1.153 hard product card opener */
#storeGrid a[href*="product.html?id="],
#storeGrid .mg-hard-product-link,
#storeGrid [data-product-href],
#storeGrid [data-card-product][href*="product.html?id="],
#storeGrid .product-card[href*="product.html?id="] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}

#storeGrid a[href*="product.html?id="]::before,
#storeGrid .mg-hard-product-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: auto;
  background: transparent;
}

#storeGrid a[href*="product.html?id="] > *,
#storeGrid .mg-hard-product-link > * {
  pointer-events: none !important;
}

#storeGrid a[href*="product.html?id="] button,
#storeGrid a[href*="product.html?id="] input,
#storeGrid a[href*="product.html?id="] select,
#storeGrid a[href*="product.html?id="] textarea {
  pointer-events: auto !important;
  position: relative;
  z-index: 30;
}

#storeGrid a[href*="product.html?id="]:focus-visible,
#storeGrid .mg-hard-product-link:focus-visible {
  outline: 3px solid rgba(252, 101, 1, .38) !important;
  outline-offset: 4px !important;
}


/* V1.154 LIGHT MODE UI + AUTOLAYOUT POLISH
   Light mode is now the design source of truth.
   Dark mode is intentionally not redesigned here. */
:root,
html:not([data-theme="dark"]),
html[data-theme="light"] {
  --mg-section-y-tight: clamp(22px, 3.8vw, 48px);
  --mg-card-border: rgba(17, 9, 51, .105);
  --mg-card-shadow: 0 18px 52px rgba(17, 9, 51, .095);
  --mg-card-shadow-hover: 0 24px 70px rgba(17, 9, 51, .145);
  --mg-soft-bg: #fbf9ff;
  --mg-surface: #ffffff;
  --mg-surface-soft: #f7f1ff;
  --mg-text: #110933;
  --mg-muted: #554c68;
  --mg-orange: #fc6501;
  --mg-orange-soft: rgba(252, 101, 1, .095);
}

html:not([data-theme="dark"]) body,
html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(252, 101, 1, .08), transparent 30rem),
    radial-gradient(circle at 85% 10%, rgba(59, 52, 87, .08), transparent 24rem),
    var(--mg-soft-bg) !important;
  color: var(--mg-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Global container rhythm */
html:not([data-theme="dark"]) main,
html[data-theme="light"] main {
  overflow-x: clip;
}

html:not([data-theme="dark"]) section,
html[data-theme="light"] section {
  box-sizing: border-box;
}

html:not([data-theme="dark"]) .section,
html:not([data-theme="dark"]) .hero-section,
html:not([data-theme="dark"]) .page-hero,
html:not([data-theme="dark"]) .store-hero,
html:not([data-theme="dark"]) .catalogue-section,
html:not([data-theme="dark"]) .apple-store-section,
html:not([data-theme="dark"]) .product-detail-section,
html:not([data-theme="dark"]) .trade-section,
html:not([data-theme="dark"]) .sell-section,
html:not([data-theme="dark"]) .repair-section,
html:not([data-theme="dark"]) .support-section,
html:not([data-theme="dark"]) .faq-section,
html:not([data-theme="dark"]) .contact-section,
html[data-theme="light"] .section,
html[data-theme="light"] .hero-section,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .store-hero,
html[data-theme="light"] .catalogue-section,
html[data-theme="light"] .apple-store-section,
html[data-theme="light"] .product-detail-section,
html[data-theme="light"] .trade-section,
html[data-theme="light"] .sell-section,
html[data-theme="light"] .repair-section,
html[data-theme="light"] .support-section,
html[data-theme="light"] .faq-section,
html[data-theme="light"] .contact-section {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin-inline: auto !important;
  padding-block: var(--mg-section-y-tight) !important;
}

html:not([data-theme="dark"]) main > section:first-child,
html[data-theme="light"] main > section:first-child {
  padding-top: clamp(24px, 4vw, 54px) !important;
}

html:not([data-theme="dark"]) main > section + section,
html[data-theme="light"] main > section + section {
  margin-top: 0 !important;
}

/* Headings and copy */
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  letter-spacing: -0.04em;
  color: var(--mg-text) !important;
  -webkit-text-fill-color: var(--mg-text) !important;
}

html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) li,
html:not([data-theme="dark"]) small,
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] small {
  color: var(--mg-muted) !important;
  -webkit-text-fill-color: var(--mg-muted) !important;
}

html:not([data-theme="dark"]) .eyebrow,
html[data-theme="light"] .eyebrow {
  color: var(--mg-orange) !important;
  -webkit-text-fill-color: var(--mg-orange) !important;
  letter-spacing: .08em;
  font-weight: 950;
}

/* Navbar/ribbon polish */
html:not([data-theme="dark"]) .top-nav,
html[data-theme="light"] .top-nav {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(17, 9, 51, .085) !important;
  box-shadow: 0 10px 30px rgba(17, 9, 51, .055) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

html:not([data-theme="dark"]) .top-nav a,
html[data-theme="light"] .top-nav a {
  color: var(--mg-text) !important;
  -webkit-text-fill-color: var(--mg-text) !important;
}

html:not([data-theme="dark"]) .top-nav a:hover,
html:not([data-theme="dark"]) .top-nav a[aria-current="page"],
html[data-theme="light"] .top-nav a:hover,
html[data-theme="light"] .top-nav a[aria-current="page"] {
  color: var(--mg-orange) !important;
  -webkit-text-fill-color: var(--mg-orange) !important;
}

/* Floating section title: compact and refined */
html:not([data-theme="dark"]) .mg-floating-section-name,
html[data-theme="light"] .mg-floating-section-name {
  background: rgba(251, 249, 255, .78) !important;
  border-bottom-color: rgba(17, 9, 51, .08) !important;
  min-height: 34px !important;
  padding-block: 5px !important;
}

html:not([data-theme="dark"]) .mg-floating-section-name span,
html[data-theme="light"] .mg-floating-section-name span {
  min-height: 24px !important;
  padding: 4px 12px !important;
  font-size: .72rem !important;
  letter-spacing: .07em !important;
  background: rgba(252, 101, 1, .08) !important;
  border-color: rgba(252, 101, 1, .22) !important;
  box-shadow: 0 8px 20px rgba(252, 101, 1, .08) !important;
}

/* Hero / feature panels */
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .hero-card,
html:not([data-theme="dark"]) .hero-panel,
html:not([data-theme="dark"]) .store-hero,
html:not([data-theme="dark"]) .page-hero,
html:not([data-theme="dark"]) .apple-store-hero,
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .store-hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .apple-store-hero {
  border-radius: clamp(24px, 3vw, 38px) !important;
  background:
    radial-gradient(circle at top left, rgba(252, 101, 1, .15), transparent 35%),
    linear-gradient(135deg, #ffffff, #f7f1ff) !important;
  border: 1px solid var(--mg-card-border) !important;
  box-shadow: var(--mg-card-shadow) !important;
}

/* Grids: consistent auto layout */
html:not([data-theme="dark"]) #storeGrid,
html:not([data-theme="dark"]) .product-grid,
html:not([data-theme="dark"]) .store-grid,
html:not([data-theme="dark"]) .apple-store-row,
html:not([data-theme="dark"]) .cards-grid,
html:not([data-theme="dark"]) .support-grid,
html:not([data-theme="dark"]) .faq-grid,
html:not([data-theme="dark"]) .repair-grid,
html[data-theme="light"] #storeGrid,
html[data-theme="light"] .product-grid,
html[data-theme="light"] .store-grid,
html[data-theme="light"] .apple-store-row,
html[data-theme="light"] .cards-grid,
html[data-theme="light"] .support-grid,
html[data-theme="light"] .faq-grid,
html[data-theme="light"] .repair-grid {
  gap: var(--mg-grid-gap) !important;
  align-items: stretch !important;
}

html:not([data-theme="dark"]) #storeGrid,
html[data-theme="light"] #storeGrid {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
}

/* Filter pill must sit above products in normal flow */
html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin: 0 auto clamp(14px, 2vw, 20px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  color: var(--mg-orange) !important;
  -webkit-text-fill-color: var(--mg-orange) !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
}

/* Cards */
html:not([data-theme="dark"]) .product-card,
html:not([data-theme="dark"]) .product-card-v39,
html:not([data-theme="dark"]) .accessory-card,
html:not([data-theme="dark"]) .store-feature-card,
html:not([data-theme="dark"]) .service-card,
html:not([data-theme="dark"]) .info-card,
html:not([data-theme="dark"]) .trade-card,
html:not([data-theme="dark"]) .support-card,
html:not([data-theme="dark"]) .faq-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .product-card-v39,
html[data-theme="light"] .accessory-card,
html[data-theme="light"] .store-feature-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .trade-card,
html[data-theme="light"] .support-card,
html[data-theme="light"] .faq-card {
  border-radius: var(--mg-card-radius) !important;
  border: 1px solid var(--mg-card-border) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 36px rgba(17, 9, 51, .075) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  overflow: hidden !important;
}

html:not([data-theme="dark"]) .product-card:hover,
html:not([data-theme="dark"]) .product-card-v39:hover,
html:not([data-theme="dark"]) .accessory-card:hover,
html:not([data-theme="dark"]) .store-feature-card:hover,
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .product-card-v39:hover,
html[data-theme="light"] .accessory-card:hover,
html[data-theme="light"] .store-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(252, 101, 1, .24) !important;
  box-shadow: var(--mg-card-shadow-hover) !important;
}

html:not([data-theme="dark"]) .product-card img,
html:not([data-theme="dark"]) .accessory-card img,
html:not([data-theme="dark"]) .store-feature-card img,
html[data-theme="light"] .product-card img,
html[data-theme="light"] .accessory-card img,
html[data-theme="light"] .store-feature-card img {
  object-fit: contain !important;
  max-width: 100% !important;
}

/* Product cards: tighter, cleaner, consistent */
html:not([data-theme="dark"]) #storeGrid .product-card,
html[data-theme="light"] #storeGrid .product-card {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

html:not([data-theme="dark"]) .product-card-body,
html[data-theme="light"] .product-card-body {
  display: grid !important;
  gap: 6px !important;
  padding-inline: clamp(12px, 1.5vw, 16px) !important;
}

html:not([data-theme="dark"]) .product-card h3,
html:not([data-theme="dark"]) .store-feature-card h3,
html[data-theme="light"] .product-card h3,
html[data-theme="light"] .store-feature-card h3 {
  font-size: clamp(.92rem, 1.25vw, 1.08rem) !important;
  line-height: 1.14 !important;
  margin: 0 !important;
}

html:not([data-theme="dark"]) .product-card p,
html:not([data-theme="dark"]) .store-feature-card p,
html[data-theme="light"] .product-card p,
html[data-theme="light"] .store-feature-card p {
  font-size: clamp(.74rem, 1vw, .86rem) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

html:not([data-theme="dark"]) .tag,
html:not([data-theme="dark"]) .store-card-kicker,
html:not([data-theme="dark"]) .family-option-count,
html[data-theme="light"] .tag,
html[data-theme="light"] .store-card-kicker,
html[data-theme="light"] .family-option-count {
  border-radius: 999px !important;
  background: rgba(252, 101, 1, .08) !important;
  border: 1px solid rgba(252, 101, 1, .16) !important;
  color: var(--mg-orange) !important;
  -webkit-text-fill-color: var(--mg-orange) !important;
  font-weight: 900 !important;
}

/* Buttons */
html:not([data-theme="dark"]) .primary-btn,
html:not([data-theme="dark"]) .cta-button,
html:not([data-theme="dark"]) .price-cta,
html:not([data-theme="dark"]) #checkoutBtn,
html:not([data-theme="dark"]) #sendTradeBtn,
html:not([data-theme="dark"]) #sellWhatsappBtn,
html[data-theme="light"] .primary-btn,
html[data-theme="light"] .cta-button,
html[data-theme="light"] .price-cta,
html[data-theme="light"] #checkoutBtn,
html[data-theme="light"] #sendTradeBtn,
html[data-theme="light"] #sellWhatsappBtn {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fc6501, #ff8a3d) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(252, 101, 1, .20) !important;
}

html:not([data-theme="dark"]) .secondary-btn,
html:not([data-theme="dark"]) .option,
html:not([data-theme="dark"]) .mg-filter-option,
html:not([data-theme="dark"]) .mg-sort-option,
html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .option,
html[data-theme="light"] .mg-filter-option,
html[data-theme="light"] .mg-sort-option {
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  color: var(--mg-text) !important;
  -webkit-text-fill-color: var(--mg-text) !important;
}

/* Product detail page: reduce dead space and align panels */
html:not([data-theme="dark"]) .product-detail-grid-v39,
html:not([data-theme="dark"]) .product-detail-grid,
html[data-theme="light"] .product-detail-grid-v39,
html[data-theme="light"] .product-detail-grid {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin-inline: auto !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
  align-items: start !important;
}

html:not([data-theme="dark"]) .warehouse-product-header,
html[data-theme="light"] .warehouse-product-header {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin: 0 auto clamp(16px, 2vw, 24px) !important;
  padding: clamp(16px, 2vw, 24px) !important;
  border-radius: 28px !important;
}

html:not([data-theme="dark"]) .product-media-card,
html:not([data-theme="dark"]) .product-config-card,
html:not([data-theme="dark"]) .purchase-summary-card,
html[data-theme="light"] .product-media-card,
html[data-theme="light"] .product-config-card,
html[data-theme="light"] .purchase-summary-card {
  border-radius: 26px !important;
  border: 1px solid var(--mg-card-border) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 42px rgba(17, 9, 51, .085) !important;
}

html:not([data-theme="dark"]) .selection-step,
html[data-theme="light"] .selection-step {
  border-radius: 20px !important;
  border: 1px solid rgba(17, 9, 51, .095) !important;
  background: linear-gradient(180deg, #ffffff, #fbf7ff) !important;
  padding: clamp(12px, 1.6vw, 18px) !important;
}

html:not([data-theme="dark"]) .option.active,
html[data-theme="light"] .option.active {
  color: var(--mg-orange) !important;
  -webkit-text-fill-color: var(--mg-orange) !important;
  border-color: rgba(252, 101, 1, .42) !important;
  background: rgba(252, 101, 1, .10) !important;
}

/* Forms/calculators */
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(17, 9, 51, .14) !important;
  background: #ffffff !important;
  color: var(--mg-text) !important;
  -webkit-text-fill-color: var(--mg-text) !important;
}

html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  outline: 3px solid rgba(252, 101, 1, .16) !important;
  border-color: rgba(252, 101, 1, .48) !important;
}

/* Store rows and cards */
html:not([data-theme="dark"]) .apple-store-row,
html[data-theme="light"] .apple-store-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
}

html:not([data-theme="dark"]) .store-feature-card,
html[data-theme="light"] .store-feature-card {
  min-height: 100% !important;
}

/* Footer */
html:not([data-theme="dark"]) footer,
html:not([data-theme="dark"]) .footer,
html[data-theme="light"] footer,
html[data-theme="light"] .footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(17, 9, 51, .09) !important;
}

/* Spacing cleanup for common over-expanded blocks */
html:not([data-theme="dark"]) .spacer,
html[data-theme="light"] .spacer {
  min-height: 0 !important;
}

html:not([data-theme="dark"]) .section-heading,
html[data-theme="light"] .section-heading {
  margin-bottom: clamp(14px, 2vw, 24px) !important;
}

html:not([data-theme="dark"]) .section-heading h2,
html[data-theme="light"] .section-heading h2 {
  margin-bottom: 8px !important;
}

/* Responsive autolayout */
@media (max-width: 1180px) {
  html:not([data-theme="dark"]) #storeGrid,
  html[data-theme="light"] #storeGrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root,
  html:not([data-theme="dark"]),
  html[data-theme="light"] {
    --mg-section-y-tight: 24px;
  }

  html:not([data-theme="dark"]) .section,
  html:not([data-theme="dark"]) .hero-section,
  html:not([data-theme="dark"]) .page-hero,
  html:not([data-theme="dark"]) .store-hero,
  html:not([data-theme="dark"]) .catalogue-section,
  html:not([data-theme="dark"]) .apple-store-section,
  html:not([data-theme="dark"]) .product-detail-section,
  html[data-theme="light"] .section,
  html[data-theme="light"] .hero-section,
  html[data-theme="light"] .page-hero,
  html[data-theme="light"] .store-hero,
  html[data-theme="light"] .catalogue-section,
  html[data-theme="light"] .apple-store-section,
  html[data-theme="light"] .product-detail-section {
    width: min(100% - 24px, var(--mg-page-max)) !important;
  }

  html:not([data-theme="dark"]) #storeGrid,
  html[data-theme="light"] #storeGrid {
    width: min(100% - 24px, var(--mg-page-max)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:not([data-theme="dark"]) .product-card-body,
  html[data-theme="light"] .product-card-body {
    padding-inline: 10px !important;
  }

  html:not([data-theme="dark"]) .product-card h3,
  html[data-theme="light"] .product-card h3 {
    font-size: .82rem !important;
  }

  html:not([data-theme="dark"]) .product-card p,
  html[data-theme="light"] .product-card p {
    font-size: .7rem !important;
  }

  html:not([data-theme="dark"]) .warehouse-product-header,
  html:not([data-theme="dark"]) .product-detail-grid-v39,
  html:not([data-theme="dark"]) .product-detail-grid,
  html[data-theme="light"] .warehouse-product-header,
  html[data-theme="light"] .product-detail-grid-v39,
  html[data-theme="light"] .product-detail-grid {
    width: min(100% - 24px, var(--mg-page-max)) !important;
  }
}

@media (max-width: 380px) {
  html:not([data-theme="dark"]) #storeGrid,
  html[data-theme="light"] #storeGrid {
    gap: 10px !important;
  }
}


/* V1.155 single Previous / Next pagination */
body.mg-final-filter-ready .mg-pagination:not(.mg-final-pagination),
body.mg-final-filter-ready [data-mg-pagination]:not(.mg-final-pagination) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.mg-final-filter-ready .mg-final-pagination {
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(18px, 2.5vw, 30px) auto 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.mg-final-filter-ready .mg-final-pagination[hidden] {
  display: none !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-pagination-info {
  color: var(--mg-muted, #554c68) !important;
  -webkit-text-fill-color: var(--mg-muted, #554c68) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-pagination-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-page-btn {
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(17, 9, 51, .075) !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-page-btn.is-active {
  background: rgba(252, 101, 1, .12) !important;
  border-color: rgba(252, 101, 1, .38) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-page-nav {
  min-width: 92px !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-page-btn:disabled,
body.mg-final-filter-ready .mg-final-pagination .mg-page-btn[aria-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

body.mg-final-filter-ready .mg-final-pagination .mg-page-dots {
  color: var(--mg-muted, #554c68) !important;
  -webkit-text-fill-color: var(--mg-muted, #554c68) !important;
  font-weight: 900 !important;
  padding: 0 2px !important;
}

@media (max-width: 760px) {
  body.mg-final-filter-ready .mg-final-pagination {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.mg-final-filter-ready .mg-final-pagination .mg-pagination-controls {
    justify-content: flex-start !important;
  }

  body.mg-final-filter-ready .mg-final-pagination .mg-page-nav {
    min-width: 82px !important;
  }
}


/* V1.156 consistent category Filter & Sort UI */
body.page-accessories .accessories-hero-panel,
body.page-accessories .accessories-filter-shell {
  display: none !important;
}

body.mg-final-filter-ready .category-filter-bar,
body.mg-final-filter-ready [data-category-filter-bar],
.category-filter-bar.mg-filter-source-only,
[data-category-filter-bar].mg-filter-source-only {
  display: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools {
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 2vw, 22px) !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  white-space: nowrap !important;
}


/* V1.157 compact category spacing */
body.mg-compact-category-page main,
body.mg-compact-category-page .catalogue-main,
body.mg-compact-category-page .page-main {
  row-gap: 0 !important;
}

body.mg-compact-category-page .page-hero,
body.mg-compact-category-page .catalogue-hero,
body.mg-compact-category-page .category-hero,
body.mg-compact-category-page .store-hero,
body.mg-compact-category-page main > section:first-child {
  padding-bottom: clamp(8px, 1.3vw, 16px) !important;
  margin-bottom: 0 !important;
}

body.mg-compact-category-page .page-hero p,
body.mg-compact-category-page .catalogue-hero p,
body.mg-compact-category-page .category-hero p,
body.mg-compact-category-page .store-hero p,
body.mg-compact-category-page .section-heading p {
  margin-bottom: 0 !important;
}

body.mg-compact-category-page .catalogue-section,
body.mg-compact-category-page .products-section,
body.mg-compact-category-page .product-list-section,
body.mg-compact-category-page section:has(#storeGrid) {
  padding-top: clamp(6px, 1.1vw, 14px) !important;
  margin-top: 0 !important;
}

body.mg-compact-category-page .section-heading {
  margin-bottom: clamp(8px, 1.2vw, 14px) !important;
}

/* Keep Filter & Sort in normal flow, tight below intro and above products */
body.mg-final-filter-ready.mg-compact-category-page .mg-final-filter-tools,
body.mg-has-locked-section-name.mg-compact-category-page .mg-final-filter-tools,
body.mg-compact-category-page .mg-final-filter-tools.mg-small-filter-pill-tools {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin-top: clamp(4px, .8vw, 8px) !important;
  margin-bottom: clamp(8px, 1.2vw, 14px) !important;
  padding: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.mg-compact-category-page #storeGrid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pull the grid closer to the intro when old spacing utilities are present */
body.mg-compact-category-page .mg-filter-source-only,
body.mg-compact-category-page .category-filter-bar.mg-filter-source-only,
body.mg-compact-category-page [data-category-filter-bar].mg-filter-source-only {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

body.mg-compact-category-page .mg-final-filter-tools + #storeGrid,
body.mg-compact-category-page .mg-final-filter-tools + .category-filter-bar + #storeGrid,
body.mg-compact-category-page .mg-final-filter-tools + [data-category-filter-bar] + #storeGrid {
  margin-top: 0 !important;
}

/* Tighten product card top spacing without changing card design */
body.mg-compact-category-page #storeGrid .product-card,
body.mg-compact-category-page #storeGrid [data-card-product] {
  margin-top: 0 !important;
}

/* Reduce large blank space on pages that had recommendation/category intro layouts */
body.mg-compact-category-page .hero-content,
body.mg-compact-category-page .page-hero-content,
body.mg-compact-category-page .catalogue-hero-content {
  margin-bottom: clamp(6px, 1vw, 12px) !important;
}

@media (max-width: 760px) {
  body.mg-final-filter-ready.mg-compact-category-page .mg-final-filter-tools,
  body.mg-compact-category-page .mg-final-filter-tools.mg-small-filter-pill-tools {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  body.mg-compact-category-page .page-hero,
  body.mg-compact-category-page .catalogue-hero,
  body.mg-compact-category-page .category-hero,
  body.mg-compact-category-page main > section:first-child {
    padding-bottom: 8px !important;
  }

  body.mg-compact-category-page .catalogue-section,
  body.mg-compact-category-page section:has(#storeGrid) {
    padding-top: 6px !important;
  }
}


/* V1.158 mobile Filter & Sort layout + mobile feature safety */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Keep the Filter & Sort pill readable on mobile. Older CSS hid the text. */
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
  body.mg-final-filter-ready .mg-filter-sort-open,
  .mg-filter-sort-open.mg-small-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body.mg-final-filter-ready .mg-filter-sort-open span,
  body.mg-final-filter-ready .mg-filter-sort-open span:last-child,
  .mg-filter-sort-open.mg-small-filter-pill span,
  .mg-filter-sort-open.mg-small-filter-pill span:last-child {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: .78rem !important;
    line-height: 1 !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon svg {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Bottom-sheet panel: options should never collapse or hide text. */
  .mg-filter-sort-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000 !important;
  }

  .mg-filter-sort-layer[hidden] {
    display: none !important;
  }

  .mg-filter-sort-layer.is-open {
    display: block !important;
  }

  .mg-filter-sort-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(17, 9, 51, .46) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .mg-filter-sort-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(78vh, 680px) !important;
    min-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(17, 9, 51, .13) !important;
    background: #ffffff !important;
    color: #110933 !important;
    -webkit-text-fill-color: initial !important;
    box-shadow: 0 26px 80px rgba(17, 9, 51, .28) !important;
  }

  .mg-filter-sort-head {
    position: sticky !important;
    top: -14px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: -14px -14px 12px !important;
    padding: 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(17, 9, 51, .08) !important;
  }

  .mg-filter-sort-head strong {
    display: block !important;
    color: #110933 !important;
    -webkit-text-fill-color: #110933 !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  .mg-filter-sort-head button {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: #110933 !important;
    -webkit-text-fill-color: #110933 !important;
  }

  .mg-filter-sort-group {
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  .mg-filter-sort-group h3 {
    display: block !important;
    margin: 0 0 8px !important;
    color: #6a6077 !important;
    -webkit-text-fill-color: #6a6077 !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .mg-filter-options,
  .mg-sort-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .mg-filter-option,
  .mg-sort-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 11px 13px !important;
    border-radius: 15px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.25 !important;
    color: #110933 !important;
    -webkit-text-fill-color: #110933 !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 9, 51, .12) !important;
    font-size: .88rem !important;
    font-weight: 850 !important;
  }

  .mg-filter-option::after,
  .mg-sort-option::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: 12px;
    border-radius: 999px;
    border: 1px solid rgba(17, 9, 51, .22);
    background: transparent;
  }

  .mg-filter-option.is-active,
  .mg-sort-option.is-active {
    color: #fc6501 !important;
    -webkit-text-fill-color: #fc6501 !important;
    background: rgba(252, 101, 1, .10) !important;
    border-color: rgba(252, 101, 1, .36) !important;
  }

  .mg-filter-option.is-active::after,
  .mg-sort-option.is-active::after {
    border-color: #fc6501;
    background: #fc6501;
    box-shadow: 0 0 0 4px rgba(252, 101, 1, .12);
  }

  .mg-filter-sort-actions {
    position: sticky !important;
    bottom: -14px !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 16px -14px -14px !important;
    padding: 12px 14px 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(17, 9, 51, .08) !important;
  }

  .mg-filter-sort-actions button {
    min-height: 44px !important;
    width: 100% !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* Mobile category product layout safety */
  body.mg-mobile-filter-safe #storeGrid,
  body.mg-v158-mobile-safe #storeGrid {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body.mg-mobile-filter-safe #storeGrid .product-card,
  body.mg-mobile-filter-safe #storeGrid [data-card-product],
  body.mg-v158-mobile-safe #storeGrid .product-card,
  body.mg-v158-mobile-safe #storeGrid [data-card-product] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.mg-mobile-filter-safe .mg-pagination,
  body.mg-v158-mobile-safe .mg-pagination {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.mg-mobile-filter-safe .mg-pagination-controls,
  body.mg-v158-mobile-safe .mg-pagination-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .mobile-drawer {
    max-width: min(92vw, 420px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .search-overlay,
  #mgSearchOverlay {
    padding-inline: 12px !important;
  }

  .search-panel,
  .mg-search-panel {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 380px) {
  .mg-filter-sort-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 12px !important;
  }

  .mg-filter-sort-head {
    margin: -12px -12px 10px !important;
    padding: 12px !important;
  }

  .mg-filter-sort-actions {
    margin: 14px -12px -12px !important;
    padding: 10px 12px 12px !important;
  }

  .mg-filter-option,
  .mg-sort-option {
    min-height: 44px !important;
    padding: 10px 11px !important;
    font-size: .82rem !important;
  }

  body.mg-mobile-filter-safe #storeGrid,
  body.mg-v158-mobile-safe #storeGrid {
    gap: 10px !important;
  }
}


/* V1.159 permanent right-side pill controls */
body.mg-final-filter-ready .mg-final-filter-tools,
body.mg-has-locked-section-name .mg-final-filter-tools,
body.mg-compact-category-page .mg-final-filter-tools,
body.mg-permanent-right-pill-page .mg-final-filter-tools {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5 !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: none !important;
}

body.mg-final-filter-ready .mg-right-pill-cluster {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  pointer-events: auto !important;
  flex-wrap: nowrap !important;
}

body.mg-final-filter-ready .mg-control-pill,
body.mg-final-filter-ready .mg-help-choose-pill,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: auto !important;
  min-height: 38px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.mg-final-filter-ready .mg-help-choose-pill {
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  display: inline-flex !important;
  width: 17px !important;
  height: 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  flex: 0 0 auto !important;
}

body.mg-final-filter-ready .mg-control-pill:hover,
body.mg-final-filter-ready .mg-help-choose-pill:hover,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(252, 101, 1, .34) !important;
  box-shadow: 0 14px 34px rgba(17, 9, 51, .15) !important;
}

body.mg-final-filter-ready .mg-product-tools-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kill old full-width/mobile Help me choose styles on category pages */
body.mg-permanent-right-pill-page a:not(.mg-help-choose-pill),
body.mg-permanent-right-pill-page button:not(.mg-filter-sort-open) {
  max-width: 100%;
}

body.mg-permanent-right-pill-page .help-choose-strip,
body.mg-permanent-right-pill-page .help-me-choose-bar,
body.mg-permanent-right-pill-page .recommendation-strip {
  display: none !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-control-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-help-choose-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #fff9f3 !important;
  -webkit-text-fill-color: #fff9f3 !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
}

@media (max-width: 760px) {
  body.mg-final-filter-ready .mg-final-filter-tools,
  body.mg-has-locked-section-name .mg-final-filter-tools,
  body.mg-compact-category-page .mg-final-filter-tools,
  body.mg-permanent-right-pill-page .mg-final-filter-tools {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    margin: 6px auto 12px !important;
    justify-content: flex-end !important;
  }

  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body.mg-final-filter-ready .mg-control-pill,
  body.mg-final-filter-ready .mg-help-choose-pill,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill {
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 380px) {
  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 6px !important;
  }

  body.mg-final-filter-ready .mg-control-pill,
  body.mg-final-filter-ready .mg-help-choose-pill,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
    padding-inline: 11px !important;
    font-size: .74rem !important;
  }
}


/* V1.160 single Sell to us button */
body.mg-single-sell-button-page .sell-to-us-top-button {
  white-space: nowrap !important;
}

body.mg-single-sell-button-page .trade-hero-actions,
body.mg-single-sell-button-page .hero-actions,
body.mg-single-sell-button-page .trade-actions,
body.mg-single-sell-button-page .action-row {
  flex-wrap: wrap !important;
  gap: 10px !important;
}


/* V1.161 floating question-mark Talk to Miller button */
.mg-floating-help {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2600 !important;
  width: 56px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(252, 101, 1, .26) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72) 42%, rgba(252, 101, 1, .14)) !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  box-shadow: 0 18px 42px rgba(17, 9, 51, .18) !important;
  text-decoration: none !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  pointer-events: auto !important;
}

.mg-floating-help:hover,
.mg-floating-help:focus-visible {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(252, 101, 1, .46) !important;
  box-shadow: 0 24px 58px rgba(17, 9, 51, .23) !important;
  outline: none !important;
}

.mg-floating-help-icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.mg-floating-help-icon svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
}

.mg-floating-help-tooltip {
  position: absolute !important;
  right: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  background: #110933 !important;
  color: #fff9f3 !important;
  -webkit-text-fill-color: #fff9f3 !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 14px 34px rgba(17, 9, 51, .20) !important;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
}

.mg-floating-help-tooltip::after {
  content: "" !important;
  position: absolute !important;
  right: -5px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  background: #110933 !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border-radius: 2px !important;
}

.mg-floating-help:hover .mg-floating-help-tooltip,
.mg-floating-help:focus-visible .mg-floating-help-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

html[data-theme="dark"] .mg-floating-help {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07) 44%, rgba(252, 101, 1, .18)) !important;
  border-color: rgba(255, 165, 105, .34) !important;
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .mg-floating-help-tooltip,
html[data-theme="dark"] .mg-floating-help-tooltip::after {
  background: #fff9f3 !important;
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
}

@media (max-width: 760px) {
  .mg-floating-help {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: 50px !important;
    height: 50px !important;
  }

  .mg-floating-help-icon,
  .mg-floating-help-icon svg {
    width: 27px !important;
    height: 27px !important;
  }

  .mg-floating-help-tooltip {
    right: 0 !important;
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    transform: translateY(8px) !important;
    font-size: .78rem !important;
  }

  .mg-floating-help-tooltip::after {
    right: 20px !important;
    top: auto !important;
    bottom: -5px !important;
    transform: rotate(45deg) !important;
  }

  .mg-floating-help:hover .mg-floating-help-tooltip,
  .mg-floating-help:focus-visible .mg-floating-help-tooltip,
  .mg-floating-help:active .mg-floating-help-tooltip {
    transform: translateY(0) !important;
  }
}


/* V1.162 fixed floating help + permanent filter pill style */

/* Keep the scroll arrow/down-up control at the lower-right lane if present. */
.back-to-top,
.back-to-top-btn,
.scroll-to-top,
.scroll-top,
.scroll-top-btn,
.scroll-arrow,
.scroll-toggle,
.scroll-progress,
#backToTop,
#scrollTop,
#scrollArrow,
#scrollToggle,
[data-scroll-top],
[data-back-to-top] {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2500 !important;
}

/* The question-mark help button always sits above the scroll arrow, same on desktop and mobile. */
.mg-floating-help {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 74px) !important;
  z-index: 2700 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

/* Tooltip always opens above the question mark on web and mobile. */
.mg-floating-help-tooltip {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  transform: translateX(-50%) translateY(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.mg-floating-help-tooltip::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -5px !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

.mg-floating-help:hover .mg-floating-help-tooltip,
.mg-floating-help:focus-visible .mg-floating-help-tooltip,
.mg-floating-help:active .mg-floating-help-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.mg-floating-help:hover,
.mg-floating-help:focus-visible {
  transform: translateY(-3px) scale(1.03) !important;
}

/* The category controls must not switch styles on mobile. */
body.mg-final-filter-ready .mg-final-filter-tools,
body.mg-has-locked-section-name .mg-final-filter-tools,
body.mg-compact-category-page .mg-final-filter-tools,
body.mg-permanent-right-pill-page .mg-final-filter-tools {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5 !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: none !important;
}

body.mg-final-filter-ready .mg-right-pill-cluster {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

body.mg-final-filter-ready .mg-control-pill,
body.mg-final-filter-ready .mg-help-choose-pill,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill {
  width: auto !important;
  max-width: none !important;
  min-width: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.mg-final-filter-ready .mg-help-choose-pill {
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  display: inline-flex !important;
  width: 17px !important;
  height: 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  flex: 0 0 auto !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child,
body.mg-final-filter-ready .mg-help-choose-pill span {
  display: inline !important;
  white-space: nowrap !important;
}

/* Override every earlier mobile rule that hid/changed the pill text or made the controls different. */
@media (max-width: 760px) {
  .mg-floating-help {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 74px) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  .mg-floating-help-icon,
  .mg-floating-help-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .mg-floating-help-tooltip {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    transform: translateX(-50%) translateY(8px) !important;
    font-size: .82rem !important;
  }

  .mg-floating-help-tooltip::after {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -5px !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  .mg-floating-help:hover .mg-floating-help-tooltip,
  .mg-floating-help:focus-visible .mg-floating-help-tooltip,
  .mg-floating-help:active .mg-floating-help-tooltip {
    transform: translateX(-50%) translateY(0) !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools,
  body.mg-has-locked-section-name .mg-final-filter-tools,
  body.mg-compact-category-page .mg-final-filter-tools,
  body.mg-permanent-right-pill-page .mg-final-filter-tools {
    width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
    margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
    justify-content: flex-end !important;
  }

  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  body.mg-final-filter-ready .mg-control-pill,
  body.mg-final-filter-ready .mg-help-choose-pill,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill {
    min-height: 38px !important;
    height: 38px !important;
    padding: 9px 15px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 380px) {
  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 8px !important;
  }

  body.mg-final-filter-ready .mg-control-pill,
  body.mg-final-filter-ready .mg-help-choose-pill,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
    padding-inline: 12px !important;
    font-size: .78rem !important;
  }
}


/* V1.163 floating help tooltip + size fix */
:root {
  --mg-float-btn-size: 52px;
  --mg-float-btn-gap: 14px;
  --mg-float-edge: max(18px, env(safe-area-inset-right));
  --mg-float-bottom: max(18px, env(safe-area-inset-bottom));
}

.back-to-top,
.back-to-top-btn,
.scroll-to-top,
.scroll-top,
.scroll-top-btn,
.scroll-arrow,
.scroll-toggle,
.scroll-progress,
#backToTop,
#scrollTop,
#scrollArrow,
#scrollToggle,
[data-scroll-top],
[data-back-to-top] {
  width: var(--mg-float-btn-size) !important;
  height: var(--mg-float-btn-size) !important;
  min-width: var(--mg-float-btn-size) !important;
  min-height: var(--mg-float-btn-size) !important;
  max-width: var(--mg-float-btn-size) !important;
  max-height: var(--mg-float-btn-size) !important;
  right: var(--mg-float-edge) !important;
  bottom: var(--mg-float-bottom) !important;
  border-radius: 999px !important;
  z-index: 2500 !important;
}

.mg-floating-help {
  width: var(--mg-float-btn-size) !important;
  height: var(--mg-float-btn-size) !important;
  min-width: var(--mg-float-btn-size) !important;
  min-height: var(--mg-float-btn-size) !important;
  max-width: var(--mg-float-btn-size) !important;
  max-height: var(--mg-float-btn-size) !important;
  right: var(--mg-float-edge) !important;
  bottom: calc(var(--mg-float-bottom) + var(--mg-float-btn-size) + var(--mg-float-btn-gap)) !important;
  z-index: 2700 !important;
  border-radius: 999px !important;
}

.mg-floating-help-icon,
.mg-floating-help-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.mg-floating-help-tooltip {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: calc(100vw - 36px) !important;
  box-sizing: border-box !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fc6501, #ff8a3d) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: .84rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-shadow: 0 16px 38px rgba(252, 101, 1, .28) !important;
  transform: translateY(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mg-floating-help-tooltip::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important;
  right: 22px !important;
  top: auto !important;
  bottom: -5px !important;
  width: 10px !important;
  height: 10px !important;
  background: #ff7b26 !important;
  transform: rotate(45deg) !important;
  border-radius: 2px !important;
}

.mg-floating-help:hover .mg-floating-help-tooltip,
.mg-floating-help:focus-visible .mg-floating-help-tooltip,
.mg-floating-help:active .mg-floating-help-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

html[data-theme="dark"] .mg-floating-help-tooltip {
  background: linear-gradient(135deg, #fc6501, #ffa569) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(252, 101, 1, .30) !important;
}
html[data-theme="dark"] .mg-floating-help-tooltip::after { background: #ff8a3d !important; }

@media (max-width: 760px) {
  :root {
    --mg-float-btn-size: 52px;
    --mg-float-btn-gap: 14px;
    --mg-float-edge: max(18px, env(safe-area-inset-right));
    --mg-float-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .mg-floating-help,
  .back-to-top,
  .back-to-top-btn,
  .scroll-to-top,
  .scroll-top,
  .scroll-top-btn,
  .scroll-arrow,
  .scroll-toggle,
  .scroll-progress,
  #backToTop,
  #scrollTop,
  #scrollArrow,
  #scrollToggle,
  [data-scroll-top],
  [data-back-to-top] {
    width: var(--mg-float-btn-size) !important;
    height: var(--mg-float-btn-size) !important;
    min-width: var(--mg-float-btn-size) !important;
    min-height: var(--mg-float-btn-size) !important;
    max-width: var(--mg-float-btn-size) !important;
    max-height: var(--mg-float-btn-size) !important;
  }
  .mg-floating-help {
    right: var(--mg-float-edge) !important;
    bottom: calc(var(--mg-float-bottom) + var(--mg-float-btn-size) + var(--mg-float-btn-gap)) !important;
  }
  .mg-floating-help-tooltip {
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(100vw - 36px) !important;
    font-size: .84rem !important;
    padding: 10px 15px !important;
    transform: translateY(8px) !important;
  }
  .mg-floating-help-tooltip::after {
    left: auto !important;
    right: 22px !important;
    top: auto !important;
    bottom: -5px !important;
    transform: rotate(45deg) !important;
  }
  .mg-floating-help:hover .mg-floating-help-tooltip,
  .mg-floating-help:focus-visible .mg-floating-help-tooltip,
  .mg-floating-help:active .mg-floating-help-tooltip {
    transform: translateY(0) !important;
  }
}


/* V1.164 mobile Filter & Sort pill hardfix */
/* Final source of truth for the Filter & Sort pill on desktop AND mobile. */
body.mg-final-filter-ready .mg-final-filter-tools,
body.mg-final-filter-ready .mg-desktop-style-filter-tools,
body.mg-has-locked-section-name .mg-final-filter-tools,
body.mg-compact-category-page .mg-final-filter-tools,
body.mg-permanent-right-pill-page .mg-final-filter-tools {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: none !important;
  overflow: visible !important;
}

body.mg-final-filter-ready .mg-right-pill-cluster {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill,
body.mg-final-filter-ready .mg-final-filter-tools .mg-control-pill {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open > *,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open svg,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  flex: 0 0 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  display: inline !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  white-space: nowrap !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  width: auto !important;
  max-width: none !important;
  clip: auto !important;
  clip-path: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:hover,
body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(252, 101, 1, .34) !important;
  box-shadow: 0 14px 34px rgba(17, 9, 51, .15) !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #fff9f3 !important;
  -webkit-text-fill-color: #fff9f3 !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  color: #fff9f3 !important;
  -webkit-text-fill-color: #fff9f3 !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
  color: #ffa569 !important;
  -webkit-text-fill-color: #ffa569 !important;
}

/* Mobile is intentionally identical to desktop. Do not collapse, hide text, or switch to a different button. */
@media (max-width: 760px) {
  body.mg-final-filter-ready .mg-final-filter-tools,
  body.mg-final-filter-ready .mg-desktop-style-filter-tools,
  body.mg-has-locked-section-name .mg-final-filter-tools,
  body.mg-compact-category-page .mg-final-filter-tools,
  body.mg-permanent-right-pill-page .mg-final-filter-tools {
    width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
    margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body.mg-final-filter-ready .mg-right-pill-cluster {
    display: inline-flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-small-filter-pill,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-control-pill {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    gap: 8px !important;
    padding: 9px 15px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
  }
}

@media (max-width: 380px) {
  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 8px !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open {
    padding-inline: 12px !important;
    font-size: .78rem !important;
  }

  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text,
  body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
    font-size: .78rem !important;
  }
}


/* V1.165 final deduped controls */
body.mg-v165-controls-deduped .mg-product-tools:not(.mg-final-filter-tools),
body.mg-v165-controls-deduped .filter-sort-toolbar,
body.mg-v165-controls-deduped .filter-sort-system,
body.mg-v165-controls-deduped .catalogue-tools,
body.mg-v165-controls-deduped .catalog-tools {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mg-final-filter-ready .mg-final-filter-tools.mg-v165-deduped-tools,
body.mg-v165-controls-deduped .mg-final-filter-tools {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  overflow: visible !important;
}

body.mg-v165-controls-deduped .mg-right-pill-cluster,
body.mg-final-filter-ready .mg-v165-deduped-cluster {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

body.mg-v165-controls-deduped .mg-control-pill,
body.mg-v165-controls-deduped .mg-help-choose-pill,
body.mg-v165-controls-deduped .mg-final-filter-tools .mg-filter-sort-open {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.mg-v165-controls-deduped .mg-help-choose-pill {
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
}

body.mg-v165-controls-deduped .mg-filter-pill-icon {
  display: inline-flex !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.mg-v165-controls-deduped .mg-filter-pill-text,
body.mg-v165-controls-deduped .mg-final-filter-tools .mg-filter-sort-open span:last-child,
body.mg-v165-controls-deduped .mg-help-choose-pill span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  max-width: none !important;
}

body.mg-v165-controls-deduped .mg-floating-help:not(.mg-v165-deduped-floating-help) {
  display: none !important;
}

body.mg-v165-controls-deduped .mg-v165-deduped-floating-help {
  display: inline-flex !important;
}

@media (max-width: 760px) {
  body.mg-v165-controls-deduped .mg-final-filter-tools {
    width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
    margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
    justify-content: flex-end !important;
  }

  body.mg-v165-controls-deduped .mg-right-pill-cluster {
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  body.mg-v165-controls-deduped .mg-control-pill,
  body.mg-v165-controls-deduped .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-final-filter-tools .mg-filter-sort-open {
    height: 38px !important;
    min-height: 38px !important;
    padding: 9px 15px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  body.mg-v165-controls-deduped .mg-right-pill-cluster {
    gap: 8px !important;
  }

  body.mg-v165-controls-deduped .mg-control-pill,
  body.mg-v165-controls-deduped .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-final-filter-tools .mg-filter-sort-open {
    padding-inline: 12px !important;
    font-size: .78rem !important;
  }
}


/* V1.166 clean separated pill controls */
body.mg-v165-controls-deduped .mg-clean-separated-pill-tools,
body.mg-final-filter-ready .mg-clean-separated-pill-tools,
body.mg-final-filter-ready .mg-final-filter-tools {
  position: relative !important;
  inset: auto !important;
  width: min(100% - (var(--mg-page-pad, clamp(16px, 3vw, 40px)) * 2), var(--mg-page-max, 1360px)) !important;
  margin: clamp(4px, .8vw, 8px) auto clamp(10px, 1.4vw, 16px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster,
body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
body.mg-final-filter-ready .mg-right-pill-cluster {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-items: center !important;
  justify-content: end !important;
  justify-items: end !important;
  gap: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
}

body.mg-v165-controls-deduped .mg-separated-pill,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open,
body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 9px 15px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #ffffff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill {
  color: #110933 !important;
  -webkit-text-fill-color: #110933 !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-pill-text,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-text,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill span,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open span:last-child {
  position: static !important;
  display: inline !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: auto !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  text-indent: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-icon {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  flex: 0 0 17px !important;
  pointer-events: none !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
}

/* Remove any old visual leftovers outside the canonical cluster. */
body.mg-v165-controls-deduped .mg-product-tools:not(.mg-final-filter-tools),
body.mg-v165-controls-deduped .filter-sort-toolbar,
body.mg-v165-controls-deduped .filter-sort-system,
body.mg-v165-controls-deduped .catalogue-tools,
body.mg-v165-controls-deduped .catalog-tools,
body.mg-v165-controls-deduped .help-choose-strip,
body.mg-v165-controls-deduped .help-me-choose-bar,
body.mg-v165-controls-deduped .recommendation-strip {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mobile keeps the same web design, only slightly tighter so the pills never collide. */
@media (max-width: 760px) {
  body.mg-v165-controls-deduped .mg-clean-separated-pill-tools,
  body.mg-final-filter-ready .mg-clean-separated-pill-tools,
  body.mg-final-filter-ready .mg-final-filter-tools {
    width: min(100% - 24px, var(--mg-page-max, 1360px)) !important;
    margin: 6px auto 12px !important;
    justify-content: flex-end !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster,
  body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
  body.mg-final-filter-ready .mg-right-pill-cluster {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    gap: 10px !important;
    justify-content: end !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.mg-v165-controls-deduped .mg-separated-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    height: 38px !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: .78rem !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster {
    gap: 8px !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    padding: 8px 10px !important;
    font-size: .72rem !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-icon {
    width: 15px !important;
    min-width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
}


/* V1.167 PAGE-BY-PAGE HARDCORE UI POLISH
   This is the final light-mode UI source-of-truth layer.
   It is intentionally appended last so previous patch layers cannot cause visual drift. */
:root {
  --mg-ui-max: 1360px;
  --mg-ui-pad: clamp(16px, 3vw, 42px);
  --mg-ui-pad-mobile: 14px;
  --mg-ui-bg: #fbf9ff;
  --mg-ui-surface: #ffffff;
  --mg-ui-surface-soft: #f7f3ff;
  --mg-ui-text: #110933;
  --mg-ui-body: #514a60;
  --mg-ui-muted: #756d82;
  --mg-ui-line: rgba(17, 9, 51, .105);
  --mg-ui-orange: #fc6501;
  --mg-ui-orange-2: #ff8a3d;
  --mg-ui-radius-xl: 34px;
  --mg-ui-radius-lg: 26px;
  --mg-ui-radius-md: 18px;
  --mg-ui-shadow-sm: 0 10px 30px rgba(17, 9, 51, .075);
  --mg-ui-shadow-md: 0 18px 58px rgba(17, 9, 51, .11);
  --mg-ui-shadow-lg: 0 30px 90px rgba(17, 9, 51, .15);
  --mg-ui-section: clamp(28px, 5vw, 70px);
  --mg-ui-section-tight: clamp(18px, 3vw, 42px);
  --mg-ui-gap: clamp(14px, 1.8vw, 24px);
}

html, body {
  overflow-x: clip !important;
  max-width: 100% !important;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }

html:not([data-theme="dark"]) body,
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(252, 101, 1, .075), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(59, 52, 87, .075), transparent 28rem),
    linear-gradient(180deg, #fffdfd 0%, var(--mg-ui-bg) 34%, #f7f4ff 100%) !important;
  color: var(--mg-ui-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Global page rhythm */
.mg-v167-page-polish main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

.mg-v167-page-polish main > section,
.mg-v167-page-polish .section,
.mg-v167-page-polish .page-section,
.mg-v167-page-polish .catalogue-section,
.mg-v167-page-polish .apple-store-section,
.mg-v167-page-polish .product-detail-section,
.mg-v167-page-polish .trade-section,
.mg-v167-page-polish .sell-section,
.mg-v167-page-polish .repair-section,
.mg-v167-page-polish .support-section,
.mg-v167-page-polish .faq-section,
.mg-v167-page-polish .contact-section,
.mg-v167-page-polish .recommendation-section {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin-inline: auto !important;
  padding-block: var(--mg-ui-section-tight) !important;
}

.mg-v167-page-polish main > section:first-child {
  padding-top: clamp(20px, 3.6vw, 54px) !important;
}

.mg-v167-page-polish main > section + section {
  margin-top: 0 !important;
}

/* Typography */
.mg-v167-page-polish h1,
.mg-v167-page-polish h2,
.mg-v167-page-polish h3 {
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  letter-spacing: -0.052em !important;
  text-wrap: balance;
}

.mg-v167-page-polish h1 {
  font-size: clamp(3.35rem, 7.2vw, 6.35rem) !important;
  line-height: .88 !important;
  max-width: 11ch !important;
  margin-bottom: clamp(14px, 2vw, 22px) !important;
}

.mg-v167-page-polish h2 {
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  line-height: .96 !important;
  margin-bottom: 10px !important;
}

.mg-v167-page-polish h3 {
  line-height: 1.08 !important;
}

.mg-v167-page-polish p,
.mg-v167-page-polish li,
.mg-v167-page-polish small {
  color: var(--mg-ui-body) !important;
  -webkit-text-fill-color: var(--mg-ui-body) !important;
}

.mg-v167-page-polish p {
  line-height: 1.58 !important;
}

.mg-v167-page-polish .eyebrow,
.mg-v167-page-polish .kicker,
.mg-v167-page-polish .store-card-kicker {
  color: var(--mg-ui-orange) !important;
  -webkit-text-fill-color: var(--mg-ui-orange) !important;
  letter-spacing: .12em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

/* Header/navigation: stable across pages */
.mg-v167-page-polish .top-nav {
  min-height: 58px !important;
  background: rgba(255, 255, 255, .86) !important;
  border-bottom: 1px solid rgba(17, 9, 51, .08) !important;
  box-shadow: 0 8px 28px rgba(17, 9, 51, .055) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.mg-v167-page-polish .nav-inner {
  width: min(100% - 28px, var(--mg-ui-max)) !important;
  min-height: 58px !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.mg-v167-page-polish .logo-mark,
.mg-v167-page-polish .brand-logo,
.mg-v167-page-polish .nav-logo {
  flex: 0 0 auto !important;
}

.mg-v167-page-polish .nav-links {
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.65vw, 26px) !important;
}

.mg-v167-page-polish .nav-links a,
.mg-v167-page-polish .top-nav a {
  border-radius: 999px !important;
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.mg-v167-page-polish .nav-links a:hover,
.mg-v167-page-polish .top-nav a[aria-current="page"] {
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  background: rgba(252, 101, 1, .07) !important;
  box-shadow: inset 0 0 0 1px rgba(252, 101, 1, .22) !important;
}

.mg-v167-page-polish .nav-icon,
.mg-v167-page-polish .theme-toggle,
.mg-v167-page-polish .search-toggle,
.mg-v167-page-polish .menu-toggle,
.mg-v167-page-polish .mobile-menu-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .11) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--mg-ui-text) !important;
  box-shadow: 0 8px 22px rgba(17, 9, 51, .065) !important;
}

.mg-v167-page-polish .mega-menu {
  border-radius: 28px !important;
  border: 1px solid var(--mg-ui-line) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--mg-ui-shadow-lg) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
}

/* Locked section name should feel premium, not heavy */
.mg-v167-page-polish .mg-floating-section-name {
  min-height: 32px !important;
  padding-block: 4px !important;
  background: rgba(251, 249, 255, .78) !important;
  border-bottom: 1px solid rgba(17, 9, 51, .075) !important;
}

.mg-v167-page-polish .mg-floating-section-name span {
  min-height: 23px !important;
  padding: 4px 12px !important;
  font-size: .70rem !important;
  letter-spacing: .075em !important;
  border-radius: 999px !important;
  background: rgba(252, 101, 1, .08) !important;
  border: 1px solid rgba(252, 101, 1, .20) !important;
  color: #554c68 !important;
  -webkit-text-fill-color: #554c68 !important;
  box-shadow: none !important;
}

/* Hero sections by page */
.mg-v167-page-polish .hero,
.mg-v167-page-polish .hero-section,
.mg-v167-page-polish .page-hero,
.mg-v167-page-polish .store-hero,
.mg-v167-page-polish .catalogue-hero,
.mg-v167-page-polish .category-hero,
.mg-v167-page-polish .recommendation-hero,
.mg-v167-page-polish .trade-hero,
.mg-v167-page-polish .sell-hero,
.mg-v167-page-polish .repair-hero,
.mg-v167-page-polish .support-hero,
.mg-v167-page-polish .contact-hero,
.mg-v167-page-polish .faq-hero {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin-inline: auto !important;
  padding: clamp(26px, 5vw, 68px) 0 clamp(16px, 3.2vw, 36px) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.mg-v167-page-polish .hero p,
.mg-v167-page-polish .page-hero p,
.mg-v167-page-polish .catalogue-hero p,
.mg-v167-page-polish .category-hero p {
  max-width: 760px !important;
  margin-top: 0 !important;
  font-size: clamp(.98rem, 1.4vw, 1.12rem) !important;
}

/* Shared card system */
.mg-v167-page-polish .product-card,
.mg-v167-page-polish .store-feature-card,
.mg-v167-page-polish .service-card,
.mg-v167-page-polish .info-card,
.mg-v167-page-polish .support-card,
.mg-v167-page-polish .faq-card,
.mg-v167-page-polish .trade-card,
.mg-v167-page-polish .summary-card,
.mg-v167-page-polish .form-card,
.mg-v167-page-polish .product-media-card,
.mg-v167-page-polish .product-config-card,
.mg-v167-page-polish .purchase-summary-card {
  border: 1px solid var(--mg-ui-line) !important;
  background: rgba(255, 255, 255, .94) !important;
  border-radius: var(--mg-ui-radius-lg) !important;
  box-shadow: var(--mg-ui-shadow-sm) !important;
  overflow: hidden !important;
}

.mg-v167-page-polish .product-card:hover,
.mg-v167-page-polish .store-feature-card:hover,
.mg-v167-page-polish .service-card:hover,
.mg-v167-page-polish .info-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(252, 101, 1, .24) !important;
  box-shadow: var(--mg-ui-shadow-md) !important;
}

/* Product catalogue pages */
.mg-v167-category-page .page-hero,
.mg-v167-category-page .catalogue-hero,
.mg-v167-category-page .category-hero,
.mg-v167-category-page main > section:first-child {
  padding-bottom: clamp(10px, 1.5vw, 18px) !important;
}

.mg-v167-category-page #storeGrid {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: var(--mg-ui-gap) !important;
  align-items: stretch !important;
}

.mg-v167-category-page #storeGrid .product-card,
.mg-v167-category-page #storeGrid [data-card-product] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.mg-v167-category-page #storeGrid .product-card img,
.mg-v167-category-page #storeGrid [data-card-product] img {
  object-fit: contain !important;
  display: block !important;
}

.mg-v167-category-page .product-card h3,
.mg-v167-category-page .product-card-title {
  font-size: clamp(.92rem, 1.1vw, 1.08rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em !important;
  margin: 0 !important;
}

.mg-v167-category-page .product-card p,
.mg-v167-category-page .product-card-meta,
.mg-v167-category-page .product-card-body p {
  font-size: .83rem !important;
  line-height: 1.42 !important;
}

.mg-v167-category-page .price-cta,
.mg-v167-category-page .cta-button {
  width: calc(100% - 24px) !important;
  margin: 12px auto 16px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
}

.mg-v167-category-page .tag,
.mg-v167-category-page .family-option-count,
.mg-v167-category-page .store-card-kicker {
  border-radius: 999px !important;
  background: rgba(252, 101, 1, .08) !important;
  border: 1px solid rgba(252, 101, 1, .18) !important;
  color: var(--mg-ui-orange) !important;
  -webkit-text-fill-color: var(--mg-ui-orange) !important;
}

/* Filter/Sort + Help controls final right-side cluster */
body.mg-v165-controls-deduped .mg-clean-separated-pill-tools,
body.mg-final-filter-ready .mg-clean-separated-pill-tools,
body.mg-final-filter-ready .mg-final-filter-tools {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin: 4px auto 14px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster,
body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
body.mg-final-filter-ready .mg-right-pill-cluster {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: end !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open {
  width: auto !important;
  min-width: max-content !important;
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #fff !important;
  color: #4f485d !important;
  -webkit-text-fill-color: #4f485d !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 10px 28px rgba(17, 9, 51, .10) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill {
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-icon {
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mg-ui-orange) !important;
  -webkit-text-fill-color: var(--mg-ui-orange) !important;
}

body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-pill-text,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-pill-text,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill span,
body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open span:last-child {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  clip: auto !important;
  clip-path: none !important;
  min-width: max-content !important;
}

/* Filter/sort bottom sheet */
.mg-v167-page-polish .mg-filter-sort-layer.is-open,
.mg-v167-page-polish .mg-filter-sort-layer:not([hidden]) {
  z-index: 3100 !important;
}

.mg-v167-page-polish .mg-filter-sort-panel {
  border-radius: 28px !important;
  border: 1px solid var(--mg-ui-line) !important;
  box-shadow: var(--mg-ui-shadow-lg) !important;
  background: rgba(255, 255, 255, .97) !important;
}

.mg-v167-page-polish .mg-filter-option,
.mg-v167-page-polish .mg-sort-option,
.mg-v167-page-polish .category-filter,
.mg-v167-page-polish .option {
  min-height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #fff !important;
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  font-weight: 850 !important;
}

.mg-v167-page-polish .mg-filter-option.is-active,
.mg-v167-page-polish .mg-sort-option.is-active,
.mg-v167-page-polish .category-filter.is-active,
.mg-v167-page-polish .category-filter.active,
.mg-v167-page-polish .option.active {
  background: rgba(252, 101, 1, .10) !important;
  border-color: rgba(252, 101, 1, .36) !important;
  color: var(--mg-ui-orange) !important;
  -webkit-text-fill-color: var(--mg-ui-orange) !important;
}

/* Store page */
.mg-v167-store .apple-store-section,
.mg-v167-store .store-section {
  padding-block: var(--mg-ui-section-tight) !important;
}

.mg-v167-page-polish .apple-store-row,
.mg-v167-page-polish .store-grid,
.mg-v167-page-polish .product-grid,
.mg-v167-page-polish .cards-grid,
.mg-v167-page-polish .support-grid,
.mg-v167-page-polish .faq-grid,
.mg-v167-page-polish .repair-grid,
.mg-v167-page-polish .contact-grid {
  gap: var(--mg-ui-gap) !important;
  align-items: stretch !important;
}

.mg-v167-page-polish .apple-store-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* Product detail page */
.mg-v167-product .warehouse-product-header,
.mg-v167-product .product-detail-grid,
.mg-v167-product .product-detail-grid-v39 {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin-inline: auto !important;
}

.mg-v167-product .warehouse-product-header {
  padding: clamp(16px, 2.4vw, 28px) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--mg-ui-line) !important;
  box-shadow: var(--mg-ui-shadow-sm) !important;
}

.mg-v167-product .product-detail-grid,
.mg-v167-product .product-detail-grid-v39 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
  gap: clamp(18px, 2.4vw, 32px) !important;
  align-items: start !important;
}

.mg-v167-product .selection-step,
.mg-v167-product .purchase-summary-card,
.mg-v167-product .product-media-card,
.mg-v167-product .product-config-card {
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid var(--mg-ui-line) !important;
}

/* Forms/service pages */
.mg-v167-service-page .hero-actions,
.mg-v167-service-page .trade-hero-actions,
.mg-v167-service-page .action-row,
.mg-v167-page-polish .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.mg-v167-page-polish .primary-btn,
.mg-v167-page-polish .secondary-btn,
.mg-v167-page-polish .cta-button,
.mg-v167-page-polish .price-cta,
.mg-v167-page-polish button,
.mg-v167-page-polish input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 950 !important;
}

.mg-v167-page-polish .primary-btn,
.mg-v167-page-polish .cta-button,
.mg-v167-page-polish .price-cta,
.mg-v167-page-polish #checkoutBtn,
.mg-v167-page-polish #sendTradeBtn,
.mg-v167-page-polish #sellWhatsappBtn {
  background: linear-gradient(135deg, var(--mg-ui-orange), var(--mg-ui-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 34px rgba(252, 101, 1, .20) !important;
}

.mg-v167-page-polish .secondary-btn {
  background: #fff !important;
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  box-shadow: 0 10px 24px rgba(17, 9, 51, .075) !important;
}

.mg-v167-page-polish input,
.mg-v167-page-polish select,
.mg-v167-page-polish textarea {
  width: 100%;
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(17, 9, 51, .13) !important;
  background: #fff !important;
  color: var(--mg-ui-text) !important;
  -webkit-text-fill-color: var(--mg-ui-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.mg-v167-page-polish input:focus,
.mg-v167-page-polish select:focus,
.mg-v167-page-polish textarea:focus {
  outline: 3px solid rgba(252, 101, 1, .15) !important;
  border-color: rgba(252, 101, 1, .44) !important;
}

/* Pagination */
.mg-v167-page-polish .mg-pagination {
  width: min(100% - (var(--mg-ui-pad) * 2), var(--mg-ui-max)) !important;
  margin: clamp(18px, 3vw, 34px) auto 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.mg-v167-page-polish .mg-pagination-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.mg-v167-page-polish .mg-page-btn {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 9, 51, .12) !important;
  background: #fff !important;
}

.mg-v167-page-polish .mg-page-btn.is-active {
  background: var(--mg-ui-orange) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: var(--mg-ui-orange) !important;
}

/* Floating help and scroll arrow */
:root {
  --mg-float-btn-size: 52px;
  --mg-float-btn-gap: 14px;
  --mg-float-edge: max(18px, env(safe-area-inset-right));
  --mg-float-bottom: max(18px, env(safe-area-inset-bottom));
}

.mg-v167-page-polish .mg-floating-help {
  width: var(--mg-float-btn-size) !important;
  height: var(--mg-float-btn-size) !important;
  min-width: var(--mg-float-btn-size) !important;
  min-height: var(--mg-float-btn-size) !important;
  right: var(--mg-float-edge) !important;
  bottom: calc(var(--mg-float-bottom) + var(--mg-float-btn-size) + var(--mg-float-btn-gap)) !important;
  border-radius: 999px !important;
  z-index: 2700 !important;
}

.mg-v167-page-polish .mg-floating-help-tooltip {
  right: 0 !important;
  left: auto !important;
  bottom: calc(100% + 12px) !important;
  top: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 36px) !important;
  background: linear-gradient(135deg, var(--mg-ui-orange), var(--mg-ui-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.back-to-top, .back-to-top-btn, .scroll-to-top, .scroll-top, .scroll-top-btn, .scroll-arrow, .scroll-toggle, .scroll-progress, #backToTop, #scrollTop, #scrollArrow, #scrollToggle, [data-scroll-top], [data-back-to-top] {
  width: var(--mg-float-btn-size) !important;
  height: var(--mg-float-btn-size) !important;
  min-width: var(--mg-float-btn-size) !important;
  min-height: var(--mg-float-btn-size) !important;
  right: var(--mg-float-edge) !important;
  bottom: var(--mg-float-bottom) !important;
  border-radius: 999px !important;
  z-index: 2500 !important;
}

/* Footer */
.mg-v167-page-polish footer,
.mg-v167-page-polish .footer {
  background: rgba(255,255,255,.92) !important;
  border-top: 1px solid var(--mg-ui-line) !important;
  margin-top: clamp(34px, 6vw, 84px) !important;
}

/* Mobile */
@media (max-width: 900px) {
  .mg-v167-page-polish .nav-inner {
    width: min(100% - 18px, var(--mg-ui-max)) !important;
    min-height: 60px !important;
    justify-content: space-between !important;
  }

  .mg-v167-page-polish .nav-links {
    display: none !important;
  }

  .mg-v167-page-polish .mobile-menu-toggle,
  .mg-v167-page-polish .menu-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mg-ui-pad: var(--mg-ui-pad-mobile);
    --mg-ui-section: 34px;
    --mg-ui-section-tight: 22px;
    --mg-ui-gap: 12px;
  }

  .mg-v167-page-polish main > section,
  .mg-v167-page-polish .section,
  .mg-v167-page-polish .page-section,
  .mg-v167-page-polish .catalogue-section,
  .mg-v167-page-polish .apple-store-section,
  .mg-v167-page-polish .product-detail-section,
  .mg-v167-page-polish .trade-section,
  .mg-v167-page-polish .sell-section,
  .mg-v167-page-polish .repair-section,
  .mg-v167-page-polish .support-section,
  .mg-v167-page-polish .faq-section,
  .mg-v167-page-polish .contact-section,
  .mg-v167-page-polish .recommendation-section,
  .mg-v167-page-polish .hero,
  .mg-v167-page-polish .hero-section,
  .mg-v167-page-polish .page-hero,
  .mg-v167-page-polish .store-hero,
  .mg-v167-page-polish .catalogue-hero,
  .mg-v167-page-polish .category-hero,
  .mg-v167-page-polish .recommendation-hero,
  .mg-v167-page-polish .trade-hero,
  .mg-v167-page-polish .sell-hero,
  .mg-v167-page-polish .repair-hero,
  .mg-v167-page-polish .support-hero,
  .mg-v167-page-polish .contact-hero,
  .mg-v167-page-polish .faq-hero,
  .mg-v167-category-page #storeGrid,
  .mg-v167-product .warehouse-product-header,
  .mg-v167-product .product-detail-grid,
  .mg-v167-product .product-detail-grid-v39,
  .mg-v167-page-polish .mg-pagination {
    width: min(100% - 28px, var(--mg-ui-max)) !important;
  }

  .mg-v167-page-polish h1 {
    font-size: clamp(2.45rem, 12.5vw, 4.05rem) !important;
    line-height: .90 !important;
    max-width: 100% !important;
    letter-spacing: -0.060em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .mg-v167-page-polish h2 {
    font-size: clamp(1.8rem, 8.5vw, 2.75rem) !important;
  }

  .mg-v167-page-polish .hero p,
  .mg-v167-page-polish .page-hero p,
  .mg-v167-page-polish .catalogue-hero p,
  .mg-v167-page-polish .category-hero p {
    font-size: .96rem !important;
    line-height: 1.48 !important;
    max-width: 100% !important;
  }

  .mg-v167-category-page #storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .mg-v167-category-page .product-card,
  .mg-v167-category-page [data-card-product] {
    border-radius: 18px !important;
  }

  .mg-v167-category-page .product-card h3 {
    font-size: .86rem !important;
    line-height: 1.16 !important;
  }

  .mg-v167-category-page .product-card p,
  .mg-v167-category-page .product-card-meta,
  .mg-v167-category-page .product-card-body p {
    font-size: .72rem !important;
    line-height: 1.36 !important;
  }

  .mg-v167-category-page .price-cta,
  .mg-v167-category-page .cta-button {
    min-height: 38px !important;
    font-size: .72rem !important;
    margin: 10px auto 12px !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-tools,
  body.mg-final-filter-ready .mg-clean-separated-pill-tools,
  body.mg-final-filter-ready .mg-final-filter-tools {
    width: min(100% - 28px, var(--mg-ui-max)) !important;
    margin: 4px auto 12px !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster,
  body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
  body.mg-final-filter-ready .mg-right-pill-cluster {
    gap: 10px !important;
    max-width: 100% !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    height: 38px !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: .78rem !important;
  }

  .mg-v167-product .product-detail-grid,
  .mg-v167-product .product-detail-grid-v39 {
    grid-template-columns: 1fr !important;
  }

  .mg-v167-page-polish .mg-filter-sort-panel {
    width: min(100% - 18px, 560px) !important;
    max-height: min(82vh, 760px) !important;
    border-radius: 26px 26px 0 0 !important;
  }

  .mg-v167-page-polish .mg-pagination {
    justify-content: center !important;
    text-align: center !important;
  }

  .mg-v167-page-polish .mg-pagination-controls {
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  .mg-v167-page-polish h1 {
    font-size: clamp(2.2rem, 12vw, 3.25rem) !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster,
  body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
    gap: 8px !important;
  }

  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-control-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  body.mg-v165-controls-deduped .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    padding: 8px 10px !important;
    font-size: .72rem !important;
  }
}

/* V1.179 prevent hidden desktop mega menus from creating page overflow */
@media (min-width: 901px) {
  body .top-nav .has-mega > .mega-menu,
  body .top-nav .nav-item.has-mega > .mega-menu {
    position: fixed !important;
    top: 58px !important;
    left: 50% !important;
    right: auto !important;
    width: min(760px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    display: none !important;
    transform: translate(-50%, 10px) scale(.985) !important;
  }

  body .top-nav .has-mega > .mega-menu.compact,
  body .top-nav .nav-item.has-mega > .mega-menu.compact {
    width: min(520px, calc(100vw - 32px)) !important;
  }

  body .top-nav .has-mega > .mega-menu.wide,
  body .top-nav .nav-item.has-mega > .mega-menu.wide {
    width: min(860px, calc(100vw - 32px)) !important;
  }

  body .top-nav .has-mega:hover > .mega-menu,
  body .top-nav .has-mega:focus-within > .mega-menu,
  body .top-nav .has-mega.mega-open > .mega-menu,
  body .top-nav .has-mega.is-open > .mega-menu,
  body .top-nav .has-mega.mg-mega-open > .mega-menu,
  body .top-nav .nav-item.has-mega:hover > .mega-menu,
  body .top-nav .nav-item.has-mega:focus-within > .mega-menu,
  body .top-nav .nav-item.has-mega.mega-open > .mega-menu,
  body .top-nav .nav-item.has-mega.is-open > .mega-menu,
  body .top-nav .nav-item.has-mega.mg-mega-open > .mega-menu {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }
}

/* ---- css/ui-consistency-v170.css ---- */

/* V1.170 PAGE-BY-PAGE LIGHT UI CONSISTENCY
   This file is the final visual source of truth for LIGHT MODE.
   It preserves the working site functions and standardizes the visible UX across pages. */
:root,
html:not([data-theme="dark"]),
html[data-theme="light"] {
  --mg170-orange: #fc6501;
  --mg170-orange-2: #ff8a3d;
  --mg170-ink: #110933;
  --mg170-text: #1c1728;
  --mg170-muted: #5f586c;
  --mg170-soft: #fbf9ff;
  --mg170-surface: #ffffff;
  --mg170-surface-2: #fff8f3;
  --mg170-line: rgba(17, 9, 51, .10);
  --mg170-line-strong: rgba(17, 9, 51, .16);
  --mg170-orange-line: rgba(252, 101, 1, .24);
  --mg170-shadow-sm: 0 10px 28px rgba(17, 9, 51, .075);
  --mg170-shadow-md: 0 18px 52px rgba(17, 9, 51, .115);
  --mg170-shadow-lg: 0 28px 86px rgba(17, 9, 51, .16);
}

html:not([data-theme="dark"]) body.mg-v170-ui,
html[data-theme="light"] body.mg-v170-ui {
  background:
    radial-gradient(circle at 16% 0%, rgba(252, 101, 1, .075), transparent 34rem),
    radial-gradient(circle at 92% 12%, rgba(59, 52, 87, .075), transparent 28rem),
    var(--mg170-soft) !important;
  color: var(--mg170-text) !important;
  overflow-x: clip !important;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html:not([data-theme="dark"]) body.mg-v170-ui *,
html[data-theme="light"] body.mg-v170-ui * { box-sizing: border-box; }

/* Global page containers */
html:not([data-theme="dark"]) .mg-v170-ui main,
html[data-theme="light"] .mg-v170-ui main {
  width: 100%;
  overflow: clip;
}

html:not([data-theme="dark"]) .mg-v170-ui main > section,
html[data-theme="light"] .mg-v170-ui main > section {
  scroll-margin-top: 120px;
}

html:not([data-theme="dark"]) .mg-v170-ui .section,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-section,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
html:not([data-theme="dark"]) .mg-v170-ui .promo,
html:not([data-theme="dark"]) .mg-v170-ui .page-title,
html:not([data-theme="dark"]) .mg-v170-ui .form-page,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
html:not([data-theme="dark"]) .mg-v170-ui .product-detail-section,
html[data-theme="light"] .mg-v170-ui .section,
html[data-theme="light"] .mg-v170-ui .catalog-header,
html[data-theme="light"] .mg-v170-ui .apple-store-section,
html[data-theme="light"] .mg-v170-ui .apple-store-hero,
html[data-theme="light"] .mg-v170-ui .hero-ad,
html[data-theme="light"] .mg-v170-ui .promo,
html[data-theme="light"] .mg-v170-ui .page-title,
html[data-theme="light"] .mg-v170-ui .form-page,
html[data-theme="light"] .mg-v170-ui .trade-hero,
html[data-theme="light"] .mg-v170-ui .sell-device-hero,
html[data-theme="light"] .mg-v170-ui .repair-hero,
html[data-theme="light"] .mg-v170-ui .support-hero,
html[data-theme="light"] .mg-v170-ui .contact-hero,
html[data-theme="light"] .mg-v170-ui .product-detail-section {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin-inline: auto !important;
}

/* Text hierarchy */
html:not([data-theme="dark"]) .mg-v170-ui h1,
html:not([data-theme="dark"]) .mg-v170-ui h2,
html:not([data-theme="dark"]) .mg-v170-ui h3,
html[data-theme="light"] .mg-v170-ui h1,
html[data-theme="light"] .mg-v170-ui h2,
html[data-theme="light"] .mg-v170-ui h3 {
  color: var(--mg170-ink) !important;
  -webkit-text-fill-color: var(--mg170-ink) !important;
  letter-spacing: -.045em;
  text-wrap: balance;
}

html:not([data-theme="dark"]) .mg-v170-ui p,
html:not([data-theme="dark"]) .mg-v170-ui li,
html:not([data-theme="dark"]) .mg-v170-ui small,
html:not([data-theme="dark"]) .mg-v170-ui .muted,
html[data-theme="light"] .mg-v170-ui p,
html[data-theme="light"] .mg-v170-ui li,
html[data-theme="light"] .mg-v170-ui small,
html[data-theme="light"] .mg-v170-ui .muted {
  color: var(--mg170-muted) !important;
  -webkit-text-fill-color: var(--mg170-muted) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .eyebrow,
html[data-theme="light"] .mg-v170-ui .eyebrow {
  color: var(--mg170-orange) !important;
  -webkit-text-fill-color: var(--mg170-orange) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

/* Navigation consistency */
html:not([data-theme="dark"]) .mg-v170-ui .top-nav,
html[data-theme="light"] .mg-v170-ui .top-nav {
  min-height: 56px !important;
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid rgba(17, 9, 51, .08) !important;
  box-shadow: 0 10px 30px rgba(17, 9, 51, .055) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .top-nav a,
html[data-theme="light"] .mg-v170-ui .top-nav a {
  min-height: 38px;
  color: var(--mg170-ink) !important;
  -webkit-text-fill-color: var(--mg170-ink) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .top-nav a:hover,
html:not([data-theme="dark"]) .mg-v170-ui .top-nav a[aria-current="page"],
html[data-theme="light"] .mg-v170-ui .top-nav a:hover,
html[data-theme="light"] .mg-v170-ui .top-nav a[aria-current="page"] {
  color: var(--mg170-orange) !important;
  -webkit-text-fill-color: var(--mg170-orange) !important;
}

/* Hero consistency page by page */
html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
html:not([data-theme="dark"]) .mg-v170-ui .page-title,
html[data-theme="light"] .mg-v170-ui .hero-ad,
html[data-theme="light"] .mg-v170-ui .apple-store-hero,
html[data-theme="light"] .mg-v170-ui .catalog-header,
html[data-theme="light"] .mg-v170-ui .trade-hero,
html[data-theme="light"] .mg-v170-ui .sell-device-hero,
html[data-theme="light"] .mg-v170-ui .repair-hero,
html[data-theme="light"] .mg-v170-ui .support-hero,
html[data-theme="light"] .mg-v170-ui .contact-hero,
html[data-theme="light"] .mg-v170-ui .page-title {
  margin-top: clamp(18px, 3vw, 34px) !important;
  margin-bottom: clamp(14px, 2vw, 24px) !important;
  padding: clamp(24px, 4vw, 54px) !important;
  border-radius: var(--mg-radius-card) !important;
  background:
    radial-gradient(circle at top left, rgba(252, 101, 1, .14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,244,255,.96)) !important;
  border: 1px solid var(--mg170-line) !important;
  box-shadow: var(--mg170-shadow-sm) !important;
  overflow: hidden !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .catalog-header h1,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .hero-ad h1,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .page-title h1,
html[data-theme="light"] .mg-v170-ui .catalog-header h1,
html[data-theme="light"] .mg-v170-ui .apple-store-hero h1,
html[data-theme="light"] .mg-v170-ui .hero-ad h1,
html[data-theme="light"] .mg-v170-ui .trade-hero h1,
html[data-theme="light"] .mg-v170-ui .sell-device-hero h1,
html[data-theme="light"] .mg-v170-ui .repair-hero h1,
html[data-theme="light"] .mg-v170-ui .support-hero h1,
html[data-theme="light"] .mg-v170-ui .contact-hero h1,
html[data-theme="light"] .mg-v170-ui .page-title h1 {
  font-size: clamp(2.8rem, 7.2vw, 6.8rem) !important;
  line-height: .9 !important;
  max-width: 980px !important;
  margin: 0 0 clamp(10px, 1.5vw, 18px) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .catalog-header p,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .hero-ad p,
html:not([data-theme="dark"]) .mg-v170-ui .page-title p,
html[data-theme="light"] .mg-v170-ui .catalog-header p,
html[data-theme="light"] .mg-v170-ui .apple-store-hero p,
html[data-theme="light"] .mg-v170-ui .hero-ad p,
html[data-theme="light"] .mg-v170-ui .page-title p {
  max-width: 720px !important;
  font-size: clamp(.95rem, 1.25vw, 1.08rem) !important;
  line-height: 1.55 !important;
}

/* Category pages: intro, filter tools, grid should feel like one section */
html:not([data-theme="dark"]) .mg-v170-category .catalog-header,
html[data-theme="light"] .mg-v170-category .catalog-header {
  margin-bottom: 10px !important;
  padding-bottom: clamp(20px, 3vw, 42px) !important;
}
html:not([data-theme="dark"]) .mg-v170-category .product-listing-section,
html[data-theme="light"] .mg-v170-category .product-listing-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html:not([data-theme="dark"]) .mg-v170-category .mg-final-filter-tools,
html[data-theme="light"] .mg-v170-category .mg-final-filter-tools {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
html:not([data-theme="dark"]) .mg-v170-category #storeGrid,
html[data-theme="light"] .mg-v170-category #storeGrid {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: var(--mg-grid-gap) !important;
  align-items: stretch !important;
}

/* Product cards */
html:not([data-theme="dark"]) .mg-v170-ui .product-card,
html:not([data-theme="dark"]) .mg-v170-ui .store-feature-card,
html[data-theme="light"] .mg-v170-ui .product-card,
html[data-theme="light"] .mg-v170-ui .store-feature-card {
  border-radius: var(--mg-radius-card) !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--mg170-line) !important;
  box-shadow: var(--mg170-shadow-sm) !important;
  overflow: hidden !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-card:hover,
html:not([data-theme="dark"]) .mg-v170-ui .store-feature-card:hover,
html[data-theme="light"] .mg-v170-ui .product-card:hover,
html[data-theme="light"] .mg-v170-ui .store-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(252,101,1,.26) !important;
  box-shadow: var(--mg170-shadow-md) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-image-link,
html[data-theme="light"] .mg-v170-ui .product-image-link {
  width: calc(100% - 24px) !important;
  margin: 10px auto 8px !important;
  aspect-ratio: 1.16 / .78 !important;
  min-height: 154px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fffaf7, #f4f2ff) !important;
  border: 1px solid rgba(17,9,51,.10) !important;
  overflow: hidden !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-image-link img,
html[data-theme="light"] .mg-v170-ui .product-image-link img {
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-card-body,
html[data-theme="light"] .mg-v170-ui .product-card-body {
  padding: 0 16px 12px !important;
  display: grid !important;
  gap: 7px !important;
  flex: 1 1 auto !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-card h3,
html[data-theme="light"] .mg-v170-ui .product-card h3 {
  font-size: clamp(.96rem, 1.15vw, 1.08rem) !important;
  line-height: 1.16 !important;
  margin: 0 !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .product-card p,
html[data-theme="light"] .mg-v170-ui .product-card p {
  font-size: .82rem !important;
  line-height: 1.42 !important;
  margin: 0 !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .tag,
html:not([data-theme="dark"]) .mg-v170-ui .family-option-count,
html[data-theme="light"] .mg-v170-ui .tag,
html[data-theme="light"] .mg-v170-ui .family-option-count {
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin: 10px 12px 0 !important;
  padding: 5px 10px !important;
  border-radius: var(--mg-radius-pill) !important;
  border: 1px solid var(--mg170-orange-line) !important;
  background: rgba(252,101,1,.08) !important;
  color: var(--mg170-orange) !important;
  -webkit-text-fill-color: var(--mg170-orange) !important;
  font-size: .74rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .price-cta,
html:not([data-theme="dark"]) .mg-v170-ui .cta-button,
html[data-theme="light"] .mg-v170-ui .price-cta,
html[data-theme="light"] .mg-v170-ui .cta-button {
  margin: auto 14px 14px !important;
  min-height: 42px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--mg170-orange), var(--mg170-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 12px 28px rgba(252,101,1,.20) !important;
}

/* Store/home grids */
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row,
html:not([data-theme="dark"]) .mg-v170-ui .store-grid,
html:not([data-theme="dark"]) .mg-v170-ui .category-grid,
html[data-theme="light"] .mg-v170-ui .apple-store-row,
html[data-theme="light"] .mg-v170-ui .store-grid,
html[data-theme="light"] .mg-v170-ui .category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
  gap: var(--mg-grid-gap) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-section,
html:not([data-theme="dark"]) .mg-v170-ui .section.pad,
html[data-theme="light"] .mg-v170-ui .apple-store-section,
html[data-theme="light"] .mg-v170-ui .section.pad {
  padding-block: clamp(22px, 4vw, 54px) !important;
}

/* Product detail */
html:not([data-theme="dark"]) .mg-v170-product .product-detail-section,
html[data-theme="light"] .mg-v170-product .product-detail-section {
  padding-block: clamp(20px, 4vw, 52px) !important;
}
html:not([data-theme="dark"]) .mg-v170-product .warehouse-product-header,
html[data-theme="light"] .mg-v170-product .warehouse-product-header {
  padding: clamp(18px, 2.5vw, 30px) !important;
  border-radius: var(--mg-radius-card) !important;
  background: linear-gradient(135deg, #fff, #fbf7ff) !important;
  border: 1px solid var(--mg170-line) !important;
  box-shadow: var(--mg170-shadow-sm) !important;
}
html:not([data-theme="dark"]) .mg-v170-product .product-detail-grid,
html[data-theme="light"] .mg-v170-product .product-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr) minmax(280px, .8fr) !important;
  gap: var(--mg-grid-gap) !important;
  align-items: start !important;
}
html:not([data-theme="dark"]) .mg-v170-product .product-media-card,
html:not([data-theme="dark"]) .mg-v170-product .product-config-card,
html:not([data-theme="dark"]) .mg-v170-product .purchase-summary-card,
html[data-theme="light"] .mg-v170-product .product-media-card,
html[data-theme="light"] .mg-v170-product .product-config-card,
html[data-theme="light"] .mg-v170-product .purchase-summary-card {
  border-radius: var(--mg-radius-card) !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--mg170-line) !important;
  box-shadow: var(--mg170-shadow-sm) !important;
}

/* Forms/service pages */
html:not([data-theme="dark"]) .mg-v170-service .form-page,
html:not([data-theme="dark"]) .mg-v170-service .trade-page-grid,
html:not([data-theme="dark"]) .mg-v170-service .sell-device-grid,
html:not([data-theme="dark"]) .mg-v170-service .contact-layout,
html:not([data-theme="dark"]) .mg-v170-service .support-section,
html:not([data-theme="dark"]) .mg-v170-service .repair-section,
html[data-theme="light"] .mg-v170-service .form-page,
html[data-theme="light"] .mg-v170-service .trade-page-grid,
html[data-theme="light"] .mg-v170-service .sell-device-grid,
html[data-theme="light"] .mg-v170-service .contact-layout,
html[data-theme="light"] .mg-v170-service .support-section,
html[data-theme="light"] .mg-v170-service .repair-section {
  margin-top: clamp(16px, 2.4vw, 28px) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui input,
html:not([data-theme="dark"]) .mg-v170-ui select,
html:not([data-theme="dark"]) .mg-v170-ui textarea,
html[data-theme="light"] .mg-v170-ui input,
html[data-theme="light"] .mg-v170-ui select,
html[data-theme="light"] .mg-v170-ui textarea {
  min-height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mg170-line-strong) !important;
  background: #fff !important;
  color: var(--mg170-ink) !important;
  -webkit-text-fill-color: var(--mg170-ink) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui input:focus,
html:not([data-theme="dark"]) .mg-v170-ui select:focus,
html:not([data-theme="dark"]) .mg-v170-ui textarea:focus,
html[data-theme="light"] .mg-v170-ui input:focus,
html[data-theme="light"] .mg-v170-ui select:focus,
html[data-theme="light"] .mg-v170-ui textarea:focus {
  outline: 3px solid rgba(252,101,1,.16) !important;
  border-color: rgba(252,101,1,.46) !important;
}

/* Buttons and controls */
html:not([data-theme="dark"]) .mg-v170-ui .primary-btn,
html:not([data-theme="dark"]) .mg-v170-ui .secondary-btn,
html:not([data-theme="dark"]) .mg-v170-ui button,
html:not([data-theme="dark"]) .mg-v170-ui .mg-control-pill,
html[data-theme="light"] .mg-v170-ui .primary-btn,
html[data-theme="light"] .mg-v170-ui .secondary-btn,
html[data-theme="light"] .mg-v170-ui button,
html[data-theme="light"] .mg-v170-ui .mg-control-pill {
  min-height: 40px;
}
html:not([data-theme="dark"]) .mg-v170-ui .primary-btn,
html[data-theme="light"] .mg-v170-ui .primary-btn {
  background: linear-gradient(135deg, var(--mg170-orange), var(--mg170-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(252,101,1,.28) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .secondary-btn,
html[data-theme="light"] .mg-v170-ui .secondary-btn {
  background: #fff !important;
  color: var(--mg170-ink) !important;
  -webkit-text-fill-color: var(--mg170-ink) !important;
  border-color: var(--mg170-line-strong) !important;
}

/* Final category control pill consistency */
html:not([data-theme="dark"]) .mg-v170-ui .mg-clean-separated-pill-cluster,
html[data-theme="light"] .mg-v170-ui .mg-clean-separated-pill-cluster {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: end !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .mg-clean-separated-pill-cluster .mg-control-pill,
html[data-theme="light"] .mg-v170-ui .mg-clean-separated-pill-cluster .mg-control-pill {
  min-width: max-content !important;
  height: 38px !important;
  padding: 9px 15px !important;
  border-radius: var(--mg-radius-pill) !important;
  background: #fff !important;
  border: 1px solid var(--mg170-line-strong) !important;
  box-shadow: 0 10px 28px rgba(17,9,51,.10) !important;
}

/* Filter/sort panel */
html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-sort-panel,
html[data-theme="light"] .mg-v170-ui .mg-filter-sort-panel {
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid var(--mg170-line) !important;
  box-shadow: var(--mg170-shadow-lg) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-option,
html:not([data-theme="dark"]) .mg-v170-ui .mg-sort-option,
html[data-theme="light"] .mg-v170-ui .mg-filter-option,
html[data-theme="light"] .mg-v170-ui .mg-sort-option {
  min-height: 44px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--mg170-line) !important;
  color: var(--mg170-ink) !important;
  -webkit-text-fill-color: var(--mg170-ink) !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-option.is-active,
html:not([data-theme="dark"]) .mg-v170-ui .mg-sort-option.is-active,
html[data-theme="light"] .mg-v170-ui .mg-filter-option.is-active,
html[data-theme="light"] .mg-v170-ui .mg-sort-option.is-active {
  color: var(--mg170-orange) !important;
  -webkit-text-fill-color: var(--mg170-orange) !important;
  background: rgba(252,101,1,.10) !important;
  border-color: rgba(252,101,1,.38) !important;
}

/* Floating help + scroll arrow consistent lane */
html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-help,
html[data-theme="light"] .mg-v170-ui .mg-floating-help {
  width: 52px !important;
  height: 52px !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px) !important;
  border-radius: 999px !important;
}
html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-help-tooltip,
html[data-theme="light"] .mg-v170-ui .mg-floating-help-tooltip {
  right: 0 !important;
  left: auto !important;
  bottom: calc(100% + 12px) !important;
  background: linear-gradient(135deg, var(--mg170-orange), var(--mg170-orange-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  white-space: nowrap !important;
  max-width: calc(100vw - 36px) !important;
}

/* Keyboard focus */
html:not([data-theme="dark"]) .mg-v170-ui .mg-v170-target:focus-visible,
html[data-theme="light"] .mg-v170-ui .mg-v170-target:focus-visible {
  outline: 3px solid rgba(252,101,1,.28) !important;
  outline-offset: 4px !important;
}

/* Mobile consistency */
@media (max-width: 900px) {
  html:not([data-theme="dark"]) .mg-v170-product .product-detail-grid,
  html[data-theme="light"] .mg-v170-product .product-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  :root,
  html:not([data-theme="dark"]),
  html[data-theme="light"] {
  }
  html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
  html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .page-title,
  html[data-theme="light"] .mg-v170-ui .hero-ad,
  html[data-theme="light"] .mg-v170-ui .apple-store-hero,
  html[data-theme="light"] .mg-v170-ui .catalog-header,
  html[data-theme="light"] .mg-v170-ui .trade-hero,
  html[data-theme="light"] .mg-v170-ui .sell-device-hero,
  html[data-theme="light"] .mg-v170-ui .repair-hero,
  html[data-theme="light"] .mg-v170-ui .support-hero,
  html[data-theme="light"] .mg-v170-ui .contact-hero,
  html[data-theme="light"] .mg-v170-ui .page-title {
    width: min(100% - 24px, var(--mg-page-max)) !important;
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .catalog-header h1,
  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .hero-ad h1,
  html:not([data-theme="dark"]) .mg-v170-ui .page-title h1,
  html[data-theme="light"] .mg-v170-ui .catalog-header h1,
  html[data-theme="light"] .mg-v170-ui .apple-store-hero h1,
  html[data-theme="light"] .mg-v170-ui .hero-ad h1,
  html[data-theme="light"] .mg-v170-ui .page-title h1 {
    font-size: clamp(2.4rem, 12vw, 4.3rem) !important;
    line-height: .92 !important;
  }
  html:not([data-theme="dark"]) .mg-v170-category #storeGrid,
  html[data-theme="light"] .mg-v170-category #storeGrid {
    width: min(100% - 24px, var(--mg-page-max)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .product-image-link,
  html[data-theme="light"] .mg-v170-ui .product-image-link {
    width: calc(100% - 18px) !important;
    min-height: 120px !important;
    margin: 8px auto 6px !important;
    border-radius: 18px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .product-card-body,
  html[data-theme="light"] .mg-v170-ui .product-card-body {
    padding: 0 10px 10px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .product-card h3,
  html[data-theme="light"] .mg-v170-ui .product-card h3 {
    font-size: .85rem !important;
    line-height: 1.18 !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .product-card p,
  html[data-theme="light"] .mg-v170-ui .product-card p {
    font-size: .72rem !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .tag,
  html:not([data-theme="dark"]) .mg-v170-ui .family-option-count,
  html[data-theme="light"] .mg-v170-ui .tag,
  html[data-theme="light"] .mg-v170-ui .family-option-count {
    margin: 8px 9px 0 !important;
    font-size: .66rem !important;
    padding: 4px 8px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .price-cta,
  html:not([data-theme="dark"]) .mg-v170-ui .cta-button,
  html[data-theme="light"] .mg-v170-ui .price-cta,
  html[data-theme="light"] .mg-v170-ui .cta-button {
    margin: auto 10px 10px !important;
    min-height: 38px !important;
    font-size: .72rem !important;
    border-radius: 14px !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-sort-panel,
  html[data-theme="light"] .mg-v170-ui .mg-filter-sort-panel {
    border-radius: 26px 26px 0 0 !important;
    max-height: min(84vh, 700px) !important;
    overflow: auto !important;
  }
  html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-options,
  html:not([data-theme="dark"]) .mg-v170-ui .mg-sort-options,
  html[data-theme="light"] .mg-v170-ui .mg-filter-options,
  html[data-theme="light"] .mg-v170-ui .mg-sort-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 380px) {
  html:not([data-theme="dark"]) .mg-v170-category #storeGrid,
  html[data-theme="light"] .mg-v170-category #storeGrid { gap: 10px !important; }
  html:not([data-theme="dark"]) .mg-v170-ui .mg-clean-separated-pill-cluster,
  html[data-theme="light"] .mg-v170-ui .mg-clean-separated-pill-cluster { gap: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- css/ui-consistency-v171.css ---- */
/* V1.171 FINAL PAGE-BY-PAGE CONSISTENCY
   Loaded after v170. This owns the remaining light-mode rhythm, typography,
   catalogue tools, mobile scroll rails, and floating help placement. */
:root,
html:not([data-theme="dark"]),
html[data-theme="light"] {
  --mg171-orange: #fc6501;
  --mg171-orange-2: #ff8a3d;
  --mg171-ink: #110933;
  --mg171-text: #252033;
  --mg171-muted: #625b70;
  --mg171-soft: #fbfafc;
  --mg171-surface: #ffffff;
  --mg171-line: rgba(17, 9, 51, .12);
  --mg171-line-strong: rgba(17, 9, 51, .18);
  --mg171-shadow: 0 14px 38px rgba(17, 9, 51, .09);
  --mg171-shadow-hover: 0 18px 46px rgba(17, 9, 51, .13);
}

html:not([data-theme="dark"]) body.mg-v170-ui,
html[data-theme="light"] body.mg-v170-ui {
  background: var(--mg171-soft) !important;
  color: var(--mg171-text) !important;
  overflow-x: clip !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(h1,h2,h3,h4,h5,h6,p,li,a,button,span,strong,small,label,input,select,textarea,.eyebrow,.tag,.badge,.pill,.mg-control-pill,.price-cta),
html[data-theme="light"] .mg-v170-ui :where(h1,h2,h3,h4,h5,h6,p,li,a,button,span,strong,small,label,input,select,textarea,.eyebrow,.tag,.badge,.pill,.mg-control-pill,.price-cta) {
  letter-spacing: 0 !important;
}

html:not([data-theme="dark"]) .mg-v170-ui main,
html[data-theme="light"] .mg-v170-ui main {
  padding-bottom: clamp(72px, 7vw, 112px);
}

html:not([data-theme="dark"]) .mg-v170-ui .section,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-section,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
html:not([data-theme="dark"]) .mg-v170-ui .promo,
html:not([data-theme="dark"]) .mg-v170-ui .page-title,
html:not([data-theme="dark"]) .mg-v170-ui .form-page,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
html:not([data-theme="dark"]) .mg-v170-ui .product-detail-section,
html[data-theme="light"] .mg-v170-ui .section,
html[data-theme="light"] .mg-v170-ui .catalog-header,
html[data-theme="light"] .mg-v170-ui .apple-store-section,
html[data-theme="light"] .mg-v170-ui .apple-store-hero,
html[data-theme="light"] .mg-v170-ui .hero-ad,
html[data-theme="light"] .mg-v170-ui .promo,
html[data-theme="light"] .mg-v170-ui .page-title,
html[data-theme="light"] .mg-v170-ui .form-page,
html[data-theme="light"] .mg-v170-ui .trade-hero,
html[data-theme="light"] .mg-v170-ui .sell-device-hero,
html[data-theme="light"] .mg-v170-ui .repair-hero,
html[data-theme="light"] .mg-v170-ui .support-hero,
html[data-theme="light"] .mg-v170-ui .contact-hero,
html[data-theme="light"] .mg-v170-ui .product-detail-section {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  max-width: var(--mg-page-max) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
html:not([data-theme="dark"]) .mg-v170-ui .page-title,
html[data-theme="light"] .mg-v170-ui .hero-ad,
html[data-theme="light"] .mg-v170-ui .apple-store-hero,
html[data-theme="light"] .mg-v170-ui .catalog-header,
html[data-theme="light"] .mg-v170-ui .trade-hero,
html[data-theme="light"] .mg-v170-ui .sell-device-hero,
html[data-theme="light"] .mg-v170-ui .repair-hero,
html[data-theme="light"] .mg-v170-ui .support-hero,
html[data-theme="light"] .mg-v170-ui .contact-hero,
html[data-theme="light"] .mg-v170-ui .page-title {
  min-height: 0 !important;
  margin-top: clamp(16px, 2.5vw, 28px) !important;
  margin-bottom: clamp(16px, 2vw, 28px) !important;
  padding: clamp(24px, 3.6vw, 46px) !important;
  border-radius: var(--mg-radius-card) !important;
  background: linear-gradient(135deg, #fffdfb, #f9f7ff) !important;
  border: 1px solid var(--mg171-line) !important;
  box-shadow: var(--mg171-shadow) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .hero-ad h1,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header h1,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero h1,
html:not([data-theme="dark"]) .mg-v170-ui .page-title h1,
html[data-theme="light"] .mg-v170-ui .hero-ad h1,
html[data-theme="light"] .mg-v170-ui .apple-store-hero h1,
html[data-theme="light"] .mg-v170-ui .catalog-header h1,
html[data-theme="light"] .mg-v170-ui .trade-hero h1,
html[data-theme="light"] .mg-v170-ui .sell-device-hero h1,
html[data-theme="light"] .mg-v170-ui .repair-hero h1,
html[data-theme="light"] .mg-v170-ui .support-hero h1,
html[data-theme="light"] .mg-v170-ui .contact-hero h1,
html[data-theme="light"] .mg-v170-ui .page-title h1 {
  max-width: 900px !important;
  font-size: clamp(2.35rem, 5.4vw, 5.15rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  color: var(--mg171-ink) !important;
  -webkit-text-fill-color: var(--mg171-ink) !important;
  text-wrap: balance;
}

html:not([data-theme="dark"]) .mg-v170-product h1,
html[data-theme="light"] .mg-v170-product h1 {
  font-size: clamp(2.15rem, 4.4vw, 4.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .hero-ad p,
html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .catalog-header p,
html:not([data-theme="dark"]) .mg-v170-ui .page-title p,
html:not([data-theme="dark"]) .mg-v170-ui .trade-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .repair-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .support-hero p,
html:not([data-theme="dark"]) .mg-v170-ui .contact-hero p,
html[data-theme="light"] .mg-v170-ui .hero-ad p,
html[data-theme="light"] .mg-v170-ui .apple-store-hero p,
html[data-theme="light"] .mg-v170-ui .catalog-header p,
html[data-theme="light"] .mg-v170-ui .page-title p,
html[data-theme="light"] .mg-v170-ui .trade-hero p,
html[data-theme="light"] .mg-v170-ui .sell-device-hero p,
html[data-theme="light"] .mg-v170-ui .repair-hero p,
html[data-theme="light"] .mg-v170-ui .support-hero p,
html[data-theme="light"] .mg-v170-ui .contact-hero p {
  max-width: 760px !important;
  color: var(--mg171-muted) !important;
  -webkit-text-fill-color: var(--mg171-muted) !important;
  font-size: clamp(.96rem, 1.1vw, 1.05rem) !important;
  line-height: 1.6 !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .eyebrow,
html[data-theme="light"] .mg-v170-ui .eyebrow {
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card,.service-card,.support-card,.repair-card,.contact-card,.trade-info-card,.trade-form-card,.sell-device-card,.form-card,.product-media-card,.product-config-card,.purchase-summary-card,.summary-box,.estimate-box,.mg-page-bottom-cta,.accordion-item),
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card,.service-card,.support-card,.repair-card,.contact-card,.trade-info-card,.trade-form-card,.sell-device-card,.form-card,.product-media-card,.product-config-card,.purchase-summary-card,.summary-box,.estimate-box,.mg-page-bottom-cta,.accordion-item) {
  border-radius: var(--mg-radius-card) !important;
  border-color: var(--mg171-line) !important;
  box-shadow: 0 10px 30px rgba(17, 9, 51, .075) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--mg171-shadow-hover) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-image-link,.store-feature-image,.product-main-image,.product-media-card img),
html[data-theme="light"] .mg-v170-ui :where(.product-image-link,.store-feature-image,.product-main-image,.product-media-card img) {
  border-radius: 12px !important;
}

html:not([data-theme="dark"]) .mg-v170-category #storeGrid,
html[data-theme="light"] .mg-v170-category #storeGrid {
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
  gap: var(--mg-grid-gap) !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools {
  position: relative !important;
  width: min(100% - (var(--mg-page-pad) * 2), var(--mg-page-max)) !important;
  margin: clamp(6px, .8vw, 10px) auto clamp(16px, 1.7vw, 24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy {
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: min(50%, 460px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  white-space: normal !important;
  display: grid !important;
  gap: 2px !important;
  pointer-events: none !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy strong,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy strong {
  color: var(--mg171-ink) !important;
  -webkit-text-fill-color: var(--mg171-ink) !important;
  font-size: .9rem !important;
  line-height: 1.15 !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy span,
html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy span {
  color: var(--mg171-muted) !important;
  -webkit-text-fill-color: var(--mg171-muted) !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open,
html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open {
  min-width: max-content !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mg171-line-strong) !important;
  background: #fff !important;
  color: var(--mg171-ink) !important;
  -webkit-text-fill-color: var(--mg171-ink) !important;
  font-size: .84rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 24px rgba(17, 9, 51, .085) !important;
}

html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-pill-icon,
html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-pill-icon {
  color: var(--mg171-orange) !important;
  -webkit-text-fill-color: var(--mg171-orange) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.primary-btn,.secondary-btn,.cta-button,.price-cta,button),
html[data-theme="light"] .mg-v170-ui :where(.primary-btn,.secondary-btn,.cta-button,.price-cta,button) {
  min-height: 42px !important;
  border-radius: 12px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(input,select,textarea),
html[data-theme="light"] .mg-v170-ui :where(input,select,textarea) {
  border-radius: 10px !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .apple-category-rail,
html[data-theme="light"] .mg-v170-ui .apple-category-rail {
  width: min(100%, calc(var(--mg-page-max) + (var(--mg-page-pad) * 2))) !important;
  padding: 10px var(--mg-page-pad) clamp(30px, 4vw, 54px) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  scroll-padding-inline: var(--mg-page-pad) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .store-icon-card,
html[data-theme="light"] .mg-v170-ui .store-icon-card {
  min-width: 92px !important;
  border-radius: var(--mg-radius-control) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .store-icon-image,
html[data-theme="light"] .mg-v170-ui .store-icon-image {
  height: 74px !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .mg-scroll-arrow,
html[data-theme="light"] .mg-v170-ui .mg-scroll-arrow {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(17, 9, 51, .10) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-section-name,
html[data-theme="light"] .mg-v170-ui .mg-floating-section-name {
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-section-name span,
html[data-theme="light"] .mg-v170-ui .mg-floating-section-name span {
  max-width: calc(100vw - 24px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-help,
html[data-theme="light"] .mg-v170-ui .mg-floating-help {
  width: 48px !important;
  height: 48px !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  border-radius: 999px !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-help-tooltip,
html[data-theme="light"] .mg-v170-ui .mg-floating-help-tooltip {
  font-size: .82rem !important;
  line-height: 1 !important;
}

html:not([data-theme="dark"]) .page-home.mg-v170-ui .hero-image,
html[data-theme="light"] .page-home.mg-v170-ui .hero-image {
  width: min(620px, 72vw) !important;
  margin-top: clamp(14px, 2vw, 22px) !important;
}

html:not([data-theme="dark"]) .page-home.mg-v170-ui .hero-image img,
html[data-theme="light"] .page-home.mg-v170-ui .hero-image img {
  width: 100% !important;
  max-height: 330px !important;
  object-fit: contain !important;
}

@media (min-width: 1180px) {
  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero h1,
  html[data-theme="light"] .mg-v170-ui .apple-store-hero h1 {
    max-width: 780px !important;
  }
}

@media (max-width: 900px) {
  html:not([data-theme="dark"]) .mg-v170-product .product-detail-grid,
  html:not([data-theme="dark"]) .mg-v170-product .product-detail-grid-v39,
  html[data-theme="light"] .mg-v170-product .product-detail-grid,
  html[data-theme="light"] .mg-v170-product .product-detail-grid-v39 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  :root,
  html:not([data-theme="dark"]),
  html[data-theme="light"] {
  }

  html:not([data-theme="dark"]) .mg-v170-ui main,
  html[data-theme="light"] .mg-v170-ui main {
    padding-bottom: 96px;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .hero-ad,
  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .catalog-header,
  html:not([data-theme="dark"]) .mg-v170-ui .trade-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .repair-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .support-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .contact-hero,
  html:not([data-theme="dark"]) .mg-v170-ui .page-title,
  html[data-theme="light"] .mg-v170-ui .hero-ad,
  html[data-theme="light"] .mg-v170-ui .apple-store-hero,
  html[data-theme="light"] .mg-v170-ui .catalog-header,
  html[data-theme="light"] .mg-v170-ui .trade-hero,
  html[data-theme="light"] .mg-v170-ui .sell-device-hero,
  html[data-theme="light"] .mg-v170-ui .repair-hero,
  html[data-theme="light"] .mg-v170-ui .support-hero,
  html[data-theme="light"] .mg-v170-ui .contact-hero,
  html[data-theme="light"] .mg-v170-ui .page-title {
    width: calc(100% - 24px) !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .hero-ad h1,
  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .catalog-header h1,
  html:not([data-theme="dark"]) .mg-v170-ui .trade-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .sell-device-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .repair-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .support-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .contact-hero h1,
  html:not([data-theme="dark"]) .mg-v170-ui .page-title h1,
  html[data-theme="light"] .mg-v170-ui .hero-ad h1,
  html[data-theme="light"] .mg-v170-ui .apple-store-hero h1,
  html[data-theme="light"] .mg-v170-ui .catalog-header h1,
  html[data-theme="light"] .mg-v170-ui .trade-hero h1,
  html[data-theme="light"] .mg-v170-ui .sell-device-hero h1,
  html[data-theme="light"] .mg-v170-ui .repair-hero h1,
  html[data-theme="light"] .mg-v170-ui .support-hero h1,
  html[data-theme="light"] .mg-v170-ui .contact-hero h1,
  html[data-theme="light"] .mg-v170-ui .page-title h1 {
    font-size: clamp(2rem, 10vw, 3.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  html:not([data-theme="dark"]) .mg-v170-product h1,
  html[data-theme="light"] .mg-v170-product h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools,
  html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools {
    width: calc(100% - 48px) !important;
    margin: 10px auto 14px !important;
    justify-content: flex-end !important;
  }

  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy,
  html[data-theme="light"] body.mg-final-filter-ready .mg-final-filter-tools .mg-product-tools-copy {
    display: none !important;
  }

  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 10px !important;
    font-size: .8rem !important;
  }

  html:not([data-theme="dark"]) .mg-v170-category #storeGrid,
  html[data-theme="light"] .mg-v170-category #storeGrid {
    width: calc(100% - 24px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .product-card h3,
  html[data-theme="light"] .mg-v170-ui .product-card h3 {
    font-size: .86rem !important;
    line-height: 1.2 !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .product-card p,
  html[data-theme="light"] .mg-v170-ui .product-card p {
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .apple-category-rail,
  html[data-theme="light"] .mg-v170-ui .apple-category-rail {
    padding: 8px 28px 28px !important;
    gap: 18px !important;
    grid-auto-columns: 86px !important;
    scroll-padding-inline: 28px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .store-icon-image,
  html[data-theme="light"] .mg-v170-ui .store-icon-image {
    width: 82px !important;
    height: 58px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .store-icon-image img,
  html[data-theme="light"] .mg-v170-ui .store-icon-image img {
    max-width: 82px !important;
    max-height: 56px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .store-icon-card strong,
  html[data-theme="light"] .mg-v170-ui .store-icon-card strong {
    font-size: .82rem !important;
    line-height: 1.12 !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .store-icon-card span,
  html[data-theme="light"] .mg-v170-ui .store-icon-card span {
    font-size: .72rem !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .mg-floating-help,
  html[data-theme="light"] .mg-v170-ui .mg-floating-help {
    width: 44px !important;
    height: 44px !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .mg-filter-sort-panel,
  html[data-theme="light"] .mg-v170-ui .mg-filter-sort-panel {
    border-radius: 18px 18px 0 0 !important;
  }

  html:not([data-theme="dark"]) .page-home.mg-v170-ui .hero-image,
  html[data-theme="light"] .page-home.mg-v170-ui .hero-image {
    width: min(100%, 310px) !important;
  }

  html:not([data-theme="dark"]) .page-home.mg-v170-ui .hero-image img,
  html[data-theme="light"] .page-home.mg-v170-ui .hero-image img {
    max-height: 220px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .trade-hero-copy,
  html[data-theme="light"] .mg-v170-ui .trade-hero-copy {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
    overflow: hidden !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui :where(.support-hero-card,.repair-hero-card),
  html[data-theme="light"] .mg-v170-ui :where(.support-hero-card,.repair-hero-card) {
    padding: 14px !important;
    gap: 10px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui :where(.support-hero-card,.repair-hero-card) p,
  html[data-theme="light"] .mg-v170-ui :where(.support-hero-card,.repair-hero-card) p {
    display: none !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui :where(.support-hero-card,.repair-hero-card) strong,
  html[data-theme="light"] .mg-v170-ui :where(.support-hero-card,.repair-hero-card) strong {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
    gap: 8px !important;
  }

  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  html:not([data-theme="dark"]) body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
  html[data-theme="light"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open {
    font-size: .76rem !important;
    padding-inline: 8px !important;
  }
}

/* ---- css/ui-consistency-v172.css ---- */
/* Final product row padding and stable card interaction polish. */

:root {
  --mg172-row-pad: clamp(18px, 3vw, 40px);
  --mg172-row-gap: clamp(14px, 1.8vw, 24px);
  --mg172-card-hover-shadow: 0 18px 48px rgba(17, 9, 51, .12);
}

html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row,
html[data-theme="light"] .mg-v170-ui .apple-store-row {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(285px, 380px) !important;
  grid-template-columns: none !important;
  gap: var(--mg172-row-gap) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: inline proximity !important;
  scroll-padding-inline: var(--mg172-row-pad) !important;
  padding: 6px var(--mg172-row-pad) 24px !important;
  box-sizing: border-box !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row-featured,
html[data-theme="light"] .mg-v170-ui .apple-store-row-featured {
  grid-auto-columns: minmax(310px, 430px) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row::after,
html[data-theme="light"] .mg-v170-ui .apple-store-row::after {
  content: "";
  inline-size: max(1px, calc(var(--mg172-row-pad) - var(--mg172-row-gap)));
  block-size: 1px;
  scroll-snap-align: end;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card),
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card) {
  position: relative !important;
  transform: none !important;
  will-change: auto !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover,
html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):focus-visible,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):focus-visible {
  transform: none !important;
  border-color: rgba(252, 101, 1, .30) !important;
  box-shadow: var(--mg172-card-hover-shadow) !important;
}

html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card) img,
html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover img,
html:not([data-theme="dark"]) .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):focus-visible img,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card) img,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):hover img,
html[data-theme="light"] .mg-v170-ui :where(.product-card,.product-card-v39,.store-feature-card):focus-visible img {
  transform: none !important;
  animation: none !important;
}

html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card,
html[data-theme="light"] .mg-v170-ui #storeGrid .product-card {
  isolation: isolate !important;
  overflow: hidden !important;
}

html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card .price-cta,
html[data-theme="light"] .mg-v170-ui #storeGrid .product-card .price-cta {
  width: min(calc(100% - 28px), 230px) !important;
  min-height: 42px !important;
  margin: 0 auto 14px !important;
  align-self: center !important;
  border-radius: 999px !important;
  z-index: 2 !important;
  transition:
    transform .22s cubic-bezier(.2, .8, .2, 1),
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease !important;
}

@media (hover: none) {
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card .price-cta,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card .price-cta {
    transform: none !important;
    box-shadow: 0 12px 28px rgba(252, 101, 1, .20) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mg172-row-pad: 16px;
    --mg172-row-gap: 14px;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row,
  html[data-theme="light"] .mg-v170-ui .apple-store-row {
    grid-auto-columns: minmax(248px, 78vw) !important;
    padding-block: 4px 22px !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui .apple-store-row-featured,
  html[data-theme="light"] .mg-v170-ui .apple-store-row-featured {
    grid-auto-columns: minmax(260px, 82vw) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Desktop product cards stay structurally identical on hover. */
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card,
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card:hover,
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card:focus-visible,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card:hover,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card:focus-visible {
    min-block-size: 100% !important;
    padding-bottom: 0 !important;
  }

  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card .price-cta,
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card:hover .price-cta,
  html:not([data-theme="dark"]) .mg-v170-ui #storeGrid .product-card:focus-visible .price-cta,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card .price-cta,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card:hover .price-cta,
  html[data-theme="light"] .mg-v170-ui #storeGrid .product-card:focus-visible .price-cta {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: auto 14px 14px !important;
    padding: 8px 12px !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: 0 12px 28px rgba(252, 101, 1, .20) !important;
    filter: none !important;
  }
}


html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card:hover,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card:focus-visible,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card:hover,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card:focus-visible {
  transform: none !important;
  animation: none !important;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card img,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover img,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible img,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card img,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card:hover img,
html:not([data-theme="dark"]) body.mg-v170-ui .apple-store-row .store-feature-card:focus-visible img,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card img,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover img,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible img,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card img,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card:hover img,
html[data-theme="light"] body.mg-v170-ui .apple-store-row .store-feature-card:focus-visible img {
  transform: none !important;
  animation: none !important;
}

@media (max-width: 760px) {
  html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card,
  html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card {
    min-block-size: 0 !important;
    padding-bottom: 12px !important;
  }

  html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card .price-cta,
  html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover .price-cta,
  html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible .price-cta,
  html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card .price-cta,
  html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover .price-cta,
  html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible .price-cta {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 48px !important;
    margin: 0 auto 12px !important;
    padding: 8px 9px !important;
    pointer-events: auto !important;
    transform: none !important;
    font-size: clamp(.66rem, 2.6vw, .76rem) !important;
    line-height: 1.08 !important;
  }

}


/* Stable product-card hover fix */
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card::after,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover::after,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible::after,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card::after,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover::after,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible::after {
  content: none !important;
  opacity: 0 !important;
  display: none !important;
}

html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card .product-image-link,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card .product-card-body,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card .tag,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card .family-option-count,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover .product-image-link,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover .product-card-body,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover .tag,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover .family-option-count,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible .product-image-link,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible .product-card-body,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible .tag,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible .family-option-count,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card .product-image-link,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card .product-card-body,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card .tag,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card .family-option-count,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover .product-image-link,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover .product-card-body,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover .tag,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover .family-option-count,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible .product-image-link,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible .product-card-body,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible .tag,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible .family-option-count {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:hover,
html:not([data-theme="dark"]) body.mg-v170-ui #storeGrid .product-card:focus-visible,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:hover,
html[data-theme="light"] body.mg-v170-ui #storeGrid .product-card:focus-visible {
  transform: none !important;
  border-color: rgba(252, 101, 1, .30) !important;
  box-shadow: var(--mg172-card-hover-shadow) !important;
}

/* ---- css/ribbon-ui-v182.css ---- */
/* V1.182 ribbon UI + logo polish
   Final ribbon source of truth: no resting rings; ring only on hover/focus or active state. */
:root {
  --mg-ribbon-ring: rgba(252, 101, 1, .48);
  --mg-ribbon-ring-hover: rgba(252, 101, 1, .30);
  --mg-ribbon-active-bg: rgba(252, 101, 1, .095);
  --mg-ribbon-hover-bg: rgba(252, 101, 1, .055);
}

/* Stable ribbon dimensions with a visibly larger logo. */
.top-nav,
body .top-nav {
  min-height: 64px !important;
  height: auto !important;
  overflow: visible !important;
}

.top-nav .nav-inner,
body .top-nav .nav-inner {
  min-height: 64px !important;
  height: 64px !important;
  overflow: visible !important;
}

.top-nav .logo-mark,
.top-nav .brand-logo,
.top-nav .logo-only-link,
.top-nav .restored-header-logo {
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.top-nav .logo-mark img,
.top-nav .brand-logo img,
.top-nav .logo-only-link img,
.top-nav .restored-header-logo img,
header .logo-mark img,
header .brand-logo img,
header .logo-only-link img,
header .restored-header-logo img {
  width: auto !important;
  height: 54px !important;
  max-width: 178px !important;
  object-fit: contain !important;
  transform: scale(1.08) !important;
  transform-origin: center !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Top-level ribbon text buttons: completely clean at rest. */
.top-nav .nav-links > a,
.top-nav .nav-links > .nav-item > a {
  position: relative !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.top-nav .nav-links > a::before,
.top-nav .nav-links > .nav-item > a::before {
  opacity: 0 !important;
  display: none !important;
}

/* The ring appears only during hover/focus. */
.top-nav .nav-links > a:hover,
.top-nav .nav-links > a:focus-visible,
.top-nav .nav-links > .nav-item > a:hover,
.top-nav .nav-links > .nav-item > a:focus-visible {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-hover-bg) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--mg-ribbon-ring-hover) !important;
  transform: translateY(-1px) !important;
}

/* The current page keeps the ring until another page becomes active. */
.top-nav .nav-links > a:is(.active, .is-active, [aria-current="page"]),
.top-nav .nav-links > .nav-item > a:is(.active, .is-active, [aria-current="page"]),
.top-nav .nav-links > .nav-item:is(.active, .is-active) > a {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-active-bg) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--mg-ribbon-ring), 0 7px 18px rgba(252, 101, 1, .10) !important;
  transform: none !important;
}

/* Header icon buttons follow the same UI language: no ring at rest. */
.top-nav .nav-icons .header-icon-button,
.top-nav .nav-icons .nav-icon,
.top-nav .header-icon-button,
.top-nav .mobile-menu {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

.top-nav .nav-icons .header-icon-button::before,
.top-nav .nav-icons .nav-icon::before,
.top-nav .header-icon-button::before,
.top-nav .mobile-menu::before {
  display: none !important;
  opacity: 0 !important;
}

.top-nav .nav-icons .header-icon-button:hover,
.top-nav .nav-icons .header-icon-button:focus-visible,
.top-nav .nav-icons .nav-icon:hover,
.top-nav .nav-icons .nav-icon:focus-visible,
.top-nav .header-icon-button:hover,
.top-nav .header-icon-button:focus-visible,
.top-nav .mobile-menu:hover,
.top-nav .mobile-menu:focus-visible {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-hover-bg) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--mg-ribbon-ring-hover) !important;
  transform: translateY(-1px) !important;
}

.top-nav :is(.header-icon-button, .nav-icon, .mobile-menu):is(.active, .is-active, [aria-pressed="true"], [aria-expanded="true"]),
.top-nav .nav-icons :is(.header-icon-button, .nav-icon):is(.active, .is-active, [aria-pressed="true"], [aria-expanded="true"]) {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-active-bg) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--mg-ribbon-ring) !important;
  transform: none !important;
}

/* Dropdown items are not top-ribbon pills. Keep them calm and rectangular. */
.top-nav .mega-menu a,
.top-nav .mega-panel a,
.top-nav .mega-dropdown a,
.top-nav .nav-dropdown a,
.top-nav .dropdown-panel a,
.top-nav .dropdown-menu a {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

.top-nav .mega-menu a:hover,
.top-nav .mega-menu a:focus-visible,
.top-nav .mega-panel a:hover,
.top-nav .mega-panel a:focus-visible,
.top-nav .mega-dropdown a:hover,
.top-nav .mega-dropdown a:focus-visible,
.top-nav .nav-dropdown a:hover,
.top-nav .nav-dropdown a:focus-visible,
.top-nav .dropdown-panel a:hover,
.top-nav .dropdown-panel a:focus-visible,
.top-nav .dropdown-menu a:hover,
.top-nav .dropdown-menu a:focus-visible {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: rgba(252, 101, 1, .06) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Mobile drawer follows the same active/hover rule. */
.mobile-drawer a {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}
.mobile-drawer a:hover,
.mobile-drawer a:focus-visible {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-hover-bg) !important;
  box-shadow: inset 0 0 0 1px var(--mg-ribbon-ring-hover) !important;
}
.mobile-drawer a:is(.active, .is-active, [aria-current="page"]) {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: var(--mg-ribbon-active-bg) !important;
  box-shadow: inset 0 0 0 1.5px var(--mg-ribbon-ring) !important;
}

/* Dark mode keeps the same interaction rules, only with a suitable surface. */
html[data-theme="dark"] {
  --mg-ribbon-hover-bg: rgba(252, 101, 1, .10);
  --mg-ribbon-active-bg: rgba(252, 101, 1, .16);
  --mg-ribbon-ring-hover: rgba(255, 165, 105, .34);
  --mg-ribbon-ring: rgba(255, 165, 105, .62);
}

html[data-theme="dark"] .top-nav .nav-links > a,
html[data-theme="dark"] .top-nav .nav-links > .nav-item > a,
html[data-theme="dark"] .top-nav .nav-icons .header-icon-button,
html[data-theme="dark"] .top-nav .nav-icons .nav-icon,
html[data-theme="dark"] .top-nav .mobile-menu {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .top-nav,
  body .top-nav {
    min-height: 64px !important;
  }
  .top-nav .nav-inner,
  body .top-nav .nav-inner {
    min-height: 64px !important;
    height: 64px !important;
  }
  .top-nav .logo-mark,
  .top-nav .brand-logo,
  .top-nav .logo-only-link,
  .top-nav .restored-header-logo {
    min-height: 56px !important;
  }
  .top-nav .logo-mark img,
  .top-nav .brand-logo img,
  .top-nav .logo-only-link img,
  .top-nav .restored-header-logo img,
  header .logo-mark img,
  header .brand-logo img,
  header .logo-only-link img,
  header .restored-header-logo img {
    height: 48px !important;
    max-width: 156px !important;
    transform: scale(1.08) !important;
  }
}

@media (max-width: 420px) {
  .top-nav .logo-mark img,
  .top-nav .brand-logo img,
  .top-nav .logo-only-link img,
  .top-nav .restored-header-logo img,
  header .logo-mark img,
  header .brand-logo img,
  header .logo-only-link img,
  header .restored-header-logo img {
    height: 46px !important;
    max-width: 142px !important;
  }
}

/* ---- css/ribbon-hardfix-v183.css ---- */
/* V1.183 HARD RIBBON RING + MODE FIX
   This file is the final ribbon source of truth and must load last. */

:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --mg183-ribbon-text: #2c2640;
  --mg183-ribbon-muted: #5b536d;
  --mg183-ribbon-accent: #fc6501;
  --mg183-ribbon-hover-bg: rgba(252, 101, 1, .075);
  --mg183-ribbon-active-bg: rgba(252, 101, 1, .115);
  --mg183-ribbon-hover-ring: rgba(252, 101, 1, .36);
  --mg183-ribbon-active-ring: rgba(252, 101, 1, .62);
  --mg183-ribbon-focus-ring: rgba(252, 101, 1, .48);
  --mg183-ribbon-surface: rgba(255,255,255,.91);
  --mg183-ribbon-line: rgba(17,9,51,.09);
}

html[data-theme="dark"] {
  --mg183-ribbon-text: #f7f4ff;
  --mg183-ribbon-muted: rgba(247,244,255,.76);
  --mg183-ribbon-accent: #d8d0ff;
  --mg183-ribbon-hover-bg: rgba(59, 52, 87, .46);
  --mg183-ribbon-active-bg: rgba(77, 69, 111, .64);
  --mg183-ribbon-hover-ring: rgba(150, 137, 205, .52);
  --mg183-ribbon-active-ring: rgba(216, 208, 255, .78);
  --mg183-ribbon-focus-ring: rgba(216, 208, 255, .66);
  --mg183-ribbon-surface: rgba(48,48,48,.94);
  --mg183-ribbon-line: rgba(255,255,255,.12);
}

/* Header shell: stable dimensions and mode-correct surface. */
body .top-nav {
  min-height: 68px !important;
  height: 68px !important;
  background: var(--mg183-ribbon-surface) !important;
  background-image: none !important;
  color: var(--mg183-ribbon-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mg183-ribbon-line) !important;
  box-shadow: 0 10px 30px rgba(17,9,51,.07) !important;
  overflow: visible !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
html[data-theme="dark"] body .top-nav {
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
}
body .top-nav .nav-inner {
  min-height: 68px !important;
  height: 68px !important;
  overflow: visible !important;
}

/* LOGO: larger, always clean, never ringed in any state. */
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo),
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):link,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):visited,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):hover,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus-visible,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):active,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo).active,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo).is-active,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo).mg-glass-press,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)[aria-current],
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)[aria-pressed="true"] {
  width: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)::before,
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo) img {
  display: block !important;
  width: auto !important;
  height: 60px !important;
  max-width: 196px !important;
  max-height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

/* Top-level ribbon buttons: absolutely no resting ring. */
body .top-nav .nav-links > a:not(.logo-mark),
body .top-nav .nav-links > .nav-item > a:not(.logo-mark),
body .top-nav .nav-icons > :is(a,button),
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button) {
  position: relative !important;
  min-height: 38px !important;
  border: 1px solid transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  color: var(--mg183-ribbon-text) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-text) !important;
  opacity: 1 !important;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
body .top-nav .nav-links > a:not(.logo-mark)::before,
body .top-nav .nav-links > a:not(.logo-mark)::after,
body .top-nav .nav-links > .nav-item > a:not(.logo-mark)::before,
body .top-nav .nav-links > .nav-item > a:not(.logo-mark)::after,
body .top-nav .nav-icons > :is(a,button)::before,
body .top-nav .nav-icons > :is(a,button)::after,
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button)::before,
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover/focus ring only. */
body .top-nav .nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
body .top-nav .nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible,
body .top-nav .nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
body .top-nav .nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible,
body .top-nav .nav-icons > :is(a,button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):hover,
body .top-nav .nav-icons > :is(a,button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):focus-visible,
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):hover,
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):focus-visible {
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  background: var(--mg183-ribbon-hover-bg) !important;
  background-image: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--mg183-ribbon-hover-ring) !important;
  transform: translateY(-1px) !important;
}

/* Active/current/open ring only. */
body .top-nav .nav-links > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
body .top-nav .nav-links > .nav-item > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
body .top-nav .nav-links > .nav-item:is(.active,.is-active) > a:not(.logo-mark),
body .top-nav .nav-icons > :is(a,button):is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]),
body .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  background: var(--mg183-ribbon-active-bg) !important;
  background-image: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--mg183-ribbon-active-ring) !important;
  transform: none !important;
}

/* Press state cannot invent an extra ring or glass overlay. */
body .top-nav :is(a,button):not(.logo-mark):active,
body .top-nav :is(a,button):not(.logo-mark).mg-glass-press {
  background-image: none !important;
  text-shadow: none !important;
}

/* Icon/SVG colors follow the mode. */
body .top-nav :is(.header-control-svg,.whatsapp-svg),
body .top-nav :is(.header-icon-button,.nav-icon,.mobile-menu) svg {
  color: inherit !important;
  stroke: currentColor !important;
}
body .top-nav :is(.header-icon-button,.nav-icon,.mobile-menu):hover svg,
body .top-nav :is(.header-icon-button,.nav-icon,.mobile-menu):focus-visible svg,
body .top-nav :is(.header-icon-button,.nav-icon,.mobile-menu):is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]) svg {
  color: var(--mg183-ribbon-accent) !important;
}

/* Mega menu links are flat rows, not ribbon rings. */
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a,
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a:hover,
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a:focus-visible,
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a {
  color: var(--mg183-ribbon-text) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-text) !important;
  background: transparent !important;
}
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a:hover,
body .top-nav :is(.mega-menu,.mega-panel,.mega-dropdown,.nav-dropdown,.dropdown-panel,.dropdown-menu) a:focus-visible {
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  background: var(--mg183-ribbon-hover-bg) !important;
}

/* Mobile drawer uses the same mode language and only rings active/hover links. */
body .mobile-drawer a {
  border: 1px solid transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mg183-ribbon-text) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-text) !important;
}
body .mobile-drawer a:hover,
body .mobile-drawer a:focus-visible {
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  background: var(--mg183-ribbon-hover-bg) !important;
  box-shadow: inset 0 0 0 1px var(--mg183-ribbon-hover-ring) !important;
}
body .mobile-drawer a:is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]) {
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  background: var(--mg183-ribbon-active-bg) !important;
  box-shadow: inset 0 0 0 1.5px var(--mg183-ribbon-active-ring) !important;
}

@media (max-width: 900px) {
  body .top-nav,
  body .top-nav .nav-inner {
    min-height: 64px !important;
    height: 64px !important;
  }
  body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo) {
    min-height: 60px !important;
    height: 60px !important;
  }
  body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo) img {
    height: 54px !important;
    max-height: 54px !important;
    max-width: 176px !important;
  }
}

@media (max-width: 420px) {
  body .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo) img {
    height: 52px !important;
    max-height: 52px !important;
    max-width: 164px !important;
  }
}

/* V1.183B specificity lock — defeats historic dark/light ribbon rules. */
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo),
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):hover,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus-visible,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):active,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)[aria-current],
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo),
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):hover,
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus,
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):focus-visible,
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo):active,
html[data-theme="light"] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)[aria-current] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)::before,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav :is(.logo-mark,.brand-logo,.logo-only-link,.restored-header-logo)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Clean resting state in both modes with higher specificity. */
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > :is(a,button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--mg183-ribbon-text) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-text) !important;
}

/* Higher-specificity hover/focus ring. */
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]):focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):not([data-ribbon-current="true"]):focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > :is(a,button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > :is(a,button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):not(.active):not(.is-active):not([aria-pressed="true"]):not([aria-expanded="true"]):focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  background: var(--mg183-ribbon-hover-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--mg183-ribbon-hover-ring) !important;
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  transform: translateY(-1px) !important;
}

/* Higher-specificity active/current/open ring. */
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > .nav-item > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-links > .nav-item:is(.active,.is-active) > a:not(.logo-mark),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > :is(a,button):is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]),
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav > .nav-inner > :is(.mobile-menu,.header-icon-button):is(.active,.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
  border-color: transparent !important;
  outline: 0 !important;
  background: var(--mg183-ribbon-active-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1.5px var(--mg183-ribbon-active-ring) !important;
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  transform: none !important;
}

/* V1.183C hard lock for header icon controls, including mobile hamburger IDs. */
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > .whatsapp-icon-button.header-icon-button {
  border: 1px solid transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mg183-ribbon-text) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-text) !important;
  transform: none !important;
}
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button::before,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button::after,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button::before,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button::after,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button::before,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button::after,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > .whatsapp-icon-button.header-icon-button::before,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > .whatsapp-icon-button.header-icon-button::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button:not([aria-expanded="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button:not([aria-expanded="true"]):focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button:hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button:focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button:not([aria-expanded="true"]):hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button:not([aria-expanded="true"]):focus-visible,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > .whatsapp-icon-button.header-icon-button:hover,
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > .whatsapp-icon-button.header-icon-button:focus-visible {
  border-color: transparent !important;
  background: var(--mg183-ribbon-hover-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--mg183-ribbon-hover-ring) !important;
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  transform: translateY(-1px) !important;
}
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-inner > #mobileMenu.mobile-menu.header-icon-button[aria-expanded="true"],
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #searchToggle.search-toggle.header-icon-button[aria-expanded="true"],
html[data-theme] body.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed="true"] {
  border-color: transparent !important;
  background: var(--mg183-ribbon-active-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1.5px var(--mg183-ribbon-active-ring) !important;
  color: var(--mg183-ribbon-accent) !important;
  -webkit-text-fill-color: var(--mg183-ribbon-accent) !important;
  transform: none !important;
}

/* V1.183D final color lock for top-level ribbon labels. */
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark),
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark) {
  color: #2c2640 !important;
  -webkit-text-fill-color: #2c2640 !important;
}
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible,
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: rgba(252,101,1,.075) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(252,101,1,.36) !important;
}
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
html[data-theme="light"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]) {
  color: #fc6501 !important;
  -webkit-text-fill-color: #fc6501 !important;
  background: rgba(252,101,1,.115) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgba(252,101,1,.62) !important;
}

html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark),
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark) {
  color: #f7f4ff !important;
  -webkit-text-fill-color: #f7f4ff !important;
}
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):hover,
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):not(.active):not(.is-active):not([aria-current="page"]):focus-visible {
  color: #d8d0ff !important;
  -webkit-text-fill-color: #d8d0ff !important;
  background: rgba(59,52,87,.46) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(150,137,205,.52) !important;
}
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]),
html[data-theme="dark"] body.mg-v183-ribbon-hardfix.mg-v183-ribbon-hardfix #navLinks.nav-links > .nav-item > a:not(.logo-mark):is(.active,.is-active,[aria-current="page"],[data-ribbon-current="true"]) {
  color: #d8d0ff !important;
  -webkit-text-fill-color: #d8d0ff !important;
  background: rgba(77,69,111,.64) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgba(216,208,255,.78) !important;
}

/* ---- css/product-grade-v184.css ---- */

/* Miller Gadgets v1.184 — Device grade picker */
#deviceGradeStep[hidden],
#summaryDeviceGradeRow[hidden] {
  display: none !important;
}

.device-grade-options {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.device-grade-option {
  min-width: 0;
  white-space: normal;
}

.device-grade-option > span {
  display: inline-block;
  margin-top: .25rem;
  font-size: .78rem;
  line-height: 1.25;
  opacity: .72;
}

.device-grade-option.active > span {
  opacity: .9;
}

@media (max-width: 560px) {
  .device-grade-options {
    grid-template-columns: 1fr !important;
  }

  .device-grade-option {
    text-align: left;
  }
}

/* ---- css/interaction-system-v185.css ---- */

/* Miller Gadgets v1.185 — Unified Interaction System
   Adapted from the approved five-pattern interaction reference.
   This final layer intentionally overrides conflicting legacy hover rules.
*/

:root {
  --mg-is-accent: #fc6501;
  --mg-is-accent-hover: #d9530a;
  --mg-is-ink: #110933;
  --mg-is-ink-soft: #675f73;
  --mg-is-surface: #ffffff;
  --mg-is-line: rgba(17, 9, 51, .13);
  --mg-is-line-strong: rgba(17, 9, 51, .21);
  --mg-is-selected: #110933;
  --mg-is-selected-text: #ffffff;
  --mg-is-card-shadow: 0 18px 34px -14px rgba(17, 9, 51, .28);
  --mg-is-card-shadow-dark: 0 22px 44px -16px rgba(0, 0, 0, .52);
  --mg-is-ease: cubic-bezier(.2, .7, .2, 1);
  --mg-is-fast: 150ms;
  --mg-is-base: 220ms;
  --mg-is-slow: 350ms;
}

html[data-theme="dark"] {
  --mg-is-accent: #ffa569;
  --mg-is-accent-hover: #ffc29a;
  --mg-is-ink: #f7f3ff;
  --mg-is-ink-soft: #c9c1d8;
  --mg-is-surface: #160d36;
  --mg-is-line: rgba(255, 255, 255, .15);
  --mg-is-line-strong: rgba(255, 255, 255, .24);
  --mg-is-selected: #f7f3ff;
  --mg-is-selected-text: #110933;
}

/* ------------------------------------------------------------------
   01 — LIFT & FOCUS
   Clickable cards only. No detached price, no covering overlay,
   no content fading, and no layout movement inside the card.
------------------------------------------------------------------- */
html body.mg-v185-interactions .mg-is-card {
  position: relative !important;
  transform: translate3d(0, 0, 0) !important;
  transform-origin: center bottom !important;
  isolation: isolate;
  cursor: pointer !important;
  outline: none;
  will-change: transform;
  transition:
    transform var(--mg-is-base) var(--mg-is-ease),
    box-shadow var(--mg-is-base) ease,
    border-color var(--mg-is-base) ease,
    background-color var(--mg-is-base) ease !important;
}

html body.mg-v185-interactions .mg-is-card::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

html body.mg-v185-interactions .mg-is-card > *,
html body.mg-v185-interactions .mg-is-card:hover > *,
html body.mg-v185-interactions .mg-is-card:focus-visible > * {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

html body.mg-v185-interactions .mg-is-card :is(
  .product-image-link,
  .store-feature-image,
  .store-icon-image,
  .card-image,
  .thumb
) {
  overflow: hidden !important;
}

html body.mg-v185-interactions .mg-is-card img {
  transform: scale(1) !important;
  transform-origin: center !important;
  transition: transform 500ms var(--mg-is-ease) !important;
  will-change: transform;
}

html body.mg-v185-interactions .mg-is-card :is(
  .price,
  .price-cta,
  .store-feature-card > strong,
  [data-card-price]
) {
  transform: none !important;
  position: relative !important;
  transition:
    color var(--mg-is-base) ease,
    font-weight var(--mg-is-base) ease,
    background-color var(--mg-is-base) ease,
    box-shadow var(--mg-is-base) ease !important;
}

/* Hard override for the catalogue card rules that previously locked transform. */
@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions.mg-v170-ui #storeGrid .mg-is-card:hover,
  html body.mg-v185-interactions.mg-v170-ui .apple-store-row .mg-is-card:hover,
  html body.mg-v185-interactions .mg-is-card:hover {
    transform: translate3d(0, -6px, 0) !important;
    border-color: transparent !important;
    box-shadow: var(--mg-is-card-shadow) !important;
  }

  html[data-theme="dark"] body.mg-v185-interactions.mg-v170-ui #storeGrid .mg-is-card:hover,
  html[data-theme="dark"] body.mg-v185-interactions.mg-v170-ui .apple-store-row .mg-is-card:hover,
  html[data-theme="dark"] body.mg-v185-interactions .mg-is-card:hover {
    box-shadow: var(--mg-is-card-shadow-dark) !important;
  }

  html body.mg-v185-interactions.mg-v170-ui #storeGrid .mg-is-card:hover img,
  html body.mg-v185-interactions.mg-v170-ui .apple-store-row .mg-is-card:hover img,
  html body.mg-v185-interactions .mg-is-card:hover img {
    transform: scale(1.055) !important;
  }

  html body.mg-v185-interactions .mg-is-card:hover :is(
    .price,
    .price-cta,
    .store-feature-card > strong,
    [data-card-price]
  ) {
    color: var(--mg-is-accent-hover) !important;
    -webkit-text-fill-color: var(--mg-is-accent-hover) !important;
    font-weight: 800 !important;
  }
}

html body.mg-v185-interactions.mg-v170-ui #storeGrid .mg-is-card:focus-visible,
html body.mg-v185-interactions .mg-is-card:focus-visible {
  transform: translate3d(0, -4px, 0) !important;
  border-color: var(--mg-is-accent) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--mg-is-accent) 22%, transparent),
    var(--mg-is-card-shadow) !important;
}

html body.mg-v185-interactions .mg-is-card:is(:active, .is-pressing) {
  transform: translate3d(0, -1px, 0) scale(.992) !important;
  transition-duration: 90ms !important;
}

/* Keep every product-card component in its normal flow on interaction. */
html body.mg-v185-interactions #storeGrid .mg-is-card :is(
  .product-image-link,
  .product-card-body,
  .tag,
  .family-option-count,
  .price-cta,
  .cta-button
),
html body.mg-v185-interactions #storeGrid .mg-is-card:hover :is(
  .product-image-link,
  .product-card-body,
  .tag,
  .family-option-count,
  .price-cta,
  .cta-button
) {
  inset: auto !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ------------------------------------------------------------------
   02 — PRESS
   Primary actions invite on hover and visibly register on press.
------------------------------------------------------------------- */
html body.mg-v185-interactions .mg-is-primary-action {
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: center !important;
  transition:
    transform var(--mg-is-fast) ease,
    filter var(--mg-is-fast) ease,
    background-color var(--mg-is-fast) ease,
    box-shadow var(--mg-is-fast) ease !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions .mg-is-primary-action:hover {
    transform: translate3d(0, -2px, 0) scale(1) !important;
    filter: saturate(1.08) brightness(.97) !important;
    box-shadow: 0 12px 24px -8px rgba(217, 83, 10, .52) !important;
  }
}

html body.mg-v185-interactions .mg-is-primary-action:is(:active, .is-pressing) {
  transform: translate3d(0, 0, 0) scale(.97) !important;
  filter: saturate(1.02) brightness(.94) !important;
  box-shadow: 0 3px 8px -3px rgba(217, 83, 10, .42) !important;
  transition-duration: 90ms !important;
}

html body.mg-v185-interactions .mg-is-secondary-action {
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    transform var(--mg-is-fast) ease,
    border-color var(--mg-is-fast) ease,
    color var(--mg-is-fast) ease,
    background-color var(--mg-is-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions .mg-is-secondary-action:hover {
    transform: translate3d(0, -1px, 0) !important;
    border-color: var(--mg-is-accent) !important;
    color: var(--mg-is-accent-hover) !important;
    -webkit-text-fill-color: var(--mg-is-accent-hover) !important;
  }
}

html body.mg-v185-interactions .mg-is-secondary-action:is(:active, .is-pressing) {
  transform: scale(.98) !important;
  transition-duration: 90ms !important;
}

/* ------------------------------------------------------------------
   03 — SELECT
   Outline at rest, accent hint on hover, solid fill when selected.
------------------------------------------------------------------- */
html body.mg-v185-interactions .mg-is-select-control {
  position: relative !important;
  min-height: 42px;
  padding-right: 38px !important;
  border: 1.5px solid var(--mg-is-line) !important;
  background: transparent !important;
  color: var(--mg-is-ink-soft) !important;
  -webkit-text-fill-color: var(--mg-is-ink-soft) !important;
  box-shadow: none !important;
  transform: scale(1) !important;
  transition:
    transform var(--mg-is-fast) ease,
    border-color var(--mg-is-fast) ease,
    color var(--mg-is-fast) ease,
    background-color var(--mg-is-fast) ease,
    box-shadow var(--mg-is-fast) ease !important;
}

html body.mg-v185-interactions .mg-is-select-control::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  transform: scale(.5);
  font-size: .82em;
  font-weight: 900;
  line-height: 1;
  color: currentColor;
  transition:
    opacity var(--mg-is-fast) ease,
    transform var(--mg-is-fast) ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions .mg-is-select-control:hover {
    border-color: var(--mg-is-accent) !important;
    background: color-mix(in srgb, var(--mg-is-accent) 8%, transparent) !important;
    color: var(--mg-is-accent-hover) !important;
    -webkit-text-fill-color: var(--mg-is-accent-hover) !important;
  }
}

html body.mg-v185-interactions .mg-is-select-control:is(
  .active,
  .is-active,
  .selected,
  [aria-selected="true"],
  [aria-pressed="true"],
  [data-selected="true"]
) {
  border-color: var(--mg-is-selected) !important;
  background: var(--mg-is-selected) !important;
  color: var(--mg-is-selected-text) !important;
  -webkit-text-fill-color: var(--mg-is-selected-text) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html body.mg-v185-interactions .mg-is-select-control:is(
  .active,
  .is-active,
  .selected,
  [aria-selected="true"],
  [aria-pressed="true"],
  [data-selected="true"]
)::after {
  opacity: 1;
  transform: scale(1);
}

html body.mg-v185-interactions .mg-is-select-control:is(:active, .is-pressing) {
  transform: scale(.975) !important;
  transition-duration: 90ms !important;
}

/* Do not turn the approved Help/Filter ribbon controls into selection pills. */
html body.mg-v185-interactions :is(
  .mg-filter-sort-open,
  .mg-help-choose-pill,
  .mg-control-pill
):not(.mg-is-select-control) {
  padding-right: revert-layer;
}

/* ------------------------------------------------------------------
   04 — UNDERLINE REVEAL
   Used for breadcrumbs, in-page tabs and quiet text navigation.
   The approved v1.183 top ribbon remains ring-based.
------------------------------------------------------------------- */
html body.mg-v185-interactions .mg-is-underline-link {
  position: relative;
  display: inline-flex;
  text-decoration: none !important;
  padding-bottom: 4px;
  color: inherit;
}

html body.mg-v185-interactions .mg-is-underline-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--mg-is-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--mg-is-base) var(--mg-is-ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions .mg-is-underline-link:hover::after {
    transform: scaleX(1);
  }
}

html body.mg-v185-interactions .mg-is-underline-link:is(
  .active,
  .is-active,
  [aria-current="page"],
  [aria-selected="true"]
)::after {
  transform: scaleX(1);
  background: currentColor;
}

/* ------------------------------------------------------------------
   05 — MORPH & FADE
   Menu, theme toggle and back-to-top.
------------------------------------------------------------------- */
html body.mg-v185-interactions #mobileMenu {
  overflow: visible !important;
}

html body.mg-v185-interactions #mobileMenu .mg-burger {
  position: relative;
  display: block;
  width: 21px;
  height: 15px;
}

html body.mg-v185-interactions #mobileMenu .mg-burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 280ms cubic-bezier(.4, 0, .2, 1),
    transform 280ms cubic-bezier(.4, 0, .2, 1),
    opacity 180ms ease;
}

html body.mg-v185-interactions #mobileMenu .mg-burger-line:nth-child(1) { top: 0; }
html body.mg-v185-interactions #mobileMenu .mg-burger-line:nth-child(2) { top: 6.5px; }
html body.mg-v185-interactions #mobileMenu .mg-burger-line:nth-child(3) { top: 13px; }

html body.mg-v185-interactions #mobileMenu[aria-expanded="true"] .mg-burger-line:nth-child(1) {
  top: 6.5px;
  transform: rotate(45deg);
}

html body.mg-v185-interactions #mobileMenu[aria-expanded="true"] .mg-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(.45);
}

html body.mg-v185-interactions #mobileMenu[aria-expanded="true"] .mg-burger-line:nth-child(3) {
  top: 6.5px;
  transform: rotate(-45deg);
}

/* Theme icon cross-fade and rotation. */
html body.mg-v185-interactions #themeToggle {
  position: relative !important;
}

html body.mg-v185-interactions #themeToggle .theme-icon {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  translate: -50% -50%;
  transition:
    opacity 250ms ease,
    transform 350ms cubic-bezier(.4, 0, .2, 1) !important;
  pointer-events: none;
}

html:not([data-theme="dark"]) body.mg-v185-interactions #themeToggle .theme-icon-moon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

html:not([data-theme="dark"]) body.mg-v185-interactions #themeToggle .theme-icon-sun {
  opacity: 0 !important;
  transform: rotate(60deg) scale(.6) !important;
}

html[data-theme="dark"] body.mg-v185-interactions #themeToggle .theme-icon-moon {
  opacity: 0 !important;
  transform: rotate(-60deg) scale(.6) !important;
}

html[data-theme="dark"] body.mg-v185-interactions #themeToggle .theme-icon-sun {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

/* Back-to-top fades instead of appearing abruptly. */
html body.mg-v185-interactions .mg-back-to-top,
html body.mg-v185-interactions .mg-back-to-top[hidden] {
  display: grid !important;
  place-items: center;
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity 220ms ease,
    transform 280ms var(--mg-is-ease),
    border-color 150ms ease,
    background-color 150ms ease !important;
}

html body.mg-v185-interactions .mg-back-to-top[hidden] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
  transform: translate3d(0, 12px, 0) scale(.82) !important;
}

html body.mg-v185-interactions .mg-back-to-top .mg-back-to-top-arrow {
  display: block;
  line-height: 1;
  transition: transform var(--mg-is-base) var(--mg-is-ease);
}

@media (hover: hover) and (pointer: fine) {
  html body.mg-v185-interactions .mg-back-to-top:hover {
    border-color: var(--mg-is-accent) !important;
  }

  html body.mg-v185-interactions .mg-back-to-top:hover .mg-back-to-top-arrow {
    transform: translateY(-3px);
  }
}

html body.mg-v185-interactions .mg-back-to-top:is(:active, .is-pressing) {
  transform: scale(.94) !important;
  transition-duration: 90ms !important;
}

/* Accessible focus, consistent across all five roles. */
html body.mg-v185-interactions :is(
  .mg-is-primary-action,
  .mg-is-secondary-action,
  .mg-is-select-control,
  .mg-is-underline-link,
  .mg-is-card
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mg-is-accent) 34%, transparent) !important;
  outline-offset: 4px !important;
}

/* Touch devices get press/select feedback without sticky hover. */
@media (hover: none), (pointer: coarse) {
  html body.mg-v185-interactions .mg-is-card:hover {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: inherit !important;
  }

  html body.mg-v185-interactions .mg-is-card:hover img {
    transform: scale(1) !important;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html body.mg-v185-interactions *,
  html body.mg-v185-interactions *::before,
  html body.mg-v185-interactions *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  html body.mg-v185-interactions .mg-is-card:hover,
  html body.mg-v185-interactions .mg-is-card:focus-visible,
  html body.mg-v185-interactions .mg-is-primary-action:hover {
    transform: none !important;
  }
}

/* ---- css/mega-menu-filter-state-v186.css ---- */

/* Miller Gadgets v1.186 — Mega-menu active-filter hardfix
   Inactive links stay flat at rest and on hover.
   Ring/fill appears only for the actual selected filter or while clicking. */

:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  --mg186-mega-text: #2c2640;
  --mg186-mega-accent: #fc6501;
  --mg186-mega-selected-bg: rgba(252, 101, 1, .12);
  --mg186-mega-selected-ring: rgba(252, 101, 1, .64);
}

html[data-theme="dark"] {
  --mg186-mega-text: #f7f4ff;
  --mg186-mega-accent: #d8d0ff;
  --mg186-mega-selected-bg: rgba(77, 69, 111, .68);
  --mg186-mega-selected-ring: rgba(216, 208, 255, .78);
}

/* Inactive/default state: no ring, no filled pill. */
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link:not([data-mega-selected="true"]):not([data-mega-clicked="true"]) {
  color: var(--mg186-mega-text) !important;
  -webkit-text-fill-color: var(--mg186-mega-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

/* Hover/focus: text response only—still no ring or filled pill. */
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link:not([data-mega-selected="true"]):not([data-mega-clicked="true"]):hover,
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link:not([data-mega-selected="true"]):not([data-mega-clicked="true"]):focus-visible {
  color: var(--mg186-mega-accent) !important;
  -webkit-text-fill-color: var(--mg186-mega-accent) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: translateX(2px) !important;
  text-decoration: none !important;
}

/* True selected filter/current choice: ring and filled state. */
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link:is(
  [data-mega-selected="true"],
  [data-mega-clicked="true"]
) {
  color: var(--mg186-mega-accent) !important;
  -webkit-text-fill-color: var(--mg186-mega-accent) !important;
  background: var(--mg186-mega-selected-bg) !important;
  background-color: var(--mg186-mega-selected-bg) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--mg186-mega-selected-ring) !important;
  transform: none !important;
  font-weight: 800 !important;
}

/* Pointer press shows the selected treatment immediately. */
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link:active {
  color: var(--mg186-mega-accent) !important;
  -webkit-text-fill-color: var(--mg186-mega-accent) !important;
  background: var(--mg186-mega-selected-bg) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--mg186-mega-selected-ring) !important;
  transform: scale(.985) !important;
}

/* Keep pseudo-elements from old nav systems from drawing extra rings. */
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link::before,
html[data-theme] body.mg-v186-mega-filter-hardfix .top-nav :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu
) a.mg-mega-filter-link::after {
  box-shadow: none !important;
}

/* This fix does not change the approved v1.183 top-level ribbon states. */

/* ---- css/campaign-banners-v187.css ---- */

/* Miller Gadgets v1.187 — Campaign banners and homepage carousel */

.mg-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mg-campaign-carousel,
.mg-page-campaign {
  width: min(100% - 32px, 1480px);
  margin: clamp(18px, 3vw, 38px) auto;
}

.mg-campaign-viewport,
.mg-page-campaign-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: clamp(18px, 2.2vw, 30px);
  border: 1px solid rgba(17, 9, 51, .12);
  background: #f7f5f2;
  box-shadow: 0 24px 64px -34px rgba(17, 9, 51, .42);
}

html[data-theme="dark"] .mg-campaign-viewport,
html[data-theme="dark"] .mg-page-campaign-link {
  border-color: rgba(255, 255, 255, .16);
  background: #151024;
  box-shadow: 0 26px 72px -30px rgba(0, 0, 0, .72);
}

.mg-campaign-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.mg-campaign-track::-webkit-scrollbar {
  display: none;
}

.mg-campaign-carousel.is-enhanced .mg-campaign-viewport {
  overflow: hidden;
}

.mg-campaign-carousel.is-enhanced .mg-campaign-track {
  overflow: visible;
  scroll-snap-type: none;
  transition: transform 520ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.mg-campaign-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: block;
  scroll-snap-align: start;
  background: #f6f4f1;
  text-decoration: none;
  outline: none;
}

.mg-campaign-slide picture,
.mg-campaign-slide img,
.mg-page-campaign-link picture,
.mg-page-campaign-link img {
  display: block;
  width: 100%;
}

.mg-campaign-slide img,
.mg-page-campaign-link img {
  height: auto;
  aspect-ratio: 2048 / 910;
  object-fit: contain;
  background: #f7f5f2;
}

html[data-theme="dark"] .mg-campaign-slide,
html[data-theme="dark"] .mg-campaign-slide img,
html[data-theme="dark"] .mg-page-campaign-link img {
  background: #151024;
}

.mg-campaign-slide:focus-visible,
.mg-page-campaign-link:focus-visible {
  outline: 4px solid rgba(252, 101, 1, .42);
  outline-offset: -6px;
}

.mg-campaign-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 50%;
  background: rgba(17, 9, 51, .72);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  transform: translateY(-50%);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition:
    transform 160ms ease,
    background 160ms ease,
    opacity 160ms ease;
}

.mg-campaign-arrow span {
  display: block;
  font-size: 2rem;
  line-height: .8;
  transform: translateY(-1px);
}

.mg-campaign-prev {
  left: clamp(10px, 2vw, 24px);
}

.mg-campaign-next {
  right: clamp(10px, 2vw, 24px);
}

.mg-campaign-arrow:hover {
  background: #fc6501;
  transform: translateY(-50%) scale(1.06);
}

.mg-campaign-arrow:active {
  transform: translateY(-50%) scale(.94);
}

.mg-campaign-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.mg-campaign-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mg-campaign-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(17, 9, 51, .26);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    width 200ms cubic-bezier(.2, .7, .2, 1),
    background 160ms ease,
    border-color 160ms ease;
}

.mg-campaign-dot.is-active {
  width: 30px;
  border-color: #fc6501;
  background: #fc6501;
}

html[data-theme="dark"] .mg-campaign-dot {
  border-color: rgba(255, 255, 255, .34);
}

html[data-theme="dark"] .mg-campaign-dot.is-active {
  border-color: #ffa569;
  background: #ffa569;
}

.mg-campaign-pause {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(17, 9, 51, .14);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

html[data-theme="dark"] .mg-campaign-pause {
  border-color: rgba(255, 255, 255, .18);
}

.mg-page-campaign-link {
  transition:
    transform 220ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .mg-page-campaign-link:hover {
    transform: translateY(-5px);
    border-color: rgba(252, 101, 1, .34);
    box-shadow: 0 30px 72px -32px rgba(17, 9, 51, .50);
  }
}

.main-home > .mg-campaign-carousel:first-child {
  margin-top: clamp(14px, 2vw, 24px);
  margin-bottom: clamp(18px, 3vw, 38px);
}

@media (max-width: 760px) {
  .mg-campaign-carousel,
  .mg-page-campaign {
    width: calc(100% - 20px);
    margin-block: 16px 24px;
  }

  .mg-campaign-viewport,
  .mg-page-campaign-link {
    border-radius: 16px;
  }

  .mg-campaign-arrow {
    width: 38px;
    height: 38px;
  }

  .mg-campaign-arrow span {
    font-size: 1.55rem;
  }

  .mg-campaign-controls {
    margin-top: 10px;
  }

  .mg-campaign-slide img,
  .mg-page-campaign-link img {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .mg-campaign-arrow {
    opacity: .86;
  }

  .mg-campaign-prev {
    left: 6px;
  }

  .mg-campaign-next {
    right: 6px;
  }

  .mg-campaign-pause {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-campaign-carousel.is-enhanced .mg-campaign-track,
  .mg-campaign-arrow,
  .mg-campaign-dot,
  .mg-page-campaign-link {
    transition-duration: .001ms !important;
  }
}

/* ---- css/site-standard-v188.css ---- */
/* Miller Gadgets v1.188 — site-wide refinement layer.
   This file standardises the existing interface without adding new features. */

:root {
  --mg188-header-height: 68px;
  --mg188-content-max: 1280px;
  --mg188-page-pad: clamp(14px, 3vw, 40px);
  --mg188-radius-xl: 24px;
  --mg188-radius-lg: 18px;
  --mg188-radius-md: 14px;
  --mg188-radius-control: 12px;
  --mg188-control-height: 48px;
  --mg188-accent: #fc6501;
  --mg188-accent-text: #ad3b00;
  --mg188-focus: rgba(252, 101, 1, .38);
  --mg188-ease: cubic-bezier(.2, .75, .25, 1);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mg188-header-height) + 18px);
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --mg188-accent-text: #ffd1b3;
  --mg188-focus: rgba(216, 208, 255, .48);
}

body.mg-v188-standard {
  min-width: 0;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.mg-v188-standard :where(h1, h2, h3, h4, .display-title, .hero-title) {
  font-family: "Sora", "Manrope", system-ui, sans-serif;
  text-wrap: balance;
}

.mg-v188-standard :where(p, li, dd, .muted, .subtitle) {
  text-wrap: pretty;
}

.mg-v188-standard :where(img, svg, video) {
  max-width: 100%;
}

.mg-v188-standard :where(button, input, select, textarea) {
  font: inherit;
}

.mg-v188-standard :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mg188-focus) !important;
  outline-offset: 3px !important;
  box-shadow: none;
}

body.mg-v188-standard .top-nav a.logo-mark:focus-visible,
body.mg-v188-standard .top-nav .mega-menu a:focus-visible,
body.mg-v188-standard .mobile-drawer a:focus-visible {
  outline: 3px solid var(--mg188-focus) !important;
  outline-color: var(--mg188-focus) !important;
  outline-offset: 2px !important;
  border-radius: 10px !important;
}

.mg-v188-standard :where(button, [role="button"], input, select, textarea):disabled,
.mg-v188-standard :where(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .55 !important;
  filter: saturate(.55);
  transform: none !important;
}

/* One sizing language across light and dark modes. */
.mg-v188-standard :where(
  .section,
  .catalog-header,
  .apple-store-section,
  .apple-store-hero,
  .hero-ad,
  .promo,
  .page-title,
  .form-page,
  .trade-hero,
  .sell-device-hero,
  .repair-hero,
  .support-hero,
  .contact-hero,
  .product-detail-section,
  .warehouse-product-shell
) {
  width: min(calc(100% - var(--mg188-page-pad) - var(--mg188-page-pad)), var(--mg188-content-max));
  margin-inline: auto;
}

.mg-v188-standard :where(
  .hero-ad,
  .promo,
  .apple-store-hero,
  .trade-hero,
  .sell-device-hero,
  .repair-hero,
  .support-hero,
  .contact-hero,
  .warehouse-product-intro,
  .recommendation-hero
) {
  border-radius: var(--mg188-radius-xl) !important;
}

.mg-v188-standard :where(
  .product-card,
  .category-card,
  .support-card,
  .service-card,
  .info-card,
  .contact-card,
  .form-card,
  .warehouse-product-card,
  .warehouse-media-card,
  .warehouse-product-config,
  .warehouse-purchase-summary,
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  details
) {
  border-radius: var(--mg188-radius-lg) !important;
}

.mg-v188-standard :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--mg188-control-height);
  border-radius: var(--mg188-radius-control) !important;
}

.mg-v188-standard textarea {
  min-height: 112px;
  resize: vertical;
}

.mg-v188-standard :where(.btn, .button, .primary-button, .secondary-button, .card-button, .catalog-action, .form-submit) {
  min-height: 44px;
  border-radius: var(--mg188-radius-control) !important;
  transition: transform .18s var(--mg188-ease), box-shadow .18s var(--mg188-ease), background-color .18s ease, border-color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mg-v188-standard :where(.btn, .button, .primary-button, .secondary-button, .card-button, .catalog-action, .form-submit):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

/* Header, overlays and safe areas share the same reference height. */
.mg-v188-standard .top-nav {
  min-height: calc(var(--mg188-header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

.mg-v188-standard .nav-inner {
  min-height: var(--mg188-header-height);
}

.mg-v188-standard .logo-mark {
  min-width: 44px !important;
  min-height: 44px !important;
  outline-offset: 2px;
}

.mg-v188-standard :where(.header-icon-button, .mobile-menu, .theme-toggle, .search-toggle, .cart-toggle) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

.mg-v188-standard .mega-menu {
  top: var(--mg188-header-height);
}

.mg-v188-standard :where(.mg-search-overlay, .search-overlay) {
  padding-top: calc(var(--mg188-header-height) + env(safe-area-inset-top));
}

.mg-v188-standard :where(.mobile-drawer, .filter-layer, .mg-search-overlay) {
  overscroll-behavior: contain;
}

body.mg-modal-open,
body.mg-search-open,
body.mg-mobile-menu-open,
body.mg-filter-panel-open,
body.mg-filter-sort-open-body {
  overflow: hidden !important;
  touch-action: none;
}

/* Comfortable, consistent target sizes for navigation and catalog controls. */
.mg-v188-standard :where(
  .footer-social-icons a,
  .support-social-links a,
  .apple-store-section-head > a,
  .filter-pill,
  .mg-filter-trigger,
  .mg-filter-close,
  .page-btn,
  .pagination button,
  .mg-floating-help,
  .warehouse-option-button,
  .warehouse-gallery-tile
) {
  min-width: 44px;
  min-height: 44px;
}

.mg-v188-standard .apple-store-section-head > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
}

.mg-v188-standard :where(.product-card-meta, .product-card-kicker, .condition, .availability, .stock-status) {
  font-size: max(.75rem, 12px) !important;
  line-height: 1.4;
}

.mg-v188-standard :where(.product-card .btn, .product-card .card-button, .product-card [class*="action"]) {
  font-size: max(.78rem, 12.5px);
}

/* Campaign controls retain their appearance while meeting touch guidelines. */
.mg-v188-standard .mg-campaign-arrow,
.mg-v188-standard .mg-campaign-pause {
  min-width: 44px !important;
  min-height: 44px !important;
}

.mg-v188-standard .mg-campaign-dot {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mg-v188-standard .mg-campaign-dot::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  opacity: .72;
  transform: translate(-50%, -50%);
  transition: width .2s var(--mg188-ease), opacity .2s ease, background-color .2s ease;
}

.mg-v188-standard .mg-campaign-dot.is-active::before,
.mg-v188-standard .mg-campaign-dot[aria-current="true"]::before {
  width: 28px;
  background: currentColor;
  opacity: 1;
}

/* The existing FAQ becomes easier to scan and operate. */
.mg-v188-standard .faq-list details,
.mg-v188-standard.page-faq details,
.mg-v188-standard details.faq-item {
  overflow: clip;
}

.mg-v188-standard .faq-list summary,
.mg-v188-standard.page-faq details summary,
.mg-v188-standard details.faq-item summary {
  min-height: 52px;
  padding: 15px 50px 15px 18px;
  cursor: pointer;
  list-style: none;
}

.mg-v188-standard .faq-list summary::-webkit-details-marker,
.mg-v188-standard.page-faq details summary::-webkit-details-marker,
.mg-v188-standard details.faq-item summary::-webkit-details-marker {
  display: none;
}

.mg-v188-standard .faq-list summary::after,
.mg-v188-standard.page-faq details summary::after,
.mg-v188-standard details.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  font-size: 1.35rem;
  line-height: 1;
}

.mg-v188-standard .faq-list details[open] summary::after,
.mg-v188-standard.page-faq details[open] summary::after,
.mg-v188-standard details.faq-item[open] summary::after {
  content: "−";
}

.mg-v188-standard.page-faq .form-card {
  display: grid;
  gap: 12px;
}

.mg-v188-standard.page-faq .form-card > br {
  display: none;
}

.mg-v188-standard.page-faq details > p {
  padding: 0 18px 18px;
}

.mg-v188-standard .support-policy-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

/* Gallery labels are informational; only real controls behave like buttons. */
.mg-v188-standard .warehouse-gallery-tile:not(button):not(a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
}

.mg-v188-standard .warehouse-product-heading {
  margin: 0;
  font-family: "Sora", "Manrope", system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Accent text needs more contrast than the orange used for filled buttons. */
html:not([data-theme="dark"]) .mg-v188-standard :where(
  .text-orange,
  .accent-text,
  .eyebrow,
  .section-kicker,
  .product-card-kicker,
  a:not(.btn):not(.button):not([class*="primary"]):not([class*="card-button"])
) {
  --orange: var(--mg188-accent-text);
}

/* Motion is restrained for users who request it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mg-v188-standard *,
  .mg-v188-standard *::before,
  .mg-v188-standard *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  :root { --mg188-header-height: 64px; }

  .mg-v188-standard :where(
    .hero-ad,
    .promo,
    .apple-store-hero,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .warehouse-product-intro,
    .recommendation-hero
  ) {
    border-radius: var(--mg188-radius-lg) !important;
  }

  .mg-v188-standard :where(.nav-inner, .section, .catalog-header, .apple-store-section) {
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }

  .mg-v188-standard :where(.product-card, .category-card, .support-card, .service-card, .info-card) {
    border-radius: var(--mg188-radius-md) !important;
  }

  .mg-v188-standard .mg-floating-help {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* Product choices surface before the large media block on small screens. */
  body.page-product .warehouse-product-config,
  body.page-product .product-config-card,
  body.page-product [data-product-config] {
    order: 1;
  }

  body.page-product .warehouse-media-card,
  body.page-product .product-media-card,
  body.page-product [data-product-media] {
    order: 2;
  }

  body.page-product .warehouse-purchase-summary,
  body.page-product .purchase-summary-card,
  body.page-product [data-purchase-summary] {
    order: 3;
  }

  body.page-product .warehouse-product-intro {
    margin-block: 14px 12px !important;
    padding-block: 20px !important;
  }

  .mg-v188-standard .mg-campaign-controls {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .mg-v188-standard :where(h1, .hero-title) {
    font-size: clamp(1.75rem, 8.5vw, 2.35rem);
  }

  .mg-v188-standard :where(.btn, .button, .primary-button, .secondary-button) {
    padding-inline: 15px;
  }
}

/* ---- css/ribbon-fix-v189.css ---- */
/* Miller Gadgets v1.189 — focused header ribbon refinement */

body .mg-floating-section-name {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms !important;
}

body .mg-floating-section-name.is-scroll-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  body .mg-floating-section-name {
    transition: none !important;
  }
}

/* ---- css/mobile-layout-v190.css ---- */
/* Miller Gadgets v1.190 — mobile auto-layout and spacing refinement.
   Geometry only: desktop styling and existing features remain unchanged. */

:root {
  --mg190-mobile-gutter: clamp(8px, 2.4vw, 14px);
  --mg190-mobile-card-inline: clamp(13px, 4vw, 18px);
  --mg190-mobile-header-content: 64px;
  --mg190-mobile-header-total: calc(
    var(--mg190-mobile-header-content) + env(safe-area-inset-top, 0px)
  );
  --mg190-sheet-bg: #ffffff;
}

html[data-theme="dark"] {
  --mg190-sheet-bg: #1a1a1a;
}

@media (max-width: 900px) {
  html,
  html body.mg-v190-mobile-polish {
    min-width: 0 !important;
  }

  html body.mg-v190-mobile-polish .top-nav {
    height: var(--mg190-mobile-header-total) !important;
    min-height: var(--mg190-mobile-header-total) !important;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    z-index: 3100 !important;
  }

  html body.mg-v190-mobile-polish .top-nav .nav-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--mg190-mobile-header-content) !important;
    min-height: var(--mg190-mobile-header-content) !important;
    padding-block: 0 !important;
    padding-inline:
      max(var(--mg190-mobile-gutter), env(safe-area-inset-left, 0px))
      max(var(--mg190-mobile-gutter), env(safe-area-inset-right, 0px)) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.mg-v190-mobile-polish .top-nav .mobile-menu {
    justify-self: start !important;
  }

  html body.mg-v190-mobile-polish .top-nav .logo-mark {
    justify-self: center !important;
  }

  html body.mg-v190-mobile-polish .top-nav .logo-mark img {
    max-height: 56px !important;
    object-fit: contain !important;
  }

  html body.mg-v190-mobile-polish .top-nav .nav-icons {
    justify-self: end !important;
  }

  html body.mg-v190-mobile-polish #mobileDrawer.mobile-drawer {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(
      100dvh - var(--mg190-mobile-header-total) - 16px -
      env(safe-area-inset-bottom, 0px)
    ) !important;
    z-index: 3200 !important;
  }

  body:is(
    .mobile-menu-open,
    .mg-mobile-menu-open,
    .mg-search-open,
    .mg-filter-panel-open,
    .mg-filter-sort-open-body
  ) :is(.mg-floating-help, .mg-back-to-top, .mg-floating-section-name),
  html.mg-filter-sort-is-open body
  :is(.mg-floating-help, .mg-back-to-top, .mg-floating-section-name) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 760px) {
  /* Use one outer gutter instead of repeatedly insetting nested sections. */
  html body.mg-v190-mobile-polish :is(
    .section,
    .catalog-header,
    .apple-store-section,
    .apple-store-hero,
    .hero-ad,
    .promo,
    .page-title,
    .form-page,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .product-detail-section,
    .mg-page-campaign,
    .mg-page-bottom-cta
  ) {
    box-sizing: border-box !important;
    width: calc(100% - (var(--mg190-mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body.mg-v190-mobile-polish :is(
    .section,
    .apple-store-section,
    .product-listing-section,
    .product-detail-section,
    .contact-layout
  ) {
    padding-inline: 0 !important;
  }

  html body.mg-v190-mobile-polish :is(
    .catalog-header,
    .apple-store-hero,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .page-title
  ) {
    padding: 18px var(--mg190-mobile-card-inline) !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
  }

  html body.mg-v190-mobile-polish :is(
    .catalog-header,
    .apple-store-hero,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .page-title
  ) h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  html body.mg-v190-mobile-polish :is(
    .section-heading h2,
    .apple-store-section-head h2,
    .mg-page-bottom-cta h2
  ) {
    font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important;
    line-height: 1.08 !important;
  }

  html body.mg-v190-mobile-polish :is(
    .form-page,
    .trade-page-grid,
    .sell-device-grid
  ) {
    padding: 16px 0 !important;
  }

  html body.mg-v190-mobile-polish .product-detail-section {
    padding-block: 18px !important;
  }

  html body.mg-v190-mobile-polish :is(
    #storeGrid,
    .mg-pagination,
    .mg-final-pagination,
    .warehouse-product-header,
    .product-detail-grid,
    .product-detail-grid-v39,
    .trade-form-card,
    .trade-info-card,
    .trade-upgrade-section,
    .sell-device-card,
    .form-page > .form-card
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  html body.mg-v190-mobile-polish :is(
    .warehouse-product-header,
    .trade-form-card,
    .trade-info-card,
    .sell-device-card,
    .form-card
  ) {
    padding: 14px !important;
  }

  html body.mg-v190-mobile-polish .trade-upgrade-section {
    padding: 12px !important;
  }

  html body.mg-v190-mobile-polish :is(
    .btn,
    .primary-btn,
    .secondary-btn,
    .cta-button
  ) {
    min-height: 44px !important;
  }

  /* Catalogue cards retain two useful columns without becoming too narrow. */
  html body.mg-v190-mobile-polish.mg-v170-category #storeGrid,
  html body.mg-v190-mobile-polish.mg-v167-category-page #storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.mg-v190-mobile-polish.mg-v167-category-page #storeGrid .product-card h3 {
    font-size: .85rem !important;
    line-height: 1.2 !important;
  }

  html body.mg-v190-mobile-polish.mg-v167-category-page #storeGrid :is(
    .product-card p,
    .product-card-meta,
    .product-card-body p,
    .family-option-count,
    .availability
  ) {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body.mg-v190-mobile-polish.mg-v167-category-page #storeGrid .tag {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  html body.mg-v190-mobile-polish.mg-v167-category-page #storeGrid :is(
    .price-cta,
    .cta-button
  ) {
    box-sizing: border-box !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.page-laptops.mg-v190-mobile-polish #storeGrid .product-card h3,
  body.page-accessories.mg-v190-mobile-polish #storeGrid .product-card h3 {
    display: -webkit-box !important;
    min-height: 3.6em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Filter tools align with the product grid and keep phone-sized targets. */
  html body.mg-v190-mobile-polish.mg-final-filter-ready :is(
    .mg-final-filter-tools,
    .mg-clean-separated-pill-tools
  ) {
    width: calc(100% - (var(--mg190-mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin: 8px auto 12px !important;
  }

  html body.mg-v190-mobile-polish.mg-final-filter-ready :is(
    .mg-clean-separated-pill-cluster,
    .mg-right-pill-cluster
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.mg-v190-mobile-polish.mg-final-filter-ready :is(
    .mg-control-pill,
    .mg-help-choose-pill,
    .mg-filter-help-open,
    .mg-filter-sort-open
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    padding: 9px 8px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html body.mg-v190-mobile-polish :is(
    .mg-final-pagination .mg-page-btn,
    .mg-pagination .mg-page-btn,
    .mg-page-btn,
    .mg-filter-sort-close,
    .mg-filter-close
  ) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Mobile panels use one predictable bottom-sheet geometry. */
  html body.mg-v190-mobile-polish .mg-filter-sort-panel {
    inset: auto 0 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: min(88dvh, 720px) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    background: var(--mg190-sheet-bg) !important;
  }

  html body.mg-v190-mobile-polish :is(
    .mg-filter-sort-head,
    .mg-filter-sort-actions
  ) {
    background: var(--mg190-sheet-bg) !important;
  }

  html body.mg-v190-mobile-polish .mg-search-overlay {
    box-sizing: border-box !important;
    padding:
      calc(var(--mg190-mobile-header-total) + 8px)
      max(var(--mg190-mobile-gutter), env(safe-area-inset-right, 0px))
      calc(var(--mg190-mobile-gutter) + env(safe-area-inset-bottom, 0px))
      max(var(--mg190-mobile-gutter), env(safe-area-inset-left, 0px)) !important;
  }

  html body.mg-v190-mobile-polish .mg-search-shell {
    width: 100% !important;
    max-width: 680px !important;
    max-height: calc(100dvh - var(--mg190-mobile-header-total) - 28px) !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
  }

  /* Store rails remain horizontally scrollable, but start closer to the edge. */
  html body.page-store.mg-v190-mobile-polish .apple-category-rail {
    padding: 8px var(--mg190-mobile-gutter) 18px !important;
    gap: 10px !important;
    grid-auto-columns: 104px !important;
    scroll-padding-inline: var(--mg190-mobile-gutter) !important;
  }

  html body.page-store.mg-v190-mobile-polish .apple-store-row {
    padding: 4px var(--mg190-mobile-gutter) 18px !important;
    gap: 10px !important;
  }

  html body.page-store.mg-v190-mobile-polish .apple-store-row > :is(
    .store-feature-card,
    .product-card,
    .product-card-v39,
    .accessory-card
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.page-store.mg-v190-mobile-polish .store-icon-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.page-store.mg-v190-mobile-polish .store-icon-card strong {
    display: -webkit-box !important;
    min-height: 2.3em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.page-store.mg-v190-mobile-polish :is(
    .apple-store-help > a,
    .apple-store-section-head > a
  ) {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Restore useful copy that light-mode mobile rules previously clipped. */
  html body.page-trade-in.mg-v190-mobile-polish .trade-hero-copy {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  html body.page-support.mg-v190-mobile-polish .support-hero-card p,
  html body.page-repair.mg-v190-mobile-polish .repair-hero-card p {
    display: block !important;
  }

  /* Contact links keep both their icon and their visible label. */
  html body.page-contact.mg-v190-mobile-polish .social-logo-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.page-contact.mg-v190-mobile-polish .social-logo-grid a {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-rows: 32px auto !important;
    place-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  html body.page-contact.mg-v190-mobile-polish .social-logo-grid a img {
    width: 30px !important;
    height: 30px !important;
  }

  html:not([data-theme="dark"])
  body.page-contact.mg-v190-mobile-polish
  .contact-link-list a[aria-label="WhatsApp"],
  html[data-theme="light"]
  body.page-contact.mg-v190-mobile-polish
  .contact-link-list a[aria-label="WhatsApp"] {
    background: linear-gradient(135deg, #fc6501, #ff8a3d) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html body.page-faq.mg-v190-mobile-polish details summary {
    position: relative !important;
    overflow-wrap: anywhere !important;
  }

  html body.mg-v190-mobile-polish footer .footer-social-icons a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Final-cascade alignment: outrank older light/dark layout wrappers. */
  html body.mg-v190-mobile-polish.mg-v170-ui :is(
    .section,
    .catalog-header,
    .apple-store-section,
    .apple-store-hero,
    .hero-ad,
    .promo,
    .page-title,
    .form-page,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .product-detail-section,
    .mg-page-campaign,
    .mg-page-bottom-cta
  ) {
    width: calc(100% - (var(--mg190-mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body.mg-v190-mobile-polish.mg-v170-ui :is(
    .warehouse-product-header,
    .product-detail-grid,
    .product-detail-grid-v39,
    .trade-form-card,
    .trade-info-card,
    .trade-upgrade-section,
    .sell-device-card,
    .form-page > .form-card,
    .mg-pagination,
    .mg-final-pagination
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  html body.mg-v190-mobile-polish.mg-v170-category #storeGrid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  html body.mg-v190-mobile-polish.mg-v170-category.mg-final-filter-ready
  :is(.mg-final-filter-tools, .mg-clean-separated-pill-tools) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 12px !important;
  }

  html body.mg-v190-mobile-polish.mg-v170-category.mg-final-filter-ready
  .mg-final-filter-tools .mg-right-pill-cluster.mg-clean-separated-pill-cluster {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.mg-v190-mobile-polish.mg-v170-category.mg-final-filter-ready
  .mg-final-filter-tools .mg-right-pill-cluster
  :is(
    .mg-help-choose-pill.mg-control-pill,
    .mg-filter-help-open.mg-control-pill,
    .mg-filter-sort-open.mg-control-pill
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 9px 8px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  html body.mg-v190-mobile-polish :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  html body.page-home.mg-v190-mobile-polish .promo .actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body.page-home.mg-v190-mobile-polish .promo .actions > .btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
  }
}

@media (max-width: 420px) {
  html body.page-home.mg-v190-mobile-polish .service-grid {
    grid-template-columns: 1fr !important;
  }

  html body.mg-v190-mobile-polish .page-title h1 {
    font-size: clamp(1.9rem, 9vw, 2.2rem) !important;
  }
}

/* ---- css/authoritative-pricelist-v191.css ---- */
/* v1.191 authoritative catalogue */
.product-card .family-option-count{display:block}.product-card[data-condition*="Pre-Owned"] .tag::after{content:" · Very Good default";font-weight:700}@media(max-width:520px){.product-card[data-condition*="Pre-Owned"] .tag::after{content:""}}

/* ---- css/preowned-grade-pricing-v192.css ---- */
/* Miller Gadgets v1.192 — Grade-specific Pre-Owned pricing */
.device-grade-option .device-grade-note,
.device-grade-option .device-grade-price {
  display: block;
}
.device-grade-option .device-grade-price {
  margin-top: .36rem;
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--accent, #fc6501);
  -webkit-text-fill-color: currentColor;
}
.device-grade-option.active .device-grade-price {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* ---- css/preowned-total-sync-v193.css ---- */
/* Miller Gadgets v1.193 — selected total feedback */
#summaryPrice[data-grade-price] {
  transition: color 160ms ease, transform 160ms ease;
}
#summaryGradeRow[data-v193-hidden="true"] {
  display: none !important;
}

/* ---- css/scroll-safety-v199.css ---- */
/* Miller Gadgets v1.199 — page and panel scroll-safety hardfix */

/* Normal documents must always retain vertical page scrolling when no UI layer is open. */
html {
  min-height: 100% !important;
  overflow-x: clip !important;
}

body:not(.search-open):not(.mg-search-open):not(.mobile-menu-open):not(.mg-mobile-menu-open):not(.mg-modal-open):not(.mg-filter-panel-open):not(.mg-filter-sort-open-body) {
  min-height: 100% !important;
  overflow-y: auto !important;
  touch-action: auto !important;
}

/* Tall sticky information cards must scroll internally instead of clipping their lower content. */
body.trade-page-body .trade-card.trade-info-card,
body.page-sell .sell-device-card.sell-device-guide-card,
body.page-sell .sell-device-card.sell-v198-guide,
body.page-repair .repair-guide-card,
.sticky-summary-panel,
.buy-panel,
.summary-panel,
.purchase-summary-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  touch-action: pan-y !important;
}

/* The main trade-in guide is the confirmed collision: later global card rules used overflow:hidden. */
@media (min-width: 1081px) {
  body.trade-page-body .trade-card.trade-info-card {
    position: sticky !important;
    top: 82px !important;
    max-height: calc(100dvh - 96px) !important;
  }
}

/* Keep equivalent service guides safe on shorter desktop screens. */
@media (min-width: 1101px) {
  body.page-repair .repair-guide-card {
    max-height: calc(100dvh - 112px) !important;
  }
}

@media (min-width: 1081px) {
  body.page-sell .sell-device-card.sell-device-guide-card,
  body.page-sell .sell-device-card.sell-v198-guide {
    max-height: calc(100dvh - 96px) !important;
  }
}

/* On stacked tablet/mobile layouts, cards should become normal page content, not nested scroll boxes. */
@media (max-width: 1100px) {
  body.page-repair .repair-guide-card {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    touch-action: auto !important;
  }
}

@media (max-width: 1080px) {
  body.trade-page-body .trade-card.trade-info-card,
  body.page-sell .sell-device-card.sell-device-guide-card,
  body.page-sell .sell-device-card.sell-v198-guide {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    touch-action: auto !important;
  }
}

/* Product summaries can grow after configuration choices. Never hide newly-added rows. */
@media (min-width: 1051px) {
  .purchase-summary-card,
  .summary-panel,
  .sticky-summary-panel,
  .buy-panel {
    max-height: calc(100dvh - 112px) !important;
  }
}

@media (max-width: 1050px) {
  .purchase-summary-card,
  .summary-panel,
  .sticky-summary-panel,
  .buy-panel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Every full-screen layer owns its own scrolling while the page beneath is locked. */
.mg-search-overlay,
.global-search-overlay,
.search-overlay,
.filter-layer,
.mg-filter-sort-layer {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.mobile-drawer,
.nav-links.is-open,
.nav-menu.is-open,
#navLinks.is-open,
#navMenu.is-open,
.mg-filter-sort-panel,
.filter-panel,
.mg-search-shell,
.global-search-box,
.search-panel {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.mobile-drawer,
.nav-links.is-open,
.nav-menu.is-open,
#navLinks.is-open,
#navMenu.is-open,
.mg-filter-sort-panel,
.filter-panel {
  overflow-y: auto !important;
  touch-action: pan-y !important;
}

/* Ensure the final item in scrollable panels is not hidden behind safe areas or floating controls. */
.trade-info-card,
.sell-device-guide-card,
.repair-guide-card,
.mobile-drawer,
.mg-filter-sort-panel,
.filter-panel,
.mg-search-results,
.global-search-results {
  scroll-padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Clear, unobtrusive desktop scrollbars for long guide cards. */
@media (hover: hover) and (pointer: fine) {
  body.trade-page-body .trade-info-card::-webkit-scrollbar,
  body.page-sell .sell-device-guide-card::-webkit-scrollbar,
  body.page-repair .repair-guide-card::-webkit-scrollbar,
  .purchase-summary-card::-webkit-scrollbar,
  .summary-panel::-webkit-scrollbar {
    width: 7px;
  }

  body.trade-page-body .trade-info-card::-webkit-scrollbar-thumb,
  body.page-sell .sell-device-guide-card::-webkit-scrollbar-thumb,
  body.page-repair .repair-guide-card::-webkit-scrollbar-thumb,
  .purchase-summary-card::-webkit-scrollbar-thumb,
  .summary-panel::-webkit-scrollbar-thumb {
    background: rgba(252, 101, 1, .48);
    border-radius: 999px;
  }
}

/* ---- css/dark-mode-v201.css ---- */
/*
  Miller Gadgets v1.201 — complete dark-mode rebuild.
  This file is intentionally loaded after every other stylesheet.
  The light layout remains unchanged; only its visual tokens are remapped.
*/

html[data-theme="dark"] {
  color-scheme: dark;
  --mg-dark-bg: #1A1A1A;
  --mg-dark-ribbon: #303030;
  --mg-dark-surface: #1A1A1A;
  --mg-dark-surface-2: #202020;
  --mg-dark-text: #F7F4FF;
  --mg-dark-muted: rgba(247, 244, 255, .72);
  --mg-dark-soft: rgba(247, 244, 255, .56);
  --mg-dark-line: rgba(255, 255, 255, .14);
  --mg-purple: #3B3457;
  --mg-purple-2: #4D456F;
  --mg-purple-3: #6F64A0;
  --mg-purple-text: #D8D0FF;
  --mg-purple-soft: rgba(59, 52, 87, .46);
  --mg-purple-line: rgba(150, 137, 205, .34);
  --bg: var(--mg-dark-bg);
  --surface: var(--mg-dark-surface);
  --text: var(--mg-dark-text);
  --muted: var(--mg-dark-muted);
  --line: var(--mg-dark-line);
  --nav: var(--mg-dark-ribbon);
  --navText: var(--mg-dark-text);
  --soft: var(--mg-purple-soft);
  --orange: var(--mg-purple);
  --purple: var(--mg-purple);
  --peach: var(--mg-purple-2);
  --shadow: 0 18px 48px rgba(0, 0, 0, .40);
  --mg-orange: var(--mg-purple);
  --mg-ui-orange: var(--mg-purple);
  --mg-ui-orange-2: var(--mg-purple-2);
  --slick-orange: var(--mg-purple);
  --slick-orange-2: var(--mg-purple-2);
  --btn-orange-solid: var(--mg-purple);
  --btn-orange-hover: var(--mg-purple-2);
  --btn-border-orange: var(--mg-purple-line);
  --btn-text-on-orange: #FFFFFF;
  --btn-dark-glass: rgba(255, 255, 255, .08);
  --btn-dark-glass-hover: rgba(255, 255, 255, .13);
  --button-soft: rgba(59, 52, 87, .26);
  --trade-orange-soft: rgba(59, 52, 87, .40);
  --trade-orange-soft-2: rgba(77, 69, 111, .42);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--mg-dark-bg) !important;
  color: var(--mg-dark-text) !important;
  -webkit-text-fill-color: initial;
}

html[data-theme="dark"] body {
  background-image: none !important;
}

html[data-theme="dark"] body :is(
  main,
  .page-wrap,
  .section,
  .page-hero,
  .hero-section,
  .hero-ad,
  .page-title,
  .product-grid-section,
  .product-page-wrap,
  .form-page,
  .store-main,
  .apple-store-main,
  .catalogue-section,
  .product-detail-section,
  .trade-main,
  .sell-device-main,
  .repair-main,
  .support-main,
  .recommendation-main,
  .contact-main,
  .faq-main
) {
  background-color: transparent !important;
  color: var(--mg-dark-text) !important;
}

/* Top ribbon/navigation */
html[data-theme="dark"] body :is(
  .top-nav,
  .top-ribbon,
  .site-header,
  .navbar,
  .main-nav,
  .nav-shell
) {
  background: var(--mg-dark-ribbon) !important;
  color: var(--mg-dark-text) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(18px) !important;
}

html[data-theme="dark"] body .top-nav :is(a, button, span, strong, svg),
html[data-theme="dark"] body :is(.top-ribbon, .site-header, .navbar, .main-nav) :is(a, button, span, strong, svg) {
  color: var(--mg-dark-text) !important;
  -webkit-text-fill-color: var(--mg-dark-text) !important;
}

html[data-theme="dark"] body .top-nav :is(a, button):hover,
html[data-theme="dark"] body .top-nav :is(a, button):focus-visible,
html[data-theme="dark"] body .top-nav a:is(.active, [aria-current="page"]),
html[data-theme="dark"] body .mobile-drawer a:is(.active, [aria-current="page"]) {
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  background: rgba(59, 52, 87, .42) !important;
  border-color: var(--mg-purple-line) !important;
}

html[data-theme="dark"] body :is(
  .mega-menu,
  .mega-panel,
  .mega-dropdown,
  .nav-dropdown,
  .dropdown-panel,
  .dropdown-menu,
  .mobile-drawer,
  #mobileDrawer,
  .drawer-menu,
  .mobile-menu
) {
  background: var(--mg-dark-surface) !important;
  color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44) !important;
}

/* Dark surfaces mirror light-mode white surfaces as #1A1A1A. */
html[data-theme="dark"] body :is(
  .card,
  .product-card,
  .product-card-v39,
  .accessory-card,
  .store-feature-card,
  .store-card,
  .service-card,
  .support-card,
  .support-help-card,
  .faq-card,
  .info-card,
  .trade-card,
  .trade-form-card,
  .trade-info-card,
  .sell-device-card,
  .sell-device-result-card,
  .sell-device-guide-card,
  .sell-policy-note,
  .sell-math-formula,
  .repair-card,
  .repair-type-card,
  .form-card,
  .smart-form,
  .promo-card,
  .trust-box,
  .filter-box,
  .search-panel,
  .global-search-box,
  .mg-search-shell,
  .mg-search-inner,
  .mg-search-result,
  .mg-filter-sort-panel,
  .mg-product-tools,
  .mg-pagination,
  .mg-page-bottom-cta,
  .product-panel,
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .product-detail-grid,
  .product-detail-grid-v39,
  .warehouse-product-header,
  .selection-step,
  .summary-box,
  .estimate-box,
  .rate-badge,
  footer,
  .footer
) {
  background: var(--mg-dark-surface) !important;
  color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] body :is(
  .hero,
  .hero-card,
  .hero-panel,
  .store-hero,
  .apple-store-hero,
  .catalog-header,
  .trade-hero,
  .sell-device-hero,
  .repair-hero,
  .support-hero,
  .contact-hero,
  .page-title,
  .help-choosing-section
) {
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 52, 87, .36), transparent 28rem),
    linear-gradient(135deg, var(--mg-dark-bg), var(--mg-dark-bg)) !important;
  color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b,
  .headline,
  .card-title,
  .product-card h3,
  .store-feature-card h3,
  .service-card h3,
  .support-card h3,
  .summary-line strong,
  .product-summary-title,
  .checkout-summary-title
) {
  color: var(--mg-dark-text) !important;
  -webkit-text-fill-color: var(--mg-dark-text) !important;
}

html[data-theme="dark"] body :is(
  p,
  li,
  small,
  label,
  .muted,
  .product-card p,
  .store-feature-card p,
  .service-card p,
  .support-card p,
  .summary-line,
  .section-heading p,
  .page-title p,
  .ad-copy p:not(.eyebrow),
  .global-search-result span,
  .mg-product-tools-copy span
) {
  color: var(--mg-dark-muted) !important;
  -webkit-text-fill-color: var(--mg-dark-muted) !important;
}

/* Former orange accents become the purple family. */
html[data-theme="dark"] body :is(
  .eyebrow,
  .kicker,
  .store-card-kicker,
  .product-kicker,
  .card-kicker,
  .price,
  .orange-text,
  .formula-positive,
  .formula-result,
  .mg-back-to-top,
  .mg-filter-sort-label,
  .global-search-result em,
  .rate-badge strong,
  .condition-chip-open-box
) {
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
}

html[data-theme="dark"] body :is(
  .tag,
  .family-option-count,
  .store-card-kicker,
  .product-card[data-condition*="Open Box"] .tag,
  .mg-floating-section-name span
) {
  background: rgba(59, 52, 87, .48) !important;
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(
  .primary-btn,
  .cta-button,
  .btn.orange,
  .price-cta,
  #checkoutBtn,
  #sendTradeBtn,
  #sellWhatsappBtn,
  .mg-filter-sort-apply,
  .mg-page-btn.is-active,
  .category-filter.active,
  .category-filter.is-active
) {
  background: linear-gradient(135deg, var(--mg-purple), var(--mg-purple-2)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--mg-purple-3) !important;
  box-shadow: 0 16px 38px rgba(59, 52, 87, .40) !important;
}

html[data-theme="dark"] body :is(
  .secondary-btn,
  .ghost-btn,
  .btn.soft,
  .option,
  .category-filter,
  .filter-pill,
  .mg-filter-sort-open,
  .mg-filter-option,
  .mg-sort-option,
  .mg-page-btn,
  .header-icon-button,
  .mode-icon-button,
  .theme-toggle,
  .search-toggle,
  .search-icon-button,
  .whatsapp-icon-button,
  .mg-control-pill,
  .mg-help-choose-pill
) {
  background: var(--mg-dark-surface) !important;
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(
  .secondary-btn,
  .ghost-btn,
  .btn.soft,
  .option,
  .category-filter,
  .filter-pill,
  .mg-filter-sort-open,
  .mg-filter-option,
  .mg-sort-option,
  .mg-page-btn,
  .header-icon-button,
  .mode-icon-button,
  .theme-toggle,
  .search-toggle,
  .mg-control-pill,
  .mg-help-choose-pill
):hover,
html[data-theme="dark"] body :is(
  .secondary-btn,
  .ghost-btn,
  .btn.soft,
  .option,
  .category-filter,
  .filter-pill,
  .mg-filter-sort-open,
  .mg-filter-option,
  .mg-sort-option,
  .mg-page-btn,
  .header-icon-button,
  .mode-icon-button,
  .theme-toggle,
  .search-toggle,
  .mg-control-pill,
  .mg-help-choose-pill
):focus-visible,
html[data-theme="dark"] body :is(.option.active, .mg-filter-option.is-active, .mg-sort-option.is-active) {
  background: rgba(59, 52, 87, .50) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--mg-purple-3) !important;
}

html[data-theme="dark"] body :is(input, select, textarea, .global-search-input, #globalSearchInput) {
  background: var(--mg-dark-surface) !important;
  color: var(--mg-dark-text) !important;
  -webkit-text-fill-color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
  caret-color: var(--mg-purple-text) !important;
}

html[data-theme="dark"] body :is(input, select, textarea, .global-search-input, #globalSearchInput)::placeholder {
  color: rgba(247, 244, 255, .48) !important;
  -webkit-text-fill-color: rgba(247, 244, 255, .48) !important;
}

html[data-theme="dark"] body :is(input, select, textarea, .global-search-input, #globalSearchInput):focus {
  outline: 3px solid rgba(111, 100, 160, .30) !important;
  border-color: var(--mg-purple-3) !important;
}

html[data-theme="dark"] body select option {
  background: var(--mg-dark-bg) !important;
  color: var(--mg-dark-text) !important;
}

html[data-theme="dark"] body :is(
  .product-card:hover,
  .product-card-v39:hover,
  .accessory-card:hover,
  .store-feature-card:hover,
  .card:hover,
  .service-card:hover
) {
  border-color: var(--mg-purple-line) !important;
  box-shadow: 0 18px 52px rgba(59, 52, 87, .28) !important;
}

html[data-theme="dark"] body :is(
  #storeGrid,
  .product-grid,
  .store-grid,
  .apple-store-row,
  .cards-grid,
  .support-grid,
  .faq-grid,
  .repair-grid
) {
  background: transparent !important;
}

html[data-theme="dark"] body :is(.product-image-link, .product-image-shell, .product-media, .store-icon-image, .hero-image) {
  background: var(--mg-dark-surface-2) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body :is(.mg-filter-sort-layer, .global-search-overlay, .mg-search-overlay, .search-overlay) {
  background: rgba(0, 0, 0, .58) !important;
}

html[data-theme="dark"] body .mg-filter-sort-backdrop {
  background: rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] body :is(.global-search-result, .search-result) {
  background: var(--mg-dark-surface-2) !important;
  color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body :is(.global-search-result:hover, .global-search-result:focus-visible, .search-result:hover) {
  background: rgba(59, 52, 87, .40) !important;
  border-color: var(--mg-purple-line) !important;
}

html[data-theme="dark"] body .mg-floating-help {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05) 44%, rgba(59, 52, 87, .72)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] body .mg-floating-help-tooltip,
html[data-theme="dark"] body .mg-floating-help-tooltip::after {
  background: linear-gradient(135deg, var(--mg-purple), var(--mg-purple-2)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 16px 38px rgba(59, 52, 87, .40) !important;
}

/* V1.180 dark Store rails: keep the light-mode carousel structure, purple accent only. */
html[data-theme="dark"] {
  --mg180-row-pad: clamp(18px, 3vw, 40px);
  --mg180-row-gap: clamp(14px, 1.8vw, 24px);
}

html[data-theme="dark"] body :is(
  .apple-store-row,
  .store-scroll-row,
  .mg-v171-scroll-rail.apple-store-row
) {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(285px, 380px) !important;
  grid-template-columns: none !important;
  justify-content: start !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: var(--mg180-row-gap) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: inline proximity !important;
  scroll-padding-inline: var(--mg180-row-pad) !important;
  padding: 6px var(--mg180-row-pad) 24px !important;
  box-sizing: border-box !important;
  scrollbar-color: var(--mg-purple) var(--mg-dark-ribbon) !important;
}

html[data-theme="dark"] body .apple-store-row-featured {
  grid-auto-columns: minmax(310px, 430px) !important;
}

html[data-theme="dark"] body .apple-store-row::after {
  content: "" !important;
  inline-size: max(1px, calc(var(--mg180-row-pad) - var(--mg180-row-gap))) !important;
  block-size: 1px !important;
  scroll-snap-align: end !important;
}

html[data-theme="dark"] body .apple-store-row > :is(
  .store-feature-card,
  .product-card,
  .product-card-v39,
  .accessory-card
) {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: none !important;
  max-width: none !important;
  margin-inline: 0 !important;
  grid-column: auto !important;
  scroll-snap-align: start !important;
}

html[data-theme="dark"] body .apple-store-row::-webkit-scrollbar,
html[data-theme="dark"] body .store-scroll-row::-webkit-scrollbar {
  height: 10px !important;
}

html[data-theme="dark"] body .apple-store-row::-webkit-scrollbar-track,
html[data-theme="dark"] body .store-scroll-row::-webkit-scrollbar-track {
  background: var(--mg-dark-ribbon) !important;
  border-radius: 999px !important;
}

html[data-theme="dark"] body .apple-store-row::-webkit-scrollbar-thumb,
html[data-theme="dark"] body .store-scroll-row::-webkit-scrollbar-thumb {
  background: var(--mg-purple) !important;
  border: 2px solid var(--mg-dark-ribbon) !important;
  border-radius: 999px !important;
}

html[data-theme="dark"] body .apple-store-row::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body .store-scroll-row::-webkit-scrollbar-thumb:hover {
  background: var(--mg-purple-2) !important;
}

@media (max-width: 760px) {
  html[data-theme="dark"] {
    --mg180-row-pad: 16px;
    --mg180-row-gap: 14px;
  }

  html[data-theme="dark"] body :is(
    .apple-store-row,
    .store-scroll-row,
    .mg-v171-scroll-rail.apple-store-row
  ) {
    grid-auto-columns: minmax(248px, 78vw) !important;
    padding-block: 4px 22px !important;
  }

  html[data-theme="dark"] body .apple-store-row-featured {
    grid-auto-columns: minmax(260px, 82vw) !important;
  }
}

html[data-theme="dark"] body .mg-floating-section-name {
  background: rgba(26, 26, 26, .92) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body :is(.social-svg-icon, footer img[src*="assets/social/"]) {
  background: var(--mg-dark-surface-2) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body ::selection {
  background: rgba(111, 100, 160, .58);
  color: #FFFFFF;
}

/* Specificity locks for older final UI layers. */
html[data-theme="dark"] body.mg-v170-ui :is(
  #storeGrid .product-card,
  .product-card,
  .product-card-v39,
  .accessory-card,
  .store-feature-card,
  .service-card,
  .support-card,
  .faq-card,
  .card
) {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  color: var(--mg-dark-text) !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body.mg-v170-ui #storeGrid .product-card:hover,
html[data-theme="dark"] body.mg-v170-ui #storeGrid .product-card:focus-visible,
html[data-theme="dark"] body.mg-v170-ui .product-card:hover,
html[data-theme="dark"] body.mg-v170-ui .product-card:focus-visible,
html[data-theme="dark"] body.mg-v170-ui .store-feature-card:hover,
html[data-theme="dark"] body.mg-v170-ui .store-feature-card:focus-visible {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: 0 18px 52px rgba(59, 52, 87, .28) !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  border-color: var(--mg-dark-line) !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-control-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-help-choose-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-control-pill:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-help-choose-pill:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open:hover,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-control-pill:focus-visible,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-help-choose-pill:focus-visible,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open:focus-visible,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-control-pill:focus-visible,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-help-choose-pill:focus-visible,
html[data-theme="dark"] body.mg-final-filter-ready .mg-clean-separated-pill-cluster .mg-filter-sort-open:focus-visible {
  background: rgba(59, 52, 87, .50) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--mg-purple-3) !important;
}

html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-icon,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-pill-text,
html[data-theme="dark"] body.mg-final-filter-ready .mg-final-filter-tools .mg-filter-sort-open span:last-child {
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
}

html[data-theme="dark"] body :is(
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .selection-step,
  .product-panel,
  .product-media,
  .product-image-shell
),
html[data-theme="dark"] body.warehouse-product-design :is(
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .selection-step,
  .product-panel
),
html[data-theme="dark"] body.mg-v167-page-polish :is(.product-media-card, .product-config-card),
html[data-theme="dark"] body.mg-v167-product :is(.product-media-card, .product-config-card) {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  border-color: var(--mg-dark-line) !important;
  color: var(--mg-dark-text) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] body :is(
  .option,
  #conditionOptions .option,
  #storageOptions .option,
  #connectivityOptions .option,
  #gradeOptions .option,
  #colorOptions .option
),
html[data-theme="dark"] body.warehouse-product-design .option,
html[data-theme="dark"] body.mg-v167-page-polish .option {
  background: var(--mg-dark-surface) !important;
  background-image: none !important;
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(
  .option:hover,
  .option:focus-visible,
  .option.active,
  .option[aria-pressed="true"],
  .option[aria-selected="true"],
  #conditionOptions .option.active,
  #storageOptions .option.active,
  #connectivityOptions .option.active,
  #gradeOptions .option.active,
  #colorOptions .option.active
),
html[data-theme="dark"] body.warehouse-product-design :is(.option:hover, .option:focus-visible, .option.active),
html[data-theme="dark"] body.mg-v167-page-polish :is(.option:hover, .option:focus-visible, .option.active) {
  background: rgba(59, 52, 87, .50) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--mg-purple-3) !important;
  box-shadow: inset 0 0 0 2px rgba(111, 100, 160, .34) !important;
}

html[data-theme="dark"] body .top-nav .logo-mark,
html[data-theme="dark"] body .logo-mark.mg-v170-target {
  box-shadow: inset 0 0 0 1px rgba(150, 137, 205, .34) !important;
}

html[data-theme="dark"] body :is(
  .warehouse-status-strip span,
  .warehouse-media-checks span,
  .warehouse-quick-promises span,
  .formula-token,
  .formula-positive,
  .formula-result,
  .formula-cashback-note,
  .sell-formula-main span,
  .trade-formula span
) {
  background: rgba(59, 52, 87, .36) !important;
  background-image: none !important;
  color: var(--mg-purple-text) !important;
  -webkit-text-fill-color: var(--mg-purple-text) !important;
  border-color: var(--mg-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(.formula-result, .formula-token.formula-result) {
  background: linear-gradient(135deg, rgba(59, 52, 87, .58), rgba(77, 69, 111, .42)) !important;
  border-color: rgba(150, 137, 205, .40) !important;
}

html[data-theme="dark"] body.warehouse-product-design .product-media-card img#productImage,
html[data-theme="dark"] body #productImage {
  background:
    linear-gradient(145deg, rgba(26, 26, 26, .92), rgba(59, 52, 87, .26)),
    radial-gradient(circle, rgba(111, 100, 160, .28), transparent 42%) !important;
  border-color: rgba(150, 137, 205, .28) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .store-feature-image {
  box-shadow: inset 0 0 0 1px rgba(150, 137, 205, .32) !important;
}


/* =========================================================
   V1.201 FINAL THEME AUTHORITY
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark !important;
  --mg-dark-bg: #1A1A1A;
  --mg-dark-ribbon: #303030;
  --mg-dark-surface: #1A1A1A;
  --mg-dark-surface-raised: #222222;
  --mg-dark-surface-soft: #262626;
  --mg-dark-text: #F8F7FB;
  --mg-dark-muted: #B9B6C2;
  --mg-dark-soft: #8F8A99;
  --mg-dark-line: rgba(255,255,255,.12);
  --mg-purple: #3B3457;
  --mg-purple-2: #4C446B;
  --mg-purple-3: #665C8E;
  --mg-purple-4: #8D81BE;
  --mg-purple-text: #DAD4F4;
  --mg-purple-soft: rgba(59,52,87,.45);
  --mg-purple-line: rgba(141,129,190,.42);
  --bg: #1A1A1A;
  --surface: #1A1A1A;
  --surface-2: #222222;
  --text: #F8F7FB;
  --muted: #B9B6C2;
  --line: rgba(255,255,255,.12);
  --nav: #303030;
  --navText: #F8F7FB;
  --soft: rgba(59,52,87,.45);
  --accent: #3B3457;
  --orange: #3B3457;
  --peach: #4C446B;
  --purple: #3B3457;
  --mg-orange: #3B3457;
  --mg-orange-soft: rgba(59,52,87,.24);
  --mg-readable-orange: #DAD4F4;
  --mg-ui-orange: #3B3457;
  --mg-ui-orange-2: #4C446B;
  --mg170-orange: #3B3457;
  --mg170-orange-2: #4C446B;
  --mg170-orange-line: rgba(141,129,190,.42);
  --mg171-orange: #3B3457;
  --mg171-orange-2: #4C446B;
  --mg-is-accent: #3B3457;
  --mg-is-accent-hover: #4C446B;
  --mg-is-text: #F8F7FB;
  --mg-is-muted: #B9B6C2;
  --mg-is-surface: #1A1A1A;
  --mg-is-border: rgba(255,255,255,.12);
  --mg-is-selected-text: #FFFFFF;
  --mg183-ribbon-text: #F8F7FB;
  --mg183-ribbon-muted: #B9B6C2;
  --mg183-ribbon-accent: #DAD4F4;
  --mg183-ribbon-hover-bg: rgba(59,52,87,.46);
  --mg183-ribbon-active-bg: rgba(76,68,107,.68);
  --mg183-ribbon-hover-ring: rgba(141,129,190,.46);
  --mg183-ribbon-active-ring: rgba(218,212,244,.72);
  --mg186-mega-text: #F8F7FB;
  --mg186-mega-accent: #DAD4F4;
  --mg186-mega-active-bg: rgba(76,68,107,.68);
  --mg186-mega-active-ring: rgba(218,212,244,.72);
  --mg188-accent: #DAD4F4;
  --mg188-accent-text: #DAD4F4;
  --slick-orange: #3B3457;
  --slick-orange-2: #4C446B;
  --btn-orange-solid: #3B3457;
  --btn-orange-hover: #4C446B;
  --btn-border-orange: rgba(141,129,190,.42);
  --trade-orange-soft: rgba(59,52,87,.38);
  --trade-orange-soft-2: rgba(76,68,107,.42);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.mg-v201-dark-rebuild {
  background-color: #1A1A1A !important;
  background-image: none !important;
  color: #F8F7FB !important;
}

/* The ribbon is always the requested graphite tone in dark mode. */
html[data-theme="dark"] body.mg-v201-dark-rebuild .top-nav,
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(.top-ribbon,.site-header,.navbar,.main-nav,.nav-shell) {
  background: #303030 !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.34) !important;
}

/* Every light-mode white or near-white panel becomes a neutral #1A1A1A panel. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .card,.product-card,.product-card-v39,.accessory-card,.store-feature-card,.store-card,
  .category-card,.service-card,.support-card,.support-help-card,.faq-card,.info-card,
  .trade-card,.trade-form-card,.trade-info-card,.trade-category-guide,.trade-search-first,
  .trade-workbook-section,.trade-device-reference,.trade-defect-row,.trade-result-panel,
  .trade-category-checklist,.trade-customer-tips,.sell-device-card,.sell-device-result-card,
  .sell-device-guide-card,.sell-policy-note,.sell-math-formula,.repair-card,.repair-type-card,
  .form-card,.smart-form,.promo-card,.trust-box,.filter-box,.search-panel,.global-search-box,
  .mg-search-shell,.mg-search-inner,.mg-search-result,.mg-filter-sort-panel,.mg-product-tools,
  .mg-pagination,.mg-page-bottom-cta,.product-panel,.product-media-card,.product-config-card,
  .purchase-summary-card,.product-detail-grid,.product-detail-grid-v39,.warehouse-product-header,
  .selection-step,.summary-box,.estimate-box,.rate-badge,.product-family-specs-card,
  .mg-final-filter-tools,.mg-clean-separated-pill-cluster,.contact-card,.recommendation-card,
  .help-choosing-section,.footer,footer
) {
  background-color: #1A1A1A !important;
  background-image: none !important;
  color: #F8F7FB !important;
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .product-image-link,.product-image-shell,.product-media,.store-icon-image,.hero-image,
  .product-family-spec-item,.trade-device-reference > div,.trade-defect-row > div,
  .trade-result-metrics > div,.global-search-result,.search-result,.trade-device-suggestions,
  .trade-device-suggestion,.mg-filter-option,.mg-sort-option,.sell-formula-main,
  .warehouse-status-strip span,.warehouse-media-checks span,.warehouse-quick-promises span
) {
  background-color: #222222 !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Hero and decorative areas use restrained purple light, never orange or old navy. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .hero,.hero-card,.hero-panel,.hero-ad,.store-hero,.apple-store-hero,.catalog-header,
  .trade-hero,.sell-device-hero,.repair-hero,.support-hero,.contact-hero,.page-title,
  .support-main,.repair-main,.trade-main,.sell-device-main,.recommendation-main,.contact-main,.faq-main
) {
  background-color: #1A1A1A !important;
  background-image: radial-gradient(circle at 10% 0%, rgba(59,52,87,.34), transparent 34rem) !important;
  color: #F8F7FB !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Typography mirrors light mode hierarchy with high-contrast neutral text. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(h1,h2,h3,h4,h5,h6,strong,b,.headline,.card-title,.product-summary-title,.checkout-summary-title,dt) {
  color: #F8F7FB !important;
  -webkit-text-fill-color: #F8F7FB !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(p,li,small,label,dd,.muted,.subtle,.helper-text,.summary-line,.section-heading p,.page-title p) {
  color: #B9B6C2 !important;
  -webkit-text-fill-color: #B9B6C2 !important;
}

/* The entire former orange family becomes the requested purple family. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .eyebrow,.kicker,.store-card-kicker,.product-kicker,.card-kicker,.price,.orange-text,
  .formula-positive,.formula-result,.mg-back-to-top,.mg-filter-sort-label,
  .global-search-result em,.rate-badge strong,.condition-chip-open-box,
  .product-family-specs-category,.trade-suggestion-review
) {
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .tag,.family-option-count,.condition-chip,.product-family-specs-category,
  .warehouse-status-strip span,.warehouse-media-checks span,.warehouse-quick-promises span,
  .formula-token,.formula-positive,.formula-result,.formula-cashback-note,.sell-formula-main span,.trade-formula span
) {
  background: rgba(59,52,87,.46) !important;
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
  border-color: rgba(141,129,190,.42) !important;
  box-shadow: none !important;
}

/* Main actions use a solid, readable purple progression. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .primary-btn,.cta-button,.btn.orange,.price-cta,#checkoutBtn,#sendTradeBtn,#sellWhatsappBtn,
  .mg-filter-sort-apply,.mg-page-btn.is-active,.category-filter.active,.category-filter.is-active,
  button[type="submit"].primary-btn,a.primary-btn
) {
  background: linear-gradient(135deg,#3B3457,#4C446B) !important;
  background-color: #3B3457 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #665C8E !important;
  box-shadow: 0 14px 34px rgba(59,52,87,.36) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .primary-btn,.cta-button,.btn.orange,.price-cta,#checkoutBtn,#sendTradeBtn,#sellWhatsappBtn,
  .mg-filter-sort-apply
):hover,
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .primary-btn,.cta-button,.btn.orange,.price-cta,#checkoutBtn,#sendTradeBtn,#sellWhatsappBtn,
  .mg-filter-sort-apply
):focus-visible {
  background: linear-gradient(135deg,#4C446B,#665C8E) !important;
  border-color: #8D81BE !important;
}

/* Secondary controls and selections. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .secondary-btn,.ghost-btn,.btn.soft,.option,.category-filter,.filter-pill,.mg-filter-sort-open,
  .mg-filter-option,.mg-sort-option,.mg-page-btn,.mg-control-pill,.mg-help-choose-pill,
  .trade-defect-remove,.global-search-close,.mg-search-close,.mg-campaign-pause
) {
  background: #222222 !important;
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
  border-color: rgba(141,129,190,.38) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .secondary-btn,.ghost-btn,.btn.soft,.option,.category-filter,.filter-pill,.mg-filter-sort-open,
  .mg-filter-option,.mg-sort-option,.mg-page-btn,.mg-control-pill,.mg-help-choose-pill
):is(:hover,:focus-visible,.active,.is-active,[aria-pressed="true"],[aria-selected="true"]) {
  background: rgba(59,52,87,.58) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #8D81BE !important;
}

/* Inputs are neutral dark surfaces with purple focus only. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(input,select,textarea,.global-search-input,#globalSearchInput,#tradeDeviceSearch,#sellDeviceSearch) {
  background: #222222 !important;
  background-image: none !important;
  color: #F8F7FB !important;
  -webkit-text-fill-color: #F8F7FB !important;
  border-color: rgba(255,255,255,.14) !important;
  caret-color: #DAD4F4 !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(input,select,textarea,.global-search-input,#globalSearchInput)::placeholder {
  color: #8F8A99 !important;
  -webkit-text-fill-color: #8F8A99 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(input,select,textarea,.global-search-input,#globalSearchInput):focus {
  border-color: #8D81BE !important;
  outline: 3px solid rgba(102,92,142,.28) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild select option {
  background: #1A1A1A !important;
  color: #F8F7FB !important;
}

/* Search, trade-in and sell-to-us suggestion states. */
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(
  .global-search-result:hover,.global-search-result:focus-visible,.search-result:hover,
  .trade-device-suggestion:hover,.trade-device-suggestion:focus-visible,.trade-device-suggestion.is-active,
  .trade-device-suggestion[aria-selected="true"]
) {
  background: rgba(59,52,87,.55) !important;
  border-color: rgba(141,129,190,.46) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild :is(.mg-filter-sort-layer,.global-search-overlay,.mg-search-overlay,.search-overlay) {
  background: rgba(0,0,0,.66) !important;
}

/* Product specification card from v200. */
html[data-theme="dark"] body.mg-v201-dark-rebuild.page-product .product-family-specs-card {
  background: #1A1A1A !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.page-product .product-family-spec-item {
  background: #222222 !important;
  border-color: rgba(255,255,255,.09) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.page-product .product-family-specs-category {
  background: rgba(59,52,87,.48) !important;
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
  border-color: rgba(141,129,190,.42) !important;
}

/* Campaign controls, scrollbars and status accents. */
html[data-theme="dark"] body.mg-v201-dark-rebuild .mg-campaign-viewport,
html[data-theme="dark"] body.mg-v201-dark-rebuild .mg-page-campaign-link,
html[data-theme="dark"] body.mg-v201-dark-rebuild .mg-campaign-slide,
html[data-theme="dark"] body.mg-v201-dark-rebuild .mg-campaign-slide img {
  background-color: #1A1A1A !important;
  border-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild .mg-campaign-dot.is-active {
  background: #665C8E !important;
  border-color: #8D81BE !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild ::-webkit-scrollbar-track { background: #303030; }
html[data-theme="dark"] body.mg-v201-dark-rebuild ::-webkit-scrollbar-thumb {
  background: #3B3457;
  border: 2px solid #303030;
  border-radius: 999px;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild ::-webkit-scrollbar-thumb:hover { background: #4C446B; }
html[data-theme="dark"] body.mg-v201-dark-rebuild { scrollbar-color: #3B3457 #303030; }

/* Compact dual-icon mode switch based on the supplied reference. */
html body.mg-v201-dark-rebuild .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button,
html body.mg-v201-dark-rebuild #themeToggle.theme-toggle-button,
html body.mg-v201-dark-rebuild #themeToggle.mode-icon-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #D8D8DA !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035) !important;
  translate: none !important;
  transform: none !important;
}
html body.mg-v201-dark-rebuild #themeToggle .theme-icon {
  position: relative !important;
  inset: auto !important;
  translate: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  color: #8D8D92 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease !important;
}
html body.mg-v201-dark-rebuild #themeToggle .theme-icon-sun { order: 1 !important; }
html body.mg-v201-dark-rebuild #themeToggle .theme-icon-moon { order: 2 !important; }
html body.mg-v201-dark-rebuild #themeToggle .theme-icon svg {
  width: 19px !important;
  height: 19px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild #themeToggle .theme-icon-sun,
html[data-theme="light"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-sun {
  color: #55555A !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
}
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild #themeToggle .theme-icon-moon,
html[data-theme="light"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-moon {
  color: #98989D !important;
  background: transparent !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button,
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle.theme-toggle-button {
  background: #464646 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-sun {
  color: #929297 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-moon {
  color: #3B3457 !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.34) !important;
}
html body.mg-v201-dark-rebuild #themeToggle:is(:hover,:focus-visible) {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle:is(:hover,:focus-visible) {
  box-shadow: 0 5px 16px rgba(0,0,0,.34), inset 0 0 0 1px rgba(141,129,190,.30) !important;
}
html body.mg-v201-dark-rebuild #themeToggle::before,
html body.mg-v201-dark-rebuild #themeToggle::after {
  content: none !important;
  display: none !important;
}

/* Other ribbon controls stay simple and do not inherit the pill dimensions. */
html[data-theme="dark"] body.mg-v201-dark-rebuild .top-nav :is(#searchToggle,#mobileMenu,.whatsapp-icon-button) {
  background: transparent !important;
  color: #F8F7FB !important;
  -webkit-text-fill-color: #F8F7FB !important;
  border-color: transparent !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild .top-nav :is(#searchToggle,#mobileMenu,.whatsapp-icon-button):is(:hover,:focus-visible,[aria-expanded="true"]) {
  background: rgba(59,52,87,.48) !important;
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
  border-color: rgba(141,129,190,.38) !important;
}

/* Final anti-orange lock for dark mode UI elements generated at runtime. */
html[data-theme="dark"] body.mg-v201-dark-rebuild [style*="252, 101, 1"],
html[data-theme="dark"] body.mg-v201-dark-rebuild [style*="252,101,1"] {
  --inline-orange-replacement: #3B3457;
}

@media (max-width: 760px) {
  html body.mg-v201-dark-rebuild .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button,
  html body.mg-v201-dark-rebuild #themeToggle.theme-toggle-button {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
  }
  html body.mg-v201-dark-rebuild #themeToggle .theme-icon {
    flex-basis: 29px !important;
    width: 29px !important;
    height: 28px !important;
  }
  html body.mg-v201-dark-rebuild #themeToggle .theme-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.mg-v201-dark-rebuild #themeToggle,
  html body.mg-v201-dark-rebuild #themeToggle .theme-icon {
    transition: none !important;
  }
}

/* V1.201 toggle specificity lock: both icons remain visible inside the pill. */
html body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix.mg-v185-interactions .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button.theme-toggle-button.mode-icon-button,
html body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed] {
  display: inline-flex !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
}
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed],
html[data-theme="light"] body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed] {
  background: #D8D8DA !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed] {
  background: #464646 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
html body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon,
html[data-theme="dark"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-moon,
html[data-theme="dark"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-sun,
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-moon,
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-sun {
  position: relative !important;
  inset: auto !important;
  translate: none !important;
  display: inline-flex !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-sun {
  color: #929297 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-moon {
  color: #3B3457 !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.34) !important;
}
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-sun,
html[data-theme="light"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-sun {
  color: #55555A !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
}
html:not([data-theme="dark"]) body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-moon,
html[data-theme="light"] body.mg-v201-dark-rebuild.mg-v185-interactions #themeToggle .theme-icon-moon {
  color: #98989D !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  html body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix .top-nav .nav-icons > #themeToggle.theme-toggle.header-icon-button[aria-pressed] {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
  }
}

/* V1.201 remaining accent conversion locks. */
html[data-theme="dark"] body.mg-v201-dark-rebuild .trade-section-number,
html[data-theme="dark"] body.mg-v201-dark-rebuild .trade-model-explainer > div > span {
  background: #3B3457 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #665C8E !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild .warehouse-gallery-tile.active {
  background: rgba(59,52,87,.46) !important;
  color: #DAD4F4 !important;
  -webkit-text-fill-color: #DAD4F4 !important;
  border-color: rgba(141,129,190,.46) !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild.page-product .product-family-specs-note {
  background: rgba(59,52,87,.22) !important;
  color: #B9B6C2 !important;
  -webkit-text-fill-color: #B9B6C2 !important;
  border-left-color: #665C8E !important;
}

/* ---- css/seo-v203.css ---- */
/* Miller Gadgets v1.203 — SEO / AEO answer blocks */
.seo-answer-section{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(36px,5vw,72px)}
.seo-answer-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:clamp(22px,3vw,34px);border:1px solid var(--border,#ded9e8);border-radius:24px;background:var(--surface,#fff);box-shadow:0 16px 40px rgba(25,17,49,.06)}
.seo-answer-shell h2{margin:0;max-width:780px;font-family:Sora,Manrope,sans-serif;font-size:clamp(1.45rem,2.5vw,2.25rem);line-height:1.15}
.seo-answer-intro{margin:10px 0 0;max-width:760px;color:var(--muted,#6f6a7c)}
.seo-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.seo-answer-grid details{min-width:0;border:1px solid var(--border,#ded9e8);border-radius:18px;background:var(--surface-soft,#fbfafc);padding:0 16px}
.seo-answer-grid summary{cursor:pointer;list-style:none;font-weight:800;line-height:1.35;padding:16px 26px 16px 0;position:relative}
.seo-answer-grid summary::-webkit-details-marker{display:none}
.seo-answer-grid summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.25rem;font-weight:700}
.seo-answer-grid details[open] summary::after{content:"−"}
.seo-answer-grid p{margin:0;padding:0 0 16px;color:var(--muted,#6f6a7c);line-height:1.65}
html[data-theme="dark"] .seo-answer-shell{background:#1a1a1a;border-color:#494949;box-shadow:none}
html[data-theme="dark"] .seo-answer-grid details{background:#242424;border-color:#494949}
html[data-theme="dark"] .seo-answer-intro,html[data-theme="dark"] .seo-answer-grid p{color:#c9c5d6}
html[data-theme="dark"] .seo-answer-grid summary::after{color:#b7add8}
@media(max-width:900px){.seo-answer-grid{grid-template-columns:1fr}.seo-answer-shell{width:min(100% - 24px,720px);border-radius:20px;padding:20px}.seo-answer-section{padding-top:26px;padding-bottom:38px}}

/* ---- v1.204 production polish ---- */
/* Miller Gadgets v1.204 — rendering, accessibility and conversion polish */
.mg-skip-link {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100000;
  transform: translateY(-130%);
  margin: .75rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  color: #171226;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.mg-skip-link:focus { transform: translateY(0); }
.mg-noscript-notice,
.mg-offline-notice {
  margin: 0;
  padding: .75rem 1rem;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  background: #fff4ea;
  color: #281f3e;
  border-bottom: 1px solid rgba(59,52,87,.18);
}
html[data-theme="dark"] .mg-noscript-notice,
html[data-theme="dark"] .mg-offline-notice { background: #303030; color: #f8f6ff; }
.mg-offline .mg-online-only { opacity: .65; }
:where(main, section, article, aside, footer, [id]) { scroll-margin-top: 88px; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, #3B3457 72%, white);
  outline-offset: 3px;
}
.product-card img,
.product-image-link img,
.warehouse-gallery img,
.product-gallery img { aspect-ratio: 1 / 1; object-fit: contain; }
@supports (content-visibility: auto) {
  .product-card,
  .seo-answer-section,
  .footer { content-visibility: auto; contain-intrinsic-size: auto 420px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 760px) {
  :where(button, .primary-btn, .secondary-btn, .category-filter, .mg-page-btn, .mg-filter-option, .mg-sort-option) { min-height: 44px; }
}

/* ---- v1.206 readability hardfix ---- */
/* Goal: keep text readable across light/dark mode, hover, active, selected and disabled states. */
:root {
  --btn-text-on-dark: #171124;
  --btn-text-muted-readable: rgba(23,17,36,.82);
  --btn-dark-glass: rgba(17,9,51,.06);
  --btn-dark-glass-hover: rgba(59,52,87,.10);
  --btn-border-soft: rgba(17,9,51,.18);
  --btn-border-orange: rgba(252,101,1,.72);

  --read-text-strong: #171124;
  --read-text-soft: #4f4760;
  --read-text-muted: #625a73;
  --read-placeholder: #776f86;
  --read-link: #3B3457;
  --read-link-hover: #2b243f;
  --read-link-visited: #5a4c83;
  --read-nav-text: #1f1930;
  --read-nav-active-bg: rgba(59,52,87,.10);
  --read-disabled-text: #746c82;
  --read-disabled-bg: #efedf3;
  --read-disabled-border: rgba(17,9,51,.12);
}

html[data-theme="dark"] {
  --btn-text-on-dark: #f8f5ff;
  --btn-text-muted-readable: rgba(248,245,255,.84);
  --btn-dark-glass: rgba(255,255,255,.09);
  --btn-dark-glass-hover: rgba(255,255,255,.14);
  --btn-border-soft: rgba(255,255,255,.18);
  --btn-border-orange: rgba(252,101,1,.72);

  --read-text-strong: #fbf9ff;
  --read-text-soft: #ddd7ef;
  --read-text-muted: #c8c1db;
  --read-placeholder: #ada6bf;
  --read-link: #d7cef8;
  --read-link-hover: #f3efff;
  --read-link-visited: #cdbfff;
  --read-nav-text: #f8f5ff;
  --read-nav-active-bg: rgba(215,206,248,.12);
  --read-disabled-text: #aba5bb;
  --read-disabled-bg: #2a2a2a;
  --read-disabled-border: rgba(255,255,255,.12);
}

body,
p,
li,
dt,
dd,
figcaption,
small,
legend,
label,
.summary-line strong,
.summary-total,
.page-title,
.section-heading,
.card h3,
.product-card h3,
.service-card h3,
.support-card h3,
.form-card h3,
.product-panel h3,
.search-panel h3,
.product-family-spec-item,
.product-family-specs-category,
.trade-result-heading,
.trade-result-panel,
.sell-device-guide-card,
.repair-guide-card,
.support-help-card {
  color: var(--read-text-strong);
}

:where(
  .muted,
  .card p,
  .product-card p,
  .service-card p,
  .support-card p,
  .trust-list,
  .ad-copy p:not(.eyebrow),
  .section-heading p,
  .page-title p,
  .small-note,
  .policy-note,
  .customer-copy-note,
  .field-hint,
  .product-media-note,
  .product-family-specs-note,
  .product-family-specs-intro,
  .seo-answer-intro,
  .seo-answer-grid p,
  .footer,
  .summary-line,
  .support-policy-card p,
  .support-contact-card p,
  .repair-note-card,
  .trade-info-card,
  .trade-customer-tips,
  .sell-policy-note,
  .mg-offline-notice,
  .mg-noscript-notice
) {
  color: var(--read-text-muted) !important;
}

input,
select,
textarea,
.filter-box select,
.filter-box input,
.smart-form select,
.smart-form input,
.smart-form textarea {
  color: var(--read-text-strong) !important;
  caret-color: var(--read-link) !important;
}

input::placeholder,
textarea::placeholder,
.mg-search-input::placeholder {
  color: var(--read-placeholder) !important;
  opacity: 1 !important;
}

/* Theme-aware nav readability */
.top-nav,
.top-nav .logo-mark,
.top-nav .nav-links a,
.top-nav .nav-icon,
.top-nav .theme-toggle,
.top-nav .search-toggle,
.top-nav .mobile-menu,
.top-nav .header-icon-button,
.top-nav .search-icon-button,
.top-nav .mode-icon-button,
.top-nav .menu-icon-button,
.top-nav .search-trigger,
.top-nav .global-search-trigger {
  color: var(--read-nav-text) !important;
}

.nav-links a.active,
.nav-links a[aria-current="page"],
#navLinks a.active,
#navMenu a.active {
  color: var(--read-nav-text) !important;
  background: var(--read-nav-active-bg) !important;
  border-radius: 999px;
  padding-inline: .55rem;
}

/* Text links inside readable content areas */
main a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.btn):not(.logo-mark):not(.product-image-link):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.global-search-trigger),
.footer a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn),
.search-panel a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn) {
  color: var(--read-link) !important;
}

main a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.btn):not(.logo-mark):not(.product-image-link):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.global-search-trigger):hover,
main a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.btn):not(.logo-mark):not(.product-image-link):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.global-search-trigger):focus-visible,
.footer a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn):hover,
.footer a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn):focus-visible,
.search-panel a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn):hover,
.search-panel a[href]:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn):focus-visible {
  color: var(--read-link-hover) !important;
  text-decoration: underline;
}

main a[href]:visited:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.btn):not(.logo-mark):not(.product-image-link):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.global-search-trigger),
.footer a[href]:visited:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.btn) {
  color: var(--read-link-visited) !important;
}

/* Accent informational text should remain readable */
.eyebrow,
.price,
.tag,
.store-card-kicker,
.trade-section-number,
.product-family-specs-category {
  color: var(--read-link) !important;
}

.tag {
  background: color-mix(in srgb, var(--read-link) 10%, transparent) !important;
}

/* Disabled controls: readable but clearly disabled */
button:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.cta-button:disabled,
.option:disabled,
.category-filter:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  color: var(--read-disabled-text) !important;
  background: var(--read-disabled-bg) !important;
  border-color: var(--read-disabled-border) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Inputs and interactive boxes should preserve readable copy while hovered/focused */
.option,
.category-filter,
.filter-pill,
.secondary-btn,
button.secondary-btn,
a.secondary-btn {
  color: var(--btn-text-on-dark) !important;
}

.option:hover,
.option:focus-visible,
.category-filter:hover,
.category-filter:focus-visible,
.filter-pill:hover,
.filter-pill:focus-visible,
.secondary-btn:hover,
.secondary-btn:focus-visible,
button.secondary-btn:hover,
button.secondary-btn:focus-visible,
a.secondary-btn:hover,
a.secondary-btn:focus-visible {
  color: #ffffff !important;
}

.option.active,
.option[aria-pressed="true"],
.option[aria-selected="true"],
.category-filter.active,
.category-filter.is-active,
.category-filter[aria-pressed="true"],
.filter-pill.active,
.filter-pill.is-active,
.primary-btn,
button.primary-btn,
a.primary-btn,
.cta-button,
.price-cta,
#checkoutBtn,
#sendTradeBtn {
  color: #ffffff !important;
}

/* Search components */
.mg-search-input,
.mg-search-results,
.mg-search-results-title,
.search-results,
.search-panel,
.mg-search-shell,
.mg-search-content {
  color: var(--read-text-strong) !important;
}

/* Notices */
.mg-noscript-notice,
.mg-offline-notice {
  color: var(--read-text-strong) !important;
}
html[data-theme="dark"] .mg-noscript-notice,
html[data-theme="dark"] .mg-offline-notice {
  color: var(--read-text-strong) !important;
}


/* ---- v1.209 mobile-only current-page badge ---- */
@media (min-width: 901px) {
  .mg-floating-section-name {
    display: none !important;
  }

  body.mg-has-locked-section-name {
    scroll-padding-top: 88px !important;
  }

  body.mg-has-locked-section-name .mg-product-tools {
    top: auto !important;
  }
}


/* ---- v1.209 pre-photo launch fixes ---- */
.product-photo-request-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-radius: 999px;
}
.product-photo-request-btn[hidden] { display: none !important; }

@media (max-width: 900px) {
  .mg-floating-section-name {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
  .mg-floating-section-name span {
    min-height: 24px !important;
    padding: 4px 12px !important;
    font-size: .74rem !important;
  }
}

.recommendation-validation-note {
  margin: 10px 0 16px;
  color: var(--read-text-muted, var(--muted));
  font-size: .9rem;
}

/* v1.209 current-page badge must remain visible while the desktop ribbon is collapsed. */
@media (max-width: 900px) {
  body .mg-floating-section-name {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
  }
}


/* ---- v1.214 stable social-logo cleanup ---- */
.social-svg-icon,
.footer-social-icons img,
.footer-socials img,
.social-logo-grid img,
.support-social-row img,
.contact-social-row img,
.social-icon-row img,
.social-links img,
html[data-theme="dark"] body :is(.social-svg-icon, footer img[src*="assets/social/"]) {
  width: 27px !important;
  height: 27px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Preserve each cleaned logo's natural proportions. */
.social-svg-icon[src*="youtube"],
.footer-social-icons img[src*="youtube"],
.footer-socials img[src*="youtube"],
.social-logo-grid img[src*="youtube"],
.support-social-row img[src*="youtube"],
.contact-social-row img[src*="youtube"],
.social-links img[src*="youtube"] {
  width: 31px !important;
  height: 22px !important;
}

.social-svg-icon[src*="twitch"],
.social-svg-icon[src*="instagram"],
.social-svg-icon[src*="facebook"],
.social-svg-icon[src*="whatsapp"],
.social-svg-icon[src*="snapchat"],
.social-svg-icon[src*="tiktok"],
.social-svg-icon[src*="linktree"],
.social-svg-icon[src*="x-v213"] {
  width: 27px !important;
  height: 27px !important;
}

.footer-social-icons a,
.footer-socials a,
.social-logo-grid a,
.support-social-row a,
.contact-social-row a,
.social-icon-row a,
.social-links a {
  isolation: isolate !important;
}

/* ---- v1.216 responsive auto-layout hardening ---- */
:where(
  .container,
  .page-shell,
  .page-title,
  .section-heading,
  .hero-grid,
  .product-grid,
  .product-detail,
  .product-layout,
  .product-panel,
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .selection-step,
  .form-grid,
  .field-row,
  .smart-form,
  .filter-box,
  .mg-product-tools,
  .mg-search-shell,
  .mg-search-content,
  .footer-grid
) {
  min-inline-size: 0;
}

:where(
  .hero-grid,
  .product-grid,
  .product-detail,
  .product-layout,
  .form-grid,
  .field-row,
  .footer-grid,
  .store-hero-grid,
  .recommendation-grid
) > * {
  min-inline-size: 0;
}

:where(h1, h2, h3, h4, p, li, label, legend, summary, .page-title, .section-heading, .option, .tag) {
  overflow-wrap: anywhere;
}

:where(img, picture, video, canvas, svg, iframe) {
  max-inline-size: 100%;
}

:where(img, video) {
  block-size: auto;
}

:where(input, select, textarea, button) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(button, .primary-btn, .secondary-btn, .cta-button, .price-cta, .option, .category-filter) {
  white-space: normal;
  text-align: center;
  touch-action: manipulation;
}

:where(pre, code) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  :where(table) {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body #storeGrid .product-card > .tag,
  body #storeGrid .product-card-v39 > .tag,
  body #storeGrid .accessory-card > .tag {
    display: flex !important;
    align-items: center;
    justify-content: center;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-height: 32px !important;
    min-block-size: 32px !important;
    padding: 5px 7px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  :where(
    .warehouse-assurance,
    .warehouse-assurance-badges,
    .summary-meta,
    .product-meta-row,
    .cta-row,
    .hero-actions,
    .page-actions
  ) {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  :where(.page-title h1, .hero h1, .home-hero h1, .store-hero h1) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}