/* Reusable storefront components.
   Keep page-specific placement out of this file so a future theme/layout can
   reuse header, search, banners, category/product cards and footer unchanged. */


/* Shared storefront breadcrumbs. Catalog, category and product pages use the
   same segmented surface so navigation hierarchy never changes visual
   language between routes. */
.site-breadcrumbs {
  display: inline-flex;
  max-width: 100%;
  margin-block-end: 18px;
  padding: 6px;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: var(--site-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

.site-breadcrumbs ol {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.site-breadcrumbs li {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
}

.site-breadcrumbs a,
.site-breadcrumbs li > span {
  display: inline-flex;
  min-height: 32px;
  max-width: 100%;
  align-items: center;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
}

.site-breadcrumbs a {
  background: transparent;
  color: var(--site-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms var(--site-ease), border-color 120ms var(--site-ease), color 120ms var(--site-ease);
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
  border-color: var(--site-border-strong);
  background: var(--site-surface-raised);
  color: var(--site-text);
  outline: 0;
}

.site-breadcrumbs a.is-current-category {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-accent-contrast);
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.site-breadcrumbs a.is-current-category:hover,
.site-breadcrumbs a.is-current-category:focus-visible {
  border-color: var(--site-accent-hover);
  background: var(--site-accent-hover);
  color: var(--site-accent-contrast);
}

.site-breadcrumbs li > span[aria-current="page"] {
  max-width: 100%;
  white-space: normal;
  background: transparent;
  color: var(--site-text);
  font-weight: 600;
}
@media (max-width: 620px) {
  .site-breadcrumbs {
    width: 100%;
  }

  .site-breadcrumbs ol {
    width: 100%;
  }
}

.store-header {
  padding-block: 18px 10px;
}

.store-header__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--site-border);
  border-radius: 16px;
  background: #101318;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

.store-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--site-text);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.store-brand__mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--site-accent);
  color: var(--site-accent-contrast);
  font-size: 16px;
  font-weight: 850;
}

.store-brand__name {
  overflow: hidden;
  max-width: 180px;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: auto;
}

.store-nav a {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--site-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms var(--site-ease), background-color 120ms var(--site-ease);
}

.store-nav a:hover,
.store-nav a:focus-visible {
  background: var(--site-surface-raised);
  color: var(--site-text);
}

.store-search {
  display: grid;
  grid-template-columns: 18px minmax(120px, 1fr) 32px;
  align-items: center;
  width: clamp(220px, 22vw, 330px);
  min-height: 42px;
  padding-inline: 12px 5px;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
  color: var(--site-text-muted);
  transition: border-color 120ms var(--site-ease), box-shadow 120ms var(--site-ease);
}

.store-search:focus-within {
  border-color: var(--site-accent);
  box-shadow: none;
}

.store-search__icon {
  width: 18px;
  height: 18px;
}

.store-search__input {
  width: 100%;
  min-width: 0;
  padding: 0 0 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--site-text);
  font-size: 13px;
}

.store-search__input::placeholder {
  color: var(--site-text-subtle);
}

.store-search__submit {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--site-text-muted);
  cursor: pointer;
  place-items: center;
  transition: background-color 120ms var(--site-ease), color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.store-search__submit:hover {
  background: var(--site-surface-soft);
  color: var(--site-text);
}

.store-search__submit:active {
  scale: .96;
}

