:root {
  --ink: #151719;
  --muted: #5b636a;
  --line: #d8dde2;
  --panel: #ffffff;
  --soft: #f3f5f7;
  --accent: #f2a900;
  --accent-dark: #b96d00;
  --navy: #071d3d;
  --navy-2: #0b2d63;
  --red: #d3242f;
  --gold: #f5b921;
  --green: #14744d;
  --shadow: 0 16px 45px rgba(13, 26, 41, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #eef1f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(320px, 1.8fr) auto;
  gap: 16px;
  align-items: center;
  padding: 10px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--navy);
  backdrop-filter: blur(14px);
}

.brand,
.topActions,
.searchBar,
.heroActions,
.cartButton,
.cartHead,
.cartTotal,
.filterHead,
.catalogToolbar,
.chips,
.priceRow,
.meta,
.quantityRow {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  min-width: 0;
}

.brandMark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: white;
  color: var(--navy);
  background: var(--accent);
  border-radius: 8px;
  font-weight: 900;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: #a9bdd6;
}

.brand strong {
  color: white;
}

.searchBar {
  height: 48px;
  overflow: hidden;
  border: 2px solid var(--accent);
  background: white;
  border-radius: 8px;
}

.searchBar select,
.searchBar input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.searchBar select {
  width: 185px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
}

.searchBar input {
  flex: 1;
  padding: 0 14px;
}

.iconButton,
.searchButton,
.cartButton,
.primaryAction,
.secondaryAction,
.loadMore,
.checkout button,
.filterHead button,
.product button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.searchButton,
.cartButton,
.primaryAction,
.checkout button,
.product button {
  color: #101820;
  background: var(--accent);
}

.searchButton {
  width: 48px;
  border-radius: 0;
  font-size: 24px;
}

.topActions {
  gap: 12px;
  justify-content: flex-end;
}

.menuButton {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  color: white;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  font-weight: 950;
}

.menuButton span:first-child {
  font-size: 18px;
  line-height: 1;
}

.phoneLink {
  color: white;
  font-weight: 800;
  white-space: nowrap;
}

.adminLink {
  min-height: 36px;
  padding: 8px 12px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-weight: 900;
}

.languageToggle {
  min-width: 52px;
  min-height: 36px;
  padding: 8px 12px;
  color: var(--navy);
  border: 0;
  background: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 950;
}

.cartButton {
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
}

.rtl .brand,
.rtl .topActions,
.rtl .heroActions,
.rtl .catalogToolbar,
.rtl .filterHead,
.rtl .priceRow,
.rtl .cartHead,
.rtl .cartTotal,
.rtl .quantityRow {
  flex-direction: row-reverse;
}

.rtl .brandTile,
.rtl .adminRow {
  text-align: right;
}

.rtl .searchBar select {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.rtl .promoEntry,
.rtl .cartTotal > div {
  direction: rtl;
}

.cartButton b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  color: var(--ink);
  background: white;
  border-radius: 999px;
  font-size: 12px;
}

.marketNav {
  display: flex;
  gap: 20px;
  align-items: center;
  overflow-x: auto;
  padding: 9px clamp(16px, 4vw, 48px);
  color: white;
  background: var(--navy-2);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.marketNav a {
  color: white;
}

.marketNav span {
  margin-left: auto;
  color: #f8d88a;
}

.siteMenuBackdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(5, 12, 25, .46);
  backdrop-filter: blur(3px);
}

.siteMenu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  display: grid;
  width: min(360px, 92vw);
  max-height: 100vh;
  gap: 14px;
  padding: 18px;
  border-left: 1px solid rgba(255, 255, 255, .12);
  color: white;
  background: #0b1b34;
  box-shadow: -22px 0 44px rgba(0, 0, 0, .26);
  transform: translateX(105%);
  transition: transform .24s ease;
}

.siteMenu.open {
  transform: translateX(0);
}

.siteMenuHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.siteMenuHead div {
  display: grid;
  gap: 2px;
}

.siteMenuHead strong {
  font-size: 20px;
}

.siteMenuHead span {
  color: #aab6c8;
  font-weight: 800;
}

.siteMenuLinks {
  display: grid;
  gap: 8px;
}

.siteMenuLinks a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: white;
  background: rgba(255, 255, 255, .06);
  font-weight: 950;
}

.siteMenuLinks a::after {
  content: "›";
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}

.siteMenuLinks .adminMenuLink {
  margin-top: 8px;
  color: #101820;
  background: var(--accent);
}

.siteMenuLinks .adminMenuLink::after {
  color: #101820;
}

