*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "InterVariable";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: max(0.75rem, env(safe-area-inset-top));
    left: max(0.75rem, env(safe-area-inset-left));
    padding: 0.75rem 1rem;
    color: #fff;
    background: #11110f;
    border: 2px solid var(--accent);
    border-radius: 0.25rem;
    font-weight: 750;
    transform: translateY(-200%);
    transition: transform 0.16s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  tab-size: 4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
optgroup,
select,
textarea {
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

summary {
  display: list-item;
}

[hidden] {
  display: none !important;
}

:root {
  --ink: #11110f;
  --paper: #f4f3ef;
  --white: #ffffff;
  --line: rgba(17, 17, 15, 0.15);
  --accent: #ffca18;
  --muted: #696963;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "InterVariable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  width: min(1480px, calc(100% - 48px));
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: var(--ink);
  color: var(--accent);
  border-radius: 8px 8px 8px 2px;
  letter-spacing: 0;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  font-size: 0.9rem;
  font-weight: 650;
}

.site-header nav a:not(.account-link) {
  color: #4c4c47;
}

.account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
}

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

.mobile-menu > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: none;
  width: min(260px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248, 247, 242, 0.98);
  box-shadow: 0 18px 55px rgba(35, 34, 29, 0.16);
}

.mobile-menu > div a {
  display: flex;
  padding: 12px 13px;
  border-radius: 10px;
}

.mobile-menu > div a:hover {
  background: rgba(17, 17, 15, 0.06);
}

.hero {
  width: min(1480px, calc(100% - 48px));
  min-height: calc(100vh - 132px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(540px, 1.14fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 58px 0 64px;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 24px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  margin: 0 10px 3px 0;
  background: var(--accent);
}

h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 5rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.042em;
}

h1 em {
  color: #8a8a82;
  font-style: normal;
}

.hero-text {
  max-width: 620px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

.primary-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--white);
  border-radius: 4px;
  font-weight: 760;
  transition: transform 180ms ease, background 180ms ease;
}

.primary-button:hover {
  background: #2b2b27;
  transform: translateY(-2px);
}

.primary-button span {
  color: var(--accent);
  font-size: 1.25rem;
}

.price-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 48px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.highlights div {
  padding: 19px 20px 18px 0;
}

.highlights div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.highlights dt {
  font-size: clamp(1.15rem, 1.6vw, 1.52rem);
  font-weight: 820;
  letter-spacing: -0.035em;
}

.highlights dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.product-stage {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background-color: #e7e7e2;
  background-image: linear-gradient(rgba(17, 17, 15, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 15, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  border-radius: 2px;
}

.product-stage::after {
  content: "1000";
  position: absolute;
  right: -18px;
  bottom: -46px;
  color: rgba(17, 17, 15, 0.055);
  font-size: clamp(6rem, 13vw, 13rem);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.05em;
}



.stage-label {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.availability {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 17, 15, 0.12);
  font-size: 0.78rem;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.availability-dot {
  width: 8px;
  height: 8px;
  background: #30a052;
  border-radius: 50%;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--white);
}

.trust-strip p {
  min-height: 74px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }

  .product-stage {
    min-height: 580px;
  }
}

@media (max-width: 720px) {
  .site-header,
  .hero {
    width: min(100% - 32px, 1480px);
  }

  .site-header {
    height: 76px;
  }

  .site-header nav a:not(.account-link) {
    display: none;
  }

  .site-header nav {
    gap: 8px;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu > div a {
    display: flex !important;
  }

  .account-link {
    padding: 9px 13px;
    font-size: 0.8rem;
  }

  .hero {
    min-height: auto;
    gap: 38px;
    padding: 40px 0 32px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .primary-button {
    width: 100%;
  }

  .highlights {
    margin-top: 34px;
  }

  .highlights div,
  .highlights div + div {
    padding: 15px 9px;
  }

  .highlights div:first-child {
    padding-left: 0;
  }

  .product-stage {
    min-height: 410px;
    margin: 0 -16px;
  }

  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-strip p:nth-child(2n) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--accent);
}

.hero-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 1.18rem;
  font-weight: 820;
}

.hero-price small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.section-index {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.section-index.light {
  color: rgba(255, 255, 255, 0.55);
}

.intro-section,
.gallery-section,
.delivery-section {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(88px, 11vw, 160px) 0;
}

.intro-heading,
.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.7fr);
  gap: clamp(32px, 8vw, 120px);
  align-items: end;
  margin-top: 30px;
}

.intro-heading h2,
.section-heading-row h2,
.technology-copy h2,
.specs-title h2,
.delivery-layout h2,
.order-section h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 4.2rem);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: -0.038em;
}

.intro-heading > p,
.section-heading-row > p,
.delivery-layout > div > p,
.technology-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.24rem);
  line-height: 1.6;
}

.runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.runtime-grid article {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.runtime-grid article:last-child {
  border-right: 0;
}

.runtime-grid svg {
  color: #7c7c74;
  stroke-width: 1.4;
}

.runtime-grid strong {
  margin-top: auto;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  letter-spacing: -0.04em;
}

.runtime-grid span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.9rem;
}

.fine-print {
  max-width: 780px;
  margin: 18px 0 0 auto;
  color: #5b5b55;
  font-size: 0.82rem;
  line-height: 1.5;
}

.technology-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 780px;
  background: var(--ink);
  color: var(--white);
}

.technology-visual {
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--accent);
  background-image: linear-gradient(rgba(17, 17, 15, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 15, 0.09) 1px, transparent 1px);
  background-size: 38px 38px;
}

.technology-visual img {
  width: min(95%, 760px);
  height: auto;
  mix-blend-mode: multiply;
}

.technology-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 120px);
}

.technology-copy h2 {
  margin-top: 30px;
}

.technology-copy > p {
  max-width: 620px;
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.63);
}

.technology-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.technology-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.9rem;
  font-weight: 650;
}

