:root {
  color-scheme: light;
  --black: #070707;
  --ink: #161616;
  --muted: #696969;
  --line: #dddddd;
  --soft-line: #eeeeee;
  --page: #f4f4f4;
  --panel: #ffffff;
  --red: #d71920;
  --red-dark: #a90f15;
  --red-soft: #fff0f1;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --black: #050505;
  --ink: #f4f4f4;
  --muted: #b8b8b8;
  --line: #343434;
  --soft-line: #282828;
  --page: #101010;
  --panel: #181818;
  --red: #ef2330;
  --red-dark: #ff515a;
  --red-soft: #2b1113;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
}

body,
.panel,
.product,
.brand-tile,
input,
select,
textarea,
.tab,
.account-pill,
.theme-toggle {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

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

button {
  border: 0;
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

main {
  min-height: 100vh;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: 0;
}

h3 {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.eyebrow {
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
  line-height: 1.45;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-screen,
.create-screen {
  display: grid;
  min-height: 100vh;
  padding: 24px;
}

.login-screen {
  place-items: center;
}

.login-card {
  width: min(430px, 100%);
  padding: 28px;
  border-top: 6px solid var(--red);
}

.login-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: 8px;
}

.create-screen {
  align-items: center;
}

.create-card {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.screen-heading,
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.screen-heading {
  margin-bottom: 22px;
}

.back-button,
.ghost {
  min-height: 42px;
  border-radius: 6px;
  padding: 0 14px;
  background: #151515;
  color: #fff;
  font-weight: 900;
}

.ghost {
  width: 100%;
  margin-top: 12px;
  background: #eeeeee;
  color: var(--black);
}

.brand-lockup img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
}

.form-stack,
.account-form {
  display: grid;
  gap: 14px;
}

.account-form section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--soft-line);
}

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

.phone-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr;
  gap: 12px;
}

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

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.91rem;
  font-weight: 850;
}

label span {
  color: var(--red);
}

input,
select,
textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.13);
  outline: none;
}

textarea {
  line-height: 1.45;
  resize: vertical;
}

.delivery-form input[readonly],
.delivery-form select:disabled {
  background: #f7f7f7;
  color: var(--ink);
  opacity: 1;
}

.primary,
.secondary,
.button-link,
.product button,
.order-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 950;
  text-decoration: none;
}

.primary,
.button-link.primary,
.product button,
.order-actions button {
  background: var(--red);
  color: #fff;
}

.primary:hover,
.button-link.primary:hover,
.product button:hover,
.order-actions button:hover {
  background: var(--red-dark);
}

.secondary {
  background: #161616;
  color: #fff;
}

.app-screen {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 40px);
  background: var(--black);
  color: #fff;
  border-bottom: 4px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .eyebrow {
  color: #ff4a50;
}

nav {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 0;
  border-top: 1px solid #303030;
  background: transparent;
}

.topbar .account-pill { grid-column: 2; grid-row: 1; justify-self: end; }

.main-nav-links,
.nav-utility-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 14px;
  border-radius: 6px;
  color: #d9d9d9;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.nav-dropdown summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] summary,
.nav-dropdown summary:hover { background: #252525; color: #fff; }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(300px, calc(100vw - 32px));
  max-height: 360px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.nav-dropdown-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 750;
}

.nav-dropdown-panel button:hover,
.nav-dropdown-panel button.is-active { background: var(--red-soft); color: var(--red-dark); }
.nav-dropdown-panel small { color: var(--muted); }

.mobile-menu-toggle { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 15px;
  border-radius: 6px;
  background: transparent;
  color: #d9d9d9;
  font-weight: 900;
}

.icon-tab {
  justify-content: center;
  min-width: 48px;
  padding: 0 12px;
  position: relative;
}

.tab svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  flex: 0 0 auto;
}

.tab.is-active {
  background: var(--red);
  color: #fff;
}

.cart-bubble {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--red-dark);
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 950;
}

.icon-tab .cart-bubble {
  position: absolute;
  right: 4px;
  top: 3px;
}

.account-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 5px 5px 5px 14px;
  border: 1px solid #383838;
  border-radius: 8px;
  color: #fff;
  font-weight: 850;
}

.account-pill button {
  min-height: 32px;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: var(--black);
  font-weight: 900;
}

.account-pill .theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0;
  background: #fff;
  color: #101010;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.theme-toggle .moon-icon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle {
  border-color: #4a4a4a;
  background: #151515;
  color: #fff;
}

:root[data-theme="dark"] .theme-toggle .sun-icon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .moon-icon {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.view {
  display: none;
  padding: 24px clamp(16px, 4vw, 40px) 48px;
}

.view.is-active {
  display: block;
}

.home-shell { width: min(1400px, 100%); margin: 0 auto; }

.home-hero {
  display: flex;
  align-items: center;
  min-height: 490px;
  max-height: 610px;
  height: calc(100vh - 250px);
  padding: clamp(28px, 5%, 76px);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.72) 38%, rgba(8, 9, 10, 0.06) 78%), url("/assets/portal-hero.png") center / cover no-repeat;
  color: #fff;
}