.store-search__submit svg {
  width: 17px;
  height: 17px;
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 120ms var(--site-ease), border-color 120ms var(--site-ease), color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.site-button:active {
  scale: .96;
}

.site-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.site-button--lg {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 10px;
}

.site-button--accent {
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

.site-button--accent:hover {
  background: var(--site-accent-hover);
}

.site-button--ghost {
  border-color: var(--site-border-strong);
  background: transparent;
  color: var(--site-text);
}

.site-button--ghost:hover {
  border-color: var(--site-text-muted);
  background: var(--site-surface-raised);
}

.site-button--dark {
  background: var(--site-text-inverse);
  color: var(--site-surface-light);
}

.site-button--dark:hover {
  background: #232820;
}

.site-button--light {
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
}

.site-button--light:hover {
  background: #ffffff;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--site-space-6);
  margin-block-end: var(--site-space-7);
}

.section-heading > div {
  display: grid;
  gap: 10px;
}

.section-heading h2 {
  max-width: 720px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.section-heading__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--site-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.section-heading__action svg {
  width: 16px;
  height: 16px;
}

.section-heading__action:hover {
  color: var(--site-accent);
}

.section-heading__meta {
  max-width: 300px;
  color: var(--site-text-muted);
  font-size: 13px;
  text-align: end;
}

.promo-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-xl);
  background: var(--site-surface);
}

.promo-banner h1,
.promo-banner h2 {
  color: var(--site-text);
  letter-spacing: -.04em;
  line-height: 1.02;
}

.promo-banner p {
  color: var(--site-text-muted);
}

.promo-banner__content {
  position: relative;
  z-index: 2;
}

.promo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.promo-banner--light {
  border-color: #daddd7;
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
}

.promo-banner--light h2,
.promo-banner--light p {
  color: var(--site-text-inverse);
}

.promo-banner--light p {
  opacity: .7;
}

.promo-banner--accent-card {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

.promo-banner--accent-card h2,
.promo-banner--accent-card p {
  color: var(--site-accent-contrast);
}

.promo-banner--accent-card p {
  opacity: .72;
}

.promo-banner__icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-block-end: 24px;
  border: 1px solid rgba(16, 19, 10, .18);
  border-radius: 12px;
  place-items: center;
}

.promo-banner__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.brand-strip {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr);
  align-items: center;
  gap: 28px;
  margin-block-start: 18px;
  padding: 22px 26px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
}

.brand-strip__lead {
  max-width: 240px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-strip__items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  min-width: 0;
  overflow: hidden;
}

.brand-strip__item {
  flex: 0 0 auto;
  color: #242822;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.category-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: var(--site-surface);
  color: var(--site-text);
  cursor: pointer;
  text-align: start;
  transition: border-color 130ms var(--site-ease), translate 130ms var(--site-ease), box-shadow 130ms var(--site-ease);
}

.category-card:hover {
  border-color: var(--site-border-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  translate: 0 -2px;
}

.category-card:active {
  translate: 0 0;
}

.category-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.72);
}

.category-card__media::after {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, .38);
  content: "";
}

.category-card__placeholder {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  width: 112px;
  height: 112px;
  color: #5e6873;
  opacity: .48;
}

.category-card__placeholder svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

.category-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: end;
  gap: 8px;
  padding: 22px;
}

.category-card__name {
  max-width: 86%;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
}

.category-card__meta {
  color: var(--site-text-muted);
  font-size: 12px;
}

.category-card__arrow {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
  place-items: center;
}

.category-card__arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.category-card.is-active {
  border-color: var(--site-accent);
  box-shadow: var(--site-focus);
}

.category-card--light {
  border-color: #daddd7;
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
}

.category-card--light .category-card__meta {
  color: #60685e;
}

.category-card--light .category-card__placeholder {
  color: #697765;
}

.category-card--light .category-card__arrow {
  background: var(--site-text-inverse);
  color: var(--site-surface-light);
}

.benefit-card {
  display: grid;
  align-content: start;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: var(--site-surface);
}

.benefit-card__icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-block-end: 28px;
  border: 1px solid var(--site-border-strong);
  border-radius: 10px;
  color: var(--site-accent);
  place-items: center;
}

.benefit-card__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.benefit-card h3,
.benefit-card__title {
  margin-block-end: 8px;
  font-size: 16px;
  font-weight: 750;
}

.benefit-card p {
  color: var(--site-text-muted);
  font-size: 13px;
}

.benefit-card--light {
  border-color: #daddd7;
  background: var(--site-surface-light);
  color: var(--site-text-inverse);
}

.benefit-card--light .benefit-card__icon {
  border-color: #d1d5cd;
  color: #527a31;
}

