:root {
  --color-brand-primary: #B58A47;
  --color-brand-hover: #9F773A;
  --color-brand-pressed: #86622F;
  --color-text-primary: #181818;
  --color-text-secondary: #737373;
  --color-text-muted: #9A9A96;
  --color-background: #F5F5F3;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FAFAF8;
  --color-border: #E5E5E3;
  --color-border-strong: #D7D7D2;
  --color-success: var(--color-brand-primary);
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-image: 0px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.10);
  --container: 1480px;
  --gutter: 16px;
  font-family: "Manrope", "Inter", Arial, sans-serif;
  color: var(--color-text-primary);
  background: var(--color-background);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-background);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
input, select, textarea, button { min-width: 0; }
svg { flex: 0 0 auto; }

:focus-visible {
  outline: 3px solid rgba(181, 138, 71, 0.18);
  outline-offset: 2px;
}

.container,
.page-container {
  width: min(calc(100% - var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.app__main { padding: var(--space-6) 0 var(--space-12); }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(229, 229, 227, 0.92);
  background: rgba(245, 245, 243, 0.94);
  backdrop-filter: blur(14px);
}

.header__inner {
  min-height: calc(58px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: env(safe-area-inset-top);
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-primary);
}

.brand__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.iconBtn {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.iconBtn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: transparent;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}

.iconBtn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border);
  background: var(--color-surface);
}