.home-hero-content { display: grid; justify-items: start; gap: 18px; max-width: 590px; }
.hero-kicker { color: #ff5c62; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.home-hero h2 { font-size: 3.8rem; line-height: 1.02; font-weight: 900; }
.home-hero-content > p:not(.hero-kicker) { max-width: 540px; font-size: 1.08rem; line-height: 1.55; color: #f0f0f0; }
.home-hero small { color: #cecece; font-size: 0.78rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions button { min-height: 44px; padding: 0 20px; border-radius: 4px; font-weight: 850; }
.hero-secondary { border: 1px solid #8b8b8b; background: rgba(0, 0, 0, 0.35); color: #fff; }
.hero-secondary:hover { background: #fff; color: #151515; }

.home-section { padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.home-section .section-heading { margin-bottom: 20px; }
.goal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.goal-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 166px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}
.goal-tile:hover,
.goal-tile.is-active { border-color: var(--red); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); }
.goal-index { color: var(--red); font-size: 0.76rem; font-weight: 900; }
.goal-tile strong { margin-top: 19px; font-size: 1.14rem; line-height: 1.25; }
.goal-count { display: flex; justify-content: space-between; width: 100%; margin-top: auto; color: var(--muted); font-size: 0.8rem; }
.home-brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-brand { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); text-align: left; }
.home-brand:hover { border-color: var(--red); }
.home-brand-image { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; background: #f1f1f1; }
.home-brand-image img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.home-brand-image strong { color: var(--red); }
.home-brand > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.home-brand > span:nth-child(2) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.home-brand small { color: var(--muted); }
.home-brand-arrow { margin-left: auto; color: var(--red); }
.home-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 28px 24px; background: var(--black); color: #fff; }
.home-process div { display: flex; align-items: center; gap: 12px; }
.home-process strong { color: #ff5c62; }
.manuals-page { width: min(1320px, 100%); margin: 0 auto; padding: 32px clamp(16px, 3vw, 36px) 48px; }
.manuals-heading { margin-bottom: 24px; }
.manuals-heading .muted { margin-top: 7px; }
.manuals-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 28px; align-items: start; }
.manuals-library { display: grid; grid-column: auto; grid-row: auto; gap: 10px; padding: 0; border: 0; }
.manual-volume { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 116px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); text-align: left; }
.manual-volume:hover, .manual-volume.is-active { border-color: var(--red); }
.manual-volume.is-active { box-shadow: inset 3px 0 var(--red); }
.manual-volume img { width: 67px; height: 94px; flex: 0 0 67px; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--soft-line); }
.manual-volume span { display: grid; gap: 6px; min-width: 0; }
.manual-volume small { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.manual-volume strong { font-size: 1rem; line-height: 1.25; }
.manuals-reader { min-width: 0; }
.manuals-reader-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 62px; margin-bottom: 15px; }
.manuals-reader-heading h3 { font-size: 1.3rem; }
.manuals-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.manuals-actions a { min-height: 42px; padding: 0 15px; white-space: nowrap; }
.manual-download { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-weight: 800; text-decoration: none; }
.manual-download:hover { border-color: var(--red); color: var(--red); }
.manuals-page-controls { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.manuals-page-controls button { display: grid; place-items: center; min-width: 38px; min-height: 38px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); font-weight: 800; }
.manuals-page-controls button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.manuals-page-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.manuals-page-controls input { width: 56px; min-height: 38px; padding: 5px; text-align: center; }
.manuals-page-controls .manual-contents { display: inline-flex; padding: 0 12px; margin-left: auto; }
.manuals-page-image { width: 100%; max-height: min(52vh, 520px); overflow: auto; border: 1px solid var(--line); border-radius: 5px; background: #fff; text-align: center; }
.manuals-page-image img { display: block; width: 100%; max-width: 940px; height: auto; margin: 0 auto; }
@media (max-width: 800px) {
  .manuals-layout { grid-template-columns: 1fr; gap: 22px; }
  .manuals-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-volume { min-height: 104px; }
  .manual-volume img { width: 54px; height: 76px; flex-basis: 54px; }
}
@media (max-width: 560px) {
  .manuals-page { padding-top: 24px; }
  .manuals-heading { display: none; }
  .manuals-library { gap: 8px; }
  .manual-volume { min-height: 72px; gap: 0; padding: 10px; }
  .manual-volume img { display: none; }
  .manual-volume small { font-size: .68rem; }
  .manual-volume strong { font-size: .86rem; overflow-wrap: anywhere; }
  .manuals-reader-heading { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .manuals-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .manuals-actions a { width: 100%; }
  .manuals-page-controls { gap: 4px; }
  .manuals-page-controls label { gap: 3px; font-size: .75rem; }
  .manuals-page-controls input { width: 42px; }
  .manuals-page-controls .manual-contents { min-width: 70px; padding: 0 6px; margin-left: auto; font-size: .75rem; }
  .manuals-page-image { max-height: min(40vh, 340px); }
}

.order-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cart-page,
.account-page {
  width: min(880px, 100%);
  margin: 0 auto;
}

.catalog,
.checkout,
.status-panel {
  padding: 18px;
}

.catalog { padding: 0; }

.checkout {
  position: static;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.shop-lead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.shop-lead .muted {
  margin-top: 4px;
}

.brand-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.featured-section {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.slider-actions {
  display: inline-flex;
  gap: 8px;
}

.slider-actions button,
.product-pager button {
  min-height: 36px;
  border-radius: 6px;
  background: #161616;
  color: #fff;
  padding: 0 12px;
  font-size: 0.84rem;
  font-weight: 950;
}

.slider-actions button:hover,
.product-pager button:hover {
  background: var(--red);
}

.featured-slider {
  display: grid;
  grid-auto-columns: minmax(220px, 260px);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding-bottom: 6px;
}

.featured-product {
  scroll-snap-align: start;
}

.compact-heading {
  margin-bottom: 0;
}

.brand-collections {
  display: grid;
  grid-auto-columns: minmax(174px, 1fr);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.brand-tile {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.brand-tile.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.1);
}

.brand-image {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 8px;
  background: #f0f0f0;
}

.brand-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
}

.brand-image span {
  color: var(--red);
  font-weight: 950;
}

.brand-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brand-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.brand-copy small {
  color: var(--muted);
  font-weight: 850;
}

.shop-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}

.filter-menu {
  position: relative;
}

.filter-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-radius: 6px;
  padding: 0 16px;
  background: #161616;
  color: #fff;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.filter-menu[open] summary {
  background: var(--red);
}

.filter-menu summary::-webkit-details-marker {
  display: none;
}

.filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 8;
  display: grid;
  gap: 16px;
  width: min(320px, calc(100vw - 56px));
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.filter-panel section {
  display: grid;
  gap: 10px;
}

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

.check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 0.9rem;
}

.check-option input {
  width: 17px;
  min-height: 17px;
  accent-color: var(--red);
}

.text-button {
  min-height: 34px;
  border-radius: 6px;
  background: #f1f1f1;
  color: var(--ink);
  padding: 0 10px;
  font-size: 0.84rem;
  font-weight: 950;
}

.text-button.is-active {
  background: var(--red-soft);
  color: var(--red-dark);
}

.search-field {
  position: relative;
  display: block;
}

.search-field span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.search-field input {
  min-height: 42px;
  padding-left: 76px;
}

.catalog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.catalog-summary span:first-child {
  color: var(--ink);
}

.product-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 850;
}

.product-pager.bottom {
  margin: 16px 0 0;
}

.product-pager div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.product-pager button:disabled {
  background: #e5e5e5;
  color: #888;
}

.load-error-panel {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.load-error-panel button {
  justify-self: start;
  min-height: 38px;
  border-radius: 6px;
  background: var(--black);
  color: #fff;
  padding: 0 14px;
  font-weight: 950;
}

.small {
  font-size: 0.86rem;
}

.pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 900;
}

.pill {
  background: var(--red-soft);
  color: var(--red-dark);
}

.status-badge {
  background: #111;
  color: #fff;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.product {
  display: grid;
  grid-template-rows: 212px 12px minmax(178px, 1fr);
  min-height: 402px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  position: relative;
}

.product.admin-preview { grid-template-rows: 212px 12px minmax(118px, 1fr); min-height: 342px; }
.product.admin-preview .product-body { grid-template-rows: auto minmax(44px, auto) auto; }

.product-image {
  display: grid;
  place-items: center;
  height: 212px;
  min-height: 0;
  overflow: hidden;
  background: #f0f0f0;
  border-bottom: 0;
  position: relative;
  z-index: 0;
}

.product button.product-image {
  width: 100%;
  min-height: 0;
  border-radius: 0;
  padding: 0;
  background: #f0f0f0;
  cursor: zoom-in;
}

.product button.product-image:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: -4px;
}

