@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/barlow-condensed-900.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-italic-800.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.ttf") format("truetype"); }

:root {
  --ink: #101113;
  --muted: #6f7278;
  --paper: #f4f3ef;
  --white: #ffffff;
  --red: #ec2329;
  --navy: #13294b;
  --yellow: #f2d20c;
  --green: #009a59;
  --line: #deddd8;
  --shadow: 0 18px 45px rgba(16, 17, 19, 0.1);
  --soft-shadow: 0 7px 22px rgba(16, 17, 19, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  overflow: hidden;
}

body.product-mode {
  overflow-x: hidden;
  overflow-y: auto;
}

button, input { font: inherit; }
button { cursor: pointer; }

.login-view {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-columns: minmax(380px, 42%) 1fr;
  background: var(--white);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(18px, 3.5vw, 56px);
  position: relative;
  z-index: 2;
}

.brand-lockup {
  align-items: center;
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
  position: static;
}

.brand-lockup img { height: 78px; width: 78px; object-fit: contain; }
.brand-lockup span { border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; padding-left: 16px; text-transform: uppercase; width: 130px; }

.eyebrow {
  color: var(--red);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  margin: 0 0 8px;
}

.login-copy {
  margin-top: clamp(32px, 12vh, 92px);
  max-width: 460px;
  width: 100%;
}

.login-copy h1, .page-heading h1 {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(46px, 5.5vw, 78px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .9;
  margin: 0;
  text-transform: uppercase;
}

.login-copy > p:last-child, .page-heading p { color: var(--muted); line-height: 1.45; margin: 10px 0 0; }

#login-form { display: grid; gap: clamp(10px, 1.6vh, 14px); margin-top: clamp(18px, 4vh, 30px); max-width: 460px; width: 100%; }
#login-form label { color: #34363a; display: grid; font-size: 13px; font-weight: 700; gap: 8px; }

input {
  border: 1px solid var(--line);
  border-radius: 0;
  min-height: clamp(46px, 6vh, 52px);
  outline: none;
  padding: 0 15px;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}

input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(19, 41, 75, .12); }

.password-field { display: flex; position: relative; }
.password-field input { padding-right: 62px; }
.text-button { background: transparent; border: 0; color: var(--navy); font-size: 12px; font-weight: 800; position: absolute; right: 8px; top: 17px; text-transform: uppercase; }

.primary-button {
  background: var(--ink);
  border: 0;
  border-radius: 0;
  color: var(--white);
  font-weight: 800;
  min-height: clamp(46px, 6vh, 52px);
  text-transform: uppercase;
  transition: background .2s, transform .2s;
}

.primary-button:hover { background: var(--red); transform: translateY(-2px); }
.install-app-panel { margin-top: 14px; max-width: 460px; text-align: center; width: 100%; }
.install-app-panel button {
  background: var(--white);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  min-height: 46px;
  text-transform: uppercase;
  width: 100%;
}
.install-app-panel button:hover { background: var(--ink); color: var(--white); }
.install-app-panel p { color: var(--muted); font-size: 11px; line-height: 1.4; margin: 8px 0 0; min-height: 16px; }
.form-message { font-size: 13px; min-height: 16px; margin: -8px 0; }
.error { color: var(--red); }

.security-note {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 11px;
  gap: 8px;
  letter-spacing: .08em;
  margin-top: auto;
  padding-top: clamp(14px, 3vh, 26px);
  position: static;
  text-transform: uppercase;
}
.security-note span, .live-chip i { background: var(--green); border-radius: 50%; height: 7px; width: 7px; }

.login-art {
  align-items: flex-end;
  background: var(--ink);
  color: var(--white);
  display: flex;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(28px, 5vw, 76px);
  position: relative;
}

.login-art::before {
  background: url("lebike-logo.png") center/contain no-repeat;
  content: "";
  filter: invert(1);
  height: min(58vw, 680px);
  opacity: .08;
  position: absolute;
  right: -10%;
  top: 2%;
  width: min(58vw, 680px);
}

.login-art::after {
  background: linear-gradient(90deg, var(--red) 0 28%, var(--navy) 28% 58%, var(--yellow) 58% 80%, var(--green) 80%);
  bottom: 0;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  width: 100%;
}

.login-art p {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(58px, 8vw, 124px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .76;
  margin: 0;
  position: relative;
  text-transform: uppercase;
}
.login-art strong { color: var(--red); }
.art-label { font-size: 10px; font-weight: 700; letter-spacing: .22em; position: absolute; right: 34px; top: 34px; }
.art-label strong { color: var(--red); }

.app-view { background: var(--white); display: flex; flex-direction: column; height: 100vh; height: 100svh; isolation: isolate; min-height: 0; overflow: hidden; position: relative; }
.app-view.product-mode { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
.app-view::before {
  display: none;
}

.watermark-layer {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}
.watermark-layer span {
  background: url("lebike-logo.png") center/contain no-repeat;
  filter: grayscale(1);
  height: clamp(72px, 9vw, 150px);
  opacity: .035;
  position: absolute;
  width: clamp(72px, 9vw, 150px);
}
.watermark-layer span:nth-child(1) { left: 4%; top: 14%; transform: rotate(-14deg) scale(1.1); }
.watermark-layer span:nth-child(2) { left: 18%; top: 6%; transform: rotate(9deg) scale(.8); }
.watermark-layer span:nth-child(3) { left: 34%; top: 17%; transform: rotate(-4deg) scale(1.2); }
.watermark-layer span:nth-child(4) { left: 53%; top: 8%; transform: rotate(16deg) scale(.9); }
.watermark-layer span:nth-child(5) { right: 5%; top: 13%; transform: rotate(-8deg) scale(1.25); }
.watermark-layer span:nth-child(6) { left: 9%; top: 38%; transform: rotate(12deg) scale(.92); }
.watermark-layer span:nth-child(7) { left: 27%; top: 48%; transform: rotate(-19deg) scale(1.05); }
.watermark-layer span:nth-child(8) { left: 44%; top: 35%; transform: rotate(5deg) scale(.78); }
.watermark-layer span:nth-child(9) { left: 63%; top: 43%; transform: rotate(-10deg) scale(1.15); }
.watermark-layer span:nth-child(10) { right: 11%; top: 34%; transform: rotate(18deg) scale(.84); }
.watermark-layer span:nth-child(11) { left: 2%; bottom: 18%; transform: rotate(7deg) scale(1); }
.watermark-layer span:nth-child(12) { left: 20%; bottom: 7%; transform: rotate(-11deg) scale(.72); }
.watermark-layer span:nth-child(13) { left: 37%; bottom: 20%; transform: rotate(22deg) scale(1.18); }
.watermark-layer span:nth-child(14) { left: 55%; bottom: 9%; transform: rotate(-6deg) scale(.88); }
.watermark-layer span:nth-child(15) { right: 4%; bottom: 17%; transform: rotate(10deg) scale(1.08); }
.watermark-layer span:nth-child(16) { left: 13%; top: 70%; transform: rotate(-24deg) scale(.82); }
.watermark-layer span:nth-child(17) { left: 72%; top: 67%; transform: rotate(14deg) scale(.96); }
.watermark-layer span:nth-child(18) { left: 83%; top: 53%; transform: rotate(-16deg) scale(.74); }
.watermark-layer span:nth-child(19) { left: 46%; top: 74%; transform: rotate(3deg) scale(.86); }
.watermark-layer span:nth-child(20) { left: 81%; top: 4%; transform: rotate(-2deg) scale(.7); }
.app-header {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: clamp(78px, 9vw, 106px);
  justify-content: space-between;
  padding: 10px clamp(18px, 5vw, 72px);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(16px);
}

.logo-button { background: transparent; border: 0; padding: 5px; }
.logo-button img { display: block; height: 76px; width: 76px; object-fit: contain; }
.header-brand { align-items: center; display: flex; gap: 17px; min-width: 0; }
.back-button {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  width: 48px;
}
.back-button:hover { box-shadow: none; transform: translateX(-2px); }
.back-button img { display: block; height: 22px; object-fit: contain; width: 22px; }
.header-brand > span {
  border-left: 2px solid var(--ink);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .9;
  padding-left: 17px;
  text-transform: uppercase;
}
.header-actions { align-items: center; display: flex; gap: 18px; position: relative; }
.profile-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 10px;
  padding: 7px 13px 7px 7px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.profile-button:hover { box-shadow: none; transform: translateY(-1px); }
.avatar { align-items: center; background: transparent; border: 0; border-radius: 0; display: flex; height: 38px; justify-content: center; width: 38px; }
.avatar img { display: block; height: 32px; object-fit: contain; width: 32px; }
.profile-copy { display: grid; text-align: left; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.chevron { color: var(--muted); }
.profile-menu { background: white; border: 1px solid #e7e7e3; border-radius: 0; box-shadow: var(--shadow); padding: 7px; position: absolute; right: 0; top: 64px; width: 160px; }
.profile-menu button { background: transparent; border: 0; font-size: 12px; font-weight: 700; padding: 11px; text-align: left; width: 100%; }
.profile-menu button:hover { background: var(--paper); border-radius: 0; color: var(--red); }

.notification-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  height: 48px;
  justify-content: center;
  position: relative;
  transition: box-shadow .2s, transform .2s;
  width: 48px;
}
.notification-button:hover { box-shadow: none; transform: translateY(-1px); }
.notification-button i { background: var(--red); border: 2px solid white; border-radius: 50%; height: 9px; position: absolute; right: 9px; top: 8px; width: 9px; }
.notification-button > img { display: block; height: 22px; object-fit: contain; width: 22px; }

.header-tool-button {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  min-height: 48px;
  padding: 0 8px;
  text-transform: uppercase;
}
.header-tool-button:hover, .header-tool-button.active { color: var(--red); }
.header-tool-short { display: none; }

.cart-button {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  display: flex;
  font-size: 11px;
  font-weight: 900;
  gap: 9px;
  min-height: 48px;
  padding: 0 15px;
  text-transform: uppercase;
}
.cart-button:hover { box-shadow: none; transform: translateY(-1px); }
.cart-button span {
  align-items: center;
  background: var(--red);
  display: flex;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}
.cart-button > img { display: block; height: 20px; object-fit: contain; width: 20px; }
.cart-button .cart-label { background: transparent; display: inline; height: auto; min-width: 0; padding: 0; }
.cart-button #cart-count { background: transparent; color: var(--green); font-size: 13px; font-weight: 900; height: auto; min-width: 0; padding: 0; }

.content-shell { flex: 1; margin: 0 auto; max-width: 1450px; min-height: 0; padding: clamp(18px, 3vw, 30px) clamp(18px, 5vw, 72px) clamp(22px, 4vw, 34px); position: relative; width: 100%; z-index: 1; }
.app-view:not(.product-mode) .content-shell { overflow: hidden; }
.app-view.product-mode .content-shell { overflow: visible; }
.breadcrumbs { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; min-height: 26px; }
.crumb { background: transparent; border: 0; color: var(--muted); font-family: "Barlow Condensed"; font-size: 15px; font-weight: 800; letter-spacing: .08em; padding: 0; text-transform: uppercase; }
.crumb:hover { color: var(--red); }
.crumb.current { color: var(--ink); }
.crumb-separator { color: #b6b5af; }

.page-heading { align-items: end; display: flex; justify-content: space-between; margin: clamp(18px, 3.5vw, 34px) 0 clamp(16px, 2.5vw, 24px); }
.page-heading h1 { font-size: clamp(44px, 7vw, 86px); }
.page-heading > div { max-width: 720px; }
.app-view.location-mode .content-shell { display: flex; flex-direction: column; }
.app-view.location-mode .page-heading { margin-block: clamp(10px, 2vh, 20px); }
.app-view.location-mode .page-heading h1 { font-size: clamp(24px, 3.5vw, 43px); }
.app-view.location-mode .tile-grid { align-content: center; flex: 1; min-height: 0; }
.tile-grid { --tile-size: clamp(170px, 18vw, 310px); display: grid; gap: clamp(12px, 1.7vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), var(--tile-size))); justify-content: center; margin-inline: auto; width: 100%; }
.tile-grid.two { --tile-size: clamp(220px, min(36vw, 46vh), 500px); grid-template-columns: repeat(2, minmax(min(220px, 100%), var(--tile-size))); gap: clamp(18px, 3vw, 38px); max-width: calc((var(--tile-size) * 2) + 44px); padding-bottom: clamp(8px, 2vh, 20px); }
.tile-grid.three { --tile-size: clamp(185px, 23vw, 315px); grid-template-columns: repeat(3, minmax(0, var(--tile-size))); max-width: none; }

.nav-tile {
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid #e8e8e4;
  border-radius: 0;
  color: var(--ink);
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--tile-size);
  overflow: hidden;
  padding: clamp(18px, 2vw, 25px);
  position: relative;
  text-align: left;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.nav-tile::after {
  background: linear-gradient(90deg, var(--red) 0 28%, var(--navy) 28% 58%, var(--yellow) 58% 80%, var(--green) 80%);
  bottom: 0;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  transform: scaleX(.26);
  transform-origin: left;
  transition: transform .32s;
  width: 100%;
}
.nav-tile:hover { border-color: #d1d1ca; box-shadow: 0 22px 48px rgba(16, 17, 19, .14); transform: translateY(-7px); }
.nav-tile:hover::after { transform: scaleX(1); }
.tile-icon { color: var(--accent, var(--red)); font-family: "Barlow Condensed"; font-size: clamp(70px, 7vw, 110px); font-weight: 900; letter-spacing: -.08em; line-height: .65; opacity: .18; position: absolute; right: 24px; top: 39%; transform: translateY(-50%); }
.tile-copy { position: relative; z-index: 1; }
.tile-copy h2 { font-family: "Barlow Condensed"; font-size: clamp(28px, 3vw, 42px); font-weight: 900; letter-spacing: -.02em; line-height: .92; margin: 0; text-transform: uppercase; }
.tile-copy p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }

.tile-select-curepipe,
.tile-select-black-river,
.tile-bikes-parts,
.tile-services,
.tile-clothing,
.tile-accessories,
.tile-bikes,
.tile-parts,
.tile-mountain-bikes,
.tile-road-bikes,
.tile-men,
.tile-women,
.tile-kids {
  aspect-ratio: 1 / 1.12;
  background-position: center;
  background-size: cover;
  color: var(--white);
  min-height: var(--tile-size);
}
.tile-select-curepipe { background-image: linear-gradient(180deg, rgba(16, 17, 19, .22), rgba(16, 17, 19, .82)), url("curepipe_shop.jpg"); }
.tile-select-black-river { background-image: linear-gradient(180deg, rgba(16, 17, 19, .22), rgba(16, 17, 19, .82)), url("black_river_shop.jpg"); }
.tile-bikes-parts { background-image: linear-gradient(180deg, rgba(16, 17, 19, .08), rgba(16, 17, 19, .78)), url("bikes_and_parts.jpg"); background-position: center 48%; }
.tile-services { background-image: linear-gradient(180deg, rgba(16, 17, 19, .16), rgba(16, 17, 19, .84)), url("services.webp"); }
.tile-clothing { background-image: linear-gradient(180deg, rgba(16, 17, 19, .14), rgba(16, 17, 19, .82)), url("clothing.png"); background-position: center top; }
.tile-accessories { background-image: linear-gradient(180deg, rgba(16, 17, 19, .12), rgba(16, 17, 19, .80)), url("accesories.jpeg"); }
.tile-bikes { background-image: linear-gradient(180deg, rgba(16, 17, 19, .10), rgba(16, 17, 19, .80)), url("bikes.png"); }
.tile-parts { background-image: linear-gradient(180deg, rgba(16, 17, 19, .12), rgba(16, 17, 19, .82)), url("parts.png"); }
.tile-mountain-bikes { background-image: linear-gradient(180deg, rgba(16, 17, 19, .12), rgba(16, 17, 19, .82)), url("mountain_bike.png"); }
.tile-road-bikes { background-image: linear-gradient(180deg, rgba(16, 17, 19, .12), rgba(16, 17, 19, .82)), url("road_bike.jpg"); }
.tile-men { background-image: linear-gradient(180deg, rgba(16, 17, 19, .10), rgba(16, 17, 19, .80)), url("clothing_men.jpg"); }
.tile-women { background-image: linear-gradient(180deg, rgba(16, 17, 19, .10), rgba(16, 17, 19, .80)), url("clothing_female.jpg"); }
.tile-kids { background-image: linear-gradient(180deg, rgba(16, 17, 19, .10), rgba(16, 17, 19, .80)), url("clothing_kids.png"); }
.tile-select-curepipe .tile-icon,
.tile-select-black-river .tile-icon,
.tile-bikes-parts .tile-icon,
.tile-services .tile-icon,
.tile-clothing .tile-icon,
.tile-accessories .tile-icon,
.tile-bikes .tile-icon,
.tile-parts .tile-icon,
.tile-mountain-bikes .tile-icon,
.tile-road-bikes .tile-icon,
.tile-men .tile-icon,
.tile-women .tile-icon,
.tile-kids .tile-icon {
  color: var(--white);
  opacity: .22;
}
.tile-select-curepipe .tile-copy p,
.tile-select-black-river .tile-copy p,
.tile-bikes-parts .tile-copy p,
.tile-services .tile-copy p,
.tile-clothing .tile-copy p,
.tile-accessories .tile-copy p,
.tile-bikes .tile-copy p,
.tile-parts .tile-copy p,
.tile-mountain-bikes .tile-copy p,
.tile-road-bikes .tile-copy p,
.tile-men .tile-copy p,
.tile-women .tile-copy p,
.tile-kids .tile-copy p {
  color: rgba(255, 255, 255, .86);
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 800;
}
.tile-select-curepipe .tile-copy h2,
.tile-select-black-river .tile-copy h2,
.tile-bikes-parts .tile-copy h2,
.tile-services .tile-copy h2,
.tile-clothing .tile-copy h2,
.tile-accessories .tile-copy h2,
.tile-bikes .tile-copy h2,
.tile-parts .tile-copy h2,
.tile-mountain-bikes .tile-copy h2,
.tile-road-bikes .tile-copy h2,
.tile-men .tile-copy h2,
.tile-women .tile-copy h2,
.tile-kids .tile-copy h2 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .52);
}
.tile-select-curepipe .tile-copy,
.tile-select-black-river .tile-copy,
.tile-bikes-parts .tile-copy,
.tile-services .tile-copy,
.tile-clothing .tile-copy,
.tile-accessories .tile-copy,
.tile-bikes .tile-copy,
.tile-parts .tile-copy,
.tile-mountain-bikes .tile-copy,
.tile-road-bikes .tile-copy,
.tile-men .tile-copy,
.tile-women .tile-copy,
.tile-kids .tile-copy {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .38));
  margin: auto -14px -14px;
  padding: 18px 14px 14px;
}