.iconBtn b {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-brand-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


.messages,
.form,
.home,
.orders,
.cart,
.catalogResults,
.orderGroups,
.orderDetail,
.cartList,
.companyGroup,
.gallery,
.editPanel,
.status-form,
.profileCard,
.authCard {
  display: grid;
  gap: var(--space-4);
}

.messages { margin-bottom: var(--space-4); }

.message,
.inline-error,
.formError,
.empty,
.panel,
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.message,
.inline-error,
.formError {
  padding: var(--space-3) var(--space-4);
}

.message--error,
.formError {
  color: #B42318;
  background: #FEF3F2;
  border-color: rgba(239, 68, 68, 0.28);
}
.message--success {
  color: var(--color-text-primary);
  background: rgba(181, 138, 71, 0.12);
  border-color: rgba(181, 138, 71, 0.3);
}
.inline-error {
  color: #B42318;
  background: #FEF3F2;
  margin-bottom: var(--space-3);
}

.btn {
  max-width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
  transition: transform 120ms ease-out, color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.btn:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.56; cursor: default; transform: none; box-shadow: none; }
.btn--primary {
  color: #fff;
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-pressed); border-color: var(--color-brand-pressed); }
.btn--work {
  color: #8A652E;
  background: #FFF8EC;
  border-color: rgba(181, 138, 71, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}
.btn--work:hover {
  color: #6F4F22;
  background: #FFF2DB;
  border-color: rgba(181, 138, 71, 0.64);
}
.btn--work:active {
  color: #fff;
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.btn--done {
  color: #166534;
  background: #F0FDF4;
  border-color: rgba(22, 101, 52, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}
.btn--done:hover {
  color: #14532D;
  background: #DCFCE7;
  border-color: rgba(22, 101, 52, 0.42);
}
.btn--done:active {
  color: #fff;
  background: #15803D;
  border-color: #15803D;
}
.btn--success {
  color: var(--color-text-primary);
  background: rgba(181, 138, 71, 0.12);
  border-color: rgba(181, 138, 71, 0.36);
}
.btn--success:hover {
  background: rgba(181, 138, 71, 0.18);
  border-color: rgba(181, 138, 71, 0.5);
}
.btn--danger {
  color: #B42318;
  background: #FEF3F2;
  border-color: rgba(239, 68, 68, 0.26);
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: none;
}
.btn--wide { width: 100%; }
.btn--compact { min-height: 44px; padding: 0 var(--space-3); font-size: 14px; }
.btn--icon { width: 48px; padding: 0; }

.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.formGroup {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.formGroup legend {
  padding: 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.field span,
.muted,
.eyebrow,
.pageHead__eyebrow,
.authCard__eyebrow {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 12px 14px;
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(181, 138, 71, 0.15);
}

.pageHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.pageHead h1,
.authCard h1,
.detailsCard__title h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: 0;
}
.pageHead p,
.authCard p { margin: 0; }

.pageHead__meta {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.segmented {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 3px;
}

.catalogTypeSwitch {
  justify-self: start;
  width: min(100%, 360px);
}

.segmented a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.catalogTypeSwitch a {
  flex: 1 1 0;
  min-width: 0;
}
.segmented a.is-active {
  color: #fff;
  background: var(--color-text-primary);
}

.cats,
.statusTabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cats { overflow-x: auto; }
.statusTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  align-items: stretch;
}
.cats::-webkit-scrollbar,
.statusTabs::-webkit-scrollbar { display: none; }

.cat,
.statusTab {
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 var(--space-4);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.statusTab { flex: 1 1 128px; }
.cat strong { font-weight: 600; }
.cat span { color: var(--color-text-secondary); }
.cat.is-active,
.statusTab.is-active {
  color: #fff;
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.cat.is-active span { color: rgba(255, 255, 255, 0.78); }

.filterPanel {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto;
  gap: var(--space-3);
  align-items: end;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.filterPanel--orders { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto; }
.field--short { max-width: 150px; }
.filterPanel[hidden] { display: none; }

.catalogTools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.searchForm {
  flex: 1 1 420px;
  min-width: 0;
}

.searchField {
  position: relative;
  display: block;
}

.searchField svg {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.searchField span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.searchField input {
  min-height: 52px;
  padding-left: 48px;
}

.filterToggle {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-width: 52px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0 var(--space-4);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.filterToggle:hover,
.filterToggle[aria-expanded="true"] {
  border-color: rgba(181, 138, 71, 0.5);
}
.filterToggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.filterToggle strong {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.catalogMeta {
  flex: 1 1 360px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.catalogResults__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  justify-content: end;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: 14px;
}
.catalogResults__count strong {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 600;
}
.sortForm {
  flex: 1 1 260px;
  width: auto;
  max-width: 100%;
  min-width: 220px;
}
.sortField {
  display: block;
  position: relative;
}
.sortField span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.sortField select {
  min-width: 0;
  min-height: 52px;
  font-weight: 500;
}

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

.productCard {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}
.productCard:focus-visible {
  outline: 3px solid rgba(181, 138, 71, 0.22);
  outline-offset: 4px;
}
.productCard__image {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: var(--radius-image);
  background: #EEEDEA;
  color: var(--color-text-muted);
  overflow: hidden;
}
.productCard__image img,
.cartRow__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease-out;
}
.productCard:hover .productCard__image img { transform: scale(1.015); }
.productCard__body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0 0;
}
.productCard__title {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.productCard__footer {
  display: grid;
  gap: var(--space-2);
  margin-top: 0;
}
.productCard__footer strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.productCard__meta,
.detailsCard__meta,
.cartRow__meta,
.orderCard__contact {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}
.productCard__metaLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.productCard__meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.productCard__badges {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.productCard__orders,
.detailsCard__orders {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  padding: 0 var(--space-2);
  font-size: 12px;
  font-weight: 500;
}
.productCard__orders svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.productCard__actions {
  margin: 0;
  display: inline-flex;
}

.cartIconBtn {
  width: 36px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: transform 120ms ease-out, color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
.cartIconBtn:hover {
  border-color: rgba(181, 138, 71, 0.5);
  color: var(--color-brand-primary);
}
.cartIconBtn:active { transform: translateY(1px); }
.cartIconBtn.is-active {
  color: #fff;
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.cartIconBtn svg {
  width: 20px;
  height: 20px;
}

.cartIcon__body {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cartIcon__wheel {
  fill: var(--color-brand-primary);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.82);
}

.cartIconBtn.is-active .cartIcon__wheel {
  fill: #fff;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.empty h1,
.empty h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.empty p {
  margin: 0;
  max-width: 430px;
  color: var(--color-text-secondary);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.breadcrumbs a { color: var(--color-text-primary); }

.container.product { width: min(calc(100% - var(--gutter) * 2), 920px); }
.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
.product--single { justify-content: center; }
.product__crumbs { grid-column: 1 / -1; }
.gallery, .details { min-width: 0; }
.gallery {
  width: 100%;
  max-width: 100%;
  justify-items: center;
  overflow: hidden;
}
.carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
}
.carousel__frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 560px;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: #EEEDEA;
}
.carousel__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
  user-select: none;
  overscroll-behavior-x: contain;
}
.carousel__track.is-dragging { cursor: grabbing; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: #EEEDEA;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}
.carousel__slide .carousel__img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.carousel__posTrack {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-border);
  overflow: hidden;
}
.carousel__posThumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 24%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand-primary);
  transition: left 120ms ease-out, width 120ms ease-out;
}

.detailsCard {
  width: 100%;
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.detailsCard__meta,
.detailsCard__title {
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
}
.detailsCard__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: stretch;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.detailsCard__metaText {
  min-width: 0;
  width: auto;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.detailsCard__metaText + .detailsCard__metaText {
  grid-column: 1;
  grid-row: 2;
}
.detailsCard__orders {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}
.detailsCard__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.detailsCard__title .btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--space-3);
  white-space: nowrap;
}
.detailsCard__title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.detailsCard__price {
  color: var(--color-text-primary);
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  overflow-wrap: anywhere;
}
.descBlock {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.descBlock h2,
.infoBlock h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.descBlock p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 24px;
  overflow-wrap: anywhere;
}
.editPanel {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.editPanel[hidden] { display: none; }
.editPanel__actions,
.statusActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(24, 24, 24, 0.9);
  padding: var(--space-6);
  cursor: grab;
  touch-action: none;
}
.lb[hidden] { display: none; }
.lb:active { cursor: grabbing; }
.lb img {
  width: auto;
  max-height: 96dvh;
  max-width: 96vw;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.lb__close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 28px;
}

.cartActions {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + var(--space-3));
  z-index: 20;
  display: flex;
  justify-content: stretch;
}
.cartActions .btn { width: 100%; }

.companyGroup {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.companyGroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.companyGroup__head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  overflow-wrap: anywhere;
}
.cartRow {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 48px;
  grid-template-areas:
    "image main delete"
    "image qty qty"
    "image sum sum";
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.cartRow:last-child { border-bottom: 0; padding-bottom: 0; }
.cartRow__image {
  grid-area: image;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: var(--radius-image);
  background: #EEEDEA;
  color: var(--color-text-muted);
  overflow: hidden;
}
.cartRow__main { grid-area: main; display: grid; gap: var(--space-1); min-width: 0; }
.cartRow__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  overflow-wrap: anywhere;
}
.cartRow__price,
.cartRow__sum {
  color: var(--color-text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cartRow__sum { grid-area: sum; justify-self: start; }
.cartRow__delete { grid-area: delete; justify-self: end; }
.cartComment {
  width: min(100%, 520px);
  margin-top: var(--space-3);
}
.cartComment textarea {
  min-height: 64px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
}
.qty {
  grid-area: qty;
  width: min(100%, 220px);
  display: grid;
  grid-template-columns: 44px minmax(54px, 1fr) 44px;
  gap: var(--space-1);
}
.qty button:not(.btn) {
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
  font-weight: 600;
}
.qty input { min-height: 44px; text-align: center; padding: 0 var(--space-2); }

.summaryLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
}
.summaryLine--total {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 600;
}

.dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-items: end;
  padding: 0;
}
.dialog[hidden] { display: none; }
.dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.42);
}
.dialog__panel {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-floating);
}
.dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.dialog__head h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 32px; }
.dialog__head button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  font-size: 24px;
}
.checkoutGrid,
.checkoutSummary {
  display: grid;
  gap: var(--space-4);
}
.checkoutSummary {
  align-content: start;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  padding: var(--space-4);
}

.counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.metric,
.orderGroup,
.invoice,
.profileCard,
.authShell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.metric {
  display: grid;
  gap: var(--space-1);
  min-width: 140px;
  padding: var(--space-4);
}
.metric span { color: var(--color-text-secondary); font-size: 14px; }
.metric strong { font-size: 32px; font-weight: 600; line-height: 40px; }

.orderGroup { overflow: visible; }
.orderGroup__head {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.orderGroup__head div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.orderGroup__head a {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.orderGroup__head strong {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.orderGroup__head span {
  color: var(--color-text-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.orderGroup__meta {
  justify-items: start;
  white-space: normal;
}
.orderGroup__meta strong,
.suborderCard__head strong {
  font-size: 18px;
  font-weight: 600;
}
.suborderList { display: grid; gap: 0; }
.suborderCard {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.suborderCard:last-child { border-bottom: 0; }
.suborderCard__head {
  display: grid;
  gap: var(--space-2);
}
.suborderCard__head a {
  min-width: 0;
  color: var(--color-text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.suborderCard__head .suborderCard__meta,
.suborderCard__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.suborderCard__right { margin-left: auto; }

.ordersTableWrap { display: none; }
.orderItemsPanel {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.orderProductLine {
  min-height: 96px;
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(72px, auto);
  grid-template-areas:
    "image main qty"
    "image main sum";
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}
.orderProductLine + .orderProductLine { border-top: 1px solid var(--color-border); }
.orderProductLine__image {
  grid-area: image;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: #EEEDEA;
  color: var(--color-brand-primary);
  font-weight: 600;
}
.orderProductLine__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orderProductLine__main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.orderProductLine__title {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  overflow-wrap: anywhere;
}
.orderProductLine__price {
  color: var(--color-text-secondary);
  font-weight: 500;
  line-height: 20px;
}
.orderProductLine__commentText {
  min-height: 64px;
  display: block;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  padding: 10px 12px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.orderProductLine__commentText.is-empty { color: var(--color-text-muted); }
.orderProductLine__main textarea {
  min-height: 64px;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
}
.orderProductLine__sum {
  grid-area: sum;
  align-self: center;
  justify-self: end;
  color: var(--color-text-primary);
  font-size: 14px;
  white-space: nowrap;
}
.orderProductLine__qty {
  grid-area: qty;
  align-self: center;
  justify-self: end;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.orderProductLine--comment { align-items: start; }

.orderList { display: none; gap: var(--space-3); }
.orderCard { padding: var(--space-4); }
.orderLine,
.order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--color-text-secondary);
}
.orderLine span,
.order-line span { min-width: 0; overflow-wrap: anywhere; }
.orderComments {
  display: grid;
  gap: var(--space-3);
}
.order-line--comment {
  align-items: start;
}
.orderComment,
.orderCommentText {
  grid-column: 1 / -1;
}
.orderComment textarea {
  min-height: 72px;
  font-size: 14px;
  line-height: 20px;
}
.orderCommentText {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.status {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  font-size: 12px;
  font-weight: 600;
}
.status--new { color: #37566F; background: #EFF6FF; border-color: #D8E8F8; }
.status--processing { color: #92400E; background: #FFFBEB; border-color: #FDE68A; }
.status--fulfilled,
.status--completed { color: #166534; background: #F0FDF4; border-color: #BBF7D0; }
.status--cancelled { color: #991B1B; background: #FEF2F2; border-color: #FECACA; }

.invoice {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}
.invoice__head {
  display: grid;
  gap: var(--space-3);
}
.invoice__head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
}
.invoice__total {
  color: var(--color-text-primary);
  font-size: 28px;
  font-weight: 600;
}
.infoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
}
.infoBlock {
  display: grid;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.profile-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.profile-list dt { color: var(--color-text-secondary); }
.profile-list dd {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.statusActions {
  position: relative;
  justify-content: flex-end;
}
.statusActions form { margin: 0; }
.statusCancel {
  position: relative;
  z-index: 5;
}
.statusCancel[open] { z-index: 10; }
.statusCancel summary {
  list-style: none;
  user-select: none;
}
.statusCancel summary::-webkit-details-marker { display: none; }
.statusCancel[open] summary {
  color: #fff;
  background: #B42318;
  border-color: #B42318;
}
.statusCancel__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(340px, calc(100vw - var(--gutter) * 2));
  display: grid;
  gap: var(--space-3);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-floating);
}
.statusCancel__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(239, 68, 68, 0.22);
  border-left: 1px solid rgba(239, 68, 68, 0.22);
  background: var(--color-surface);
  transform: rotate(45deg);
}
.statusCancel__panel strong {
  font-size: 16px;
  line-height: 22px;
}
.statusCancel__panel p {
  margin: -8px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 18px;
}
.statusCancel__panel textarea { min-height: 96px; }
.statusActions--compact .statusCancel__panel {
  top: calc(100% + var(--space-2));
}
.statusSelectForm label {
  display: grid;
  gap: 4px;
}
.statusSelectForm span {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.statusSelectForm select {
  min-height: 40px;
  min-width: 168px;
  padding: 8px 34px 8px 12px;
  font-size: 13px;
}
.statusActions--compact .btn {
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.auth {
  min-height: calc(100dvh - 132px);
  display: grid;
  place-items: center;
}
.authShell {
  width: min(520px, 100%);
  display: grid;
  overflow: hidden;
}
.authCard,
.profileCard {
  width: min(460px, 100%);
  padding: var(--space-6);
}
.authCard {
  width: 100%;
  align-content: center;
}
.authCard h1 { margin-bottom: var(--space-2); }

.profile {
  display: grid;
  justify-items: center;
}
.profileCard { width: min(760px, 100%); }
.profileHero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.profileHero h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  overflow-wrap: anywhere;
}
.avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(181, 138, 71, 0.12);
  color: var(--color-brand-primary);
  font-size: 22px;
  font-weight: 600;
}

@media (min-width: 480px) {
  :root { --gutter: 24px; }
  .grid,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .cartActions .btn { width: auto; min-width: 240px; }
  .cartActions { justify-content: flex-end; }
  .profile-list { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
  .profile-list dd { margin-bottom: 0; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .app__main { padding: var(--space-8) 0 var(--space-12); }
  .header__inner { min-height: 66px; }
  .brand__mark { font-size: 23px; }
  .pageHead h1,
  .authCard h1,
  .detailsCard__title h1,
  .invoice__head h1,
  .profileHero h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .grid,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-6); }
  .catalogTypeSwitch { justify-self: start; }
  .product--single {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }
  .carousel__frame { height: 620px; }
  .detailsCard__meta {
    grid-template-columns: auto auto 1fr;
    align-items: center;
  }
  .detailsCard__metaText + .detailsCard__metaText {
    grid-column: 2;
    grid-row: 1;
  }
  .detailsCard__orders {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .cartActions { position: static; }
  .cartRow {
    grid-template-columns: 88px minmax(0, 1fr) minmax(146px, 180px) 48px minmax(96px, auto);
    grid-template-areas:
      "image main qty delete sum";
    align-items: center;
  }
  .cartRow__sum { justify-self: end; text-align: right; }
  .dialog {
    place-items: center;
    padding: var(--space-6);
  }
  .dialog__panel {
    width: min(780px, 100%);
    max-height: min(760px, calc(100dvh - 48px));
    border-radius: var(--radius-xl);
  }
  .checkoutGrid { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr); }
  .orderGroup__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .orderGroup__meta {
    justify-items: end;
    text-align: right;
    white-space: nowrap;
  }
  .suborderCard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .suborderCard__head .suborderCard__meta,
  .suborderCard__right { justify-content: flex-end; }
  .orderProductLine {
    grid-template-columns: 88px minmax(0, 1fr) minmax(72px, auto) minmax(92px, auto);
    grid-template-areas: "image main qty sum";
  }
  .orderProductLine--comment {
    grid-template-columns: 88px minmax(0, 1fr) minmax(72px, auto) minmax(92px, auto);
  }
  .orderProductLine__image {
    width: 88px;
    height: 88px;
  }
  .orderProductLine__sum { justify-self: end; }
  .invoice__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .invoice__total { text-align: right; }
}

@media (min-width: 1024px) {
  .grid,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (min-width: 1280px) {
  .grid,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 1180px) {
  .filterPanel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field--short { max-width: none; }
  .filterPanel--orders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .nav--top .iconBtn span { display: none; }
  .searchForm { flex-basis: 320px; }
  .catalogMeta { flex-basis: 100%; }
  .sortForm { flex: 1 1 220px; }
  .catalogResults__count { justify-content: start; }
  .filterPanel,
  .filterPanel--orders { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand__mark { font-size: 20px; }
  .iconBtn { padding: 0 var(--space-2); }
  .filterToggle {
    width: 52px;
    padding: 0;
  }
  .filterToggle span { display: none; }
  .filterPanel:not([hidden]),
  .filterPanel--orders:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    max-height: calc(100dvh - 40px);
    overflow: auto;
    grid-template-columns: 1fr;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-floating);
  }
  .detailsCard,
  .companyGroup,
  .invoice,
  .profileCard,
  .authCard,
  .empty { padding: var(--space-4); }
  .invoice__head {
    flex-direction: column;
  }
  .status-form { grid-template-columns: 1fr; }
  .orderLine,
  .order-line {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .grid,
  .products-grid { gap: var(--space-3); }
  .productCard__title { font-size: 14px; }
  .productCard__footer strong { font-size: 15px; }
  .detailsCard__title { grid-template-columns: 1fr; }
  .detailsCard__title .btn { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}