.product-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 3px solid var(--black);
  background: #fff;
}

.product-image-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 3px solid var(--black);
  background: #fff;
}

.product-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 14px 14px 24px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.image-fallback {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 950;
  border: 5px solid var(--red);
}

.product-body {
  display: grid;
  grid-template-rows: auto minmax(44px, auto) auto 1fr;
  gap: 12px;
  padding: 16px 14px 14px;
  position: relative;
  z-index: 1;
  background: #fff;
}

.product-body h3 {
  align-self: start;
  min-height: 44px;
}

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

.product-facts span {
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f4f4f4;
  color: #252525;
  font-size: 0.82rem;
  font-weight: 900;
}

.product-facts .availability.in-stock {
  background: #ecf8ef;
  color: #17622d;
}

.product-facts .availability.out-stock {
  background: #f4f4f4;
  color: #767676;
}

.add-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: end;
  align-self: end;
}

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

.special-order-box label + label {
  display: none;
}

.special-line-action {
  display: flex;
  align-items: end;
}

.special-product-picker {
  display: grid;
  gap: 8px;
}

.special-product-results {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.special-product-option {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
}

.special-product-option span {
  font-weight: 950;
}

.special-product-option small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.special-product-option.is-selected {
  border-color: var(--red);
  box-shadow: inset 4px 0 0 var(--red);
}

.special-order-items {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.special-order-items.empty {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.special-order-item {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--soft-line);
}

.special-order-item:last-child {
  border-bottom: 0;
}

.special-order-item strong,
.special-order-item span {
  display: block;
}

.special-order-item span {
  color: var(--muted);
  font-size: 0.9rem;
}

.special-order-item button {
  min-height: 34px;
  border-radius: 6px;
  background: var(--black);
  color: #fff;
  font-weight: 950;
}

.cart-note {
  margin: 0;
  padding: 10px;
  border: 1px solid #f2c3c5;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red-dark);
  font-size: 0.86rem;
  font-weight: 900;
}

.cart-items {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.cart-items.empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
}

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft-line);
}