.technology-list li:nth-child(odd) {
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.technology-list li:nth-child(even) {
  padding-left: 20px;
}

.technology-list svg {
  width: 19px;
  color: var(--accent);
}

.section-heading-row > p {
  align-self: end;
  max-width: 530px;
}

.product-gallery {
  margin-top: clamp(52px, 8vw, 92px);
}

.gallery-main {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e7e7e2;
}

.gallery-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(17, 17, 15, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 15, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.gallery-main img {
  position: relative;
  width: min(80%, 900px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.gallery-counter {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.gallery-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, calc((100% - 50px) / 6));
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.gallery-thumb {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.25;
  padding: 0;
  overflow: hidden;
  background: #e7e7e2;
  border: 2px solid transparent;
  cursor: pointer;
  scroll-snap-align: start;
}

.gallery-thumb.active {
  border-color: var(--ink);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.specs-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  background: var(--ink);
  color: var(--white);
}

.specs-title {
  padding: clamp(70px, 8vw, 126px);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.specs-title h2 {
  margin-top: 30px;
}

.manual-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-top: 54px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
}

.manual-link span {
  color: var(--accent);
}

.specs-list {
  margin: 0;
  padding: clamp(54px, 7vw, 112px);
}

.specs-list div {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 1fr;
  gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.specs-list dt {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.84rem;
}

.specs-list dd {
  margin: 0;
  font-weight: 650;
}

.delivery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.7fr);
  gap: clamp(60px, 10vw, 160px);
  margin-top: 30px;
}

.delivery-layout > div > p {
  max-width: 680px;
  margin-top: 34px;
}

.delivery-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.delivery-steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.delivery-steps > li > span {
  color: #8b8b84;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
}

.delivery-steps strong {
  display: block;
  font-size: 1.04rem;
}

.delivery-steps p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.order-section {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 0.72fr);
  gap: clamp(70px, 10vw, 170px);
  align-items: center;
  padding: clamp(80px, 10vw, 150px) max(24px, calc((100vw - 1360px) / 2));
  background: #252522;
  color: var(--white);
}

.order-section h2 {
  margin-top: 28px;
}

.order-card {
  padding: 28px;
  background: var(--white);
  color: var(--ink);
}

.order-product {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.order-product img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  background: #eee;
}

.order-product div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.order-product strong {
  font-size: 1.24rem;
}

.order-product span {
  color: var(--muted);
  font-size: 0.84rem;
}

.order-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26px 0;
}

.order-price span {
  color: var(--muted);
  font-size: 0.84rem;
}

.order-price strong {
  font-size: 1.6rem;
  letter-spacing: -0.035em;
}

.accent-button {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 22px;
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.accent-button:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
}

.primary-button.button-disabled,
.accent-button.button-disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary-button.button-disabled:hover,
.accent-button.button-disabled:hover,
.primary-button:disabled:hover {
  filter: none;
  transform: none;
}

.accent-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
  transform: none;
}

.order-note,
.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 42px;
  align-items: start;
  padding: 58px max(24px, calc((100vw - 1360px) / 2));
  background: #11110f;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.footer-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.footer-brand strong {
  letter-spacing: 0.14em;
}

.footer-brand p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

.footer-links,
.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 11px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
}

.footer-links a:hover,
.footer-contacts a:hover {
  color: var(--white);
}

.footer-contacts {
  align-items: flex-end;
}

/*
  Площадки магазина идут отдельной строкой под тремя колонками подвала, а не
  четвёртой колонкой: их семь, и в колонке они превратились бы в узкий столбик.
*/
.footer-channels {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-channels .section-index {
  color: rgba(255, 255, 255, 0.42);
}

.footer-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.footer-channel:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
}

.footer-channel-icon {
  flex: none;
  opacity: 0.72;
}

.footer-channel:hover .footer-channel-icon {
  opacity: 1;
}

.site-header-compact {
  width: min(1360px, calc(100% - 48px));
}

.subpage {
  min-height: 100vh;
}

.auth-layout {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 88px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 0.72fr);
  gap: clamp(60px, 10vw, 160px);
  align-items: center;
  padding: 64px 0 90px;
}

.auth-intro h1,
.account-heading h1,
.checkout-heading h1,
.status-card h1,
.legal-article h1 {
  margin-top: 28px;
}

.auth-intro > p:last-child {
  max-width: 570px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.auth-card {
  padding: clamp(28px, 4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(17, 17, 15, 0.08);
}

.auth-card-title {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.auth-card-title svg {
  margin-top: 3px;
}

.auth-card h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}

.auth-card-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.auth-card label,
.checkout-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.84rem;
  font-weight: 680;
}

.auth-card input,
.checkout-form input,
.checkout-form select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  background: #fafaf7;
  border: 1px solid #ccccC5;
  border-radius: 2px;
  color: var(--ink);
}

.auth-card input:focus,
.checkout-form input:focus,
.checkout-form select:focus {
  border-color: var(--ink);
}

.auth-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.75rem;
}

.form-button {
  width: 100%;
  margin-top: 28px;
  border: 0;
  cursor: pointer;
}

.auth-switch {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.auth-switch a {
  color: var(--ink);
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-error {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fff1ec;
  border: 1px solid #e6a791;
  color: #7b2810;
  font-size: 0.84rem;
  line-height: 1.45;
}

.account-heading,
.checkout-heading {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: flex-end;
  padding: 74px 0 62px;
}

.account-heading h1,
.checkout-heading h1 {
  font-size: clamp(2.1rem, 3.9vw, 4.2rem);
}

.account-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: 0.85rem;
}

.account-contact button {
  margin-top: 9px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.orders-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 110px;
}

.orders-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.orders-title h2 {
  margin: 0;
  font-size: 1.35rem;
}

.account-buy-link {
  font-size: 0.84rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.order-row {
  display: grid;
  grid-template-columns: 1.2fr 0.65fr 0.7fr 1fr 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.order-row > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.order-row span {
  color: var(--muted);
  font-size: 0.75rem;
}

.order-row strong {
  font-size: 0.9rem;
}

.order-payment-action {
  align-self: center;
  min-width: 104px;
}

.order-payment-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 760;
  cursor: pointer;
}

.order-payment-action button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.order-payment-action small {
  max-width: 180px;
  color: #8f2d18;
  font-size: 0.72rem;
  line-height: 1.35;
}

.account-order-card {
  border-bottom: 1px solid var(--line);
}

.account-order-card .order-row {
  border-bottom: 0;
}

.account-order-messages {
  margin: 0 0 24px;
  padding: 20px 22px;
  background: #fff8d5;
  border-left: 4px solid var(--accent);
}

.account-order-messages > div {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.account-order-messages article + article {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 15, 0.14);
}

.account-order-messages p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.account-order-messages small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.empty-orders {
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.empty-orders > svg {
  color: #8f8f87;
}

.empty-orders h3 {
  margin: 20px 0 0;
  font-size: 1.7rem;
}

.empty-orders p {
  max-width: 430px;
  margin: 10px 0 26px;
  color: var(--muted);
  line-height: 1.5;
}

.checkout-product-mini {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px 14px 14px;
  background: var(--white);
  border: 1px solid var(--line);
}

.checkout-product-mini img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  background: #eee;
}

.checkout-product-mini div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.checkout-product-mini span {
  color: var(--muted);
  font-size: 0.78rem;
}

.checkout-product-mini b {
  margin-top: 3px;
  font-size: 1.03rem;
}

.checkout-form {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 120px;
}

.checkout-block {
  margin-top: 18px;
  padding: clamp(26px, 4vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
}

.checkout-block-title {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.checkout-block-title > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  background: var(--ink);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
}

.checkout-block-title h2 {
  margin: 0;
  font-size: 1.42rem;
  letter-spacing: -0.035em;
}

.checkout-block-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.form-grid .span-2 {
  grid-column: span 2;
}

.input-action {
  display: grid;
  grid-template-columns: 1fr auto;
}

.input-action input {
  border-right: 0;
}

.input-action button,
.calculate-button,
.secondary-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--white);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 750;
}

.input-action button:disabled,
.calculate-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.input-action svg,
.calculate-button svg,
.secondary-button svg {
  width: 17px;
}

.search-results {
  max-height: 290px;
  overflow: auto;
  border: 1px solid var(--line);
  border-top: 0;
}

.search-results button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}