.benefit-card--light p {
  color: #636a61;
}

.product-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: var(--site-surface);
  transition: border-color 130ms var(--site-ease), box-shadow 130ms var(--site-ease);
}

/* Content-loading gate - the storefront half of the mechanism the admin
   uses (assets/css/admin/layout.css's own [data-loading-hidden] block,
   which itself "replaces the old skeleton-row approach"). Skeleton cards
   are deliberately NOT used here: the catalog API answers in ~100-250ms,
   so a skeleton would paint, flash, and be swapped for real cards inside a
   blink - that flash is itself the flicker it was meant to prevent.

   A region whose content depends on an async load carries
   [data-loading-hidden] straight from the server, so it is hidden from the
   very first frame; its page script removes the attribute in ONE state
   change once data, markup and handlers are all ready. visibility (not
   display) keeps the box, and takes the region out of hit-testing and tab
   order for free while hidden.

   Scoped under html.js, which assets/js/site/boot.js adds synchronously in
   <head> before first paint - with JS off the class never appears and
   nothing is hidden. A page script that fails to load flips the root to
   data-page-boot="failed" (boot.js), which reveals the region rather than
   stranding it hidden. */
html.js [data-loading-hidden] {
  visibility: hidden;
}

html[data-page-boot="failed"] [data-loading-hidden] {
  visibility: visible;
}

/* An empty grid has no height of its own, so hiding it would still leave
   the footer sitting directly under the toolbar until cards arrive - the
   jump this gate exists to prevent. Reserving more than a viewport puts
   the footer below the fold at first paint, so the reflow when real
   content replaces the reservation happens entirely off-screen. */
html.js [data-loading-hidden][data-catalog-results] {
  min-height: 70vh;
}

/* "Still loading" indicator: a SIBLING of the gated region (not inside it,
   so it can be seen while that region is hidden), [hidden] in the markup
   and unhidden by the page script only once a load passes 500ms. */
.content-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--site-space-9) 0;
  color: var(--site-text-muted);
  font-size: 14px;
}

.content-loading-indicator[hidden] {
  display: none;
}

.content-loading-indicator__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--site-border-strong);
  border-block-start-color: var(--site-accent);
  border-radius: 50%;
  animation: storefront-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .content-loading-indicator__spinner {
    animation-duration: 2s;
  }
}

.product-card:hover {
  border-color: var(--site-border-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / .82;
  overflow: hidden;
  background: var(--site-surface-raised);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  outline: 1px solid rgba(255, 255, 255, .08);
  outline-offset: -1px;
}

.product-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  color: #4e5862;
  place-items: center;
}

.product-card__placeholder svg {
  width: 72px;
  height: 72px;
  stroke-width: 1.2;
}

.product-card__availability {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 6px 8px;
  border-radius: 7px;
  background: #101318;
  color: var(--site-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.product-card__brand {
  color: var(--site-text-subtle);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.product-card__name {
  min-height: 42px;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.42;
}

.product-card__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: auto;
  padding-block-start: 10px;
}

.product-card__prices {
  display: grid;
  gap: 2px;
}

.product-card__old-price {
  min-height: 17px;
  color: var(--site-text-subtle);
  font-size: 11px;
  text-decoration: line-through;
}

.product-card__price {
  color: var(--site-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.product-card__arrow {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--site-border-strong);
  border-radius: 9px;
  color: var(--site-text-muted);
  place-items: center;
}

.product-card__arrow svg {
  width: 15px;
  height: 15px;
}

.store-footer {
  margin-block-start: 24px;
  border-block-start: 1px solid var(--site-border);
  background: #090b0e;
}

.store-footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(150px, .7fr));
  gap: 44px;
  padding-block: 48px 42px;
}

.store-brand--footer {
  margin-block-end: 18px;
}

.store-footer__brand p {
  max-width: 360px;
  color: var(--site-text-muted);
  font-size: 13px;
}

.store-footer__column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 9px;
}