.cart-line strong {
  display: block;
}

.cart-line span {
  color: var(--muted);
  font-size: 0.9rem;
}

.cart-line-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  text-align: right;
}

.cart-line.system-line {
  color: var(--muted);
}

.cart-line button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f2f2f2;
  color: var(--red);
  font-weight: 950;
}

.total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid var(--black);
  font-size: 1.12rem;
}

.orders-list {
  display: grid;
  gap: 14px;
}

.account-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.account-summary {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.profile-summary {
  align-self: start;
}

.account-summary dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.account-summary dl div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft-line);
}

.account-summary dl div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.account-summary dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.account-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
}

.account-summary address {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.account-section-head,
.checkout-address-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.checkout-address-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fbfbfb;
  padding: 12px;
}

.checkout-address-head label {
  flex: 1 1 240px;
}

.saved-address-list {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.saved-address-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fbfbfb;
  padding: 12px;
}

.saved-address-card strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.saved-address-card strong span {
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red-dark);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.saved-address-card address {
  margin-top: 8px;
}

.saved-address-card address em {
  color: var(--ink);
  font-style: normal;
  font-weight: 800;
}

.address-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.address-card-actions button {
  min-height: 36px;
  border-radius: 6px;
  background: var(--black);
  color: #fff;
  padding: 0 12px;
  font-weight: 950;
}

.cart-actions {
  display: grid;
  gap: 10px;
}

.cart-actions > .primary {
  width: 100%;
}

.special-order-trigger {
  display: grid;
  gap: 3px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 9px 12px;
  text-align: left;
}

.special-order-trigger span {
  font-weight: 950;
}

.special-order-trigger small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

.delivery-note-details {
  border-top: 1px solid var(--soft-line);
  padding-top: 12px;
}

.delivery-note-details summary,
.payment-more summary {
  cursor: pointer;
  font-weight: 800;
}

.delivery-note-details summary span {
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.delivery-note-details textarea {
  width: 100%;
  margin-top: 10px;
}

.modal-shell {
  display: grid;
  gap: 14px;
}

.summary-stack {
  display: grid;
  gap: 12px;
}

.checkout-review,
.payment-view {
  display: grid;
  gap: 18px;
}

.review-section {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--soft-line);
}

.review-section .eyebrow {
  margin: 0;
}

.review-section p:not(.eyebrow) {
  line-height: 1.5;
}

.checkout-review .summary-lines li strong {
  white-space: nowrap;
}

.summary-panel {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfb;
  padding: 12px;
}