.search-results button:hover {
  background: #f6f6f2;
}

.search-results span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-results small {
  color: var(--muted);
}

.checkout-form .field-hint {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.45;
}

.address-suggest-popover {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--white);
}

.city-locate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.city-locate[hidden] {
  display: none;
}

.city-locate svg {
  width: 16px;
  flex: none;
}

.city-locate:disabled {
  color: var(--muted);
  cursor: progress;
  text-decoration: none;
}

.address-suggest-popover .address-results {
  border: 0;
}

.address-suggest-attribution {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  background: #f5f5f1;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.address-suggest-attribution > span {
  display: inline;
}

.address-suggest-attribution > strong {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.address-suggest-attribution:hover,
.address-suggest-attribution:focus-visible {
  background: var(--accent);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.delivery-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.checkout-form[data-store-pickup-only="1"] .delivery-toggle {
  grid-template-columns: 1fr;
}

.delivery-toggle button {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f5f5f1;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 720;
}

.delivery-toggle button.active {
  background: #fff8d5;
  border-color: var(--ink);
}

.delivery-toggle svg {
  width: 20px;
}

.store-pickup-card {
  margin-top: 20px;
  padding: clamp(22px, 4vw, 34px);
  background: #fff8d5;
  border: 1px solid var(--ink);
}

.store-pickup-card h3 {
  margin: 10px 0 14px;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.store-pickup-card p {
  margin: 6px 0;
  line-height: 1.55;
}

.store-pickup-card small {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.55;
}

.pickup-map {
  position: relative;
  margin-top: 20px;
  background: #e9e9e3;
  border: 1px solid var(--ink);
}

.pickup-map-frame {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 400px);
  border: 0;
}

.pickup-map-message {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
}

.pickup-map-frame + .pickup-map-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9e3;
}

.pickup-route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 16px;
  background: var(--white);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 750;
}

.pickup-route svg {
  width: 17px;
  flex: none;
}

.pickup-route:hover,
.pickup-route:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.point-picker {
  margin-top: 20px;
}

.point-picker,
.pvz-picker,
.pvz-toolbar,
.pvz-search-input,
.pvz-browser,
.pvz-map-shell,
.pvz-list {
  min-width: 0;
  max-width: 100%;
}

.point-retry {
  width: 100%;
}

.pvz-picker {
  margin-top: 18px;
}

.pvz-toolbar {
  padding: 18px;
  background: #f5f5f1;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.pvz-toolbar > label {
  margin: 0 0 9px;
}

.pvz-search-input {
  position: relative;
}

.pvz-search-input > span,
.pvz-search-input > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.pvz-search-input > svg {
  width: 18px;
  height: 18px;
}

.checkout-form .pvz-search-input input {
  padding-right: 42px;
  padding-left: 42px;
  background: var(--white);
}

.checkout-form .pvz-search-input input:disabled {
  background: #ecece7;
  color: var(--muted);
  cursor: not-allowed;
}

.pvz-toolbar [data-point-status] {
  min-height: 20px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.pvz-browser {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.85fr);
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
}

.pvz-map-shell {
  position: relative;
  overflow: hidden;
  background: #e9e9e3;
}

.pvz-map {
  width: 100%;
  height: 500px;
  min-height: 420px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 58%),
    #e9e9e3;
}

.pvz-map:focus-visible {
  position: relative;
  z-index: 500;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.pvz-map-message {
  position: absolute;
  z-index: 450;
  top: 50%;
  left: 50%;
  width: min(320px, calc(100% - 36px));
  margin: 0;
  padding: 13px 16px;
  background: rgba(17, 17, 15, 0.91);
  color: var(--white);
  box-shadow: 0 14px 42px rgba(17, 17, 15, 0.2);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, -50%);
}

.pvz-map-message:empty {
  display: none;
}

.pvz-list {
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f7f7f3;
  scrollbar-color: var(--ink) #e3e3dd;
  scrollbar-width: thin;
}

.pvz-list:empty::before {
  content: attr(data-empty-message);
  display: grid;
  min-height: 100%;
  padding: 30px 22px;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.pvz-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 17px 18px 18px;
  overflow: hidden;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.pvz-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 150ms ease;
}

.pvz-card:hover {
  background: #fffdf4;
}

.pvz-card.is-selected {
  background: #fff8d5;
  box-shadow: inset 0 0 0 1px var(--ink);
}

.pvz-card.is-selected::before {
  transform: scaleY(1);
}

.pvz-card:focus-visible {
  z-index: 1;
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}

.pvz-card__head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.pvz-card__head strong {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.pvz-card__head span {
  flex: 0 0 auto;
  padding: 3px 6px;
  background: var(--ink);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 760;
  line-height: 1.25;
}

.pvz-card__address {
  font-size: 0.82rem;
  font-weight: 690;
  line-height: 1.45;
}

.pvz-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.pvz-card__meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pvz-selected {
  position: relative;
  display: grid;
  grid-template-columns: minmax(125px, auto) minmax(0, 1fr);
  gap: 5px 20px;
  align-items: center;
  margin-top: 12px;
  padding: 16px 18px 16px 22px;
  overflow: hidden;
  background: #fff8d5;
  border: 1px solid var(--ink);
}

.pvz-selected::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}

.pvz-selected > span {
  grid-row: span 2;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pvz-selected strong,
.pvz-selected small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pvz-selected strong {
  font-size: 0.86rem;
  line-height: 1.4;
}

.pvz-selected small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.search-results button.is-active {
  background: #fff8d5;
  box-shadow: inset 4px 0 0 var(--accent);
}

.checkout-page .leaflet-container {
  z-index: 0;
  background: #e9e9e3;
  color: var(--ink);
  font-family: inherit;
}

.checkout-page .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(17, 17, 15, 0.16);
}