.store-footer__column h2 {
  margin-block-end: 4px;
  color: var(--site-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.store-footer__column a,
.store-footer__column span {
  color: var(--site-text-muted);
  font-size: 13px;
  text-decoration: none;
}

.store-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 18px 24px;
  border-block-start: 1px solid var(--site-border);
  color: var(--site-text-subtle);
  font-size: 11px;
}

/* Shared storefront dialog shell. Mirrors the admin's own modal contract
   (docs/UI_PATTERNS.md: shell -> header/body/footer, native <dialog> so
   Escape, the focus trap and the inert background come from the platform)
   but in storefront tokens - admin CSS never crosses into the public site.
   Page CSS may style the body's content only, never re-create this shell. */
.site-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: #101215;
  color: var(--site-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.site-modal::backdrop {
  background: rgba(0, 0, 0, .62);
}

.site-modal__shell {
  max-height: inherit;
  display: flex;
  flex-direction: column;
}

.site-modal__header,
.site-modal__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.site-modal__header {
  justify-content: space-between;
  border-block-end: 1px solid var(--site-border);
}

.site-modal__footer {
  justify-content: flex-end;
  border-block-start: 1px solid var(--site-border);
}

.site-modal__header h2 {
  margin: 0;
  color: var(--site-text);
  font-size: 17px;
  font-weight: 650;
}

.site-modal__close {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--site-text-muted);
  cursor: pointer;
  transition: background-color 120ms var(--site-ease), color 120ms var(--site-ease);
}

.site-modal__close:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--site-text);
}

.site-modal__close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-modal__body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.site-modal__footer .site-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .store-nav {
    display: none;
  }

  .store-brand {
    margin-inline-end: auto;
  }

  .store-search {
    width: min(38vw, 330px);
  }

  .brand-strip {
    grid-template-columns: 1fr;
  }

  .brand-strip__lead {
    max-width: none;
  }

  .brand-strip__items {
    justify-content: flex-start;
  }

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

  .store-footer__contact {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .store-header {
    padding-block-start: 10px;
  }

  .store-header__bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .store-brand__name {
    max-width: 150px;
  }

  .store-header__catalog {
    order: 2;
  }

  .store-search {
    order: 3;
    width: 100%;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading__meta {
    max-width: none;
    text-align: start;
  }

  .brand-strip {
    padding: 18px;
  }

  .brand-strip__items {
    overflow-x: auto;
    padding-block-end: 2px;
  }

  .store-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }

  .store-footer__brand,
  .store-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .site-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .store-brand__mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .store-brand__name {
    max-width: 118px;
    font-size: 15px;
  }

  .store-header__catalog {
    min-height: 38px;
    padding-inline: 11px;
  }

  .store-footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .store-footer__brand,
  .store-footer__contact {
    grid-column: auto;
  }

  .store-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Customer authentication modal. The account itself remains a page; only
   login/registration is an overlay opened from the shared header. */
.site-account-dialog {
  width: min(calc(100% - 32px), 500px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-lg);
  background: #0f1216;
  color: var(--site-text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
}

.site-account-dialog::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site-account-dialog::backdrop {
  background: rgba(4, 6, 8, .76);
  backdrop-filter: blur(5px);
}

.site-account-dialog__surface {
  position: relative;
  padding: 30px;
}

.site-account-dialog__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
  color: var(--site-text-muted);
  cursor: pointer;
  place-items: center;
  transition: border-color 120ms var(--site-ease), background-color 120ms var(--site-ease), color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.site-account-dialog__close:active,
.site-account-dialog__switch-button:active,
.site-account-dialog__submit:active {
  scale: .96;
}

.site-account-dialog__close svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.site-account-dialog__header {
  display: grid;
  gap: 12px;
  padding-inline: 48px;
  margin-block-end: 28px;
  text-align: center;
}

.site-account-dialog__header h2 {
  margin: 0;
  color: var(--site-text);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.site-account-dialog__header p {
  max-width: 42ch;
  margin-inline: auto;
  color: var(--site-text-muted);
  font-size: 16px;
  line-height: 1.55;
  text-align: center;
}

.site-account-dialog__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-block-end: 22px;
  padding: 4px;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
}

.site-account-dialog__switch-button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--site-text-muted);
  cursor: pointer;
  font-weight: 700;
  transition: background-color 120ms var(--site-ease), color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.site-account-dialog__switch-button.is-active {
  background: var(--site-surface-raised);
  color: var(--site-text);
  box-shadow: inset 0 0 0 1px var(--site-border-strong);
}

.site-account-dialog__form {
  display: grid;
  gap: 15px;
}

.site-account-dialog__form[hidden],
.site-account-dialog__error[hidden],
.site-account-dialog__switch[hidden] {
  display: none !important;
}

.site-account-dialog__field {
  display: grid;
  gap: 7px;
}

.site-account-dialog__field label {
  color: #d9dee5;
  font-size: 13px;
  font-weight: 700;
}

.site-account-dialog__field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--site-border);
  border-radius: 9px;
  outline: 0;
  background: var(--site-surface);
  color: var(--site-text);
  font-size: 14px;
  transition: border-color 120ms var(--site-ease), background-color 120ms var(--site-ease), box-shadow 120ms var(--site-ease);
}