.summary-lines {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-lines li,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-lines li span {
  min-width: 0;
}

.system-summary-lines {
  border-top: 1px solid var(--soft-line);
  margin-top: 10px;
  padding-top: 10px;
}

.summary-total {
  align-items: center;
  border-top: 2px solid var(--black);
  padding-top: 12px;
  font-size: 1.08rem;
}

.summary-total.compact {
  border-top-width: 1px;
  font-size: 1rem;
}

.summary-address {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-style: normal;
  font-weight: 850;
}

.inline-add {
  justify-self: start;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 8px;
  background: #f0f0f0;
}

.admin-view-tab {
  flex: 1 1 190px;
  min-height: 40px;
  border-radius: 6px;
  background: transparent;
  color: #343434;
  font-weight: 950;
}

.admin-view-tab.is-active {
  background: var(--black);
  color: #fff;
}

.shop-settings-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.settings-accordion {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.settings-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.settings-accordion summary::-webkit-details-marker {
  display: none;
}

.settings-accordion summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  font-weight: 950;
}

.settings-accordion[open] summary::after {
  content: "-";
}

.settings-accordion summary span,
.settings-accordion summary small {
  display: block;
}

.settings-accordion summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.settings-accordion > section,
.settings-accordion > .custom-pick-panel {
  margin: 0 14px 14px;
}

.provider-settings-list {
  display: grid;
  gap: 10px;
  margin: 0 14px 14px;
}

.settings-subaccordion {
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fbfbfb;
  overflow: hidden;
}

.settings-subaccordion summary {
  min-height: 46px;
  padding: 10px 12px;
}

.settings-subaccordion summary::after {
  width: 24px;
  height: 24px;
}

.settings-subaccordion > section {
  margin: 0;
  padding: 0 12px 12px;
}

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

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

.custom-pick-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #fbfbfb;
}

.shop-settings-form[data-mode="collection"] .custom-pick-panel {
  opacity: 0.62;
}

.product-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.product-pick {
  display: grid;
  grid-template-columns: 18px 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  font-size: 0.86rem;
}

.product-pick input {
  min-height: 18px;
  width: 18px;
  accent-color: var(--red);
}

.product-pick span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 7px;
  background: #f0f0f0;
  color: var(--red);
  font-style: normal;
  font-weight: 950;
}

.product-pick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}

.product-pick em,
.product-pick small {
  grid-column: 3;
  min-width: 0;
}

.product-pick em {
  overflow: hidden;
  color: var(--ink);
  font-style: normal;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-pick small {
  color: var(--muted);
  font-weight: 800;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-account-shell {
  display: grid;
  gap: 14px;
}

.account-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.account-filter {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 950;
}

.account-filter span {
  margin-left: 6px;
  color: var(--muted);
}

.account-filter.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.account-filter.is-active span {
  color: #fff;
}

.admin-order-tools {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 10px;
  width: min(820px, 100%);
}

.admin-order-tools input {
  min-height: 38px;
}

.admin-order-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-order-filters button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-order-filters button.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.slim-action {
  margin-left: auto;
  min-height: 38px;
  border-radius: 7px;
  padding: 0 14px;
}

.admin-account-form {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.account-admin-list {
  display: grid;
  gap: 10px;
}

.account-admin-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.account-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.role-badge {
  border-radius: 999px;
  padding: 7px 10px;
  background: #ececec;
  color: #161616;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.role-badge.admin {
  background: var(--black);
  color: #fff;
}

.danger-button {
  min-height: 36px;
  border-radius: 6px;
  background: #8b1519;
  color: #fff;
  padding: 0 12px;
  font-weight: 950;
}

.system-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.system-status-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid #d6a600;
  border-radius: 8px;
  background: var(--panel);
  padding: 15px;
}

.system-status-card.online {
  border-left-color: #15a66a;
}

.system-status-card.offline {
  border-left-color: #d71920;
}

.system-status-card.error {
  border-left-color: #d6a600;
}

.system-status-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.system-status-topline span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #f2c94c;
  color: #171717;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.system-status-card.online .system-status-topline span {
  background: #15a66a;
  color: #fff;
}

.system-status-card.offline .system-status-topline span {
  background: #d71920;
  color: #fff;
}

.order-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 15px;
}

.order-card header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-order-card {
  padding: 0;
  overflow: hidden;
}

.admin-order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.admin-order-summary::-webkit-details-marker {
  display: none;
}

.admin-order-summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
}

.admin-order-card[open] .admin-order-summary {
  border-bottom: 1px solid var(--line);
}

.admin-order-card[open] .admin-order-summary::before {
  content: "-";
}

.admin-order-summary > div {
  min-width: 0;
  flex: 1;
}

.admin-order-summary strong,
.admin-order-summary p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-summary .status-badge {
  flex: 0 0 auto;
}

.admin-order-details {
  display: grid;
  gap: 10px;
  padding: 14px 15px 15px;
}

.order-card ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.order-card a {
  color: var(--red-dark);
  font-weight: 900;
}

.order-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.progress-step {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.progress-step i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--soft-line);
}

.progress-step em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-step.is-done i {
  background: #15a66a;
}

.progress-step.is-active {
  color: var(--ink);
}

.progress-step.is-active i {
  background: var(--red);
}

.payment-overview,
.payment-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payment-overview > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.payment-overview strong {
  overflow-wrap: anywhere;
}

.payment-overview-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-overview button,
.payment-copy-actions,
.payment-support-actions,
.payment-state button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.payment-overview button,
.payment-copy-actions button,
.payment-support-actions button,
.payment-state button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 12px;
  font-size: 0.85rem;
  font-weight: 800;
}

.payment-amount {
  border-top: 1px solid var(--soft-line);
  padding-top: 14px;
  font-size: 1.04rem;
}