.rtl .siteMenu {
  right: auto;
  left: 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-left: 0;
  box-shadow: 22px 0 44px rgba(0, 0, 0, .26);
  transform: translateX(-105%);
}

.rtl .siteMenu.open {
  transform: translateX(0);
}

.hero {
  position: relative;
  min-height: clamp(360px, 58vh, 620px);
  overflow: hidden;
  background: #111;
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(4, 13, 29, 0.82), rgba(4, 13, 29, 0.48) 36%, rgba(4, 13, 29, 0.04) 68%);
}

.heroOverlay {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 34px;
  color: white;
}

.heroOverlay p {
  margin: 0 0 12px;
  color: #ffd56f;
  font-weight: 800;
}

.heroOverlay h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 0.98;
  letter-spacing: 0;
}

.heroActions {
  gap: 12px;
  margin-top: 28px;
}

.primaryAction,
.secondaryAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  padding: 0 20px;
  font-weight: 900;
}

.secondaryAction {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.12);
}

.statsBand {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1180px, calc(100% - 32px));
  margin: -28px auto 28px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.promiseStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 8px;
}

.promiseStrip div {
  padding: 14px 16px;
  background: white;
}

.promiseStrip strong,
.promiseStrip span {
  display: block;
}

.promiseStrip strong {
  color: var(--navy);
}

.promiseStrip span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.brandShelf {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 28px;
}

.sectionTitle {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sectionTitle h2 {
  margin: 0;
  font-size: 24px;
}

.sectionTitle p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

.brandGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.brandTile {
  display: grid;
  min-height: 64px;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.brandTile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.brandTile strong {
  color: var(--navy);
  font-size: 18px;
}

.hotDealsSection {
  display: grid;
  gap: 16px;
  width: min(1180px, calc(100% - 32px));
  margin: -18px auto 28px;
  padding: 18px;
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, .28), transparent 32%),
    linear-gradient(120deg, #07142b 0%, #101820 50%, #231a08 100%);
  background-size: 160% 160%, 100% 100%;
  box-shadow: 0 20px 46px rgba(7, 20, 43, .24);
  animation: dealGlow 8s ease-in-out infinite;
}

.hotDealsSection .sectionTitle {
  margin-bottom: 0;
}

.hotDealsSection .sectionTitle h2 {
  color: white;
  font-size: clamp(26px, 4vw, 42px);
}

.hotDealsSection .sectionTitle p {
  margin-top: 4px;
  color: #f8d87c;
  font-weight: 800;
}

.hotDealsGrid {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 12px;
  align-items: center;
}

.hotDealsViewport {
  overflow: hidden;
  min-width: 0;
}

.hotDealsTrack {
  display: flex;
  gap: 12px;
  direction: ltr;
  will-change: transform;
}

.hotDealArrow {
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, .11);
  cursor: pointer;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.hotDealArrow:hover {
  border-color: rgba(245, 178, 50, .72);
  background: rgba(245, 178, 50, .18);
  transform: scale(1.04);
}

.hotDealDots {
  grid-column: 2;
  display: flex;
  min-height: 12px;
  justify-content: center;
  gap: 6px;
}

.hotDealDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

.hotDealDot.active {
  width: 22px;
  background: var(--accent);
}

.hotDealCard {
  display: grid;
  direction: ltr;
  flex: 0 0 calc((100% - 24px) / 3);
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  transform: translateY(0);
  animation: dealRise .56s ease both;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.rtl .hotDealCard {
  direction: rtl;
}

.hotDealCard:nth-child(2) {
  animation-delay: .08s;
}

.hotDealCard:nth-child(3) {
  animation-delay: .16s;
}

.hotDealCard:nth-child(4) {
  animation-delay: .24s;
}

.hotDealCard:hover {
  border-color: rgba(245, 178, 50, .58);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 18px 30px rgba(0, 0, 0, .22);
  transform: translateY(-4px);
}

.hotDealImage {
  position: relative;
  display: flex;
  min-height: 118px;
  align-items: start;
  justify-content: space-between;
  padding: 10px;
  background: linear-gradient(135deg, #22334d, #101820);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.hotDealImage::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .18) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: dealSweep 4.8s ease-in-out infinite;
}

.hotDealImage > * {
  position: relative;
  z-index: 1;
}

.hotDealImage span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #101820;
  background: var(--accent);
  font-size: 12px;
  font-weight: 950;
  animation: dealBadgePulse 2.4s ease-in-out infinite;
}

.hotDealImage b {
  display: grid;
  min-width: 54px;
  min-height: 54px;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: #ef4444;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(239, 68, 68, .28);
  animation: dealDiscountPop 1.8s ease-in-out infinite;
}

.hotDealBody {
  display: grid;
  gap: 8px;
  align-content: end;
  padding: 12px;
}

.hotDealBody strong {
  font-size: 17px;
}

.hotDealBody p {
  min-height: 34px;
  margin: 0;
  color: #c9d6e2;
  font-size: 13px;
  font-weight: 800;
}

.hotDealBody small {
  color: #f8d87c;
  font-size: 12px;
  font-weight: 900;
}

.hotDealPrice {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hotDealPrice span {
  color: var(--accent);
  font-size: 20px;
  font-weight: 950;
}

.hotDealPrice del {
  color: #95a3b2;
  font-weight: 800;
}

.hotDealBody button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #101820;
  background: var(--accent);
  cursor: pointer;
  font-weight: 950;
  transition: transform .18s ease, filter .18s ease;
}

.hotDealBody button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@keyframes dealGlow {
  0%, 100% {
    background-position: 0% 50%, center;
  }
  50% {
    background-position: 100% 50%, center;
  }
}

@keyframes dealRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dealSweep {
  0%, 46% {
    transform: translateX(-120%);
  }
  72%, 100% {
    transform: translateX(120%);
  }
}

@keyframes dealBadgePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 178, 50, .28);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(245, 178, 50, 0);
  }
}