.checkout-page .leaflet-control-zoom a,
.checkout-page .leaflet-control-zoom a:first-child,
.checkout-page .leaflet-control-zoom a:last-child {
  width: 38px;
  height: 38px;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: 700 20px/38px Inter, "Segoe UI", Arial, sans-serif;
}

.checkout-page .leaflet-control-zoom a:last-child {
  border-bottom: 0;
}

.checkout-page .leaflet-control-zoom a:hover,
.checkout-page .leaflet-control-zoom a:focus {
  background: var(--accent);
}

.checkout-page .leaflet-control-attribution {
  max-width: calc(100% - 10px);
  background: rgba(255, 255, 255, 0.88);
  color: #5e5e58;
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

.checkout-page .leaflet-control-attribution a {
  color: var(--ink);
  text-decoration: underline;
}

.checkout-page .leaflet-popup-content-wrapper,
.checkout-page .leaflet-popup-tip {
  background: var(--ink);
  color: var(--white);
}

.checkout-page .leaflet-popup-content-wrapper {
  border-radius: 0;
  box-shadow: 0 16px 42px rgba(17, 17, 15, 0.26);
}

.checkout-page .leaflet-popup-content {
  margin: 15px 17px;
  min-width: 180px;
  font: 0.76rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
}

.checkout-page .leaflet-popup-content strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.82rem;
}

.checkout-page .leaflet-popup-close-button {
  color: var(--white);
}

.checkout-page .leaflet-popup-close-button:hover,
.checkout-page .leaflet-popup-close-button:focus {
  color: var(--accent);
}

.secondary-button {
  background: transparent;
  color: var(--ink);
}

.calculate-button {
  width: 100%;
  margin-top: 24px;
  background: transparent;
  color: var(--ink);
}

.quote-list {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.quote-list legend {
  margin-bottom: 10px;
  font-size: 0.84rem;
  font-weight: 700;
}

.quote-list > label {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 13px;
  align-items: center;
  min-height: 68px;
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  cursor: pointer;
}

.quote-list > label.selected {
  background: #fff8d5;
  border-color: var(--ink);
}

.quote-list > label:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 2px;
}

.quote-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.auth-consent {
  margin-top: 8px;
}

.quote-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.quote-check svg {
  width: 14px;
}

.quote-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quote-name small {
  color: var(--muted);
}

.checkout-error {
  margin-top: 18px;
}

.checkout-total {
  margin-top: 18px;
  padding: clamp(26px, 4vw, 44px);
  background: #252522;
  color: var(--white);
}