.payment-due,
.payment-state,
.payment-bank-details {
  display: grid;
  gap: 10px;
}

.payment-due > p,
.payment-state p,
.submission-note {
  color: var(--muted);
  line-height: 1.5;
}

.payment-link-button {
  width: 100%;
}

.payment-bank-details {
  border-top: 1px solid var(--soft-line);
  padding-top: 14px;
}

.payment-state {
  border-top: 1px solid var(--soft-line);
  padding-top: 14px;
}

.payment-state button {
  justify-self: start;
}

.payment-more {
  border-top: 1px solid var(--soft-line);
  padding-top: 12px;
}

.payment-copy-actions {
  margin-top: 10px;
}

.payment-issue-note {
  font-weight: 700;
}

.special-status,
.special-review {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dcdcdc;
  border-left: 4px solid var(--red);
  border-radius: 8px;
  background: #fbfbfb;
}

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

.special-actions,
.inline-admin-form,
.counter-form,
.counter-lines {
  display: grid;
  gap: 10px;
}

.special-actions {
  margin-top: 4px;
}

.inline-admin-form,
.counter-form {
  padding-top: 10px;
  border-top: 1px solid var(--soft-line);
}

.counter-lines label {
  grid-template-columns: 1fr 90px;
  align-items: center;
}

.fulfillment-lines,
.fulfillment-allocation-row,
.fulfillment-summary,
.fulfillment-review-panel,
.payment-link-panel,
.payment-issue-panel,
.manual-tracking-panel {
  display: grid;
  gap: 10px;
}

.fulfillment-allocation-row {
  grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(110px, 0.5fr));
  align-items: end;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.fulfillment-line-details { display: grid; gap: 4px; min-width: 0; }