.site-account-dialog__field input:focus-visible {
  border-color: var(--site-accent);
  box-shadow: none;
}

.site-account-dialog__field input[aria-invalid="true"] {
  border-color: var(--site-danger);
}

.site-account-dialog__field small {
  color: var(--site-text-subtle);
  font-size: 12px;
  line-height: 1.45;
}

.site-account-dialog__error {
  min-height: 20px;
  color: #ff8c91;
  font-size: 13px;
  line-height: 1.45;
}



.site-account-dialog__submit {
  width: 100%;
  margin-block-start: 2px;
}

.site-account-dialog__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: site-account-spin .7s linear infinite;
}

.site-account-dialog__submit.is-loading .site-account-dialog__spinner {
  display: inline-block;
}

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

@media (hover: hover) {
  .site-account-dialog__close:hover,
  .site-account-dialog__close:focus-visible {
    border-color: var(--site-border-strong);
    background: var(--site-surface-raised);
    color: var(--site-text);
  }

  .site-account-dialog__switch-button:hover {
    color: var(--site-text);
  }

  .site-account-dialog__field input:hover {
    border-color: var(--site-border-strong);
  }
}

@media (max-width: 620px) {
  .site-account-dialog {
    width: min(calc(100% - 24px), 500px);
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }

  .site-account-dialog__surface {
    padding: 24px 18px 20px;
  }

  .site-account-dialog__header {
    padding-inline: 38px;
  }

  .site-account-dialog__header h2 {
    font-size: 28px;
  }

  .site-account-dialog__header p {
    font-size: 15px;
  }

  .site-account-dialog__field input {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-account-dialog__spinner {
    animation: none;
    border-inline-end-color: currentColor;
  }
}


/* Authenticated account actions are an anchored popover under the profile
   icon, not a centered modal. Login/registration continue to use dialog. */
.store-account-menu {
  position: fixed;
  z-index: 1300;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--site-border-strong);
  border-radius: 12px;
  background: #101318;
  color: var(--site-text);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
}

.store-account-menu[hidden] {
  display: none !important;
}

.store-account-menu__actions {
  display: grid;
  gap: 4px;
}