.product-browser {
  border-top: 1px solid var(--line);
  display: block;
  margin-top: 10px;
  padding-top: 30px;
}

.product-content { min-width: 0; }
.product-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 25px;
}
.product-toolbar label { color: var(--muted); display: grid; font-size: 10px; font-weight: 700; gap: 6px; letter-spacing: .12em; text-transform: uppercase; }
.product-search-label { flex: 1 1 260px; max-width: 420px; min-width: min(260px, 100%); }
.product-search-label input {
  border-color: #e2e2dd;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(16, 17, 19, .04);
  font-size: 12px;
  min-height: 43px;
  text-transform: none;
}
.product-toolbar select {
  background: var(--white);
  border: 1px solid #e2e2dd;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(16, 17, 19, .04);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  min-height: 43px;
  padding: 0 35px 0 12px;
  text-transform: none;
}
.product-form-buttons { display: flex; gap: 10px; }
.add-product-button,
.update-product-button {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--soft-shadow);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  min-height: 43px;
  padding: 0 20px;
  text-transform: uppercase;
  white-space: nowrap;
}
.update-product-button { background: var(--white); color: var(--ink); }
.update-product-button.active { background: var(--red); border-color: var(--red); color: var(--white); }
.add-product-button:hover, .update-product-button:hover { background: var(--red); border-color: var(--red); color: var(--white); }