@keyframes dealDiscountPop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotDealsSection,
  .hotDealCard,
  .hotDealImage::after,
  .hotDealImage span,
  .hotDealImage b {
    animation: none;
  }
}

.preorderSection {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 28px;
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.preorderSection h2,
.preorderSection p {
  margin: 0;
}

.preorderSection p {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

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

.preorderForm input,
.preorderForm select,
.preorderForm textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
}

.preorderForm textarea {
  grid-column: 1 / -1;
  min-height: 82px;
  padding-top: 10px;
  resize: vertical;
}

.preorderForm button,
.preorderForm a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.statsBand div {
  padding: 20px;
  border-right: 1px solid var(--line);
}

.statsBand div:last-child {
  border-right: 0;
}

.statsBand strong,
.statsBand span {
  display: block;
}

.statsBand strong {
  font-size: 26px;
}

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

.catalogShell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 64px;
}

.filters {
  align-self: start;
  position: sticky;
  top: 86px;
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.filterHead,
.catalogToolbar,
.priceRow,
.cartHead,
.cartTotal,
.quantityRow {
  justify-content: space-between;
  gap: 12px;
}

.filterHead h2,
.catalogToolbar h2,
.branches h2,
.cartHead h2 {
  margin: 0;
}

.filterHead button {
  padding: 0 12px;
  color: var(--navy);
  background: #fff4d2;
  font-weight: 800;
}

.filters label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.filters select,
.filters input[type="range"],
.checkout input,
.checkout select,
.checkout textarea,
.catalogToolbar select {
  width: 100%;
}

.filters select,
.checkout input,
.checkout select,
.checkout textarea,
.catalogToolbar select {
  min-height: 42px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
}

.checkRow {
  grid-template-columns: 20px 1fr;
  align-items: center;
  color: var(--ink);
}

.branches {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.branchCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
  padding: 10px;
  color: var(--navy);
  background: #eef5ff;
  border-radius: 8px;
  font-weight: 800;
}

.branchCard strong {
  grid-column: 1 / -1;
}

.branchPhone {
  color: var(--navy);
}

.branchMap {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #bfd7ff;
  border-radius: 8px;
  background: white;
}

.catalog {
  min-width: 0;
}

.catalogToolbar {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
}

.catalogToolbar p {
  margin: 4px 0 0;
  color: var(--muted);
}

.catalogToolbar select {
  max-width: 210px;
}

.chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.modelChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.chip.active {
  color: #101820;
  border-color: var(--accent);
  background: var(--accent);
}

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

.product {
  display: grid;
  min-height: 286px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.product:hover {
  border-color: #f0c14b;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
  transform: translateY(-2px);
}

.partCode {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  color: white;
  background: linear-gradient(135deg, var(--navy), #17437d);
  background-position: center;
  background-size: cover;
}

.categoryVisual {
  position: relative;
  min-height: 156px;
  isolation: isolate;
}

.categoryVisual::before {
  position: absolute;
  inset: 14px;
  z-index: -1;
  content: "";
  opacity: 0.22;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.categoryVisual.brakes::before {
  background-image: radial-gradient(circle at 35% 50%, #f3bd35 0 10%, transparent 11%), linear-gradient(135deg, transparent 35%, #ffffff 36% 46%, transparent 47%), linear-gradient(45deg, transparent 52%, #ffffff 53% 61%, transparent 62%);
}

.categoryVisual.filters::before {
  background-image: repeating-linear-gradient(90deg, #ffffff 0 6px, transparent 6px 12px), radial-gradient(circle, #f3bd35 0 27%, transparent 28%);
}

.categoryVisual.belts::before {
  border: 10px solid #ffffff;
  border-radius: 48%;
  transform: rotate(-8deg);
}

.categoryVisual.fluids::before {
  background-image: linear-gradient(90deg, transparent 25%, #ffffff 26% 63%, transparent 64%), linear-gradient(transparent 18%, #f3bd35 19% 38%, transparent 39%);
  border-radius: 12px;
}

.categoryVisual.ignition::before {
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, #ffffff 19px 27px, transparent 28px 42px);
}

.categoryVisual.fuel::before,
.categoryVisual.suspension::before,
.categoryVisual.general::before {
  background-image: radial-gradient(circle, transparent 0 28%, #ffffff 29% 39%, transparent 40%), linear-gradient(90deg, transparent 15%, #f3bd35 16% 28%, transparent 29%);
}

.partCode.hasImage {
  min-height: 156px;
  align-items: flex-end;
}

.partCode.hasImage::before {
  display: none;
}

.partCode.representativeImage {
  background-color: #e9edf0;
  background-position: center;
  background-size: cover;
}

.partCode strong {
  position: relative;
  z-index: 1;
  max-width: 60%;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.photoNote {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  color: white;
  background: rgba(7, 29, 61, 0.86);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 850;
}

.badge {
  padding: 5px 8px;
  color: white;
  background: var(--red);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.productBody {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.meta {
  flex-wrap: wrap;
  gap: 6px;
}

.meta span {
  padding: 5px 8px;
  color: var(--muted);
  background: var(--soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.product h3 {
  min-height: 62px;
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.stock {
  color: var(--green);
  font-weight: 900;
}

.soldOutText {
  color: var(--red);
}

.price {
  color: var(--red);
  font-size: 20px;
  font-weight: 950;
}

.price small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.price del {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.product button {
  padding: 0 12px;
  font-weight: 900;
  white-space: nowrap;
}

.loadMore {
  display: block;
  width: min(280px, 100%);
  margin: 24px auto 0;
  color: var(--accent-dark);
  border: 1px solid #e4bec1;
  background: #fff;
  font-weight: 900;
}

.cartDrawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  justify-content: flex-end;
  background: rgba(11, 13, 14, 0.45);
}

.variantDrawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 14, 28, 0.58);
}

.variantDrawer.open {
  display: flex;
}

.variantPanel {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: hidden;
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.variantHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  color: white;
  background: var(--navy);
}

.variantHead h2 {
  margin: 4px 0 0;
}

.variantHead span {
  color: #f7d67a;
  font-weight: 800;
}

.variantHead .iconButton {
  width: 40px;
  color: var(--navy);
  background: white;
  font-size: 24px;
}

.variantList {
  display: grid;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.variantRow {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.variantRow strong,
.variantRow span {
  display: block;
}

.variantRow strong {
  color: var(--navy);
  font-size: 18px;
}

.variantRow span:not(.price) {
  margin-top: 4px;
  color: var(--muted);
}

.variantGenuine {
  color: var(--green) !important;
  font-weight: 900;
}

.variantBundle {
  color: var(--navy) !important;
  font-weight: 900;
}

.variantBuy {
  display: flex;
  gap: 14px;
  align-items: center;
}

.variantBuy button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  color: #101820;
  background: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.variantBuy button:disabled {
  color: #6b7280;
  background: #d8dde2;
  cursor: not-allowed;
}

.cartDrawer.open {
  display: flex;
}

.cartPanel {
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: white;
}

.cartHead,
.promoBox,
.cartTotal,
.checkout {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.cartHead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}

.cartHead .iconButton {
  width: 40px;
  background: var(--soft);
  font-size: 24px;
}

.cartItems {
  overflow: visible;
  padding: 12px 16px;
}

.cartLine {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.cartLine h3 {
  margin: 0;
  font-size: 15px;
}

.promoBox {
  display: grid;
  gap: 8px;
  background: #fbfcfd;
}

.promoBox label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
}

.promoEntry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.promoEntry input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-transform: uppercase;
}

.promoEntry button {
  min-height: 42px;
  padding: 0 14px;
  color: var(--navy);
  border: 0;
  background: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 950;
}

.promoBox p {
  min-height: 18px;
  margin: 0;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
}

.quantityRow button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  cursor: pointer;
}

.cartTotal {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cartTotal > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deliveryFeeRow {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.deliveryFeeRow.mutedFee {
  color: var(--muted);
}

.promoDiscountRow {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.cartFinal {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}

.checkout {
  display: grid;
  gap: 10px;
  border-bottom: 0;
}

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

.checkoutVehicleGrid .hidden {
  display: none;
}

.checkout textarea {
  min-height: 70px;
  padding-top: 10px;
  resize: vertical;
}

.paymentGrid {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.paymentGrid label {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.paymentGrid label:last-child {
  border-bottom: 0;
}

.paymentGrid input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.paymentIcon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.paymentGrid label b {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #c8cdd2;
  border-radius: 999px;
}

.paymentGrid label:has(input:checked) {
  background: #f7fbff;
}

.paymentGrid label:has(input:checked) b {
  border: 6px solid #111827;
}

.paymentDetails {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.paymentDetails h3,
.paymentDetails p {
  margin: 0;
}

.paymentDetails h3 {
  color: var(--navy);
  font-size: 16px;
}

.paymentDetails p,
.transferPanel span {
  color: var(--muted);
  font-size: 13px;
}

.paymentDetails small {
  display: block;
  padding-top: 8px;
  color: #0e5f97;
  font-size: 12px;
  font-weight: 900;
}

.paymentAction,
.paymentUnavailable {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 950;
}

.paymentAction {
  color: var(--navy);
  background: var(--accent);
}

.paymentUnavailable {
  color: var(--muted);
  background: #e7eaee;
}

.transferPanel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.paymentQr {
  width: 96px;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

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

.transferSafety input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}

.proofUpload {
  display: grid;
  gap: 6px;
  font-weight: 900;
}

.proofUpload input {
  min-height: 42px;
  padding: 9px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: white;
}

.proofStatus a {
  color: var(--green);
  font-weight: 900;
}

.submitOrder {
  color: white;
  background: var(--navy);
}

.orderMessage {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.orderMessage.orderError {
  color: #b42318;
}

.orderMessage.orderSuccess {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #b7efc5;
  border-radius: 8px;
  color: #14532d;
  background: #effdf4;
  box-shadow: 0 12px 30px rgba(20, 116, 77, .14);
}

.orderSuccessIcon {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #16a34a;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .28);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.orderMessage.orderSuccess strong,
.orderMessage.orderSuccess small {
  display: block;
}

.orderMessage.orderSuccess strong {
  color: #14532d;
  font-size: 19px;
  line-height: 1.2;
}

.orderMessage.orderSuccess small {
  margin-top: 3px;
  color: #166534;
  font-size: 13px;
}

.orderConfirmWhatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: 8px;
  color: white;
  background: #128c4a;
  font-weight: 950;
}

.checkout button,
.whatsapp,
.emailOrder {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 900;
}

.emailOrder {
  color: #101820;
  background: var(--accent);
}

.whatsapp {
  color: white;
  background: #178c55;
}

.floatingWhatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: white;
  background: #178c55;
  box-shadow: 0 14px 32px rgba(23, 140, 85, .32);
  font-weight: 950;
}

.floatingWhatsapp::before {
  content: "☎";
  font-size: 18px;
}

.rtl .floatingWhatsapp {
  right: auto;
  left: 18px;
}

.empty {
  padding: 34px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: white;
}

.empty a {
  display: inline-flex;
  margin-inline-start: 8px;
  color: var(--accent-dark);
  font-weight: 900;
}

.hidden {
  display: none !important;
}

.adminBody {
  background: #f3f4f2;
}

.adminMain {
  width: min(1220px, calc(100% - 32px));
  margin: 32px auto 64px;
}

.loginPanel {
  width: min(430px, 100%);
  margin: 70px auto;
  padding: 24px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.loginPanel h1,
.adminToolbar h1,
.editorPanel h2 {
  margin: 0 0 16px;
}

.editorHead,
.editorActions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.editorHead h2 {
  margin: 0;
}

.editorHead button {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  color: var(--navy);
  border: 1px solid var(--line);
  background: white;
}

.editorActions button {
  min-width: 0;
}

.editorActions #deleteProduct {
  background: #6e7377;
}

.editorActions #deleteProduct:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.loginPanel form,
.editorPanel {
  display: grid;
  gap: 12px;
}

.loginPanel input,
.loginPanel button,
.adminToolbar input,
.adminProductFilters select,
.adminProductFilters button,
.editorPanel input,
.editorPanel select,
.editorPanel textarea,
.editorPanel button {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.loginPanel input,
.adminToolbar input,
.adminProductFilters select,
.editorPanel input,
.editorPanel select,
.editorPanel textarea {
  border: 1px solid var(--line);
  padding: 0 12px;
  background: white;
}

.editorPanel textarea {
  min-height: 78px;
  padding-top: 10px;
  resize: vertical;
}

.loginPanel button,
.editorPanel button {
  border: 0;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font-weight: 900;
}

.loginPanel p,
.editorPanel p {
  min-height: 20px;
  margin: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.adminPanel {
  display: grid;
  gap: 18px;
}

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

.adminTabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.adminTabs button.active {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.adminToolbar {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(520px, 1fr);
  gap: 16px;
  align-items: end;
}

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

.adminProductTools {
  display: grid;
  gap: 10px;
}

.adminProductFilters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
  gap: 8px;
}

.adminProductFilters button {
  width: auto;
  min-width: 82px;
  padding: 0 14px;
  color: var(--navy);
  border: 1px solid var(--line);
  background: #f8fafc;
  cursor: pointer;
  font-weight: 900;
}

.adminGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.adminList {
  display: grid;
  max-height: calc(100vh - 190px);
  overflow: auto;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
}

.adminRow {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  text-align: left;
  cursor: pointer;
}

.adminRow.active {
  background: #fff3f4;
  box-shadow: inset 4px 0 0 var(--accent);
}

.adminRow strong {
  line-height: 1.35;
}

.adminRow span,
.adminRow em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.editorPanel {
  position: sticky;
  top: 86px;
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.settingsPanel {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.builderPanel,
.bundlePanel {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.catalogSetupPanel {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.catalogSetupPanel > p,
.catalogSetupPanel > div#catalogSetupMessage {
  min-height: 20px;
  margin: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.catalogSetupPanel .builderHead > button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font-weight: 900;
}

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

.setupCard {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.setupCard h2 {
  margin: 0;
}

.inlineAdd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.inlineAdd.two {
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr) auto;
}

.inlineAdd input,
.inlineAdd select {
  min-height: 42px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
  font: inherit;
}

.inlineAdd button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--navy);
  cursor: pointer;
  font-weight: 900;
}

.setupList {
  display: flex;
  max-height: 360px;
  overflow: auto;
  flex-wrap: wrap;
  gap: 8px;
}

.setupToken {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-weight: 900;
}

.setupToken small {
  color: var(--muted);
  font-size: 11px;
}

.setupToken .removeSetupToken {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: #6e7377;
  cursor: pointer;
  font-weight: 900;
}

.setupToken .renameSetupToken {
  width: auto;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(14, 65, 127, .18);
  border-radius: 999px;
  color: var(--navy);
  background: #eef5ff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.catalogRenameForm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(14, 65, 127, .18);
  border-radius: 8px;
  background: #f5f9ff;
}

.catalogRenameForm input {
  min-height: 38px;
  min-width: min(260px, 100%);
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}

.catalogRenameForm button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--navy);
  color: white;
  cursor: pointer;
  font-weight: 900;
}

.catalogRenameForm button[data-cancel-catalog-rename] {
  background: #6e7377;
}

.setupModelGroup {
  display: grid;
  width: 100%;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.setupModelGroup > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.builderHead,
.builderSubhead,
.modeSwitch,
.variantPickerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.builderHead h1,
.builderHead p,
.builderSection h2,
.builderSubhead h2 {
  margin: 0;
}

.builderHead p,
.variantPickerHead span,
#builderMessage {
  color: var(--muted);
  font-weight: 800;
}

.modeSwitch {
  justify-content: flex-end;
}

.modeSwitch button,
.builderSubhead button,
.builderPanel > button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.modeSwitch button.active,
.builderPanel > button {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.builderSection {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.builderGrid,
.builderRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.targetPicker {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
}

.builderGrid .wide {
  grid-column: 1 / -1;
}

.builderPanel label,
.targetPicker > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.builderPanel input,
.builderPanel select,
.bundlePanel input,
.bundlePanel select,
.bundlePanel textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
}

.bundlePanel textarea {
  min-height: 86px;
  padding-top: 10px;
  resize: vertical;
}

.bundlePanel > p {
  min-height: 20px;
  margin: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.bundlePanel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.bundlePanel .builderHead > button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: #101820;
  background: var(--accent);
  cursor: pointer;
  font-weight: 900;
}

.bundleGrid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
}

.bundleSourceList,
.selectedBundleParts {
  display: grid;
  gap: 8px;
}

.bundleSourceList {
  max-height: 520px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.bundleSourceList p,
.selectedBundleParts p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.bundleSourceRow {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  cursor: pointer;
}

.bundleSourceRow input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  accent-color: var(--accent);
}

.bundleSourceRow span,
.bundleSourceRow strong,
.bundleSourceRow small {
  display: block;
}

.bundleSourceRow strong {
  color: var(--ink);
}

.bundleSourceRow small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.selectedBundleParts {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: white;
}

.selectedBundleHead,
.selectedBundleLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.selectedBundleHead {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.selectedBundleHead span {
  color: var(--accent-dark);
  font-weight: 900;
}

.selectedBundleLine {
  padding: 8px 0;
}

.selectedBundleLine + .selectedBundleLine {
  border-top: 1px solid var(--line);
}

.selectedBundleLine span {
  color: var(--ink);
  font-weight: 900;
}

.selectedBundleLine button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: #6e7377;
  cursor: pointer;
  font-weight: 900;
}

.variantPicker {
  display: grid;
  gap: 8px;
}

.choiceGrid {
  display: grid;
  align-content: start;
  max-height: 230px;
  min-height: 104px;
  overflow: auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.targetPicker .choiceGrid {
  gap: 6px;
  padding: 8px;
}

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

.choicePill {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  font-weight: 900;
}

.choicePill input {
  min-height: 18px;
}

.targetPicker .choicePill {
  position: relative;
  display: block;
  min-height: 30px;
  padding: 7px 9px;
  border-color: #d8e0ea;
  background: #f8fafc;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.targetPicker .choicePill input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.targetPicker .choicePill span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.targetPicker .choicePill.selected,
.targetPicker .choicePill:has(input:checked) {
  border-color: #81bdf4;
  background: #dff0ff;
  color: #0e417f;
  box-shadow: inset 0 0 0 1px rgba(38, 125, 208, .16);
}

.targetPicker > label {
  font-size: 12px;
}

.modelChoiceGroup {
  display: grid;
  gap: 6px;
}

.modelChoiceGroup + .modelChoiceGroup {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.modelChoiceGroup > strong {
  color: var(--accent-dark);
  font-size: 11px;
}

.modelChoiceGroup > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.variantOption {
  grid-template-columns: 22px minmax(0, 1fr) 120px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.variantOption span {
  color: var(--ink);
}

.builderRows {
  display: grid;
  gap: 10px;
}

.builderRow {
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.builderCardTitle {
  display: grid;
  grid-column: 1 / -1;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft);
}

.builderCardTitle strong {
  color: var(--ink);
}

.builderCardTitle span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.builderRow button {
  min-height: 42px;
  border: 0;
  color: white;
  background: #6e7377;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.settingsPanel h1,
.settingsPanel h2 {
  margin: 0;
}

.paymentSettings,
.shippingSettings,
.promoManager,
.hotDealManager,
.adminAlerts,
.adminSales {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.paymentSettings > div:first-child,
.shippingSettings > div:first-child,
.promoManager > div:first-child,
.hotDealManager > div:first-child {
  display: grid;
  gap: 4px;
}

.paymentSettings p,
.shippingSettings p,
.promoManager p,
.hotDealManager p {
  margin: 0;
  color: var(--muted);
}

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

.paymentSettingsGrid .wide {
  grid-column: 1 / -1;
}

.shippingSettings > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 850;
}

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

.shippingGovernorateRow {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-weight: 900;
}

.shippingGovernorateRow small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.salesPanel {
  display: grid;
  gap: 16px;
}

.productAuditPanel {
  margin-top: -4px;
}

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

.insightCard {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.insightCard.warn {
  border-color: #f4b13d;
  background: #fff9eb;
}

.insightCard.wide {
  grid-column: span 2;
}

.insightCard strong {
  color: var(--navy);
  font-size: 22px;
  font-weight: 950;
}

.insightCard span,
.insightCard small {
  color: var(--muted);
  font-weight: 850;
}

.notificationList,
.ordersList {
  display: grid;
  gap: 10px;
}

.notificationCard,
.orderCard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.notificationCard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.notificationCard.read {
  opacity: .62;
}

.notificationCard strong,
.orderCard strong {
  color: var(--navy);
}

.notificationCard span,
.notificationCard small,
.orderCard span,
.orderCard small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

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

.notificationActions button,
.orderCard select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #f8fafc;
  font-weight: 900;
}

.orderCardHead,
.orderMeta {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
}

.orderLines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.orderActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.orderActions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  background: #f8fafc;
  cursor: pointer;
  font-weight: 900;
}

.orderLines span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: var(--navy);
  font-size: 12px;
}

.proofLink {
  color: #0e5f97;
  font-weight: 950;
}

.customerMessagePreview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.customerMessagePreview summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 950;
}

.customerMessagePreview pre {
  margin: 0;
  padding: 0 12px 12px;
  white-space: pre-wrap;
  color: #334155;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.promoAdd {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 130px 110px 120px 110px auto;
  gap: 8px;
  align-items: center;
}

.promoList {
  display: grid;
  gap: 8px;
}

.hotDealAdd {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) minmax(140px, 1fr) 120px 100px minmax(150px, 1fr) 90px auto;
  gap: 8px;
  align-items: center;
}

.hotDealList {
  display: grid;
  gap: 8px;
}

.hotDealRow {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 1fr) 115px 96px minmax(130px, 1fr) 90px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.hotDealRow strong {
  color: var(--navy);
  font-size: 13px;
}

.promoRow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 125px 96px 116px 96px minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.promoRow span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.excelSourcePanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.excelSourcePanel > div {
  display: grid;
  gap: 4px;
}

.excelSourcePanel .wide,
.excelSourcePanel #excelSourceStatus {
  grid-column: 1 / -1;
}

.excelSourcePanel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

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

.excelSourceActions button,
.excelSourceActions .uploadButton {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 8px;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.excelSourceActions .uploadButton input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settingsPanel .errorText {
  color: #b42318;
}

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

.settingsGrid label,
.paymentSettingsGrid label,
.branchEdit {
  display: grid;
  gap: 6px;
}

.settingsGrid .wide {
  grid-column: 1 / -1;
}

.settingsPanel input,
.settingsPanel select,
.settingsPanel textarea,
.settingsPanel button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.settingsPanel input,
.settingsPanel select,
.settingsPanel textarea {
  border: 1px solid var(--line);
  padding: 0 12px;
  min-width: 0;
}

.settingsPanel textarea {
  min-height: 80px;
  padding-top: 10px;
  resize: vertical;
}

.settingsPanel button {
  border: 0;
  color: white;
  background: var(--accent);
  cursor: pointer;
  font-weight: 900;
}

.branchEditor {
  display: grid;
  gap: 10px;
}

.branchEdit {
  grid-template-columns: 1fr 160px minmax(220px, 1fr) 90px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.branchEdit button {
  background: #6e7377;
}

.settingsPanel p {
  min-height: 20px;
  margin: 0;
  color: var(--accent-dark);
  font-weight: 800;
}

.editorPanel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.editorPanel input:disabled {
  color: var(--muted);
  background: var(--soft);
}

.editorPreview {
  display: grid;
  min-height: 120px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--line);
  background: var(--soft);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.editorPreview img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.editorPreview span {
  padding: 12px;
}

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

  .topActions {
    justify-content: space-between;
  }

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

  .preorderSection,
  .catalogSetupGrid {
    grid-template-columns: 1fr;
  }

  .hotDealCard {
    flex-basis: calc((100% - 12px) / 2);
  }

  .filters {
    position: static;
  }

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

  .brandGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminToolbar,
  .adminGrid,
  .adminProductFilters,
  .settingsGrid,
  .excelSourcePanel,
  .paymentSettingsGrid,
  .governorateShippingList,
  .promoAdd,
  .promoRow,
  .hotDealAdd,
  .hotDealRow,
  .notificationCard,
  .orderCardHead,
  .orderMeta,
  .builderGrid,
  .bundleGrid,
  .builderRow,
  .targetPicker,
  .inlineAdd,
  .inlineAdd.two,
	  .branchEdit {
	    grid-template-columns: 1fr;
	  }

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

  .insightCard.wide {
    grid-column: auto;
  }

	  .editorPanel {
    position: static;
  }
}

@media (max-width: 620px) {
  .searchBar {
    height: auto;
    flex-wrap: wrap;
  }

  .searchBar select,
  .searchBar input {
    width: calc(100% - 48px);
    height: 44px;
  }

  .searchBar select {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .statsBand,
  .products,
  .brandGrid,
  .promiseStrip,
  .paymentGrid,
  .transferSafety,
  .preorderForm {
    grid-template-columns: 1fr;
  }

  .hotDealsGrid {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .hotDealArrow {
    width: 38px;
    font-size: 30px;
  }

  .hotDealCard {
    flex-basis: 100%;
  }

  .marketNav span {
    display: none;
  }

  .sectionTitle {
    align-items: start;
    flex-direction: column;
  }

  .variantRow,
  .variantBuy {
    align-items: stretch;
    flex-direction: column;
  }

  .statsBand div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .catalogToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .builderHead,
  .builderSubhead,
  .variantPickerHead,
  .selectedBundleHead,
  .selectedBundleLine {
    align-items: stretch;
    flex-direction: column;
  }

  .variantOption {
    grid-template-columns: 22px 1fr;
  }

  .variantOption .priceOverride {
    grid-column: 1 / -1;
  }

  .catalogToolbar select {
    max-width: none;
  }
}