/* [project]/src/app/storefront.css [app-client] (css) */
.shell {
  flex-direction: column;
  min-height: 100dvh;
  display: flex;
}

.shell > main {
  padding-block: var(--space-6) var(--space-8);
  flex: 1;
}

.masthead {
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--rule);
  position: sticky;
  inset-block-start: 0;
}

.masthead__bar {
  align-items: center;
  gap: var(--space-4);
  min-height: 4rem;
  display: flex;
}

.wordmark {
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: var(--text-lg);
  letter-spacing: -.02em;
  white-space: nowrap;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.wordmark__seal {
  border-radius: var(--radius-sm);
  background: var(--ink);
  block-size: 1.75rem;
  inline-size: 1.75rem;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 35%, transparent);
  place-items: center;
  display: grid;
}

@media (max-width: 30rem) {
  .wordmark__name {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
}

.masthead__nav {
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: var(--space-3);
  display: none;
}

@media (min-width: 60rem) {
  .masthead__nav {
    display: flex;
  }
}

.mobilemenu {
  position: relative;
}

@media (min-width: 60rem) {
  .mobilemenu {
    display: none;
  }
}

.mobilemenu__toggle {
  border-radius: var(--radius);
  block-size: 2.75rem;
  inline-size: 2.75rem;
  color: var(--ink-soft);
  cursor: pointer;
  place-items: center;
  list-style: none;
  display: grid;
}

.mobilemenu__toggle::-webkit-details-marker {
  display: none;
}

.mobilemenu__toggle::marker {
  content: "";
}

.mobilemenu__toggle:hover {
  background: var(--paper-sunken);
  color: var(--accent);
}

.mobilemenu__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.mobilemenu__panel {
  z-index: 30;
  gap: var(--space-3);
  min-inline-size: 15rem;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  flex-direction: column;
  display: flex;
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
}

.mobilemenu__nav {
  flex-direction: column;
  display: flex;
}

.mobilemenu__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink);
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.mobilemenu__link:hover {
  background: var(--paper-sunken);
  color: var(--accent);
}

.mobilemenu__link[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-sunken);
  font-weight: 600;
}

.mobilemenu__search {
  display: block;
}

@media (min-width: 48rem) {
  .mobilemenu__search {
    display: none;
  }
}

.mobilemenu__locales {
  display: none;
}

@media (max-width: 30rem) {
  .mobilemenu__locales {
    display: block;
  }

  .mobilemenu__locales .locales {
    display: flex;
  }
}

.navlink {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .12s, color .12s;
  display: inline-flex;
}

.navlink:hover {
  background: var(--paper-sunken);
  color: var(--accent);
}

.navlink[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-sunken);
  font-weight: 600;
}

.catmenu {
  position: relative;
}

.catmenu__toggle {
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  list-style: none;
  transition: background-color .12s, color .12s;
  display: inline-flex;
}

.catmenu__toggle::-webkit-details-marker {
  display: none;
}

.catmenu__toggle::marker {
  content: "";
}

.catmenu__toggle:hover {
  background: var(--paper-sunken);
  color: var(--accent);
}

.catmenu__toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.catmenu__toggle svg {
  transition: transform .12s;
}

.catmenu[open] .catmenu__toggle svg {
  transform: rotate(180deg);
}

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

.catmenu__panel {
  z-index: 30;
  min-inline-size: 13rem;
  padding: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
}

.catmenu__list {
  flex-direction: column;
  display: flex;
}

.catmenu__link, .catmenu__all {
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink);
  align-items: center;
  text-decoration: none;
  display: flex;
}

.catmenu__link:hover, .catmenu__all:hover {
  background: var(--paper-sunken);
  color: var(--accent);
}

.catmenu__all {
  border-block-start: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border-radius: 0;
  margin-block-start: var(--space-1);
  padding-block-start: var(--space-2);
}

.catmenu__link[aria-current="page"], .catmenu__all[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-sunken);
  font-weight: 600;
}

.mobilemenu__cats {
  border-block-start: 1px solid var(--rule);
  flex-direction: column;
  padding-block-start: var(--space-2);
  display: flex;
}

.mobilemenu__heading {
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  padding-block-end: var(--space-1);
  font-weight: 600;
}

.masthead__actions {
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  display: flex;
}