.update-selection-message {
  background: #f7f7f4;
  border-left: 4px solid var(--red);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 18px;
  padding: 13px 15px;
}
.product-browser.update-selecting .product-row { cursor: pointer; }
.product-browser.update-selecting .product-row:hover { background: rgba(236, 35, 41, .08); color: var(--red); }

.add-product-form {
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 22px;
  padding: 16px;
}
.product-form-heading { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; padding-bottom: 12px; }
.product-form-heading strong { font-family: "Barlow Condensed"; font-size: 24px; text-transform: uppercase; }
.product-form-heading span { color: var(--muted); font-size: 12px; }
.add-product-form label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 6px; letter-spacing: .12em; text-transform: uppercase; }
.add-product-form input, .add-product-form select { background: var(--white); border: 1px solid var(--line); min-height: 43px; padding: 0 12px; }
.add-product-form input[readonly] { background: #f3f3f0; color: var(--ink); cursor: not-allowed; font-weight: 800; }
.currency-field { align-items: center; border: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; min-height: 43px; }
.currency-field > span { color: var(--ink); font-size: 12px; font-weight: 900; text-align: center; }
.currency-field input { border: 0; min-width: 0; }
.add-product-actions { align-items: end; display: flex; gap: 10px; grid-column: 1 / -1; }
.add-product-actions .primary-button { min-height: 43px; padding: 0 18px; }
.add-product-actions button:last-child {
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  min-height: 43px;
  padding: 0 18px;
  text-transform: uppercase;
}

.product-grid, .product-list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.product-list-header,
.product-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.45fr) minmax(110px, .7fr) minmax(140px, .9fr) 90px 110px minmax(130px, .85fr) 76px;
}
.product-list-header {
  border-bottom: 1px solid var(--line);
  color: #31425f;
  font-size: 14px;
  padding: 0 12px 12px;
}
.product-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ecece8;
  color: var(--ink);
  min-height: 54px;
  padding: 9px 12px;
  text-align: left;
  transition: background .18s, color .18s;
  width: 100%;
}
.product-row:hover {
  background: rgba(236, 35, 41, .055);
  color: var(--red);
}
.product-row span {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-row small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}
.delete-product-button {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 0;
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  min-height: 34px;
  padding: 0 10px;
  text-transform: uppercase;
}
.delete-product-button:hover,
.delete-product-button:focus-visible { background: var(--red); color: var(--white); }
.product-card { border: 1px solid #e7e7e3; border-radius: 0; box-shadow: var(--soft-shadow); display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); min-width: 0; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow: 0 18px 38px rgba(16, 17, 19, .13); transform: translateY(-4px); }
.product-image {
  align-items: center;
  aspect-ratio: auto;
  background:
    linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--product-accent) 18%, white) 45% 55%, transparent 55%),
    #f6f6f4;
  display: flex;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
}
.product-image span {
  color: var(--product-accent);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(80px, 8vw, 130px);
  font-weight: 900;
  line-height: 1;
  opacity: .85;
}
.product-card-body { display: grid; gap: 12px; grid-template-columns: minmax(170px, .8fr) minmax(260px, 1.45fr) minmax(240px, 1fr); min-height: 0; padding: 17px; }
.product-category { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .12em; margin: 0 0 8px; text-transform: uppercase; }
.product-card h2 { font-family: "Barlow Condensed"; font-size: 27px; font-weight: 900; line-height: 1; margin: 0; text-transform: uppercase; }
.product-sku { color: var(--muted); font-size: 10px; margin: 7px 0 0; }
.product-card-body > .product-category,
.product-card-body > h2,
.product-card-body > .product-sku,
.variant-select-label {
  grid-column: 1;
}
.variant-select-label, .transaction-box label {
  color: var(--muted);
  display: grid;
  font-size: 9px;
  font-weight: 900;
  gap: 6px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.variant-select-label select, .transaction-box select, .transaction-box input {
  background: var(--white);
  border: 1px solid var(--line);
  min-height: 37px;
  padding: 0 9px;
}
.variant-details { border: 1px solid var(--line); grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
.variant-line { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; padding: 9px; }
.variant-line span { color: var(--muted); font-size: 10px; }
.variant-line strong { font-size: 11px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.price-grid span { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--muted); font-size: 9px; padding: 9px; text-transform: uppercase; }
.price-grid span:last-child { border-right: 0; }
.price-grid strong { color: var(--ink); display: block; font-family: "Barlow Condensed"; font-size: 18px; margin-top: 3px; }
.inventory-grid { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); }
.inventory-grid span { border-right: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; padding: 8px; text-transform: uppercase; }
.inventory-grid span:last-child { border-right: 0; }
.inventory-grid strong { color: var(--ink); display: block; font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-box { align-self: start; display: grid; gap: 10px; grid-column: 3; grid-template-columns: minmax(0, 1fr) 70px; margin-top: 0; }
.transaction-help { color: var(--muted); font-size: 11px; grid-column: 3; line-height: 1.45; margin: 0; min-height: 32px; }
.product-actions { align-self: end; display: grid; gap: 8px; grid-column: 3; grid-template-columns: 1fr; margin-top: 0; padding-top: 0; }
.product-actions button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  min-height: 40px;
  padding: 0 10px;
  text-align: center;
  text-transform: uppercase;
}
.product-actions button:first-child { background: var(--ink); border-color: var(--ink); color: var(--white); }
.product-actions button:hover { border-color: var(--red); color: var(--red); }
.product-actions button:first-child:hover { background: var(--red); color: var(--white); }
.empty-products {
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px;
  text-align: center;
}

.service-browser { border-top: 1px solid var(--line); padding-top: 30px; }
.service-card { align-items: center; border: 1px solid var(--line); box-shadow: var(--soft-shadow); display: grid; gap: 28px; grid-template-columns: minmax(220px, 1fr) auto auto; margin: 0 auto; max-width: 980px; padding: clamp(22px, 4vw, 44px); }
.service-card p { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .14em; margin: 0 0 8px; text-transform: uppercase; }
.service-card h2 { font-family: "Barlow Condensed"; font-size: clamp(42px, 6vw, 68px); line-height: .9; margin: 0 0 10px; text-transform: uppercase; }
.service-card > div > span { color: var(--muted); font-size: 12px; }
.service-price-control { align-items: center; display: flex; }
.service-price-control button { background: var(--ink); border: 0; color: var(--white); font-size: 24px; font-weight: 900; height: 48px; width: 48px; }
.service-price-control button:hover { background: var(--red); }
.service-price-control strong { align-items: center; border-block: 1px solid var(--line); display: flex; font-family: "Barlow Condensed"; font-size: 30px; height: 48px; justify-content: center; min-width: 120px; }
.service-card > .primary-button { min-height: 48px; padding-inline: 22px; }

.mauritius-footer {
  background: linear-gradient(90deg, var(--red) 0 28%, var(--navy) 28% 58%, var(--yellow) 58% 80%, var(--green) 80%);
  flex: 0 0 12px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.cart-panel {
  background: var(--white);
  border-left: 1px solid var(--line);
  bottom: 12px;
  box-shadow: -18px 0 45px rgba(16, 17, 19, .12);
  max-width: min(390px, 92vw);
  padding: 22px;
  position: fixed;
  right: 0;
  top: 0;
  overflow-y: auto;
  width: 390px;
  z-index: 8;
}
.cart-header { align-items: start; display: flex; justify-content: space-between; }
.cart-header p { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .14em; margin: 0 0 5px; text-transform: uppercase; }
.cart-header h2 { font-family: "Barlow Condensed"; font-size: 48px; line-height: .9; margin: 0; text-transform: uppercase; }
.cart-header button { background: var(--ink); border: 0; color: var(--white); font-weight: 900; height: 36px; text-transform: uppercase; width: 36px; }
.cart-items { display: grid; gap: 12px; margin: 22px 0; }
.cart-item { background: #fbfbf8; border: 1px solid var(--line); border-left: 4px solid var(--green); box-shadow: 0 8px 20px rgba(16, 17, 19, .07); display: flex; gap: 12px; justify-content: space-between; padding: 14px; }
.cart-item strong, .cart-item span, .cart-item small { display: block; }
.cart-item strong { font-size: 13px; }
.cart-item span { color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 4px; }
.cart-item small { color: var(--green); font-size: 11px; font-weight: 800; margin-top: 8px; }
.cart-item .remove-cart-button { align-items: center; align-self: center; background: transparent; border: 1px solid var(--line); color: var(--red); display: flex; flex: 0 0 36px; height: 36px; justify-content: center; padding: 0; width: 36px; }
.cart-item .remove-cart-button:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.remove-cart-button svg { fill: currentColor; height: 17px; width: 17px; }
.quote-mode-note { background: #fff8d4; border-left: 4px solid var(--yellow); color: var(--ink); font-size: 11px; line-height: 1.45; margin: 16px 0 0; padding: 10px 12px; }
.checkout-details { border-top: 1px solid var(--line); display: grid; gap: 14px; padding-top: 18px; }
.checkout-details > label { color: var(--muted); display: grid; font-size: 10px; font-weight: 900; gap: 6px; letter-spacing: .1em; text-transform: uppercase; }
.checkout-details input[type="number"], .checkout-details input[type="text"], .checkout-details textarea { border: 1px solid var(--line); font: inherit; min-height: 40px; padding: 10px; resize: vertical; }
.discount-field { align-items: center; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 36px; }
.discount-field input { border: 0 !important; min-width: 0; }
.discount-field > span { color: var(--ink); font-size: 13px; font-weight: 900; text-align: center; }
.payment-methods { border: 1px solid var(--line); display: grid; gap: 2px; grid-template-columns: 1fr; margin: 0; padding: 9px 10px 10px; }
.payment-methods legend { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; padding: 0 5px; text-transform: uppercase; }
.payment-methods label { align-items: center; display: flex; font-size: 11px; gap: 8px; min-height: 27px; padding: 2px 4px; }
.payment-methods input[type="checkbox"] { accent-color: var(--red); flex: 0 0 14px; height: 14px; min-height: 14px; padding: 0; width: 14px; }
.cart-summary { border-top: 4px solid var(--ink); display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; }
.cart-summary > div { display: flex; justify-content: space-between; }
.cart-summary span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.cart-summary strong { font-family: "Barlow Condensed"; font-size: 20px; line-height: 1; }
.cart-summary .cart-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.cart-summary .cart-total strong { font-size: 32px; }
.receipt-actions { display: grid; gap: 8px; grid-template-columns: 1fr; margin-top: 18px; }
.receipt-actions button { border: 1px solid var(--ink); font-size: 10px; font-weight: 900; min-height: 44px; text-transform: uppercase; }
.receipt-actions button:last-child { background: var(--white); color: var(--ink); }
.checkout-message { color: var(--green); font-size: 11px; font-weight: 800; margin: 10px 0 0; }
.empty-cart { color: var(--muted); font-size: 13px; margin: 0; }

.app-dialog {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
  color: var(--ink);
  margin: auto;
  max-width: min(460px, calc(100vw - 32px));
  padding: 24px;
  width: 100%;
}
.app-dialog::backdrop { background: rgba(16, 17, 19, .62); backdrop-filter: blur(3px); }
.app-dialog-header { align-items: start; display: flex; justify-content: space-between; }
.app-dialog-header p { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .14em; margin: 0 0 5px; text-transform: uppercase; }
.app-dialog-header h2 { font-family: "Barlow Condensed"; font-size: 42px; line-height: .9; margin: 0; text-transform: uppercase; }
.app-dialog-header > button { background: transparent; border: 0; color: var(--ink); font-size: 20px; font-weight: 900; height: 36px; width: 36px; }
.app-dialog-description { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 20px 0; }
.delete-confirmation-label { color: var(--ink); display: grid; font-size: 12px; gap: 8px; }
.delete-confirmation-label input { min-height: 46px; }
.dialog-message { color: var(--red); font-size: 12px; font-weight: 700; line-height: 1.4; margin: 12px 0 0; min-height: 17px; }
.app-dialog-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 20px; }
.app-dialog-actions button { background: var(--white); border: 1px solid var(--ink); font-size: 11px; font-weight: 900; min-height: 44px; text-transform: uppercase; }
.app-dialog-actions .danger-button { background: var(--red); border-color: var(--red); color: var(--white); }
.app-dialog-actions .danger-button:disabled { background: #d8d8d3; border-color: #d8d8d3; color: #777; cursor: not-allowed; }

.settings-dialog { max-height: min(90vh, 860px); max-width: min(980px, calc(100vw - 32px)); overflow-y: auto; }
.settings-form { border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; padding-bottom: 24px; }
.settings-form label, .sales-report-heading label { color: var(--muted); display: grid; font-size: 10px; font-weight: 900; gap: 7px; letter-spacing: .08em; text-transform: uppercase; }
.settings-form input, .settings-form textarea, .sales-report-heading select { border: 1px solid var(--line); font: 13px/1.4 Arial, sans-serif; min-height: 43px; padding: 10px; resize: vertical; }
.settings-address { grid-column: span 2; }
.settings-save-row { align-items: center; display: flex; gap: 16px; grid-column: 1 / -1; }
.settings-save-row button { min-width: 170px; }
.settings-save-row p, .sales-report-message { color: var(--green); font-size: 11px; font-weight: 800; margin: 0; }
.sales-report { padding-top: 24px; }
.sales-report-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; }
.sales-report-heading p { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .12em; margin: 0 0 4px; text-transform: uppercase; }
.sales-report-heading h3 { font-family: "Barlow Condensed"; font-size: 34px; line-height: 1; margin: 0; text-transform: uppercase; }
.sales-report-heading label { max-width: 240px; width: 100%; }
.sales-table-wrap { border: 1px solid var(--line); margin-top: 18px; max-height: 290px; overflow: auto; }
.sales-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.sales-table th { background: var(--navy); color: var(--white); font-size: 10px; letter-spacing: .08em; position: sticky; text-align: left; text-transform: uppercase; top: 0; }
.sales-table th, .sales-table td { border-bottom: 1px solid var(--line); padding: 10px 12px; white-space: nowrap; }
.sales-report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.sales-report-actions button { border: 1px solid var(--ink); font-size: 10px; font-weight: 900; min-height: 42px; padding: 0 18px; text-transform: uppercase; }
.sales-report-message { margin-top: 10px; min-height: 16px; }

@media (max-width: 1050px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, min(320px, 100%))); }
  .tile-grid.two { --tile-size: clamp(190px, min(42vw, 43vh), 360px); grid-template-columns: repeat(2, minmax(min(190px, 100%), var(--tile-size))); gap: 22px; max-width: calc((var(--tile-size) * 2) + 28px); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-view { grid-template-columns: 1fr; }
  .login-panel { min-height: 100vh; min-height: 100svh; }
  .login-art { display: none; }
}

@media (max-width: 780px) {
  .app-view::before { height: 52vw; opacity: .06; right: 16px; top: 92px; width: 52vw; }
  .add-product-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-list-header { display: none; }
  .product-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px; }
  .product-row span::before { color: var(--muted); display: block; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .product-row span:nth-child(1)::before { content: "Product"; }
  .product-row span:nth-child(2)::before { content: "Brand"; }
  .product-row span:nth-child(3)::before { content: "SKU"; }
  .product-row span:nth-child(4)::before { content: "Total"; }
  .product-row span:nth-child(5)::before { content: "Price"; }
  .product-row span:nth-child(6)::before { content: "Variant"; }
  .delete-product-button { justify-self: end; }
  .product-card { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
  .product-card-body { grid-template-columns: 1fr; }
  .product-card-body > .product-category,
  .product-card-body > h2,
  .product-card-body > .product-sku,
  .variant-select-label,
  .variant-details,
  .transaction-box,
  .transaction-help,
  .product-actions { grid-column: 1; grid-row: auto; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .inventory-grid span { border-bottom: 1px solid var(--line); }
  .settings-form { grid-template-columns: 1fr 1fr; }
  .settings-address { grid-column: span 1; }
}

@media (max-width: 650px) {
  .app-view::before { height: 58vw; right: 12px; top: 86px; width: 58vw; }
  .app-header { min-height: 76px; padding: 8px 14px; }
  .logo-button img { height: 52px; width: 52px; }
  .header-brand { gap: 9px; }
  .header-brand > span { display: none; }
  .header-actions { gap: 8px; }
  .header-tool-button { height: 42px; min-height: 42px; padding: 0 6px; }
  .header-tool-label { display: none; }
  .header-tool-short { display: inline; font-size: 12px; }
  .back-button { height: 42px; width: 42px; }
  .back-button img { height: 18px; width: 18px; }
  .header-brand > span { font-size: 22px; padding-left: 9px; }
  .profile-copy, .chevron { display: none; }
  .notification-button, .cart-button { height: 42px; min-height: 42px; }
  .cart-button { padding: 0 10px; }
  .cart-button .cart-label { display: none; }
  .profile-button { padding: 5px; }
  .avatar { height: 34px; width: 34px; }
  .content-shell { padding: 16px 14px 22px; }
  .tile-grid, .tile-grid.two, .tile-grid.three { --tile-size: clamp(132px, 29vh, 220px); gap: 12px; grid-template-columns: minmax(0, min(100%, 360px)); max-width: 360px; }
  .tile-grid.two { padding-bottom: 16px; }
  .nav-tile { aspect-ratio: auto; min-height: var(--tile-size); padding: 14px; }
  .tile-select-curepipe, .tile-select-black-river { min-height: var(--tile-size); }
  .page-heading { align-items: start; flex-direction: column; gap: 10px; margin: 16px 0 14px; }
  .page-heading h1 { font-size: clamp(38px, 12vw, 54px); overflow-wrap: anywhere; }
  .page-heading p { font-size: 12px; }
  .breadcrumbs { gap: 5px; }
  .crumb { font-size: 12px; }
  .product-toolbar { align-items: stretch; flex-direction: column; }
  .product-search-label, .product-toolbar select, .product-form-buttons { max-width: none; width: 100%; }
  .product-form-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .add-product-button, .update-product-button { padding-inline: 8px; width: 100%; }
  .add-product-form { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .product-card { grid-template-columns: 1fr; }
  .product-card-body { min-height: auto; }
  .price-grid, .transaction-box, .product-actions { grid-template-columns: 1fr; }
  .product-image { aspect-ratio: 1.7; min-height: 0; }
  .brand-lockup { gap: 12px; }
  .brand-lockup img { height: 60px; width: 60px; }
  .brand-lockup span { font-size: 11px; padding-left: 12px; width: 112px; }
  .login-panel { padding: 14px 20px; }
  .login-copy { margin-top: clamp(26px, 8vh, 58px); }
  .login-copy h1 { font-size: 48px; }
  .security-note { bottom: auto; margin-top: auto; padding-top: 14px; position: static; }
  .service-card { grid-template-columns: 1fr; text-align: center; }
  .service-price-control { justify-content: center; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-save-row { align-items: stretch; flex-direction: column; }
  .sales-report-heading { align-items: stretch; flex-direction: column; }
  .sales-report-heading label { max-width: none; }
  .sales-report-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px), (max-height: 760px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .app-view { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
  .app-view:not(.product-mode) .content-shell { overflow: visible; }
  .login-view, .login-panel, .login-art { height: auto; min-height: 100vh; min-height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}