.store-account-menu__item {
  display: grid;
  grid-template-columns: 18px auto;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--site-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  transition: background-color 120ms var(--site-ease), color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.store-account-menu__item svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.store-account-menu__item--primary {
  color: var(--site-text);
}

.store-account-menu__item--danger {
  color: #ff8c91;
}

.store-account-menu__item:active {
  scale: .96;
}

.store-account-menu__error {
  margin: 6px 8px 4px;
  color: #ff8c91;
  font-size: 12px;
  line-height: 1.4;
}

.store-account-menu__error[hidden] {
  display: none !important;
}

@media (hover: hover) {
  .store-account-menu__item:hover,
  .store-account-menu__item:focus-visible {
    background: var(--site-accent);
    color: var(--site-accent-contrast);
    outline: 0;
  }

  .store-account-menu__item--danger:hover,
  .store-account-menu__item--danger:focus-visible {
    background: var(--site-danger);
    color: #111;
  }
}



/* Cart is a shared storefront modal. Product/price data is always refreshed
   from the server when it opens; localStorage only carries id + quantity. */
.site-cart-dialog {
  width: min(calc(100% - 32px), 760px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--site-border-strong);
  border-radius: 16px;
  background: #0f1216;
  color: var(--site-text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-cart-dialog::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site-cart-dialog::backdrop {
  background: rgba(4, 6, 8, .76);
  backdrop-filter: blur(5px);
}

.site-cart-dialog__surface {
  min-width: 0;
}

.site-cart-dialog__header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 14px 22px;
  border-block-end: 1px solid var(--site-border);
}

.site-cart-dialog__header > div {
  display: grid;
  gap: 3px;
}

.site-cart-dialog__header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.02em;
}

.site-cart-dialog__header p {
  color: var(--site-text-muted);
  font-size: 12px;
}

.site-cart-dialog__close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
  color: var(--site-text-muted);
  cursor: pointer;
  place-items: center;
}

.site-cart-dialog__close svg,
.site-cart-item__remove svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.site-cart-dialog__loading,
.site-cart-dialog__error,
.site-cart-dialog__empty {
  min-height: 230px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--site-text-muted);
  text-align: center;
}

.site-cart-dialog__loading {
  display: grid;
}

.site-cart-dialog__error,
.site-cart-dialog__empty {
  display: grid;
}

.site-cart-dialog__empty strong {
  color: var(--site-text);
  font-size: 17px;
}

.site-cart-dialog__items {
  display: grid;
  padding: 0 22px;
}

.site-cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto minmax(90px, auto) 36px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-block: 16px;
  border-block-end: 1px solid var(--site-border);
}

.site-cart-item:last-child {
  border-block-end: 0;
}

.site-cart-item__media {
  display: grid;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: #e9ece7;
  place-items: center;
}

.site-cart-item__media img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.site-cart-item__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  color: #8a929c;
  place-items: center;
}

.site-cart-item__placeholder svg {
  width: 28px;
  height: 28px;
}

.site-cart-item__info {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.site-cart-item__name {
  overflow: hidden;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-cart-item__sku,
.site-cart-item__unavailable {
  color: var(--site-text-muted);
  font-size: 12px;
}

.site-cart-item__unavailable {
  color: #ff8c91;
}

.site-cart-item__quantity {
  display: grid;
  grid-template-columns: 32px 42px 32px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--site-border-strong);
  border-radius: 9px;
  background: var(--site-surface);
}

.site-cart-item__quantity button,
.site-cart-item__quantity input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--site-text);
  text-align: center;
}

.site-cart-item__quantity button {
  cursor: pointer;
  font-size: 17px;
}

.site-cart-item__quantity button:disabled {
  color: var(--site-text-subtle);
  cursor: default;
}

.site-cart-item__quantity input {
  width: 42px;
  appearance: textfield;
  font-size: 13px;
  font-weight: 700;
}

.site-cart-item__quantity input::-webkit-inner-spin-button,
.site-cart-item__quantity input::-webkit-outer-spin-button {
  appearance: none;
}


/* Shared price stack for cart/checkout. Catalog cards use the same semantic
   rule: old price is subdued, the actual discounted price uses danger. */