.locales {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--rule);
  align-items: center;
  gap: 1px;
  display: flex;
  overflow: hidden;
}

.locales__item {
  min-height: 2.75rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper-raised);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: .28rem .55rem;
  line-height: 1.4;
  text-decoration: none;
  display: flex;
}

.locales__item:hover {
  color: var(--accent);
}

.locales__item--on {
  color: var(--ink);
  background: var(--paper-sunken);
  font-weight: 650;
}

.locales__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

@media (max-width: 30rem) {
  .locales {
    display: none;
  }
}

.search {
  flex: 1;
  max-width: 24rem;
  display: none;
  position: relative;
}

@media (min-width: 48rem) {
  .search {
    display: block;
  }
}

.search__input {
  inline-size: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  padding-inline-start: 2.25rem;
  transition: border-color .12s, box-shadow .12s;
}

.search__input:hover {
  border-color: var(--accent-edge);
}

.search__input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

.search__icon {
  color: var(--ink-faint);
  pointer-events: none;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-3);
  transform: translateY(-50%);
}

.btn {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .12s, border-color .12s, transform 80ms;
  display: inline-flex;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn--secondary {
  background: var(--paper-raised);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--accent-edge);
  background: var(--paper-sunken);
}

.btn--ghost {
  color: var(--ink-soft);
  padding-inline: var(--space-3);
  background: none;
  border-color: #0000;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--paper-sunken);
  color: var(--accent);
}

.btn--lg {
  min-height: 3.25rem;
  padding-inline: var(--space-6);
  font-size: var(--text-base);
}

.btn--block {
  inline-size: 100%;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.card--pad {
  padding: var(--space-5);
}

.grid-products {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.grid-products--compact {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.grid-products--compact .product__link {
  padding: var(--space-3);
  gap: var(--space-1);
}

.grid-products--compact .product__thumb {
  aspect-ratio: 16 / 10;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
}

.grid-products--compact .product__title {
  font-size: var(--text-sm);
}

.grid-products--compact .product__blurb {
  display: none;
}

.product {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  flex-direction: column;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  display: flex;
  overflow: hidden;
}

.product:hover {
  border-color: var(--accent-edge);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.product:hover .product__title {
  color: var(--accent);
}

.product__link {
  color: inherit;
  padding: var(--space-4);
  gap: var(--space-2);
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  display: flex;
}

.product__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.product__thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-bottom: 1px solid var(--rule);
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.product__image {
  object-fit: contain;
  background: var(--image-ground);
  width: 100%;
  height: 100%;
}

.product__thumb--empty {
  background: var(--paper-sunken);
}

.product__eyebrow {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  min-height: 1.25rem;
  display: flex;
}

.product__title {
  font-size: var(--text-base);
  font-weight: 650;
  line-height: var(--leading-tight);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .14s;
  display: -webkit-box;
  overflow: hidden;
}

.product__rating {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.product__blurb {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  line-height: var(--leading-normal);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: none;
  display: -webkit-box;
  overflow: hidden;
}

.product__foot {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  display: flex;
}

.price {
  flex-direction: column;
  gap: .1rem;
  display: flex;
}

.price__usd {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-mono), monospace;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
}

.price__irr {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.price--unavailable {
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-weight: 500;
}

.hero {
  padding-block: var(--space-7) var(--space-8);
  border-block-end: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-9) var(--space-8);
  }
}

.hero__eyebrow {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-faint);
  border-inline-start: 2px solid var(--verified);
  margin-block-end: var(--space-4);
  padding-inline-start: var(--space-3);
  font-weight: 600;
  display: inline-flex;
}

.hero__title {
  font-size: var(--text-3xl);
  letter-spacing: -.025em;
  max-width: 34ch;
  margin-block-end: var(--space-4);
  font-weight: 800;
}

@media (min-width: 48rem) {
  .hero__title {
    font-size: var(--text-4xl);
  }
}

.hero__lede {
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--leading-loose);
  max-width: 56ch;
  margin-block-end: var(--space-6);
}

.hero__actions {
  gap: var(--space-3);
  flex-wrap: wrap;
  display: flex;
}

.section {
  margin-block-start: var(--space-8);
}

.section__head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  display: flex;
}

.section__title {
  font-size: var(--text-xl);
}