.total-lines p {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.total-lines span {
  color: rgba(255, 255, 255, 0.58);
}

.total-lines .total-main {
  padding: 24px 0;
  font-size: 1.45rem;
}

.total-lines .total-main span,
.total-lines .total-main strong {
  color: var(--white);
}

.consent-check {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  gap: 12px !important;
  align-items: start;
  margin: 20px 0 !important;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.consent-check input {
  width: 18px !important;
  min-height: 18px !important;
  margin-top: 2px;
  accent-color: var(--accent);
}

.consent-check a {
  color: var(--white);
  text-decoration: underline;
}

.auth-card .consent-check {
  color: var(--muted);
}

.auth-card .consent-check a {
  color: var(--ink);
}

.consent-check-separated {
  margin-top: -8px !important;
}

.consent-note {
  margin: -7px 0 20px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  line-height: 1.55;
}

.consent-note a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-card .consent-note {
  color: var(--muted);
}

.auth-card .consent-note a {
  color: var(--ink);
}

.checkout-submit {
  width: 100%;
}

.checkout-total .secure-note {
  color: rgba(255, 255, 255, 0.55);
}

.spin {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-page {
  background: #e9e9e4;
}

.status-card {
  width: min(720px, calc(100% - 48px));
  margin: clamp(70px, 10vw, 140px) auto;
  padding: clamp(34px, 6vw, 70px);
  background: var(--white);
  text-align: center;
}

.status-card > svg {
  width: 54px;
  height: 54px;
  margin-bottom: 25px;
  stroke-width: 1.4;
}

.status-card h1 {
  font-size: clamp(1.95rem, 3.6vw, 3.6rem);
}

.status-card > p:not(.section-index) {
  max-width: 560px;
  margin: 24px auto 0;
  color: var(--muted);
  line-height: 1.6;
}

.status-card dl {
  margin: 34px 0;
  border-top: 1px solid var(--line);
}

.status-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.status-card dd {
  margin: 0;
  font-weight: 700;
}

.status-card .primary-button {
  margin-top: 30px;
}

.status-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}

.status-actions .primary-button {
  margin: 0;
}

.status-actions > a:last-child {
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
}

.legal-article {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0 110px;
}

.legal-article h1 {
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.legal-lead {
  margin: 30px 0 64px;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.6;
}

.legal-article h2 {
  margin: 42px 0 12px;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.legal-article p:not(.section-index):not(.legal-lead) {
  margin: 0 0 16px;
  color: #4f4f4a;
  line-height: 1.75;
}

.legal-article a {
  color: var(--ink);
  font-weight: 680;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 15, 0.35);
  text-underline-offset: 3px;
}

.legal-article ul,
.legal-article ol {
  display: grid;
  gap: 10px;
  margin: 0 0 20px 1.25rem;
  color: #4f4f4a;
  line-height: 1.7;
}

.legal-article ul {
  list-style: square;
}

.legal-article ol {
  list-style: decimal;
}

.legal-article li {
  padding-left: 5px;
}

.legal-warning {
  margin: -30px 0 54px;
  padding: 22px 24px;
  background: #fff2bd;
  border-left: 5px solid var(--accent);
  color: #4a3a00;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.65;
}

.legal-table-wrap {
  width: 100%;
  margin: 0 0 22px;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--white);
}

.legal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.55;
}

.legal-table th,
.legal-table td {
  padding: 15px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th:last-child,
.legal-table td:last-child {
  border-right: 0;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-table th {
  background: var(--ink);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.legal-table code {
  padding: 2px 5px;
  background: #ecebe6;
  font-size: 0.76rem;
}

.admin-page {
  background: #e9e9e4;
}

.admin-heading,
.admin-dashboard,
.admin-notification-state,
.admin-orders-section {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 0 46px;
}

.admin-heading h1 {
  margin: 24px 0 0;
  font-size: clamp(2.1rem, 4vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.admin-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 0.9rem;
}

.admin-profile span {
  color: var(--muted);
}

.admin-profile a {
  margin-top: 8px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.admin-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #171715;
  color: var(--white);
}

.admin-dashboard article {
  min-height: 170px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  gap: 20px;
  padding: 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-dashboard article:last-child {
  border-right: 0;
}

.admin-dashboard article.has-issues {
  background: #fff0e9;
  color: #712710;
}

.admin-dashboard svg {
  width: 22px;
  height: 22px;
}

.admin-dashboard span {
  align-self: end;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.admin-dashboard .has-issues span {
  color: #8b4934;
}

.admin-dashboard strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: clamp(1.95rem, 3.4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.admin-notification-state {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
}

.admin-notification-state > svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.admin-notification-state div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-notification-state > div:first-of-type {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-notification-state small {
  overflow-wrap: anywhere;
}

.admin-notification-retry {
  flex: 0 0 auto;
  align-items: flex-end;
}

.admin-notification-retry button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  cursor: pointer;
}

.admin-notification-retry button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-notification-state span,
.admin-notification-state small {
  color: var(--muted);
  font-size: 0.875rem;
}

.admin-orders-section {
  padding: 28px 0 110px;
}

.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
}

.admin-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 700;
}

.admin-toolbar input,
.admin-toolbar select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  background: #f7f7f3;
  border: 1px solid #c9c9c1;
  color: var(--ink);
  font: inherit;
}

.admin-toolbar button,
.admin-toolbar > a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.admin-toolbar > a {
  background: transparent;
  color: var(--ink);
}

.admin-orders-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.admin-order-card {
  scroll-margin-top: 20px;
  padding: clamp(22px, 4vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
}

.admin-order-card.admin-order-highlighted {
  outline: 4px solid var(--accent);
  outline-offset: -4px;
}

.admin-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.admin-order-date,
.admin-payment-status {
  color: var(--muted);
  font-size: 0.875rem;
}

.admin-order-head h2 {
  margin: 7px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  letter-spacing: -0.045em;
}

.admin-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.admin-status {
  display: inline-flex;
  padding: 8px 11px;
  background: #eee;
  border: 1px solid #d5d5ce;
  font-size: 0.875rem;
  font-weight: 760;
}

.admin-status.status-accepted {
  background: #eaf7e8;
  border-color: #a8cfa0;
}

.admin-status.status-cancellation_pending,
.admin-status.status-cancelled {
  background: #fff0e9;
  border-color: #e6a791;
  color: #7b2810;
}

.admin-attention {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  background: #fff0e9;
  border-left: 4px solid #c94e28;
  color: #712710;
  line-height: 1.45;
}

.admin-attention svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.admin-order-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}

.admin-order-grid section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: #f8f8f5;
}

.admin-order-grid h3,
.admin-messages h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-order-grid a,
.admin-order-grid span {
  overflow-wrap: anywhere;
  color: #4f4f4a;
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-order-grid a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-order-grid small {
  margin-top: 5px;
  color: var(--muted);
}

.admin-cancel-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #f5f5f1;
  line-height: 1.5;
}

.admin-order-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.admin-order-actions button,
.admin-messages form button,
.admin-cancel-form button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 760;
  cursor: pointer;
}

.admin-order-actions .admin-cancel-button,
.admin-cancel-form button:last-child {
  background: transparent;
  color: #7b2810;
  border-color: #b94a28;
}

.admin-order-actions button:disabled,
.admin-messages form button:disabled,
.admin-cancel-form button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-order-actions small {
  color: var(--muted);
  font-size: 0.875rem;
}

.admin-cancel-form {
  margin-top: 14px;
  padding: 20px;
  background: #fff0e9;
  border: 1px solid #e6a791;
}

.admin-closing-receipt-form {
  background: #fff9dc;
  border-color: #d2b400;
}

.admin-cancel-form label,
.admin-messages form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 720;
}

.admin-cancel-form textarea,
.admin-cancel-form input,
.admin-messages textarea {
  width: 100%;
  resize: vertical;
  padding: 12px 13px;
  background: var(--white);
  border: 1px solid #c9c9c1;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}

.admin-cancel-form p {
  margin: 9px 0 15px;
  color: #7b4a38;
  font-size: 0.875rem;
  line-height: 1.45;
}

.admin-cancel-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-cancel-form .admin-confirm-cancel {
  background: #9e3518;
  border-color: #9e3518;
}

.admin-closing-receipt-form p {
  color: #5b5000;
}

.admin-closing-receipt-form .admin-confirm-cancel {
  background: var(--ink);
  border-color: var(--ink);
}

.admin-inline-error {
  margin: 15px 0 0;
  padding: 12px 14px;
  background: #fff0e9;
  border: 1px solid #e6a791;
  color: #7b2810;
}

.admin-messages {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.admin-messages-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-messages-title h3 {
  margin: 0;
}

.admin-message-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}

.admin-message-list article {
  max-width: 760px;
  padding: 14px 16px;
  background: #fff8d5;
  border-left: 3px solid var(--accent);
}

.admin-message-list p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.admin-message-list small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
}

.admin-no-messages {
  margin: 14px 0;
  color: var(--muted);
}

.admin-messages form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 12px;
  align-items: end;
  margin-top: 18px;
}

.admin-messages form label {
  grid-column: 1 / -1;
  margin: 0;
}

.admin-messages textarea {
  min-height: 92px;
}

.admin-messages form button {
  min-height: 92px;
  padding-inline: 24px;
}

.admin-empty {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  text-align: center;
}

.admin-empty h2 {
  margin: 18px 0 0;
  font-size: 1.8rem;
}

.admin-empty p {
  margin: 8px 0 0;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .intro-heading,
  .section-heading-row,
  .delivery-layout,
  .order-section,
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .runtime-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .runtime-grid article:nth-child(2) {
    border-right: 0;
  }

  .runtime-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .technology-section,
  .specs-section {
    grid-template-columns: 1fr;
  }

  .technology-copy {
    min-height: 680px;
  }

  .specs-title {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .gallery-main {
    min-height: 560px;
  }

  .order-section {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer-contacts {
    align-items: flex-start;
  }

  .auth-layout {
    min-height: auto;
    padding-top: 74px;
  }

  .auth-card {
    width: min(100%, 600px);
  }

  .admin-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-dashboard article:nth-child(2) {
    border-right: 0;
  }

  .admin-dashboard article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .admin-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-order-grid {
    grid-template-columns: 1fr 1fr;
  }

  .delivery-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-order-grid section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .intro-section,
  .gallery-section,
  .delivery-section,
  .site-header-compact,
  .auth-layout,
  .account-heading,
  .orders-section,
  .checkout-heading,
  .checkout-form,
  .legal-article {
    width: min(100% - 32px, 1360px);
  }

  .intro-heading,
  .section-heading-row {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .runtime-grid article,
  .runtime-grid article:nth-child(2) {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .technology-section {
    min-height: auto;
  }

  .technology-visual {
    min-height: 430px;
  }

  .technology-copy {
    min-height: auto;
    padding: 72px 24px 82px;
  }

  .technology-list {
    grid-template-columns: 1fr;
  }

  .technology-list li,
  .technology-list li:nth-child(odd),
  .technology-list li:nth-child(even) {
    padding: 0;
    border-right: 0;
  }

  .gallery-main {
    min-height: 390px;
  }

  .gallery-main img {
    width: 100%;
  }

  .gallery-thumbs {
    grid-auto-columns: calc((100% - 20px) / 3);
  }

  .specs-title,
  .specs-list {
    padding: 72px 24px;
  }

  .specs-list div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .delivery-layout {
    grid-template-columns: 1fr;
  }

  .order-section {
    grid-template-columns: 1fr;
    padding: 82px 16px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 48px 24px;
  }

  .footer-contacts {
    align-items: flex-start;
  }

  .auth-layout {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 54px;
  }

  .account-heading,
  .checkout-heading {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 54px;
  }

  .account-contact {
    align-items: flex-start;
  }

  .order-row {
    grid-template-columns: 1fr 1fr;
  }

  .checkout-product-mini {
    width: 100%;
  }

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

  .form-grid .span-2 {
    grid-column: span 1;
  }

  .input-action {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .input-action input {
    border-right: 1px solid #ccccc5;
  }

  .delivery-toggle {
    grid-template-columns: 1fr;
  }

  .pvz-toolbar {
    padding: 15px;
  }

  .pvz-browser {
    grid-template-columns: minmax(0, 1fr);
  }

  .pvz-map {
    height: clamp(300px, 82vw, 420px);
    min-height: 300px;
  }

  .pvz-list {
    height: auto;
    min-height: 120px;
    max-height: clamp(320px, 62vh, 420px);
  }

  .pvz-selected {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .pvz-selected > span {
    grid-row: auto;
    margin-bottom: 2px;
  }

  .quote-list > label {
    grid-template-columns: 24px 1fr;
  }

  .quote-list > label > strong:last-child {
    grid-column: 2;
  }

  .status-actions {
    flex-direction: column;
  }

  .admin-heading,
  .admin-dashboard,
  .admin-notification-state,
  .admin-orders-section {
    width: min(100% - 32px, 1280px);
  }

  .admin-heading {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 48px;
  }

  .admin-profile {
    align-items: flex-start;
  }

  .admin-dashboard {
    grid-template-columns: 1fr;
  }

  .admin-notification-state {
    flex-wrap: wrap;
  }

  .admin-notification-retry {
    width: 100%;
    align-items: stretch;
  }

  .admin-dashboard article,
  .admin-dashboard article:nth-child(2) {
    min-height: 130px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .admin-dashboard article:last-child {
    border-bottom: 0;
  }

  .admin-toolbar,
  .admin-order-grid,
  .admin-messages form {
    grid-template-columns: 1fr;
  }

  .admin-order-grid section:last-child,
  .admin-messages form label {
    grid-column: auto;
  }

  .admin-order-head {
    flex-direction: column;
  }

  .admin-status-stack {
    align-items: flex-start;
  }

  .admin-order-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-order-actions button,
  .admin-messages form button {
    width: 100%;
  }

  .admin-messages form button {
    min-height: 50px;
  }
}

@media (max-width: 420px) {
  .account-link {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .account-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .order-row {
    grid-template-columns: 1fr;
  }

  .order-row > div,
  .order-row strong,
  .status-card dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .status-card dl div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none !important;
  }
}

/* Progressive admin interactions. The base layout above remains usable without JS. */
.admin-order-card {
  position: relative;
  overflow: clip;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-order-card:hover {
  border-color: rgba(17, 17, 15, 0.28);
  box-shadow: 0 18px 50px rgba(17, 17, 15, 0.06);
}

.admin-order-card.is-updating::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: -35%;
  width: 35%;
  height: 4px;
  background: var(--accent);
  animation: admin-progress 900ms ease-in-out infinite;
}

@keyframes admin-progress {
  to {
    left: 100%;
  }
}

.admin-status.is-pending {
  background: #fff8d5;
  border-color: #d9b630;
}

.admin-order-actions button,
.admin-messages form button,
.admin-cancel-form button,
.admin-notification-retry button {
  transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}

.admin-order-actions button:not(:disabled):hover,
.admin-messages form button:not(:disabled):hover,
.admin-cancel-form button:not(:disabled):hover,
.admin-notification-retry button:not(:disabled):hover {
  transform: translateY(-1px);
}

.admin-cancel-form textarea:focus,
.admin-cancel-form input:focus,
.admin-messages textarea:focus,
.admin-toolbar input:focus,
.admin-toolbar select:focus {
  border-color: var(--ink);
}

.admin-inline-success {
  margin: 15px 0 0;
  padding: 12px 14px;
  background: #eaf7e8;
  border: 1px solid #a8cfa0;
  color: #245b21;
  line-height: 1.45;
}

.admin-inline-feedback {
  display: block;
  margin-top: 4px;
  color: #7b2810 !important;
}

.admin-notification-state.is-success {
  border-color: #a8cfa0;
  background: #f1faef;
}

.admin-message-list article.is-pending {
  border-left-color: #8b8b84;
  opacity: 0.62;
}

.admin-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 15px 18px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 60px rgba(17, 17, 15, 0.28);
  font-size: 0.875rem;
  font-weight: 680;
  line-height: 1.45;
}

.admin-order-head h2,
.admin-status,
.admin-payment-status {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .admin-toolbar button,
  .admin-toolbar > a {
    width: 100%;
  }

  .admin-toast {
    right: 16px;
    bottom: 16px;
    max-width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-order-card.is-updating::before {
    left: 0;
    width: 100%;
    animation: none;
  }
}

/* Global navigation and privacy controls. */
.scroll-top {
  position: fixed;
  z-index: 70;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 36px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent);
  box-shadow: 0 16px 44px rgba(17, 17, 15, 0.24);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.scroll-top svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: #24241f;
}

.scroll-top:focus-visible,
.cookie-button:focus-visible,
.footer-cookie-settings:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--accent);
}

.cookie-banner-open .scroll-top {
  opacity: 0;
  pointer-events: none;
}

.cookie-banner {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(1180px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  padding: clamp(24px, 4vw, 38px);
  max-height: calc(100dvh - 40px - env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #11110f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  box-shadow: 0 28px 90px rgba(17, 17, 15, 0.42);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cookie-banner .section-index {
  color: var(--accent);
}

.cookie-banner h2 {
  margin-top: 14px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.cookie-banner-copy > p:last-child {
  max-width: 720px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.65;
}

.cookie-banner-copy a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cookie-button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cookie-button-secondary:hover {
  border-color: var(--white);
}

.cookie-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.cookie-button-primary:hover {
  background: #ffd640;
}

.footer-cookie-settings {
  width: fit-content;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.footer-cookie-settings:hover {
  color: var(--white);
}

@media (max-width: 800px) {
  .cookie-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-button {
    flex: 1 1 0;
  }
}

@media (max-width: 520px) {
  .scroll-top {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }

  .cookie-banner {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 20px);
    padding: 22px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    max-height: calc(100dvh - 20px - env(safe-area-inset-top));
  }

  .cookie-banner-actions {
    flex-direction: column-reverse;
  }

  .cookie-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-top,
  .cookie-banner,
  .pvz-card,
  .pvz-card::before {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Catalog: the front page listing and the breadcrumb above a product. */
/* ------------------------------------------------------------------ */

.catalog-hero {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 32px;
}

.catalog-hero .hero-copy {
  max-width: 44ch;
}

.catalog-section {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
}

.catalog-section .section-lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.catalog-empty {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.catalog-card {
  border: 1px solid var(--line);
  background: var(--white);
}

.catalog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* The whole tile is one link, so the focus ring must sit on it, not on a
   child, to stay visible for keyboard users. */
.catalog-card-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.catalog-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper);
}

.catalog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.4vw, 28px);
}

.catalog-card-body h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.catalog-card-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.catalog-card-price {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 1.2rem;
  font-weight: 800;
}

.catalog-card-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalog-card-link:hover .catalog-card-body h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.breadcrumbs {
  width: min(1480px, calc(100% - 48px));
  margin: 24px auto 0;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: inherit;
}

@media (max-width: 720px) {
  .catalog-section,
  .breadcrumbs {
    width: calc(100% - 32px);
  }

  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Admin: catalog list, product editor, stock correction.             */
/* ------------------------------------------------------------------ */

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

.admin-section-head h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* A table is the honest shape for a model list, but it must not force the
   whole page to scroll sideways on a phone. */
.admin-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--white);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-table th,
.admin-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
}

.admin-table thead th {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-table tbody tr:last-child th,
.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.admin-status.status-draft {
  background: rgba(17, 17, 15, 0.08);
}

.admin-status.status-preview {
  background: rgba(255, 202, 24, 0.35);
}

.admin-status.status-active {
  background: rgba(46, 160, 67, 0.22);
}

.admin-status.status-archived {
  background: rgba(17, 17, 15, 0.05);
  color: var(--muted);
}

.admin-product-form {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
}

.admin-product-form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  background: var(--white);
}

.admin-product-form legend {
  padding: 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-product-form label,
.admin-category-form label,
.admin-stock-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.admin-product-form label > span,
.admin-category-form label > span,
.admin-stock-form label > span {
  font-weight: 700;
}

.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea,
.admin-category-form input,
.admin-category-form select,
.admin-stock-form input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  color: inherit;
}

.admin-product-form input:read-only {
  color: var(--muted);
  cursor: not-allowed;
}

.admin-product-form small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.admin-fieldset-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

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

.admin-repeat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-repeat-row input {
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
}

.admin-repeat-row [data-remove-row] {
  width: 40px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.admin-category-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-category {
  border: 1px solid var(--line);
  background: var(--white);
}

.admin-category-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
  padding: 20px;
}

.admin-category-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.admin-category-count {
  color: var(--muted);
  font-size: 0.85rem;
}

.admin-category-form button,
.admin-stock-form button,
.admin-product-form [data-add-row] {
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-product-form [data-add-row] {
  justify-self: start;
  grid-column: 1 / -1;
  background: transparent;
  color: var(--ink);
}

.admin-stock-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: end;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  background: var(--white);
}

.admin-media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-media-list li {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.85rem;
}

.admin-media-list img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper);
}

.admin-media-list code {
  color: var(--muted);
  font-size: 0.75rem;
  word-break: break-all;
}

.admin-toast-error {
  background: #8c1d18;
  color: #fff;
}

@media (max-width: 720px) {
  .admin-product-form {
    width: calc(100% - 32px);
  }

  .admin-product-form fieldset,
  .admin-category-form,
  .admin-stock-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Cart page and the add-to-cart affordance on a product card.        */
/* ------------------------------------------------------------------ */

.cart-section {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.cart-empty {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.cart-lines {
  display: grid;
  gap: 16px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--white);
}

/* A line the customer must act on is marked, not hidden: silently dropping it
   would leave them wondering where their item went. */
.cart-line-problem {
  border-color: #8c1d18;
  box-shadow: inset 3px 0 0 #8c1d18;
}

.cart-line img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: var(--paper);
}

.cart-line-body h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cart-line-body a {
  color: inherit;
}

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

.cart-line-warning {
  margin: 8px 0 0;
  color: #8c1d18;
  font-size: 0.88rem;
  line-height: 1.4;
}

.cart-line-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.cart-line-controls input {
  width: 84px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  text-align: center;
}

.cart-line-controls button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line-total {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  white-space: nowrap;
}

.cart-summary {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--ink);
  background: var(--white);
}

.cart-summary-total {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  font-size: 1.1rem;
}

.cart-summary-total strong {
  font-size: 1.6rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.cart-summary-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.cart-clear {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-link {
  align-self: center;
  font-weight: 700;
  text-underline-offset: 4px;
}

@media (max-width: 720px) {
  .cart-section {
    width: calc(100% - 32px);
  }

  /*
    The quantity field and "Удалить" need about 148px between them, so they
    cannot share the 72px image column: they overflowed into the total, which
    paints after them and covered the button completely. Every tap landed on
    the price instead, and the line could not be removed on a phone. They get
    a row of their own.
  */
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "image body"
      "total total"
      "controls controls";
    row-gap: 14px;
  }

  .cart-line img {
    grid-area: image;
    width: 72px;
    height: 72px;
  }

  .cart-line-body {
    grid-area: body;
  }

  .cart-line-controls {
    grid-area: controls;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
  }

  .cart-line-total {
    grid-area: total;
    text-align: right;
  }
}

/* Order contents, in the admin queue and in the customer's account. */

.admin-order-items,
.account-order-items {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.admin-order-items li,
.account-order-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.admin-order-items li:last-child,
.account-order-items li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-order-items span,
.account-order-items small {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-order-items b,
.account-order-items b {
  grid-row: 1;
  grid-column: 2;
  white-space: nowrap;
}

/* Upload forms in the product editor. */

.admin-upload-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px dashed var(--line);
  background: var(--white);
}

.admin-upload-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.admin-upload-form label > span {
  font-weight: 700;
}

.admin-upload-form input[type="text"],
.admin-upload-form input[type="file"] {
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
}

.admin-upload-form small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.admin-upload-form button {
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-media-list li input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: 0.85rem;
}

.admin-media-list li button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

[data-media-list] > button[type="submit"] {
  margin-top: 18px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Visually hidden but available to a screen reader. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Release switches that are currently off, shown to the operator. */

.admin-flags {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--white);
}

.admin-flags ul {
  margin: 0;
  padding-left: 20px;
}

.admin-flags small {
  color: var(--muted);
  line-height: 1.5;
}

.admin-flags code {
  font-size: 0.85em;
}

/* ------------------------------------------------------------------ */
/* Small screens: keep long Russian words, customer names and form     */
/* fields from breaking the layout.                                    */
/* ------------------------------------------------------------------ */

/*
  A display heading is the one place where a single word can be wider than a
  phone: "электростанции" once needed 361px against the 343px a narrow phone
  offers, and the excess dragged the whole page sideways. The type scale now
  starts small enough that it fits, but a scale can be raised again and a
  customer can always be named "Константинопольский", so the permission to
  break a word stays as the guard that does not depend on a number.
*/
.intro-heading h2,
.section-heading-row h2,
.technology-copy h2,
.specs-title h2,
.delivery-layout h2,
.order-section h2,
.account-heading h1,
.checkout-heading h1,
.auth-intro h1,
.status-card h1,
.catalog-hero h1,
.product-title,
.catalog-card-title {
  overflow-wrap: break-word;
}

@media (max-width: 720px) {
  /*
    Safari on iOS zooms the page whenever a focused field is smaller than 16px,
    and the page never zooms back. On a checkout form that reads as the layout
    jumping apart the moment the customer starts typing. These fields inherit
    their size from the label above them, so the size has to be stated here.
  */
  .auth-card input,
  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea,
  .pvz-search-input {
    font-size: 1rem;
  }

  /*
    The admin screens carry rules like `.admin-upload-form input[type="file"]`
    that pin the size to `inherit`; an attribute selector outweighs a plain
    class, so listing the same containers again would lose. The two `:not()`
    clauses are what give this rule the weight to win — they are not decorative.
  */
  .admin-page input:not([type="checkbox"]):not([type="radio"]),
  .admin-page select,
  .admin-page textarea {
    font-size: 1rem;
  }

  /*
    WCAG 2.2 asks for 24px of height on anything tappable. The footer and header
    links sat at 16-22px, which on a phone means missing them. Padding would
    move the text, so the height is added around it instead.
  */
  .footer-links a,
  .footer-cookie-settings,
  .footer-contacts a,
  .site-header nav a,
  .cart-clear,
  .cart-line-controls button,
  .cart-line-body h2 a,
  .account-contact button,
  .account-contact a,
  .account-buy-link,
  .admin-profile a,
  .admin-table th a,
  .admin-media-list button,
  .admin-repeat-row button,
  .admin-heading .section-index a,
  .auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* Per-row actions in the catalog table. */

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-row-actions button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.admin-row-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Removal is the one action here that cannot be undone, so it is not dressed
   the same as the reversible one next to it. */
.admin-row-actions .admin-row-danger {
  color: #8c1d18;
}

/* Refund form in the admin order card. */

.admin-refund-lines {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.admin-refund-lines li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.admin-refund-lines label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-refund-lines input[type='number'] {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  text-align: center;
}

.admin-refund-delivery {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}

/* ------------------------------------------------------------------ */
/* Cart badge in the header.                                          */
/* ------------------------------------------------------------------ */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/*
  Red because it has to be found without being looked for: the customer's
  question is "is anything in there?", answered from the corner of the eye.
  The brand's yellow accent is used for things you may click, so reusing it
  here would say "another button" rather than "you have something waiting".
*/
.cart-badge {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.cart-badge[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Admin: which photograph is the cover.                              */
/* ------------------------------------------------------------------ */

/*
  The cover is simply the first row, so the editor has to make "first" visible
  — otherwise the operator is choosing a cover by reading a paragraph of
  explanation instead of by looking.
*/
.admin-media-list li[data-media-first] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.admin-media-primary-mark {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-media-primary-mark[hidden],
.admin-media-list button[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Product video.                                                     */
/* ------------------------------------------------------------------ */

.product-video-section {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
}

.product-video {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 4px;
}

.admin-video-preview {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-bottom: 12px;
  background: var(--ink);
  border-radius: 3px;
}

@media (max-width: 720px) {
  .product-video-section {
    width: calc(100% - 32px);
  }
}

/* ------------------------------------------------------------------ */
/* Product gallery: photographs and the clip in one strip.            */
/* ------------------------------------------------------------------ */

/*
  A scroll container with snap points, not a transform carousel. A swipe, a
  trackpad, the arrows and a keyboard all move the same thing, and no width has
  to be measured in JavaScript to keep the slides aligned.
*/
.gallery-viewport {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  min-height: inherit;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-viewport::-webkit-scrollbar {
  display: none;
}

.gallery-viewport:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.gallery-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(20px, 5vw, 64px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gallery-slide img {
  max-width: 100%;
  max-height: 620px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.03);
}

.gallery-slide-video video {
  width: 100%;
  max-width: 900px;
  max-height: 620px;
  background: var(--ink);
  border-radius: 3px;
}

.gallery-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 17, 15, 0.14);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 160ms ease, translate 160ms ease, opacity 160ms ease;
}

.gallery-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--white);
}

.gallery-arrow-prev { left: 18px; }
.gallery-arrow-next { right: 18px; }

/*
  Nothing wraps around, so at the ends the arrow is dimmed rather than removed:
  a control that disappears makes the row jump and leaves the customer wondering
  whether they broke something.
*/
.gallery-arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.gallery-thumb-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .product-stage {
    min-height: 420px;
  }

  .gallery-slide img {
    max-height: 340px;
  }

  /*
    On a phone the strip is swiped, so the arrows only cover the photograph.
    The thumbnails below still allow a jump to any frame.
  */
  .gallery-arrow {
    display: none;
  }
}