:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, sans-serif;
  color: #24211e;
  background: #f3f3f3;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { max-width: 1440px; padding-inline: clamp(12px, 3vw, 44px); margin-inline: auto; }
.header { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid #e6e2dd; }
.top { display: flex; justify-content: space-between; align-items: center; min-height: 66px; }
a { color: #9b4008; }
.brand { text-decoration: none; color: #24211e; font-size: 1.4rem; font-weight: 850; }
.brand span { color: #bc4c00; }
.cart-link { font-weight: 650; }
#cart-count { display: inline-block; min-width: 1.5em; text-align: center; background: #fbe7d0; border-radius: 10px; }
.intro { padding-block: 30px 22px; }
.eyebrow { color: #9b4008; font-size: .85rem; font-weight: 750; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; letter-spacing: -.045em; margin: 8px 0 12px; }
h2 { font-size: 1.35rem; margin: 0 0 12px; }
p { margin: 6px 0; }
.note { color: #625b54; font-size: .875rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: 22px; align-items: start; padding-bottom: 32px; }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.categories { display: flex; gap: 6px; overflow-x: auto; padding-block: 8px; }
.categories[hidden] { display: none; }
.categories button { flex: 0 0 auto; min-height: 34px; padding: 4px 9px; font-size: .84rem; white-space: nowrap; }
.categories button[aria-pressed="true"] { background: #fbe7d0; border-color: #eb8815; }
.subcategories { padding-top: 0; }
label { display: grid; gap: 4px; font-size: .875rem; font-weight: 650; }
input, select, textarea, button { font: inherit; border: 1px solid #c9c2ba; border-radius: 8px; padding: 8px 10px; min-height: 42px; }
input, select, textarea { width: 100%; color: inherit; background: white; }
textarea { resize: vertical; }
button { background: #eb8815; border-color: #eb8815; color: #2c1703; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.secondary { color: #9b4008; background: white; border-color: #c9c2ba; }
.table-wrap, .request { background: #fff; border: 1px solid #e6e2dd; border-radius: 12px; overflow-wrap: anywhere; }
.table-wrap { margin-block: 12px; overflow: hidden; }
.products { width: 100%; border-collapse: collapse; text-align: left; }
.products th, .products td { padding: 10px; border-bottom: 1px solid #eae5e0; vertical-align: middle; }
.products th { background: #faf8f5; color: #524a42; font-size: .8rem; }
.products th small { display: block; font-size: .68rem; }
.products tbody tr:last-child td { border-bottom: 0; }
.products .category-row td { background: #fbe7d0; color: #783206; font-weight: 750; }
.price-column { text-align: center; white-space: nowrap; font-size: .86rem; font-variant-numeric: tabular-nums; }
.order-column { width: 150px; text-align: center; }
.product { display: flex; align-items: center; gap: 10px; }
.product-media { width: 56px; flex: 0 0 56px; text-align: center; }
.product-image { display: block; height: 56px; width: 56px; object-fit: contain; background: #f4f3f1; border-radius: 6px; }
.placeholder { display: grid; place-items: center; font-size: .68rem; }
.photo-next { min-height: 26px; margin-top: 3px; padding: 1px 6px; font-size: .72rem; }
.product h3 { font-size: .9rem; line-height: 1.3; margin: 0; }
.product .note { margin: 3px 0; }
.product-category { margin: 3px 0; color: #9b4008; font-size: .78rem; }
.mobile-prices { display: none; }
.add { display: grid; grid-template-columns: minmax(48px, 1fr) auto; gap: 5px; }
.add input, .add button { padding-inline: 6px; font-size: .875rem; }
.add button { white-space: nowrap; overflow-wrap: normal; }
.request { padding: 16px; scroll-margin-top: 78px; }
.cart { margin: 0; padding: 0; list-style: none; }
.cart li { display: grid; grid-template-columns: minmax(0, 1fr) 68px 42px; align-items: center; gap: 6px; padding-block: 8px; border-bottom: 1px solid #e6e2dd; font-size: .85rem; }
#request-form { display: grid; gap: 10px; margin-top: 14px; }
@media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .price-column { display: none; }
  .order-column { width: 94px; min-width: 94px; }
  .products th, .products td { padding: 8px; }
  .add { grid-template-columns: minmax(0, 1fr); }
  .add input { text-align: center; }
  .add button { font-size: .75rem; }
  .mobile-prices { display: block; font-size: .78rem; }
  .mobile-prices summary { color: #9b4008; cursor: pointer; }
  .mobile-prices ul { padding: 0; margin: 4px 0 0; list-style: none; }
}
@media (max-width: 350px) { .filters { grid-template-columns: 1fr; } }

.confirm-order { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.confirm-order[hidden], .receipt[hidden] { display: none; }
.confirm-order input {
  appearance: none;
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #74695e;
  border-radius: 999px;
  background: #eee8e2;
  cursor: pointer;
}
.confirm-order input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #74695e;
}
.confirm-order input:checked { background: #eb8815; border-color: #a64c04; }
.confirm-order input:checked::after { left: 21px; background: #452004; }
.receipt {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #79a38a;
  border-radius: 10px;
  color: #12442e;
  background: #eaf6ee;
}
.receipt h3 { margin: 0 0 4px; font-size: 1.05rem; }
.receipt p { margin: 4px 0; font-size: .875rem; }
.receipt-icon {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: #246644;
  text-align: center;
  line-height: 30px;
  font-weight: 750;
}
.receipt button { margin-top: 6px; }