.site-price-stack {
  display: inline-grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.site-price-stack--line {
  justify-items: end;
}

.site-price-stack__old {
  color: var(--site-text-subtle);
  font-size: 11px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
}

.site-price-stack__current {
  color: var(--site-text);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.site-price-stack__current.is-discounted {
  color: var(--site-danger);
}

.site-cart-item__price {
  display: grid;
  min-width: 90px;
  justify-items: end;
  text-align: end;
}

/* Mirrors the admin's own danger icon button (.icon-btn--danger): a
   bordered square that fills solid red on hover instead of just tinting,
   so "this deletes something" reads the same in both places. */
.site-cart-item__remove {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: transparent;
  color: var(--site-text-subtle);
  cursor: pointer;
  transition: background-color 120ms var(--site-ease), border-color 120ms var(--site-ease), color 120ms var(--site-ease);
  place-items: center;
}

.site-cart-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px 22px;
  border-block-start: 1px solid var(--site-border);
}

.site-cart-dialog__total {
  display: grid;
  gap: 3px;
}

.site-cart-dialog__total span {
  color: var(--site-text-muted);
  font-size: 12px;
}

.site-cart-dialog__total strong {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.site-cart-dialog__saving {
  color: var(--site-danger) !important;
  font-size: 12px !important;
  font-weight: 700;
}

/* Below the minimum order: a full-width notice with progress toward it,
   above the total/checkout row (checkout stays disabled meanwhile). */
.site-cart-dialog__footer {
  flex-wrap: wrap;
}

.site-cart-dialog__minimum {
  flex: 1 0 100%;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  background: var(--site-surface-raised);
}

.site-cart-dialog__minimum-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.site-cart-dialog__minimum-text span {
  color: var(--site-text-muted);
  font-weight: 650;
}

.site-cart-dialog__minimum-text strong {
  flex-shrink: 0;
  color: var(--site-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.site-cart-dialog__minimum-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--site-border);
}

.site-cart-dialog__minimum-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--site-accent);
  transition: width .25s cubic-bezier(0, 0, .2, 1);
}

.site-cart-dialog [hidden] {
  display: none !important;
}

.site-cart-dialog__footer .is-disabled {
  pointer-events: none;
  opacity: .45;
}

@media (hover: hover) {
  .site-cart-dialog__close:hover {
    background: var(--site-surface-raised);
    color: var(--site-text);
  }

  .site-cart-item__remove:hover {
    background: var(--site-danger);
    border-color: var(--site-danger);
    color: #111;
  }

  .site-cart-item__name:hover {
    color: var(--site-accent);
  }
}

@media (max-width: 680px) {
  .site-cart-dialog {
    width: min(calc(100% - 20px), 760px);
    max-height: calc(100dvh - 20px);
  }

  .site-cart-dialog__header {
    min-height: 64px;
    padding: 12px 12px 10px 16px;
  }

  .site-cart-dialog__items {
    padding-inline: 14px;
  }

  .site-cart-item {
    grid-template-columns: 60px minmax(0, 1fr) 36px;
    grid-template-areas:
      "media info remove"
      "media quantity price";
    gap: 8px 12px;
  }

  .site-cart-item__media {
    grid-area: media;
    width: 60px;
    height: 60px;
  }

  .site-cart-item__info { grid-area: info; }
  .site-cart-item__quantity { grid-area: quantity; width: fit-content; }
  .site-cart-item__price { grid-area: price; align-self: center; }
  .site-cart-item__remove { grid-area: remove; }

  .site-cart-dialog__footer {
    align-items: stretch;
    flex-direction: column;
    padding: 16px 14px;
  }

  .site-cart-dialog__footer .site-button {
    width: 100%;
  }

  .site-cart-dialog__total {
    width: 100%;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Storefront dropdown (button + listbox) - the catalog sort and the product
   page's compatible-models brand picker. Behaviour lives in each page's
   script (catalog.js bindSortDropdown, product.js bindCompatModels). */
.catalog-sort__control {
  position: relative;
}

.catalog-sort__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: var(--site-surface);
  color: var(--site-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms var(--site-ease);
}

.catalog-sort__trigger:hover {
  border-color: var(--site-border-strong);
}

.catalog-sort__trigger[aria-expanded="true"] {
  border-color: var(--site-accent);
}

.catalog-sort__trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--site-text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 120ms var(--site-ease), color 120ms var(--site-ease);
}

.catalog-sort__trigger:hover svg,
.catalog-sort__trigger[aria-expanded="true"] svg {
  color: var(--site-accent);
}

.catalog-sort__trigger[aria-expanded="true"] svg {
  rotate: 180deg;
}

/* The dropdown itself: same surface, shadow and option look as the
   checkout city/branch suggestions (.checkout-autocomplete__* below),
   so every storefront popup list looks like one thing rather than picking
   up the browser's own (light, OS-themed) listbox chrome. */
.catalog-sort__menu {
  position: absolute;
  z-index: 60;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 6px);
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--site-border-strong);
  border-radius: 10px;
  outline: 0;
  background: var(--site-surface);
  list-style: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .65), 0 20px 40px rgba(0, 0, 0, .35);
}