.section__more {
  min-height: 2.75rem;
  font-size: var(--text-sm);
  color: var(--accent);
  white-space: nowrap;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.section__more:hover {
  text-decoration: underline;
}

.listing__head {
  padding-block: var(--space-5) var(--space-4);
}

.listing__title {
  font-size: var(--text-2xl);
}

.listing__sub {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-block-start: var(--space-1);
}

.listing__lede {
  max-width: 72ch;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  white-space: pre-wrap;
  margin-block-start: var(--space-3);
  line-height: 1.8;
}

.listing__note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-block-start: var(--space-1);
}

.listing__toolbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  border-block-end: 1px solid var(--rule);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  display: flex;
}

.chips {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.chip {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  border-radius: 2rem;
  align-items: center;
  text-decoration: none;
  transition: border-color .12s, background-color .12s, color .12s;
  display: inline-flex;
}

.chip:hover {
  border-color: var(--accent-edge);
  color: var(--ink);
}

.chip[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.sorter {
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
  display: flex;
}

.sorter__label {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}

.select.sorter__select {
  inline-size: auto;
  min-inline-size: 11rem;
}

.filters {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin-block-end: var(--space-4);
}

.filters__toggle {
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.filters__toggle::-webkit-details-marker {
  display: none;
}

.filters__toggle::marker {
  content: "";
}

.filters__toggle:hover {
  color: var(--accent);
}

.filters[open] .filters__toggle svg {
  transform: rotate(180deg);
}

.filters__badge {
  padding: 0 var(--space-2);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--text-xs);
  border-radius: 2rem;
  font-weight: 600;
}

.filters__form {
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
  border-block-start: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  padding-block-start: var(--space-4);
  display: grid;
}

.filters__group {
  gap: var(--space-2);
  border: none;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.filters__legend {
  font-size: var(--text-sm);
  color: var(--ink);
  padding: 0;
  font-weight: 600;
}

.filters__check {
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
}

@media (max-width: 47.99rem) {
  .filters__check {
    min-height: 2.75rem;
  }
}

@media (pointer: coarse) {
  .filters__check {
    min-height: 2.75rem;
  }
}

.filters__check input {
  block-size: 1.1rem;
  inline-size: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.filters__range {
  align-items: flex-end;
  gap: var(--space-2);
  display: flex;
}

.filters__inline {
  gap: var(--space-1);
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  display: flex;
}

.filters__inline-label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.filters__price {
  min-inline-size: 0;
}

.filters__note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  max-width: 40ch;
}

.filters__actions {
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  grid-column: 1 / -1;
  display: flex;
}

.pager {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  border-block-start: 1px solid var(--rule);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  display: flex;
}

.pager__position {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-align: center;
  max-width: none;
}

.crumbs {
  padding-block-end: var(--space-2);
}

.crumbs__list {
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.crumbs__item {
  align-items: center;
  display: inline-flex;
}

.crumbs__item + .crumbs__item:before {
  content: "/";
  color: var(--rule-strong);
  margin-inline-end: var(--space-1);
}

.crumbs__link {
  min-height: 2.75rem;
  color: var(--ink-soft);
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.crumbs__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.crumbs__here {
  color: var(--ink-faint);
}

.state {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  background: var(--paper-raised);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  flex-direction: column;
  display: flex;
}

.state__title {
  font-size: var(--text-lg);
}

.state__text {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.state--error {
  border-style: solid;
  border-color: color-mix(in srgb, var(--refused) 35%, var(--rule));
  background: var(--refused-wash);
}

.state--error .state__title, .state--error .state__text {
  color: var(--refused-ink);
}

.notice {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border-inline-start: 3px solid;
  flex-direction: column;
  display: flex;
}

.notice--verified {
  background: var(--verified-wash);
  color: var(--verified-ink);
}

.notice--pending {
  background: var(--pending-wash);
  color: var(--pending-ink);
}

.notice--refused {
  background: var(--refused-wash);
  color: var(--refused-ink);
}

.notice__ref {
  font-size: var(--text-xs);
  opacity: .75;
}

.field {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.input, .select, .textarea {
  inline-size: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-size: var(--text-base);
  transition: border-color .12s, box-shadow .12s;
}

.textarea {
  resize: vertical;
  min-height: 5rem;
  line-height: var(--leading-normal);
}

.input:hover, .select:hover, .textarea:hover {
  border-color: var(--accent-edge);
}

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

.input[aria-invalid="true"] {
  border-color: var(--refused);
}

.input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--refused-wash);
}

.footer {
  border-block-start: 1px solid var(--rule);
  background: var(--paper-sunken);
  padding-block: var(--space-7);
  margin-block-start: var(--space-8);
}

.footer__grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  display: grid;
}

.footer__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin-block-end: var(--space-3);
  font-weight: 700;
}

.footer__list {
  font-size: var(--text-sm);
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.footer__list a {
  min-height: 2.75rem;
  color: var(--ink-soft);
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.footer__list a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer__legal {
  border-block-start: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
}

.prose {
  max-inline-size: 38rem;
}

.prose__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
}

.prose__lede {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  line-height: var(--leading-normal);
  margin-block-end: var(--space-6);
}

.prose__body {
  line-height: var(--leading-loose);
}

.prose__body > * + * {
  margin-block-start: var(--space-4);
}

.prose__body h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin-block-start: var(--space-7);
}

.prose__body h3 {
  font-size: var(--text-lg);
  margin-block-start: var(--space-6);
}

.prose__body h4 {
  font-size: var(--text-base);
  margin-block-start: var(--space-5);
}

.prose__body ul, .prose__body ol {
  gap: var(--space-2);
  flex-direction: column;
  padding-inline-start: var(--space-6);
  display: flex;
}

.prose__body a {
  color: var(--accent);
}

.prose__body blockquote {
  border-inline-start: 3px solid var(--rule-strong);
  color: var(--ink-soft);
  margin: 0;
  padding-inline-start: var(--space-4);
}

.prose__body pre {
  padding: var(--space-4);
  background: var(--paper-sunken);
  border-radius: var(--radius);
  text-align: start;
  direction: ltr;
  overflow-x: auto;
}

.prose__body code {
  font-family: var(--font-mono), ui-monospace, monospace;
  unicode-bidi: isolate;
  font-size: .9em;
}

.prose__meta {
  border-block-start: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
}

.faq {
  gap: var(--space-2);
  flex-direction: column;
  max-inline-size: 44rem;
  display: flex;
}

.faq__group + .faq__group {
  margin-block-start: var(--space-7);
}

.faq__topic {
  font-size: var(--text-lg);
  margin-block-end: var(--space-4);
}

.faq__item {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.faq__question {
  padding: var(--space-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:after {
  content: "+";
  float: inline-end;
  color: var(--ink-faint);
  font-weight: 400;
}

.faq__item[open] .faq__question:after {
  content: "−";
}

.faq__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq__answer {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--ink-soft);
}

.announce {
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  display: flex;
}

.announce--info {
  background: var(--accent-wash);
  color: var(--accent-hover);
}

.announce--success {
  background: var(--verified-wash);
  color: var(--verified-ink);
}

.announce--warning {
  background: var(--pending-wash);
  color: var(--pending-ink);
}

.announce__text {
  max-inline-size: 60rem;
  margin: 0;
}

.announce__close {
  color: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
  background: none;
  border: none;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  line-height: 1;
}

.announce__close:focus-visible {
  outline-offset: 2px;
  outline: 2px solid;
}

.banners {
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  display: grid;
}

.banners--hero {
  grid-template-columns: 1fr;
}

.banner {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  overflow: hidden;
}

.banner--link {
  color: inherit;
  text-decoration: none;
}

.banner--link:hover {
  border-color: var(--accent-edge);
}

.banner--link:hover .banner__headline {
  color: var(--accent);
}

.banner--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.banner__image {
  border-radius: var(--radius);
  flex-shrink: 0;
  block-size: auto;
  max-inline-size: 8rem;
}

.banner__text {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.banner__headline {
  font-size: var(--text-lg);
  margin: 0;
  font-weight: 600;
  transition: color .12s;
}

.banner__subtext {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0;
}

.banner__cta {
  font-size: var(--text-sm);
  color: var(--accent);
  margin-block-start: var(--space-2);
  font-weight: 600;
}

@media (max-width: 32rem) {
  .banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner__image {
    max-inline-size: 100%;
  }
}

.ads {
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  display: grid;
}

.ads--hero {
  grid-template-columns: 1fr;
}

.ads--inline {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.ads--rail {
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.ad {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ad__label {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--ink-faint);
  margin: 0;
  font-weight: 600;
}

.ad__inner {
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.ad__inner--link {
  color: inherit;
  text-decoration: none;
}

.ad__inner--link:hover .ad__headline {
  color: var(--accent);
}

.ad__inner--link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.ad__image {
  border-radius: var(--radius);
  flex-shrink: 0;
  block-size: auto;
  max-inline-size: 7rem;
}

.ad__text {
  gap: var(--space-1);
  flex-direction: column;
  min-inline-size: 0;
  display: flex;
}

.ad__headline {
  font-size: var(--text-base);
  margin: 0;
  font-weight: 600;
  transition: color .14s;
}

.ad__body {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-block-size: 4.5rem;
  overflow: hidden;
}

.ad__body > * {
  margin: 0;
}

.ad__body > * + * {
  margin-block-start: var(--space-1);
}

.ad__cta {
  font-size: var(--text-sm);
  color: var(--accent);
  margin-block-start: var(--space-1);
  font-weight: 600;
}

@media (max-width: 32rem) {
  .ad__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ad__image {
    max-inline-size: 100%;
  }
}

.product__sponsor {
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin-inline-start: auto;
  font-weight: 600;
}

.themes {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--rule);
  align-items: center;
  gap: 1px;
  display: flex;
  overflow: hidden;
}

.themes__item {
  min-height: 2.75rem;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper-raised);
  cursor: pointer;
  white-space: nowrap;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: .28rem .55rem;
  line-height: 1.4;
  display: flex;
}

.themes__item:hover {
  color: var(--accent);
}

.themes__item[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper-sunken);
  font-weight: 650;
}

.themes__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.footer__theme {
  align-items: flex-start;
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.product__save {
  padding: 0 var(--space-4) var(--space-3);
  justify-content: flex-end;
  display: flex;
}

.wishbtn__form {
  align-items: flex-end;
  gap: var(--space-1);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.wishbtn {
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  min-height: 2.75rem;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  padding: .35rem .6rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color .14s, border-color .14s, background-color .14s;
  display: inline-flex;
}

.wishbtn:hover {
  color: var(--ink);
  border-color: var(--accent-edge);
}

.wishbtn--on {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.wishbtn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.wishbtn:disabled {
  cursor: progress;
  color: var(--ink-faint);
}

.wishbtn__icon {
  flex: none;
}

@media (max-width: 22rem) {
  .wishbtn__text {
    display: none;
  }
}

.wishbtn__error {
  font-size: var(--text-xs);
  color: var(--refused-ink);
  text-align: end;
  margin: 0;
  line-height: 1.5;
}

.wishbtn__rid {
  color: var(--ink-faint);
  font-family: var(--font-mono), ui-monospace, monospace;
}

.reviews {
  border-block-start: 1px solid var(--rule);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
}

.reviews__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.reviews__intro, .reviews__empty, .reviews__gate {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
}

.reviews__gate {
  padding: var(--space-4);
  background: var(--paper-sunken);
  border-radius: var(--radius);
}

.reviews__summary {
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-5);
  display: grid;
}

@media (min-width: 40rem) {
  .reviews__summary {
    grid-template-columns: minmax(9rem, auto) 1fr;
    align-items: center;
  }
}

.reviews__average {
  gap: var(--space-1);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.reviews__averageLabel, .reviews__count {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.reviews__averageValue {
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.reviews__bars {
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.reviews__bar {
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  grid-template-columns: 5.5rem 1fr 2.5rem;
  align-items: center;
  display: grid;
}

.reviews__barTrack {
  background: var(--paper-sunken);
  border-radius: 999px;
  block-size: .5rem;
  overflow: hidden;
}

.reviews__barFill {
  background: var(--pending);
  block-size: 100%;
  display: block;
}

.reviews__barCount {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.reviews__list {
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
}

.review {
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.review__head {
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: baseline;
  margin-block-end: var(--space-2);
  display: flex;
}

.review__rating {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.review__verified {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--verified-ink);
  background: var(--verified-wash);
  border-radius: 999px;
}

.review__at, .review__author {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.review__at {
  margin-inline-start: auto;
}

.review__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink);
  font-weight: 650;
}

.review__body {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.review__author {
  margin: 0;
}

.reviews__reportToggle {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  cursor: pointer;
  background: none;
  border: 0;
  margin-block-start: var(--space-1);
  padding: 0;
  text-decoration: underline;
}

.reviews__reportToggle:hover {
  color: var(--accent);
}

.reviews__reportToggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.reviews__reportForm {
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper-sunken);
  border-radius: var(--radius);
  margin-block-start: var(--space-2);
  display: grid;
}

.reviews__reportIntro {
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
  margin: 0;
}

.reviews__reportActions {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.reviews__more {
  font-size: var(--text-sm);
  margin-block-end: var(--space-4);
  display: inline-block;
}

.reviews__own {
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  display: grid;
}

.reviews__ownTitle, .reviews__formTitle {
  font-size: var(--text-base);
  margin: 0;
}

.reviews__form {
  gap: var(--space-3);
  padding: var(--space-5);
  display: grid;
}

.reviews__formIntro, .reviews__notice {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
  margin: 0;
}

.reviews__notice {
  padding: var(--space-3);
  background: var(--pending-wash);
  color: var(--pending-ink);
  border-radius: var(--radius-sm);
}

.reviews__stars {
  gap: var(--space-3);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.reviews__star {
  align-items: center;
  gap: var(--space-1);
  min-block-size: 2.25rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
}

.reviews__star input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.specs__title {
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

.specs {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin: 0;
  overflow: hidden;
}

.specs__row {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  grid-template-columns: minmax(8rem, .4fr) 1fr;
  display: grid;
}

.specs__row + .specs__row {
  border-block-start: 1px solid var(--rule);
}

.specs__row:nth-child(odd) {
  background: var(--paper-raised);
}

.specs__label {
  color: var(--ink-soft);
  margin: 0;
  font-weight: 600;
}

.specs__value {
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
}

@media (max-width: 30rem) {
  .specs__row {
    gap: var(--space-1);
    grid-template-columns: 1fr;
  }
}

.catcards {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.catcard {
  justify-content: center;
  gap: var(--space-1);
  min-height: 4.5rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  flex-direction: column;
  text-decoration: none;
  transition: border-color .12s, background-color .12s;
  display: flex;
}

.catcard:hover {
  border-color: var(--accent-edge);
  background: var(--paper-sunken);
}

.catcard:hover .catcard__name {
  color: var(--accent);
}

.catcard__name {
  font-size: var(--text-sm);
  color: var(--ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  transition: color .12s;
  display: -webkit-box;
  overflow: hidden;
}

.catcard__count {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.offline {
  padding: var(--space-3) var(--space-4);
  background: var(--refused-wash);
  color: var(--refused-ink);
  font-size: var(--text-sm);
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.offline__text {
  max-inline-size: 60rem;
  margin: 0;
}

.offline__title {
  font-weight: 700;
}

.price__usual {
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  flex-wrap: wrap;
  display: flex;
}

.price__was {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-decoration-line: line-through;
  text-decoration-thickness: .09em;
}

.price__wasIrr {
  color: var(--ink-faint);
}

.price__saving {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.searchbox {
  flex: 1;
  max-width: 24rem;
  display: none;
  position: relative;
}

@media (min-width: 48rem) {
  .searchbox {
    display: block;
  }
}

.mobilemenu .searchbox {
  max-width: none;
  display: block;
}

@media (min-width: 48rem) {
  .mobilemenu .searchbox {
    display: none;
  }
}

.searchbox__list {
  z-index: 40;
  padding: var(--space-1);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overscroll-behavior: contain;
  max-block-size: min(60vh, 24rem);
  margin: 0;
  list-style: none;
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline: 0;
  overflow-y: auto;
  box-shadow: 0 8px 24px #0000001f;
}

.searchbox__option {
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, var(--radius));
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  display: flex;
}

.searchbox__option--active {
  background: var(--accent-wash);
  color: var(--ink-strong, var(--ink));
}

.searchbox__note {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.searchbox__more {
  border-block-start: 1px solid var(--rule);
  margin-block-start: var(--space-1);
  padding-block-start: var(--space-1);
}

.searchbox__more a {
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--accent);
  align-items: center;
  font-weight: 600;
  display: flex;
}

.variants {
  margin-block-start: var(--space-4);
}

.variants__list {
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.variants__note {
  font-size: var(--text-xs);
}

/*# sourceMappingURL=src_app_storefront_0_don_q.css.map*/