:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #20241e;
  background: #f5f6f0;
  --muted: #5e6559;
  --line: #d9dfd3;
  --dark: #1c352a;
  --accent: #d4ed95;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #356b4c; outline-offset: 4px; }
.wrap { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-content { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 750; }
.brand-mark { width: 23px; height: 23px; border-radius: 8px 8px 8px 2px; background: var(--dark); display: grid; place-items: center; }
.brand-mark::before { content: ""; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
nav { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--muted); }
.nav-button, .secondary { border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #273d2c; padding: 9px 13px; font-weight: 650; }
.nav-button span { margin-left: 5px; }
.nav-button:hover, .secondary:hover { border-color: #6b7e6d; }

.product { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 7vw, 88px); margin-block: 62px 54px; }
.product-art {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  display: grid;
  align-items: end;
  min-height: 440px;
  padding: 38px;
  border-radius: 22px;
  color: #f4f8e9;
  background:
    radial-gradient(ellipse at 77% 12%, #547154 0%, transparent 53%),
    linear-gradient(145deg, #223e32, #122922 78%);
}
.orbit {
  position: absolute;
  z-index: -1;
  width: 120%;
  aspect-ratio: 1;
  top: -41%;
  right: -51%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #d4ed9500 0 21px, #d4ed9533 22px, #d4ed9500 23px 29px);
  mask-image: linear-gradient(145deg, transparent 7%, black 49%, transparent 95%);
}
.art-copy { min-width: 0; }
.art-top { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.art-top span { margin-left: 6px; color: #dae7c9; font-weight: 400; }
.art-number { font-size: clamp(90px, 13vw, 174px); font-weight: 750; line-height: 1; letter-spacing: -0.085em; color: var(--accent); margin: 8px 0 20px -8px; }
.art-number span { font-size: 0.57em; vertical-align: 11%; margin-left: 0.11em; }
.art-bottom { padding-top: 20px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #f4f8e94d; color: #dae7c9; font-size: 13px; }
.category { color: #426247; font-weight: 700; margin: 0 0 14px; font-size: 14px; }
h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.06; letter-spacing: -0.055em; margin: 0; }
.description { margin: 18px 0 24px; color: var(--muted); line-height: 1.6; font-size: 15px; }
.specs, .order-data { margin: 0; border-top: 1px solid var(--line); font-size: 14px; }
.specs div, .order-data div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.purchase { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 23px; }
.price-label { color: var(--muted); font-size: 12px; }
.price { font-size: 38px; line-height: 1.1; margin-top: 4px; font-weight: 750; letter-spacing: -0.05em; white-space: nowrap; }
.price span { font-size: 0.62em; }
.price .price-decimal { color: #4c5a4e; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--dark); color: #f9faed; border: 1px solid var(--dark); border-radius: 8px; padding: 13px 17px; min-height: 47px; font-weight: 700; font-size: 14px; }
.primary:hover { background: #2e503e; border-color: #2e503e; }
.primary span { color: var(--accent); }
.note { margin: 11px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }

.details { border-top: 1px solid var(--line); padding-block: 27px 29px; display: grid; grid-template-columns: minmax(150px, 0.44fr) minmax(0, 1fr); gap: 16px; }
h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.details-content { color: var(--muted); font-size: 14px; line-height: 1.65; }
.details-content p { margin: 0; }
.details-content p + p { margin-top: 8px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; padding-block: 19px 27px; font-size: 12px; }

dialog { width: min(460px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 16px; padding: 0; color: inherit; background: #fbfcf7; box-shadow: 0 22px 80px #14281f38; }
dialog::backdrop { background: #15271e7a; }
.dialog-body { position: relative; padding: 26px; }
.dialog-body h2 { padding-right: 36px; }
.close { position: absolute; right: 18px; top: 17px; padding: 0; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: var(--dark); border-radius: 8px; font-size: 22px; }
.dialog-intro { margin: 9px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.order-data dd { font-variant-numeric: tabular-nums; }
.wide { width: 100%; margin-top: 20px; }
.delivery { margin-top: 18px; padding: 13px; background: #ecf3e1; border: 1px solid #dce7d0; border-radius: 8px; }
.delivery label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.delivery-row { display: flex; gap: 8px; }
.delivery-row input { width: 100%; min-width: 0; padding: 8px; border-radius: 6px; border: 1px solid #c3d1bb; color: #203324; background: #fff; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 13px; }
.delivery-row button { flex: none; }
.status-message { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.status-message:empty { margin: 0; }
.recent-orders { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.recent-orders button { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; width: 100%; text-align: left; }
.recent-orders button span:last-child { color: var(--muted); font-size: 12px; }
.page-message { position: fixed; bottom: 14px; right: 14px; left: 14px; margin: auto; padding: 14px; max-width: 460px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }

@media (max-width: 780px) {
  .wrap { width: calc(100% - 36px); }
  .header-content { min-height: 62px; }
  .product { grid-template-columns: 1fr; gap: 26px; margin-block: 30px; }
  .product-art { min-height: 275px; padding: 24px; }
  .art-number { margin-left: -4px; }
  .details { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  nav { gap: 11px; }
  .nav-button { padding-inline: 8px; }
}