.catalog-sort__menu[hidden] {
  display: none;
}

.catalog-sort__option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  border-radius: 8px;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

/* Current value: accent text and a check mark, no fill. */
.catalog-sort__option[aria-selected="true"] {
  color: var(--site-accent);
}

.catalog-sort__option[aria-selected="true"]::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  width: 8px;
  height: 4px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  content: "";
  transform: translateY(-65%) rotate(-45deg);
}

/* Highlighted option: a solid fill. The pointer moves the highlight from
   script (mouseover), not :hover, so it stays put over the gaps between
   options instead of flickering off. */
.catalog-sort__option.is-active {
  color: var(--site-accent-contrast);
  background: var(--site-accent);
  box-shadow: none;
}

/* Nova Poshta city / branch suggestions (nova-poshta-lookup.js): checkout
   and the account profile. */
.checkout-autocomplete {
  position: relative;
  min-width: 0;
}

.checkout-autocomplete__menu {
  position: absolute;
  z-index: 120;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  width: 100%;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--site-border-strong);
  border-radius: 10px;
  background: var(--site-surface);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .65), 0 20px 40px rgba(0, 0, 0, .35);
}

.checkout-autocomplete__menu[hidden] {
  display: none;
}

.checkout-autocomplete__options {
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  gap: 2px;
  scrollbar-width: none;
}

.checkout-autocomplete__options::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.checkout-autocomplete__option {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--site-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
  overflow-wrap: anywhere;
}

.checkout-autocomplete__option:focus-visible,
.checkout-autocomplete__option.is-active {
  background: var(--site-surface-raised);
  outline: 0;
}

.checkout-autocomplete__option.is-selected {
  color: var(--site-accent);
}

/* The highlighted match (first one by default): a solid fill. */
.checkout-autocomplete__option.is-active {
  color: var(--site-accent-contrast);
  background: var(--site-accent);
  box-shadow: none;
}

.checkout-autocomplete__option.is-selected::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  width: 8px;
  height: 4px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  content: "";
  transform: translateY(-65%) rotate(-45deg);
}

.checkout-autocomplete__status {
  margin: 0;
  padding: 10px;
  color: var(--site-text-muted);
  font-size: 13px;
  text-align: center;
}

/* Top-centre confirmation for Storefront.showToast() (storefront.js): the
   storefront copy of the admin toast (assets/css/admin/layout.css .toast). */
.site-toast-stack {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.site-toast {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  overflow: hidden;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--site-accent);
  border-radius: 12px;
  background: var(--site-accent);
  color: var(--site-accent-contrast);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .02);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .2s cubic-bezier(0.2, 0, 0, 1), transform .2s cubic-bezier(0.2, 0, 0, 1);
}

.site-toast.is-shown {
  opacity: 1;
  transform: none;
}

.site-toast__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-toast__text {
  min-width: 0;
}

.site-toast__close {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}

.site-toast__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-toast__close:hover {
  background: rgba(0, 0, 0, .12);
}

.site-toast__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.site-toast--danger {
  border-color: var(--site-danger);
  background: var(--site-danger);
  color: #111;
}

@media (max-width: 600px) {
  .site-toast-stack {
    top: max(12px, env(safe-area-inset-top));
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-toast {
    transition: none;
  }
}