.fulfillment-line-details > span { color: var(--muted); font-size: 0.82rem; }
.stock-facts { color: var(--ink); line-height: 1.45; font-size: 0.81rem; font-weight: 700; }
.stock-guidance { color: #1c7152; font-size: 0.8rem; font-weight: 800; }
.stock-guidance.needs-transfer { color: #a85a00; }
.stock-check-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 0.82rem; }
.stock-check-heading button { min-height: 34px; padding: 0 12px; border-radius: 5px; }

.fulfillment-allocation-row > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.fulfillment-allocation-row label {
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
}

.fulfillment-summary {
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.fulfillment-summary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fulfillment-summary li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.fulfillment-summary small {
  color: var(--muted);
  font-weight: 850;
}

.fulfillment-review-panel,
.manual-tracking-panel {
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.fulfillment-line-list {
  display: grid;
  gap: 6px;
}

.route-chip {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e9eef5;
  color: #263244;
  font-size: 0.7rem;
  font-weight: 950;
}

.route-chip.external {
  background: #ffe7e7;
  color: #b50816;
}

.fulfillment-rule-list {
  display: grid;
  gap: 10px;
  margin: 0 14px 14px;
}

.fulfillment-rule-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.availability-toggle {
  justify-self: end;
}

.payment-link-panel {
  padding: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: var(--panel);
}

.payment-issue-panel {
  padding: 10px;
  border: 1px solid #efc163;
  border-left: 4px solid #efc163;
  border-radius: 8px;
  background: #fff8e8;
}

.payment-issue-panel > div {
  display: grid;
  gap: 3px;
}

.payment-issue-panel span,
.payment-issue-panel p {
  color: #594015;
}

.payment-issue-panel button {
  justify-self: start;
  min-height: 36px;
  border-radius: 8px;
  background: #171717;
  color: #fff;
  padding: 0 13px;
  font-weight: 950;
}

.payment-issue-form {
  display: grid;
  gap: 12px;
}

.payment-issue-form label {
  display: grid;
  gap: 6px;
}

.payment-link-panel > div {
  display: grid;
  gap: 3px;
}

.payment-link-panel span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.payment-link-panel a {
  color: var(--red);
  font-weight: 950;
  word-break: break-word;
}

.payment-link-panel label {
  display: grid;
  gap: 5px;
}

.payment-link-panel button {
  justify-self: start;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-weight: 950;
}

.manual-tracking-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

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

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

.manual-tracking-panel button {
  justify-self: start;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-weight: 950;
}

.special-actions button,
.inline-admin-form button,
.counter-form button {
  min-height: 40px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  padding: 0 14px;
  font-weight: 950;
}

:root[data-theme="dark"] .special-order-trigger {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

:root[data-theme="dark"] .special-order-trigger small {
  color: var(--muted);
}

:root[data-theme="dark"] .special-product-option {
  background: #151515;
  color: #f7f7f7;
}

:root[data-theme="dark"] .fulfillment-allocation-row,
:root[data-theme="dark"] .fulfillment-summary,
:root[data-theme="dark"] .fulfillment-review-panel,
:root[data-theme="dark"] .fulfillment-rule-row,
:root[data-theme="dark"] .payment-link-panel,
:root[data-theme="dark"] .payment-issue-panel,
:root[data-theme="dark"] .manual-tracking-panel,
:root[data-theme="dark"] .settings-subaccordion {
  background: #151515;
}

:root[data-theme="dark"] .payment-issue-panel {
  border-color: #a97719;
}

:root[data-theme="dark"] .payment-issue-panel span,
:root[data-theme="dark"] .payment-issue-panel p {
  color: #f2d59c;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--black);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: 160ms ease;
  z-index: 20;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.product-quick-view-open {
  overflow: hidden;
}

.product-quick-view {
  width: min(860px, calc(100% - 32px));
  max-width: none;
  max-height: 90vh;
  max-height: 90dvh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.product-quick-view::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.quick-view-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
}

.quick-view-close:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.quick-view-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.quick-view-image {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 350px;
  aspect-ratio: 1;
  background: var(--page);
  padding: 24px;
}

.quick-view-image img {
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
}

.quick-view-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 16px;
  padding: 56px 28px 28px;
}

.quick-view-heading h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.quick-view-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.quick-view-availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.quick-view-availability.in-stock {
  color: #17622d;
}

.quick-view-price {
  font-size: 1.65rem;
  line-height: 1.2;
}

.quick-view-purchase {
  display: grid;
  gap: 12px;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.quick-view-add-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.quick-view-add-row input {
  min-height: 44px;
}

.quick-view-feedback {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.quick-view-feedback:empty {
  display: none;
}

.quick-view-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
}

:root[data-theme="dark"] .product button.product-image {
  background: #242424;
}

:root[data-theme="dark"] .quick-view-availability.in-stock {
  color: #78d19a;
}

@media (max-width: 640px) {
  .quick-view-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-view-image {
    height: min(34vh, 280px);
    height: min(34dvh, 280px);
    min-height: 0;
    aspect-ratio: auto;
    padding: 20px 42px;
  }

  .quick-view-image img {
    min-height: 0;
    max-height: 100%;
  }

  .quick-view-details {
    gap: 12px;
    padding: 22px;
  }

  .quick-view-heading h2 {
    font-size: 1.2rem;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.54);
  padding: 20px;
}

.confirm-modal {
  width: min(440px, 100%);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.wide-modal {
  width: min(780px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
}

.terms-modal {
  border-top: 6px solid var(--red);
}

.terms-alert {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #f1adb1;
  border-radius: 8px;
  background: var(--red-soft);
}

.terms-alert strong {
  color: var(--red-dark);
  font-size: 1.02rem;
}

.terms-scroll {
  display: grid;
  gap: 14px;
  max-height: min(45vh, 390px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.terms-scroll section {
  display: grid;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-line);
}

.terms-scroll section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.terms-scroll p {
  color: var(--muted);
  line-height: 1.48;
}

.terms-confirm {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfb;
}

.confirm-modal form {
  display: grid;
  gap: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

[hidden] {
  display: none !important;
}

:root[data-theme="dark"] .ghost,
:root[data-theme="dark"] .text-button,
:root[data-theme="dark"] .cart-line button,
:root[data-theme="dark"] .admin-tabs {
  background: #242424;
}

:root[data-theme="dark"] .brand-tile,
:root[data-theme="dark"] .filter-panel,
:root[data-theme="dark"] .product,
:root[data-theme="dark"] .product-body,
:root[data-theme="dark"] .account-summary,
:root[data-theme="dark"] .order-card,
:root[data-theme="dark"] .shop-settings-form,
:root[data-theme="dark"] .admin-account-form,
:root[data-theme="dark"] .account-admin-card,
:root[data-theme="dark"] .system-status-card,
:root[data-theme="dark"] .confirm-modal,
:root[data-theme="dark"] .product-pick {
  background: var(--panel);
}

:root[data-theme="dark"] .special-order-box,
:root[data-theme="dark"] .checkout-address-panel,
:root[data-theme="dark"] .saved-address-card,
:root[data-theme="dark"] .summary-panel,
:root[data-theme="dark"] .custom-pick-panel,
:root[data-theme="dark"] .special-status,
:root[data-theme="dark"] .special-review,
:root[data-theme="dark"] .terms-confirm {
  background: #141414;
}

:root[data-theme="dark"] .brand-image,
:root[data-theme="dark"] .product-image,
:root[data-theme="dark"] .product-pick span,
:root[data-theme="dark"] .home-brand-image {
  background: #242424;
}

:root[data-theme="dark"] .product-image::after,
:root[data-theme="dark"] .product-image-divider {
  background: var(--panel);
}

:root[data-theme="dark"] .brand-image img,
:root[data-theme="dark"] .product-image img,
:root[data-theme="dark"] .product-pick img {
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .product-facts span,
:root[data-theme="dark"] .product-facts .availability.out-stock {
  background: #262626;
  color: var(--ink);
}

:root[data-theme="dark"] .delivery-form input[readonly],
:root[data-theme="dark"] .delivery-form select:disabled {
  background: #242424;
}

:root[data-theme="dark"] .admin-view-tab {
  color: var(--ink);
}

:root[data-theme="dark"] .admin-view-tab.is-active,
:root[data-theme="dark"] .status-badge {
  background: #ededed;
  color: #111;
}

:root[data-theme="dark"] .admin-order-summary::before {
  background: #ededed;
  color: #111;
}

@media (max-width: 980px) {
  .goal-grid,
  .home-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { height: auto; min-height: 440px; }
  .field-grid,
  .account-details,
  .shop-controls,
  .settings-grid,
  .admin-order-tools,
  .cart-actions,
  .fulfillment-allocation-row,
  .fulfillment-rule-row,
  .tracking-grid,
  .order-shell,
  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar { grid-template-columns: minmax(0, 1fr) auto; position: static; }

  .admin-order-summary {
    align-items: flex-start;
  }

  .account-section-head,
  .checkout-address-head,
  .saved-address-card,
  .account-admin-card,
  .system-status-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkout-address-head label {
    flex: 0 1 auto;
    width: 100%;
  }

  .address-card-actions,
  .account-admin-actions {
    justify-content: flex-start;
  }

  nav { overflow: visible; flex-wrap: wrap; }

  .availability-toggle {
    justify-self: start;
  }

  .checkout {
    position: static;
  }

  .filter-menu {
    position: static;
  }

  .filter-panel {
    left: 16px;
    right: auto;
    width: calc(100vw - 32px);
  }

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

@media (max-width: 800px) {
  .home-hero h2 { font-size: 3.1rem; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .topbar .account-pill { grid-column: 2; }
  .mobile-menu-toggle { display: grid; align-content: center; justify-items: center; gap: 4px; grid-column: 3; grid-row: 1; width: 40px; height: 40px; border: 1px solid #4a4a4a; border-radius: 6px; background: #181818; }
  .mobile-menu-toggle span { display: block; width: 18px; height: 2px; background: #fff; }
  .topbar nav { display: none; flex-direction: column; align-items: stretch; grid-row: 2; gap: 8px; }
  .topbar nav.is-open { display: flex; }
  .main-nav-links,
  .nav-utility-links { flex-direction: column; align-items: stretch; }
  .topbar nav .tab,
  .topbar nav .nav-dropdown summary { justify-content: flex-start; width: 100%; }
  .nav-dropdown-panel { position: static; width: 100%; max-height: 260px; margin-top: 4px; box-shadow: none; }
  .nav-utility-links { padding-top: 8px; border-top: 1px solid #303030; }
  .topbar nav .icon-tab { justify-content: flex-start; }
  .topbar nav .icon-tab .cart-bubble { position: static; margin-left: 4px; }
}

@media (max-width: 560px) {
  .admin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-view-tab { min-width: 0; padding: 8px; white-space: normal; }
  .admin-order-summary {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 4px 10px;
  }
  .admin-order-summary::before { grid-column: 1; grid-row: 1; }
  .admin-order-summary > div { grid-column: 2; grid-row: 1; }
  .admin-order-summary strong,
  .admin-order-summary p { overflow-wrap: anywhere; white-space: normal; }
  .admin-order-summary .status-badge { grid-column: 2; justify-self: start; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .topbar .account-pill { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .mobile-menu-toggle { grid-column: 2; }
  .topbar nav { grid-row: 3; }
  .topbar nav { gap: 8px; }
  .main-nav-links,
  .nav-utility-links { gap: 2px; }
  .main-nav-links .tab,
  .nav-utility-links .tab,
  .nav-dropdown summary { min-height: 36px; padding: 0 9px; font-size: 0.8rem; }
  .home-hero {
    min-height: 410px;
    padding: 26px;
    background-image: linear-gradient(90deg, rgba(8, 9, 10, 0.97) 0%, rgba(8, 9, 10, 0.9) 63%, rgba(8, 9, 10, 0.55) 100%), url("/assets/portal-hero.png");
    background-position: 63% center;
  }
  .home-hero h2 { font-size: 2.55rem; }
  .home-hero-content > p:not(.hero-kicker) { font-size: 0.94rem; }
  .goal-grid,
  .home-brand-grid { grid-template-columns: 1fr; }
  .goal-tile { min-height: 122px; }
  .goal-tile strong { margin-top: 8px; }
  .home-process { grid-template-columns: 1fr; gap: 12px; }
  .login-screen,
  .create-screen {
    padding: 16px;
  }

  .login-card,
  .create-card {
    padding: 20px;
  }

  .screen-heading,
  .brand-lockup,
  .section-heading,
  .order-card header,
  .phone-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .brand-lockup img {
    width: 58px;
    height: 58px;
  }

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