/*
 * Business components of the e-shop, built from erui. They know the domain (products, prices,
 * stock), so they are not a part of the component library.
 */

/*
 * Site header: both sides have the same width, so the search is always in the very middle,
 * whatever the cart shows. The side width holds the actions with the longest sum.
 */
.site-header {
  --site-header-side: 296px;
  background: var(--color-ink);
  color: var(--color-on-ink);
  container: site-header / inline-size;
}

.site-header__row {
  display: grid;
  grid-template-columns: minmax(var(--site-header-side), 1fr) minmax(0, 640px) minmax(var(--site-header-side), 1fr);
  gap: 10px 24px;
  align-items: start;
  padding: 10px 20px;
}

/* The logo and the actions line up with the field, the hints below it do not move them. */
.site-header__logo {
  display: flex;
  align-items: center;
  justify-self: start;
  height: var(--spacing-control-xl);
}

.site-header__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 6px;
  color: var(--color-on-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: var(--text-mono-xs--line-height);
}

.site-header__hints a {
  color: var(--color-on-ink-muted);
}

.site-header__hints a:hover {
  color: var(--color-on-ink);
}

.site-header__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.site-header__action {
  flex: none;
  gap: 8px;
  height: var(--spacing-control-xl);
  min-width: var(--spacing-control-xl);
  padding-inline: 11px;
  white-space: nowrap;
}

.site-header__initials {
  font-weight: 500;
}

/* A flag is a plain rectangle, an emoji would look different in every system. */
.flag {
  display: block;
  flex: none;
  width: 18px;
  height: 12px;
}

.dropdown__content .flag {
  box-shadow: 0 0 0 1px var(--color-line);
}

.site-header__market-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-header__cart-icon {
  position: relative;
  display: inline-flex;
}

.site-header__cart-count {
  position: absolute;
  top: -7px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-tag);
  font-weight: 600;
}

.site-header__cart-sum {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 500;
}

@container site-header (max-width: 1240px) {
  .site-header__search .search__actions .kbd-combo {
    display: none;
  }
}

/* Too narrow for three columns: the search takes its own row, still across the middle. */
@container site-header (max-width: 1040px) {
  .site-header__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .site-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@container site-header (max-width: 480px) {
  .site-header__row {
    padding-inline: 12px;
  }

  .site-header__search .search__scope,
  .site-header__initials {
    display: none;
  }

  .site-header__row {
    column-gap: 8px;
  }

  .site-header__action {
    min-width: 40px;
    padding-inline: 8px;
  }

  .site-header__logo .logo__image {
    height: 30px;
  }
}

/*
 * Main navigation: a bar with panels, below its breakpoint a button with a drawer. It follows
 * its own width. The panel hangs under the whole bar, so it never runs off the screen.
 */
.main-nav {
  --main-nav-gutter: 20px;
  position: relative;
  background: var(--color-surface);
  container: main-nav / inline-size;
}

.main-nav[data-open] {
  z-index: 46;
}

.main-nav__bar {
  box-shadow: inset 0 -1px 0 var(--color-line);
}

.main-nav__menu {
  display: none;
  padding: 6px calc(var(--main-nav-gutter) - 12px);
}

.main-nav__menu-button {
  padding-inline: 12px;
}

.main-nav__list {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(var(--main-nav-gutter) - 10px);
}

.main-nav__trigger {
  display: block;
  padding: 14px 10px;
  border: 0;
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: var(--text-ui--line-height);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-state);
}

.main-nav__trigger:hover,
.main-nav__item[data-current] > .main-nav__trigger,
.main-nav__item[data-open] > .main-nav__trigger {
  color: var(--color-brand);
}

.main-nav__item[data-current] > .main-nav__trigger,
.main-nav__item[data-open] > .main-nav__trigger {
  box-shadow: inset 0 -2px 0 var(--color-brand);
}

.main-nav__trigger--sale {
  color: var(--color-brand);
}

/*
 * One box for all categories, like the panel of the search. The script gives it the position
 * and the size of the open panel, CSS only animates them. The top padding keeps the pointer
 * inside the navigation on the way from the bar to the box.
 */
.main-nav__box {
  --main-nav-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  padding-top: 6px;
  visibility: hidden;
  opacity: 0;
  transform: translate(var(--main-nav-box-x, 0), -4px);
  transition:
    opacity 0.15s ease,
    transform 0.26s var(--main-nav-ease),
    visibility 0s linear 0.15s;
}

/* Visible at once, so the arrow key can move the focus into the panel that is just opening. */
.main-nav[data-open] .main-nav__box {
  visibility: visible;
  opacity: 1;
  transform: translate(var(--main-nav-box-x, 0), 0);
  transition-delay: 0s;
}

/* The first opening appears in place, only the next ones travel. */
.main-nav__box[data-instant],
.main-nav__box[data-instant] .main-nav__viewport {
  transition-property: opacity, visibility;
}

.main-nav__viewport {
  position: relative;
  width: var(--main-nav-box-width, 0);
  height: var(--main-nav-box-height, 0);
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition:
    width 0.26s var(--main-nav-ease),
    height 0.26s var(--main-nav-ease);
}

.main-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: calc(100cqw - 2 * var(--main-nav-gutter));
  padding: 28px 32px 24px;
  visibility: hidden;
}

.main-nav__panel[data-open],
.main-nav__panel[data-leaving] {
  visibility: visible;
}

/* Columns by content. Four groups would make a box as wide as the page, so they take two rows. */
.main-nav__groups {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 32px 48px;
}

.main-nav__groups:has(> :nth-child(4)) {
  grid-template-columns: repeat(2, max-content);
  grid-auto-flow: row;
}

.main-nav__group {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.main-nav__image {
  flex: none;
  width: 64px;
  height: 64px;
}

/* A picture of the open panel for the storyboard, without the script. */
.main-nav--preview .main-nav__box {
  position: static;
  padding: 6px 20px 16px;
  visibility: visible;
  opacity: 1;
  transform: none;
}

.main-nav--preview .main-nav__viewport {
  width: max-content;
  height: auto;
}

.main-nav--preview .main-nav__panel {
  position: static;
  display: none;
}

.main-nav--preview .main-nav__panel[data-open] {
  display: block;
}

.main-nav__group-title {
  display: block;
  margin-bottom: 10px;
  color: var(--color-fg);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--text-title--line-height);
}

.main-nav__links {
  display: grid;
  gap: 4px;
}

.main-nav__link {
  display: block;
  padding-block: 5px;
  color: var(--color-fg);
  font-size: var(--text-ui-sm);
  line-height: 1.3;
}

.main-nav__group-title:hover,
.main-nav__link:hover {
  color: var(--color-brand);
}

.main-nav__all {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.main-nav__all .icon {
  width: 14px;
  height: 14px;
}

@container main-nav (max-width: 1180px) {
  .main-nav__menu {
    display: block;
  }

  .main-nav__list,
  .main-nav__box {
    display: none;
  }
}

/* On a real page the bar spans the screen and its content follows the page grid. */
.main-nav--page {
  --main-nav-gutter: var(--spacing-gutter);
}

.main-nav--page .main-nav__list,
.main-nav--page .main-nav__menu {
  max-width: var(--spacing-page);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .main-nav--page {
    --main-nav-gutter: 16px;
  }
}

/* The drawer comes from the left, the side where the button is. */
.main-nav__drawer {
  right: auto;
  left: 8px;
  width: min(420px, calc(100% - 16px));
}

.main-nav__drawer-body {
  padding-block: 4px 14px;
}

.main-nav-mobile__panel {
  display: grid;
  gap: 16px;
  padding: 4px 0 16px;
}

.main-nav-mobile__panel .main-nav__all {
  margin-top: 0;
}

.main-nav-mobile__sale {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--text-title-sm);
  font-weight: var(--text-title-sm--font-weight);
}

.main-nav-mobile__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.main-nav-mobile__more a {
  color: var(--color-fg-muted);
}

.main-nav-mobile__more a:hover {
  color: var(--color-brand);
}

/* The header of a real page spans the screen, sticks to its top and follows the page grid. */
.site-header--page {
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header--page .site-header__row {
  max-width: var(--spacing-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* With the search on its own row the header is too tall to stay on screen. */
@media (max-width: 1040px) {
  .site-header--page {
    position: static;
  }

  .site-header--page::after {
    display: none;
  }
}

@container site-header (max-width: 480px) {
  .site-header--page .site-header__row {
    padding-inline: 12px;
  }
}

/* The currency and the cart stay readable: the actions take a row only when they do not fit. */
@container site-header (max-width: 480px) {
  .site-header__row {
    display: flex;
    flex-wrap: wrap;
  }

  .site-header__actions {
    flex: none;
    margin-left: auto;
  }

  .site-header__search {
    flex: 0 0 100%;
    order: 1;
    min-width: 0;
  }
}

/* Home page */
.shop-promo {
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-mono);
  font-size: var(--text-utility);
  line-height: var(--text-utility--line-height);
  text-transform: uppercase;
}

.shop-promo__row {
  display: flex;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--spacing-utility-bar);
}

.shop-promo__notes,
.shop-promo__links {
  display: flex;
  gap: 24px;
}

.shop-promo__links a {
  color: var(--color-on-brand);
}

.shop-promo__links a:hover {
  color: var(--color-on-brand);
  opacity: 0.8;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 16px;
  margin-top: 12px;
}

.home-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 440px;
  padding: 44px 44px 84px;
  border-radius: 0;
}

.home-slide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.home-slide__note {
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.home-slide__title {
  max-width: 560px;
  margin-top: 16px;
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

.home-slide__text {
  max-width: 460px;
  margin-top: 14px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.home-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 24px;
}

.home-hero__side {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  min-width: 0;
}

.home-hero__side .tile {
  gap: 12px;
  min-height: 130px;
  padding-block: 18px;
}

.home-picker {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.home-picker__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-picker__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.home-section {
  margin-top: 48px;
  scroll-margin-top: 104px;
}

.home-section__head {
  margin-bottom: 16px;
}

.home-section__lead {
  margin-bottom: 14px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.home-section__more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.home-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.home-link .icon {
  width: 14px;
  height: 14px;
}

.home-devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
}

.home-device {
  display: grid;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.home-device__image {
  aspect-ratio: 5 / 2;
  margin-bottom: 10px;
}

.home-device__name {
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
}

.home-device__count {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.home-stock .tabs__content {
  padding-top: 0;
}

.home-clearance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 720px);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ink);
}

.home-clearance__intro {
  align-self: center;
  padding: 44px;
  color: var(--color-on-ink);
}

.home-clearance__title {
  margin-top: 10px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
  text-wrap: balance;
}

.home-clearance__text {
  max-width: 460px;
  margin-top: 14px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.home-clearance__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-clearance__items {
  padding: 20px;
  background: var(--color-ink-stripe-a);
  color: var(--color-fg);
}

.home-clearance__items .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-advice__articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
}

.home-advice__articles .article-card__image {
  aspect-ratio: 5 / 2;
  border-radius: 0;
}

/* A coloured band: it wraps by its own content, so it also works in a narrow column. */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.newsletter__offer {
  flex: 1 1 320px;
  min-width: 0;
}

.newsletter__text {
  margin-top: 4px;
  opacity: 0.85;
  line-height: 1.6;
}

.newsletter__form {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  max-width: 640px;
}

.newsletter__field {
  display: flex;
  flex: 1 1 240px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.newsletter__label {
  flex: none;
  font-size: var(--text-ui);
  font-weight: 600;
}

.newsletter__field .input {
  flex: 1;
  min-width: 0;
}

.newsletter__form .button {
  flex: 0 0 auto;
}

.home-business {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
}

/* The account is a privilege, so it has the dark box of the tile at the top of the page. */
.home-business__offer {
  padding: 36px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.home-business .collapsible {
  border-color: var(--color-line);
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-grid);
}

.home-tiles .tile {
  gap: 12px;
  min-height: 150px;
}

.home-business__list {
  display: grid;
  gap: 10px;
  margin-block: 18px 22px;
  font-size: var(--text-body);
}

.home-business__list li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.home-business__list .icon {
  flex: none;
  color: var(--color-success);
}


/* The brands fill the height of the devices next to them. */
.home-brands {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spacing-grid);
}

.home-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 68px;
  padding-inline: 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  text-align: center;
}

.home-brand:hover {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

@media (max-width: 1180px) {
  .home-hero,
  .home-picker,
  .home-clearance {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: the choice of a device or a brand comes right after the carousel. */
  .home-main {
    display: flex;
    flex-direction: column;
  }

  .home-main > * {
    order: 4;
    min-width: 0;
  }

  .home-main > .home-hero {
    display: contents;
  }

  .home-main .carousel {
    order: 1;
    margin-top: 12px;
  }

  .home-main > .home-picker {
    order: 2;
  }

  .home-main .home-hero__side {
    order: 3;
    margin-top: 32px;
  }

  .home-hero__side {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero__side .tile--ink {
    grid-column: 1 / -1;
  }

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

  .home-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shop-promo__notes li:not(:first-child),
  .shop-promo__links {
    display: none;
  }

  .home-slide {
    min-height: 0;
    padding: 24px 20px 72px;
  }

  .home-slide__title {
    font-size: var(--text-heading-xl);
    line-height: var(--text-heading-xl--line-height);
  }

  .carousel__controls {
    bottom: 16px;
    left: 20px;
  }

  .carousel__dot {
    width: 22px;
  }

  .home-hero__side,
  .home-business,
  .home-advice__articles {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* The ranking links to its whole list, a phone does not need all eight cards. */
  #bestsellers .product-card:nth-child(n + 5) {
    display: none;
  }

  .home-clearance__intro {
    padding: 24px 20px;
  }

  .home-clearance__items {
    padding: 12px;
  }

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

  .newsletter {
    padding: 20px;
  }

  .newsletter__form .button {
    flex: 1 1 100%;
  }

  .home-business__offer {
    padding: 24px 20px;
  }

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

/* Blog: a reduced frame, reading comes first. */
.blog-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-line);
}

/* Both sides have the same width, so the search stays in the very middle like in the shop. */
.blog-header__row {
  --blog-header-side: 296px;
  display: grid;
  grid-template-columns: minmax(var(--blog-header-side), 1fr) minmax(0, 640px) minmax(var(--blog-header-side), 1fr);
  gap: 10px 24px;
  align-items: center;
  min-height: 66px;
  padding-block: 10px;
}

.blog-header .logo {
  justify-self: start;
}

.blog-header__search {
  min-width: 0;
}

/* The field stands on the white header here, so it needs a visible edge. */
.blog-header__search .search:not(:focus-within) {
  box-shadow: 0 0 0 1px var(--color-line-strong);
}

.blog-header__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* An open search dims the rest of the header too, the same way as in the shop. */
.blog-header:has([data-fulltext][data-open]) {
  z-index: 46;
}

.blog-header::after {
  position: absolute;
  background: var(--color-scrim-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  inset: 0;
}

.blog-header:has([data-fulltext][data-open])::after {
  opacity: 1;
  pointer-events: auto;
}

/* Too narrow for three columns: the search takes its own row and the header stops sticking. */
@media (max-width: 1180px) {
  .blog-header__search .search__actions .kbd-combo {
    display: none;
  }

  .blog-header {
    position: static;
  }

  .blog-header::after {
    display: none;
  }

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

  .blog-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.blog-header__back {
  padding-inline: 16px;
}

/* Reading progress. Without scroll timelines the bar simply stays hidden. */
.blog-header__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
}

/* The header scrolls away on narrow screens, the bar stays at the top of the window. */
@media (max-width: 1180px) {
  .blog-header__progress {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 40;
  }
}

@supports (animation-timeline: scroll()) {
  .blog-header__progress {
    animation: blog-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes blog-progress {
  to {
    transform: scaleX(1);
  }
}

.blog-footer {
  margin-top: 16px;
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: 1.5;
}

.blog-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}

.blog-footer__links {
  display: flex;
  gap: 16px;
}

.blog-footer__links a {
  color: var(--color-on-ink-muted);
}

.blog-footer__links a:hover {
  color: var(--color-on-ink);
}

.blog [hidden] {
  display: none;
}

.blog__head {
  margin-top: 14px;
}

.blog__title {
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.blog__lead {
  max-width: 620px;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: 1.5;
}

.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.blog-featured__image {
  display: block;
  min-height: 340px;
  border-radius: 0;
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 36px;
}

.blog-featured__title {
  font-size: var(--text-heading-lg);
  font-weight: 700;
  line-height: var(--text-heading-lg--line-height);
  letter-spacing: var(--text-heading-lg--letter-spacing);
  text-wrap: balance;
}

.blog-featured__title a,
.blog-card__title a {
  color: var(--color-fg);
}

.blog-featured__title a:hover,
.blog-card__title a:hover {
  color: var(--color-brand);
}

.blog-featured__text,
.blog-card__text {
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.5;
}

.blog-featured .button {
  margin-top: 8px;
}

.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  scroll-margin-top: 82px;
}

/* Articles in the panel of the search: no price column, one line of the excerpt. */
.search-panel .search-article {
  grid-template-columns: 56px minmax(0, 1fr);
}

.search-article__text {
  overflow: hidden;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-toolbar__sort {
  flex: 0 0 200px;
}

.blog-toolbar__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-theme {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-ui-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: var(--transition-state);
}

.blog-theme:hover {
  background: var(--color-stripe-a);
}

.blog-theme[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.blog-theme__count {
  opacity: 0.65;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 400;
}

.blog__count {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 14px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
  margin-top: 12px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.blog-card__image {
  display: block;
  aspect-ratio: 5 / 2;
  border-radius: 0;
}

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

.blog-card__topics {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.blog-card__title {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--text-title--line-height);
}

.blog-card .blog-meta {
  margin-top: auto;
  padding-top: 4px;
}

.blog__empty {
  margin-top: 12px;
}

.article .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 16px;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article__tags .search-chip {
  padding-left: 8px;
}

.article__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
  text-wrap: balance;
}

.article__lead {
  max-width: 600px;
  margin-top: 14px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}

.article__author {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.article__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 600;
}

.article__author-name {
  font-size: var(--text-title-sm);
  font-weight: 600;
}

.article__hero-image {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
}

.article__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

.article__aside {
  position: sticky;
  top: 86px;
  max-height: calc(100dvh - 102px);
  overflow-y: auto;
}

.article__aside-title,
.article-aside-label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.article__toc {
  display: grid;
  gap: 1px;
  margin-top: 8px;
  box-shadow: inset 1px 0 var(--color-line);
}

.article__chapter {
  display: block;
  padding: 6px 8px 6px 12px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.35;
  transition: var(--transition-state);
}

.article__chapter:hover {
  color: var(--color-brand);
}

.article__chapter[aria-current="location"] {
  color: var(--color-fg);
  box-shadow: inset 2px 0 var(--color-brand);
}

.article__share {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}

.article__share-buttons {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.article__share .article__share-button {
  width: var(--spacing-control-sm);
  height: var(--spacing-control-sm);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-fg);
}

.article__share .article__share-button:hover {
  background: var(--color-stripe-a);
}

.article__share .article__share-button .product-panel__copy-icon,
.article__share .article__share-button .product-panel__copied-icon {
  width: 18px;
  height: 18px;
}

.article__share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.article__content {
  min-width: 0;
}

.article__content .prose {
  max-width: none;
}

.article__content .prose h2 {
  scroll-margin-top: 86px;
}

.article-figure {
  margin: 20px 0 24px;
}

.article-figure__image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

.article-figure figcaption {
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.article-highlights {
  display: grid;
  gap: 22px;
  margin-top: 32px;
  padding: 32px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.article-highlights__title {
  font-size: var(--text-heading-md);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.article-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.article-highlight {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  text-align: center;
}

.article-highlight .product-feature__icon {
  background: var(--color-surface);
  color: var(--color-brand);
}

.article-highlight__title {
  font-size: var(--text-title);
  font-weight: 600;
}

.article-highlight__text {
  opacity: 0.88;
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.article-highlights__video {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
}

.article-awards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 24px;
}

.article-awards__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article-awards__list li {
  padding: 6px 10px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-ui-sm);
  font-weight: 500;
}

.article-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.article-cta__title {
  font-size: var(--text-heading-md);
  font-weight: 600;
  line-height: 1.25;
}

.article-cta__text {
  margin-top: 4px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-ui);
}

@media (max-width: 1040px) {
  .blog-featured,
  .article__hero,
  .article__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-featured__image {
    min-height: 0;
    aspect-ratio: 5 / 2;
  }

  .blog__grid,
  .article .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article__aside {
    position: static;
    max-height: none;
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
}

@media (max-width: 760px) {
  .blog__grid,
  .article .product-grid,
  .article-highlights__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-featured__body,
  .article-highlights,
  .article-cta {
    padding: 20px;
  }

  .blog-toolbar__sort {
    flex: 1 1 100%;
  }

  .blog__title,
  .article__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  /* The sticky header must stay on one row, the arrow says the rest. */
  .blog-header__back-prefix {
    display: none;
  }

  .blog-header__back {
    padding-inline: 10px;
  }

  .blog-header .logo__image {
    height: 30px;
  }

  .blog-header__row {
    gap: 10px 8px;
  }
}

/* Frame of the e-shop */
.shop-container {
  max-width: var(--spacing-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* The blog keeps one width for its header, listing, article and footer. */
.shop-container--narrow {
  max-width: calc(var(--spacing-page-narrow) + var(--spacing-gutter) * 2);
}

.shop-main {
  padding-block: 16px 56px;
}

.shop-footer {
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
}

.shop-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-block: 40px 28px;
}

.shop-footer__column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.shop-footer__title {
  margin-bottom: 4px;
  color: var(--color-on-ink);
  font-size: var(--text-title);
  font-weight: 600;
}

.shop-footer__links {
  display: grid;
  gap: 8px;
}

.shop-footer__link,
.shop-footer__contact {
  color: var(--color-on-ink-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.35;
}

.shop-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shop-footer__link:hover,
.shop-footer__contact:hover {
  color: var(--color-on-ink);
}

.shop-footer__address {
  margin-top: 6px;
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.shop-footer__legal {
  padding-block: 14px;
  box-shadow: inset 0 1px 0 var(--color-line-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

/* Product page: the left side scrolls, the right side stays on screen. */
.product-page {
  --product-panel-top: 105px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 14px;
}

/* The header stops sticking here, so the panel can go up to the top of the screen. */
@media (max-width: 1040px) {
  .product-page {
    --product-panel-top: 16px;
  }
}

/*
 * The left side is one sheet: pictures reach its edges and dissolve into the text around them,
 * so a real photo needs nothing but the same masks.
 */
.product-story {
  --story-gutter: 36px;
  --story-fade-y: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  overflow: clip;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  container: product-story / inline-size;
}

/* The placeholders are darker here, so the transitions show before real photos arrive. */
.product-story .stripes {
  --color-stripe-a: color-mix(in srgb, var(--color-ink) 16%, var(--color-surface));
  --color-stripe-b: color-mix(in srgb, var(--color-ink) 9%, var(--color-surface));
}

.product-gallery__main {
  aspect-ratio: 5 / 4;
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.product-gallery__thumbs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: -48px;
  padding-inline: var(--story-gutter);
}

.product-gallery__thumb {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
}

.product-gallery__thumb:hover {
  border-color: var(--color-line-strong);
}

.product-gallery__thumb[aria-current="true"] {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.product-description {
  max-width: none;
  padding: 32px var(--story-gutter) 0;
}

.product-description.prose > h2 {
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
}

.product-description.prose > h2:first-child {
  margin-top: 0;
}

/* A picture next to text: it starts at the edge of the sheet and dissolves under the text. */
.product-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  margin-block: 8px;
}

.product-split__media {
  aspect-ratio: 1;
  margin-left: calc(var(--story-gutter) * -1);
  mask-image: linear-gradient(to right, #000 55%, transparent), var(--story-fade-y);
  mask-composite: intersect;
}

.product-split--reverse .product-split__media {
  order: 1;
  margin-right: calc(var(--story-gutter) * -1);
  margin-left: 0;
  mask-image: linear-gradient(to left, #000 55%, transparent), var(--story-fade-y);
}

.prose .product-split__text {
  margin: 0;
}

/* Two pictures from edge to edge that dissolve into each other. */
.product-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 5 / 2;
  margin-block: 8px;
  margin-inline: calc(var(--story-gutter) * -1);
}

.product-duo__media {
  mask-image: linear-gradient(to right, #000 62%, transparent), var(--story-fade-y);
  mask-composite: intersect;
}

.product-duo__media + .product-duo__media {
  margin-left: -24%;
  mask-image: linear-gradient(to left, #000 62%, transparent), var(--story-fade-y);
}

/* A picture that carries the light part of the sheet over to the dark one. */
.product-bridge {
  margin-top: 8px;
  margin-inline: calc(var(--story-gutter) * -1);
  background: linear-gradient(to bottom, var(--color-surface) 50%, var(--color-ink) 50%);
}

.product-bridge__media {
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.product-features {
  display: grid;
  gap: 16px;
  margin-inline: calc(var(--story-gutter) * -1);
  padding: 12px var(--story-gutter) var(--story-gutter);
  background: var(--color-ink);
  color: var(--color-on-ink);
  text-align: center;
}

.product-description.prose .product-features__title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.prose .product-features__lead {
  max-width: 460px;
  margin: 0 auto;
  color: var(--color-on-ink-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.product-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-block: 16px 12px;
}

.product-feature {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
}

.product-feature__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.prose .product-feature__title {
  margin: 6px 0 0;
  font-size: var(--text-title);
}

.prose .product-feature__text {
  margin: 0;
  color: var(--color-on-ink-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.product-video {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line-on-ink);
  border-radius: var(--radius-md);
  background: var(--color-ink-stripe-a);
}

.product-video__icon {
  width: 40px;
  height: 40px;
  color: var(--color-on-ink-muted);
}

/* The sheet follows its own width, so the narrow form also applies next to the panel. */
@container product-story (max-width: 560px) {
  .product-gallery__thumbs,
  .product-description {
    --story-gutter: 20px;
  }

  .product-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .product-split__media,
  .product-split--reverse .product-split__media {
    order: 0;
    aspect-ratio: 16 / 9;
    margin-inline: calc(var(--story-gutter) * -1);
    mask-image: var(--story-fade-y);
    mask-composite: add;
  }

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

.product-panel {
  position: sticky;
  top: var(--product-panel-top);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--product-panel-top) - 16px);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.product-panel__scroll {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
}

.product-panel__head {
  flex: none;
  display: grid;
  gap: 10px;
  padding: 20px 20px 16px;
}

.product-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-panel__title {
  font-size: var(--text-heading-lg);
  font-weight: 700;
  line-height: var(--text-heading-lg--line-height);
  letter-spacing: var(--text-heading-lg--letter-spacing);
  text-wrap: balance;
}

.product-panel__gift {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--color-brand);
  font-size: var(--text-ui-sm);
  line-height: 1.35;
}

.product-panel__gift strong {
  font-weight: 600;
}

.product-panel__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 2px;
}

.product-panel__code {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
}

.product-panel__code dt {
  color: var(--color-fg-muted);
}

.product-panel__copy {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
}

.product-panel__copy:hover {
  color: var(--color-brand);
}

.product-panel__copy-icon,
.product-panel__copied-icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
}

.product-panel__copied-icon {
  color: var(--color-success);
  opacity: 0;
}

.product-panel__copy[data-copied] .product-panel__copy-icon {
  opacity: 0;
}

.product-panel__copy[data-copied] .product-panel__copied-icon {
  opacity: 1;
}

.product-panel__details {
  flex: 0 1 auto;
  min-height: 0;
  padding-inline: 20px;
  overflow-y: auto;
  border-top: 1px solid var(--color-line-soft);
}

.product-accordion:last-child {
  border-bottom: 0;
}

.product-accordion__body {
  padding-bottom: 14px;
  font-size: var(--text-ui);
  line-height: 1.55;
}

.product-panel__devices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-panel__devices .search-chip {
  padding-left: 8px;
}

.product-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 12px;
  padding-block: 6px;
  border-bottom: 1px solid var(--color-line-soft);
}

.product-specs__row:last-child {
  border-bottom: 0;
}

.product-specs dt {
  color: var(--color-fg-muted);
}

.product-specs dd {
  font-weight: 500;
}

.product-buy {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

.product-buy__summary {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.product-buy__price {
  font-family: var(--font-mono);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.product-buy__actions {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-end;
}

.product-buy__add {
  flex: 0 1 auto;
}

/* On a low screen the head scrolls too, so the purchase is never pushed out. */
@media (max-height: 620px) and (min-width: 961px) {
  .product-panel__scroll {
    overflow-y: auto;
  }

  .product-panel__details {
    flex: none;
    overflow: visible;
  }
}

.product-related {
  margin-top: 48px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-grid);
}

.article-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.article-card__image {
  display: block;
  aspect-ratio: 16 / 9;
}

.article-card__body {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.article-card__topics {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: 1.4;
}

.article-card__title {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--text-title--line-height);
}

.article-card__title a {
  color: var(--color-fg);
}

.article-card__title a:hover {
  color: var(--color-brand);
}

.article-card__text {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .shop-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* One column: the parts of the panel go between the gallery and the description. */
  .product-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .product-panel,
  .product-panel__scroll {
    display: contents;
  }

  .product-panel__head {
    order: 1;
    padding: 0;
  }

  .product-story {
    order: 2;
  }

  .product-panel__details {
    order: 3;
    overflow: visible;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  /* The purchase sticks to the bottom edge of the screen while the page scrolls. */
  .product-buy {
    position: sticky;
    bottom: 0;
    z-index: 30;
    order: 4;
    margin-inline: calc(var(--spacing-gutter) * -1);
    padding: 10px var(--spacing-gutter);
  }
}

@media (max-width: 640px) {
  .shop-container {
    padding-inline: 16px;
  }

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

  .product-buy {
    margin-inline: -16px;
    padding: 10px 16px;
  }

  .product-buy__summary {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 10px;
    width: 100%;
  }

  .product-buy__summary .stock {
    grid-column: 1 / -1;
  }

  .product-buy__price {
    font-size: var(--text-price);
  }

  .product-buy__add {
    flex: 1 1 auto;
  }

  .product-story {
    margin-inline: -16px;
    border-inline: 0;
    border-radius: 0;
  }
}

/* Fulltext search: hui positions the panel under the search with CSS anchors. */
.search__spinner {
  display: none;
  flex: none;
  color: var(--color-fg-muted);
}

.search:has([data-searching]) .search__spinner {
  display: inline-flex;
}

/* An open search dims the whole page, only the field and the panel of results stay lit. */
body::before {
  position: fixed;
  z-index: 45;
  background: var(--color-scrim-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  inset: 0;
}

body:has([data-fulltext][data-open])::before,
body:has(.main-nav[data-open])::before {
  opacity: 1;
  pointer-events: auto;
}

/* Nothing keeps moving under the dimmed page. */
body:has([data-fulltext][data-open], .main-nav[data-open]) .carousel__dot-fill::after {
  animation-play-state: paused !important;
}

[data-fulltext][data-open] {
  position: relative;
  z-index: 46;
}

/* The sticky header keeps its content in its own layer, so it is lifted and dimmed from inside. */
.site-header--page:has([data-fulltext][data-open]) {
  z-index: 46;
}

.site-header--page::after {
  position: absolute;
  background: var(--color-scrim-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  inset: 0;
}

.site-header--page:has([data-fulltext][data-open])::after {
  opacity: 1;
  pointer-events: auto;
}

/* Smooth state changes of the business components. */
.product-gallery__thumb,
.product-panel__copy,
.product-panel__copy-icon,
.product-panel__copied-icon,
.search-product,
.search-row,
.search-chip,
.text-page__page,
.text-page__chapter,
.home-brand {
  transition: var(--transition-state);
}

.search-panel {
  z-index: 50;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(960px, calc(100vw - 32px));
  max-height: min(640px, calc(100% - 14px));
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  container: search-panel / inline-size;
}

.search-panel__list {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.search-panel__list[data-searching] .search-panel__body {
  opacity: 0.5;
  pointer-events: none;
}

.search-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
}

.search-panel__column {
  min-width: 0;
  padding: 14px;
  overflow-y: auto;
}

.search-panel__column--side {
  border-left: 1px solid var(--color-line-soft);
}

/* A column without results gives its space to the other one. */
.search-panel__column:not(:has([role="option"])) {
  display: none;
}

.search-panel__body:not(:has(.search-panel__column--side [role="option"])),
.search-panel__body:not(:has(.search-panel__column:not(.search-panel__column--side) [role="option"])) {
  grid-template-columns: minmax(0, 1fr);
}

.search-panel__body:not(:has(.search-panel__column:not(.search-panel__column--side) [role="option"])) .search-panel__column--side {
  border-left: 0;
}

.search-panel__group + .search-panel__group {
  margin-top: 18px;
}

.search-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding-inline: 8px;
}

.search-panel__title {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.search-panel__count {
  color: var(--color-fg);
}

.search-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.search-panel__link .icon {
  width: 14px;
  height: 14px;
}

.search-panel__group--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline: 8px;
}

.search-panel__group--chips .search-panel__head {
  flex-basis: 100%;
  margin-bottom: 0;
  padding-inline: 0;
}

.search-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-line-soft);
  background: var(--color-stripe-b);
}

.search-panel__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.search-panel__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-panel__all {
  flex: none;
  gap: 8px;
  cursor: pointer;
}

.search-panel__all[data-highlighted] {
  background: var(--color-brand-hover);
}

.search-panel__all:hover {
  background: var(--color-brand-hover);
}

.search-panel__empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 24px;
  text-align: center;
}

.search-panel__suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.search-panel__suggestions .search-panel__title {
  flex-basis: 100%;
}

/* One product */
.search-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.search-product[data-highlighted],
.search-row[data-highlighted] {
  background: var(--color-stripe-a);
}

.search-product__image {
  display: block;
  aspect-ratio: 1;
}

.search-product__info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.search-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: var(--text-code--line-height);
}

.search-product__name {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  font-weight: var(--text-title-sm--font-weight);
  text-wrap: pretty;
}

.search-product__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 2px;
}

.search-product__prices {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}

.search-product__price {
  font-family: var(--font-mono);
  font-size: var(--text-price-sm);
  line-height: var(--text-price-sm--line-height);
  font-weight: var(--text-price-sm--font-weight);
}

.search-product__price--sale {
  color: var(--color-brand);
}

/* One category */
.search-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.search-row__label {
  min-width: 0;
}

.search-row__parent {
  margin-right: 4px;
  color: var(--color-fg-muted);
  font-weight: 400;
}

.search-row__count,
.search-chip__count {
  flex: none;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 400;
}

/* A brand, a device or a suggestion */
.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  font-size: var(--text-ui-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.search-chip:hover {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

.search-chip[data-highlighted] {
  border-color: var(--color-fg);
  background: var(--color-stripe-a);
}

.search-chip:not(:has(.search-chip__mark)) {
  padding-left: 8px;
}

.search-chip__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--text-mono-xs);
  font-weight: 700;
}

.search-panel mark {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
}

.search-panel .search-panel__all mark {
  background: none;
  color: inherit;
}

/* The anchored panel would run off a narrow screen, so it takes the free width there. */
@media (max-width: 1040px) {
  .search-panel:not(.search-panel--preview) {
    position-area: bottom span-all !important;
    right: 8px !important;
    left: 8px !important;
    justify-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Text page: terms, cookies, privacy and similar. */
.text-page__head {
  margin-bottom: 24px;
}

.text-page__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.text-page__lead {
  max-width: 680px;
  margin-top: 10px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.text-page__valid {
  margin-top: 10px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
}

.text-page__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 762px);
  gap: 32px;
  align-items: start;
}

.text-page__aside {
  position: sticky;
  top: calc(var(--spacing-nav) + 16px);
  max-height: calc(100dvh - var(--spacing-nav) - 32px);
  overflow-y: auto;
}

.text-page__toggle {
  display: none;
}

/* On a wide screen the navigation is always open, the Collapsible only serves a narrow one. */
@media (min-width: 901px) {
  .text-page__menu {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

.text-page__menu-title {
  margin-bottom: 8px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.text-page__pages {
  display: grid;
  gap: 2px;
}

.text-page__page {
  display: block;
  padding: 7px 0;
  color: var(--color-fg);
  font-size: var(--text-ui);
  line-height: 1.3;
}

.text-page__page:hover {
  color: var(--color-brand);
}

.text-page__page[aria-current="page"] {
  font-weight: 600;
}

.text-page__toc {
  display: grid;
  gap: 1px;
  margin: 2px 0 8px;
  counter-reset: text-chapter;
  box-shadow: inset 1px 0 var(--color-line);
}

.text-page__toc > li {
  counter-increment: text-chapter;
}

.text-page__chapter {
  display: flex;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.3;
}

.text-page__chapter:hover {
  color: var(--color-brand);
}

.text-page__chapter[aria-current="location"] {
  color: var(--color-fg);
  box-shadow: inset 2px 0 var(--color-brand);
}

.text-page__toc[data-numbering] .text-page__chapter::before {
  flex: none;
  width: 32px;
}

.text-page__toc[data-numbering="roman"] .text-page__chapter::before {
  content: counter(text-chapter, upper-roman) ".";
}

.text-page__toc[data-numbering="clauses"] .text-page__chapter::before {
  width: 18px;
  content: counter(text-chapter) ".";
}

.text-page__sheet {
  padding: 36px 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.text-page__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

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

.text-page__contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .text-page__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .text-page__aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .text-page__nav {
    padding-inline: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .text-page__toggle {
    display: flex;
  }

  .text-page__menu > nav {
    padding-bottom: 12px;
  }

  .text-page__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  .text-page__sheet {
    padding: 20px 16px;
  }
}

/* The panel follows its own width, so the phone layout also shows in a narrow preview. */
@container search-panel (max-width: 640px) {
  .search-panel__body {
    display: block;
    overflow-y: auto;
  }

  .search-panel__column {
    overflow: visible;
    padding: 10px;
  }

  .search-panel__column--side {
    border-top: 1px solid var(--color-line-soft);
    border-left: 0;
  }

  .search-panel__hints {
    display: none;
  }

  .search-panel__footer {
    padding: 8px 10px;
  }

  .search-panel__all {
    width: 100%;
  }

  .search-product {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .search-product__prices {
    grid-column: 2;
    justify-items: start;
  }
}

/* Listing of a category: head, subcategories, sticky filters on the left and the products with
   a banner after every page. One page holds twelve cards, which fill whole rows with two, three
   or four cards in a row. */
.category [hidden] {
  display: none;
}

.category-head__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

/* How many products the search found and how fast, the number in the same size as its text. */
.category-head__summary {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}

.category-head__summary strong {
  color: var(--color-fg);
  font-weight: 600;
}

.category-head__summary-icon {
  width: 16px;
  height: 16px;
  color: var(--color-brand);
}

.category-head__lead {
  max-width: 680px;
  margin-top: 12px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.category-subs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-grid);
  margin-top: 24px;
}

.category-sub {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.category-sub__image {
  aspect-ratio: 1;
}

.category-sub__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.category-sub__name {
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
}

.category-sub__count {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.category-sub__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-fg-hint);
  transition:
    color 0.12s ease,
    transform 0.12s ease;
}

.category-sub:hover .category-sub__arrow {
  color: var(--color-fg);
  transform: translateX(2px);
}

.category-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* The filters stay on screen under the sticky header and scroll on their own when long. */
.category-filters {
  position: sticky;
  top: 105px;
  max-height: calc(100dvh - 121px);
  padding: 0 16px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scrollbar-width: thin;
}

.category-filters__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.category-filters__title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-title-sm);
  font-weight: 600;
}

.category-filters__icon {
  width: 16px;
  height: 16px;
}

.category-filters__reset {
  transition: var(--transition-state), visibility 0s linear 0.12s;
}

.category-filters__reset[data-inactive] {
  visibility: hidden;
  opacity: 0;
}

.category-filters__groups .collapsible:last-child {
  border-bottom: 0;
}

.category-filters__list {
  display: grid;
  gap: 10px;
}

.category-filter__label {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* The counts end where the chevron of the group ends, not on the edge of its button. */
.category-filter__count {
  margin-right: 8px;
  color: var(--color-fg-hint);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.category-listing {
  min-width: 0;
  container-type: inline-size;
}

/* Active filters on the left and the sorting on the right, above the filters and the products. */
.category-toolbar {
  display: flex;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--spacing-control-sm);
  margin: 28px 0 12px;
}

.category-toolbar__start,
.category-toolbar__sort {
  display: flex;
  gap: 10px;
  align-items: center;
}

.category-toolbar__start {
  min-width: 0;
}

.category-toolbar__sort {
  flex: none;
}

.category-active {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.category-active__label {
  flex: none;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.category-toolbar__label {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
}

.category-toolbar__listbox {
  width: 220px;
}

/* On wide screens the filters are in the column, the drawer is only for narrow ones. */
.category-toolbar__filters {
  display: none;
}

.category-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.category-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-line);
  color: var(--color-fg);
  font-size: var(--text-ui-sm);
  cursor: pointer;
  transition: var(--transition-state);
  animation: category-appear 0.18s ease both;
}

.category-chip:hover {
  background: var(--color-line-strong);
}

.category-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--color-fg-muted);
  transition: color 0.12s ease;
}

.category-chip:hover .icon {
  color: var(--color-fg);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-grid);
  transition: opacity 0.15s ease;
}

/* The stand-in for the server answers after a moment, the grid shows it is working meanwhile. */
.category-grid[data-busy] {
  opacity: 0.45;
  pointer-events: none;
}

.category-grid__item {
  display: grid;
  min-width: 0;
}

[data-appear] {
  animation: category-appear 0.3s ease both;
}

@keyframes category-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Banners take a whole row of the grid. */
.category-banner {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: 28px 32px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.category-banner__label {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.category-banner__title {
  max-width: 620px;
  margin-top: 8px;
  font-size: var(--text-heading-lg);
  font-weight: 700;
  line-height: var(--text-heading-lg--line-height);
  letter-spacing: var(--text-heading-lg--letter-spacing);
  text-wrap: balance;
}

.category-banner__text {
  max-width: 560px;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.category-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.category-banner--brand {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.category-banner--brand .category-banner__label,
.category-banner--brand .category-banner__text {
  color: var(--color-on-brand);
  opacity: 0.85;
}

.category-banner__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 184px;
  aspect-ratio: 1;
  margin-right: 8px;
}

.category-banner__media::before,
.category-banner__media::after {
  position: absolute;
  border: 1px solid var(--color-line-strong-on-ink);
  border-radius: var(--radius-full);
  content: "";
  inset: 0;
}

.category-banner__media::after {
  inset: 26px;
}

.category-banner__percent {
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

/* The code of the discount: copied with one click, the check confirms it. */
.category-code {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  height: var(--spacing-control-md);
  padding: 0 4px 0 12px;
  border: 1px dashed var(--color-line-strong-on-ink);
  border-radius: var(--radius-sm);
}

.category-code__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  opacity: 0.85;
  text-transform: uppercase;
}

.category-code__value {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.category-code__copy {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-ink-muted);
  cursor: pointer;
  transition: var(--transition-state);
}

.category-code__copy:hover {
  color: var(--color-on-brand);
}

.category-code__copy-icon,
.category-code__copied-icon {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  transition: opacity 0.12s ease;
}

.category-code__copied-icon,
.category-code__copy[data-copied] .category-code__copy-icon {
  opacity: 0;
}

.category-code__copy[data-copied] .category-code__copied-icon {
  opacity: 1;
}

.category-banner--ink {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.category-banner--ink .category-banner__label {
  color: var(--color-brand-tint);
}

.category-banner--ink .category-banner__text {
  color: var(--color-on-ink-muted);
}

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

.category-offer__items {
  display: flex;
  gap: 10px;
  align-items: center;
}

.category-offer__item {
  display: grid;
  gap: 4px;
  width: 132px;
}

.category-offer__image {
  margin-bottom: 4px;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--color-ink-stripe-a) 0 8px, var(--color-ink-stripe-b) 8px 16px);
}

.category-offer__name {
  font-size: var(--text-ui-sm);
  font-weight: 500;
  line-height: 1.35;
}

.category-offer__item-price {
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.category-offer__plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 40px;
  border: 1px solid var(--color-line-strong-on-ink);
  border-radius: var(--radius-full);
}

.category-offer__plus .icon {
  width: 14px;
  height: 14px;
}

.category-offer__buy {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-left: 32px;
  border-left: 1px solid var(--color-line-on-ink);
}

.category-offer__prices {
  display: grid;
  gap: 2px;
}

.category-offer__old {
  color: var(--color-on-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-decoration: line-through;
}

.category-offer__price {
  font-family: var(--font-mono);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.15;
}

.category-offer__saving {
  color: var(--color-brand-tint);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.category-banner--light {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.category-banner__points {
  display: grid;
  gap: 8px;
  font-size: var(--text-ui);
}

.category-banner__points li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.category-banner__check {
  width: 16px;
  height: 16px;
  color: var(--color-success);
}

.category-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 56px 24px;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.category-empty__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  color: var(--color-fg-hint);
}

.category-empty__title {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
}

.category-empty__text {
  margin-bottom: 8px;
  color: var(--color-fg-muted);
}

.category-more {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 36px;
  text-align: center;
}

.category-more__status {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

/* A rounded track with a rounded fill, the fill keeps its round end even at a few per cent. Half
   the height rounds the ends, --radius-full is 50 % and would bend the whole long bar. */
.category-more__bar {
  display: block;
  width: min(280px, 100%);
  height: 6px;
  border-radius: 3px;
  background: var(--color-line);
}

.category-more__fill {
  display: block;
  min-width: 6px;
  height: 100%;
  border-radius: inherit;
  background: var(--color-ink);
  transition: width 0.3s ease;
}

.category-more__button {
  min-width: 260px;
  margin-top: 4px;
}

.category-drawer__footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.category-drawer__show {
  flex: 1;
  min-width: 0;
}

/* Narrow listings put the parts of the banners under each other. */
@container (max-width: 820px) {
  .category-banner,
  .category-offer,
  .category-banner--light {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .category-banner__media {
    display: none;
  }

  .category-offer__buy {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 0;
    border-top: 1px solid var(--color-line-on-ink);
    border-left: 0;
  }
}

@media (max-width: 1240px) {
  .category-subs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The header no longer sticks, so the filters can go up to the top of the screen. */
@media (max-width: 1040px) {
  .category-filters {
    top: 16px;
    max-height: calc(100dvh - 32px);
  }
}

/* Without the column the filters open in a drawer, the active ones get a row of their own. */
@media (max-width: 960px) {
  .category-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-filters {
    display: none;
  }

  .category-toolbar {
    flex-wrap: wrap;
  }

  .category-toolbar__start {
    display: contents;
  }

  .category-toolbar__filters {
    display: inline-flex;
  }

  .category-active {
    flex: 1 0 100%;
    order: 1;
  }
}

@media (max-width: 640px) {
  .category-head__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  .category-head__lead {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }

  .category-sub {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .category-sub__arrow {
    display: none;
  }

  /* The filters and the sorting share one row, the sorting takes the rest of it. */
  .category-toolbar {
    gap: 8px;
  }

  .category-toolbar__sort {
    flex: 1 1 0;
    min-width: 0;
  }

  .category-toolbar__label {
    display: none;
  }

  .category-toolbar__listbox {
    width: 100%;
  }

  .category-offer__items {
    flex-wrap: wrap;
  }

  .category-more__button {
    width: 100%;
  }
}

/* Cards of the e-shop lift on hover like the product card: the border darkens, the card rises a
   little and casts a soft shadow. */
.home-device,
.article-card,
.blog-card,
.category-sub {
  transition: var(--transition-lift);
}

.home-device:hover,
.article-card:hover,
.blog-card:hover,
.category-sub:hover {
  border-color: var(--color-fg);
  box-shadow: var(--shadow-lift);
  color: var(--color-fg);
  transform: translateY(var(--lift-y));
}

/* Frequently asked questions: topics on the left follow the reading, every topic holds its
   questions in one box of collapsible rows. */
.faq__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.faq__lead {
  max-width: 620px;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.faq__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}

.faq__aside {
  position: sticky;
  top: 105px;
  max-height: calc(100dvh - 121px);
  overflow-y: auto;
}

.faq__aside-title {
  display: block;
  margin-bottom: 10px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.faq__topics {
  display: grid;
  gap: 4px;
}

.faq__topic {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  font-weight: 500;
  transition: var(--transition-state);
}

.faq__topic:hover {
  color: var(--color-brand);
}

.faq__topic[aria-current="location"] {
  background: var(--color-surface);
  box-shadow:
    inset 2px 0 var(--color-brand),
    inset 0 0 0 1px var(--color-line);
  color: var(--color-fg);
}

.faq__topic-icon {
  width: 16px;
  height: 16px;
  transition: color 0.12s ease;
}

.faq__topic[aria-current="location"] .faq__topic-icon {
  color: var(--color-brand);
}

.faq__topic-count {
  color: var(--color-fg-hint);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.faq__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.faq-section {
  scroll-margin-top: 105px;
}

.faq-section__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.faq-section__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-brand);
}

.faq-section__icon .icon {
  width: 18px;
  height: 18px;
}

.faq-section__title {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
}

.faq-section__lead {
  margin-top: 2px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}

.faq-section__questions {
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Answers keep a readable line even when the box is wide. */
.faq-section__questions .product-accordion__body p {
  max-width: 720px;
}

.faq-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.faq-contact__title {
  margin-top: 6px;
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
}

.faq-contact__text {
  max-width: 460px;
  margin-top: 6px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}

.faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The header no longer sticks, so the topics can go up to the top of the screen. */
@media (max-width: 1040px) {
  .faq__aside {
    top: 16px;
    max-height: calc(100dvh - 32px);
  }

  .faq-section {
    scroll-margin-top: 16px;
  }
}

/* Without the column the topics become a row of links above the questions. */
@media (max-width: 960px) {
  .faq__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
  }

  .faq__aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .faq__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .faq__topic {
    box-shadow: inset 0 0 0 1px var(--color-line);
    background: var(--color-surface);
  }
}

@media (max-width: 640px) {
  .faq__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  .faq__lead {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }

  .faq__topics {
    display: grid;
  }

  .faq-section__questions {
    padding: 0 16px;
  }

  .faq-contact {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}

/* Glossary: a table of terms, every row opens its explanation under the term. */
.glossary-page__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.glossary-page__lead {
  max-width: 620px;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.glossary {
  --glossary-columns: minmax(0, 1fr) 160px 16px;
  max-width: 960px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.glossary__head {
  display: grid;
  grid-template-columns: var(--glossary-columns);
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-canvas);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.glossary__row:last-child {
  border-bottom: 0;
}

.glossary__trigger {
  display: grid;
  grid-template-columns: var(--glossary-columns);
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--color-fg);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-state);
}

.glossary__trigger:hover,
.glossary__trigger:hover .icon {
  color: var(--color-brand);
}

.glossary__trigger .icon {
  width: 16px;
  height: 16px;
  color: var(--color-fg-muted);
  transition:
    color 0.12s ease,
    transform 0.12s ease;
}

.glossary__term {
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: var(--text-title-sm--line-height);
}

.glossary__area {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.glossary__text {
  max-width: 640px;
  padding: 0 20px 16px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.glossary-page__more {
  max-width: 960px;
  margin-top: 20px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
}

/* On a phone the area goes under the term, the chevron keeps its place on the right. */
@media (max-width: 640px) {
  .glossary {
    --glossary-columns: minmax(0, 1fr) 16px;
  }

  .glossary__head span:last-child {
    display: none;
  }

  .glossary__trigger {
    gap: 2px 12px;
    padding: 12px 16px;
  }

  .glossary__area {
    grid-row: 2;
  }

  .glossary__trigger .icon {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .glossary__text {
    padding: 0 16px 14px;
  }
}

/* Text pages in the e-shop: the menu stays under the sticky header of the shop. */
.shop-main .text-page__aside {
  top: 105px;
  max-height: calc(100dvh - 121px);
}

@media (min-width: 901px) and (max-width: 1040px) {
  .shop-main .text-page__aside {
    top: 16px;
    max-height: calc(100dvh - 32px);
  }
}

/* Chapters stop under the sticky header of the shop when the menu jumps to them. */
.shop-main .text-page .prose h2 {
  scroll-margin-top: 105px;
}

/* Contact: ways to reach the shop, a form for a message and the company data next to it. */
.contact [hidden],
.claim [hidden] {
  display: none;
}

.contact__title,
.claim__title {
  margin-top: 14px;
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.contact__lead,
.claim__lead {
  max-width: 620px;
  margin-top: 8px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.contact__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
  margin-top: 28px;
}

.contact-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.contact-card__icon,
.contact-help__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  color: var(--color-brand);
}

.contact-card__icon {
  grid-row: 1 / span 3;
  align-self: start;
}

.contact-card__icon .icon,
.contact-help__icon .icon {
  width: 18px;
  height: 18px;
}

.contact-card__label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.contact-card__value {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
  overflow-wrap: anywhere;
}

.contact-card__note {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.4;
}

.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
  margin-top: 32px;
}

.form-panel {
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.form-panel__title,
.contact-help__title {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
}

.form-panel__lead,
.contact-help__lead {
  margin-top: 4px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: var(--text-ui--line-height);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-top: 22px;
}

.form-grid__full {
  grid-column: 1 / -1;
}

.form-grid__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--color-line-soft);
}

.form-grid__consent {
  max-width: 420px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

.form-sent {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 48px 16px;
  text-align: center;
  animation: category-appear 0.3s ease both;
}

.form-sent__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  color: var(--color-success);
}

.form-sent__title {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  line-height: var(--text-heading-md--line-height);
}

.form-sent__text {
  max-width: 420px;
  margin-bottom: 10px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.contact-aside {
  display: grid;
  gap: var(--spacing-grid);
}

.info-block {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scroll-margin-top: 105px;
}

.info-block__title {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.info-block__map {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.info-block__text {
  font-size: var(--text-ui);
  line-height: 1.55;
}

.info-list {
  display: grid;
  gap: 6px;
  width: 100%;
  font-size: var(--text-ui);
}

.info-list__row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.info-list dt {
  color: var(--color-fg-muted);
}

.info-list dd {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.contact-help {
  margin-top: 48px;
}

.contact-help__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
  margin-top: 16px;
}

.contact-help__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
}

.contact-help__name {
  display: block;
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
}

.contact-help__text {
  display: block;
  margin-top: 2px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
}

.contact-help__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-fg-hint);
  transition:
    color 0.12s ease,
    transform 0.12s ease;
}

.contact-help__item:hover .contact-help__arrow {
  color: var(--color-fg);
  transform: translateX(2px);
}

/* The cards of the contact page lift like every other clickable card. */
.contact-card,
.contact-help__item {
  transition: var(--transition-lift);
}

.contact-card:hover,
.contact-help__item:hover {
  border-color: var(--color-fg);
  box-shadow: var(--shadow-lift);
  color: var(--color-fg);
  transform: translateY(var(--lift-y));
}

@media (max-width: 1040px) {
  .info-block {
    scroll-margin-top: 16px;
  }
}

@media (max-width: 960px) {
  .contact__layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .contact-aside .info-block:first-child {
    grid-row: span 2;
  }

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

@media (max-width: 640px) {
  .contact__title,
  .claim__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  .contact__lead,
  .claim__lead {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }

  .form-panel {
    padding: 20px 16px;
  }

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

  .contact-aside .info-block:first-child {
    grid-row: auto;
  }

  .form-grid__footer .button {
    width: 100%;
  }
}

/* Claim and return: a form of numbered steps, the steps that do not apply hide and the numbers
   count only the visible ones. The process and the address stay next to it. */
.claim__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

.claim-form {
  display: grid;
  gap: 28px;
  margin-top: 24px;
  counter-reset: claim-step;
}

.form-step {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-soft);
  counter-increment: claim-step;
}

.claim-form > .form-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.claim-toggle {
  display: grid;
}

.claim-toggle:not([hidden]) {
  animation: category-appear 0.2s ease both;
}

.form-step__head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
}

.form-step__head::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-on-ink);
  content: counter(claim-step);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.form-step__title {
  font-size: var(--text-title);
  font-weight: var(--text-title--font-weight);
  line-height: var(--text-title--line-height);
}

.form-step__note {
  grid-column: 2;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
}

.form-step .form-grid {
  margin-top: 0;
}

.claim-choices--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.claim-choices--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.claim-choices .choice-card__price {
  color: var(--color-fg-muted);
  font-weight: 400;
}

.claim-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.claim-product__quantity {
  justify-items: start;
}

.claim-form > .form-grid__footer {
  padding-top: 20px;
}

.claim-case {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin: 6px 0 4px;
}

.claim-case__label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.claim-case__number {
  font-family: var(--font-mono);
  font-size: var(--text-heading-md);
  font-weight: 600;
}

.claim-case__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.claim-aside {
  position: sticky;
  top: 105px;
  display: grid;
  gap: var(--spacing-grid);
}

.claim-steps {
  display: grid;
  gap: 14px;
}

.claim-steps__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
}

.claim-steps__number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.claim-steps__title {
  display: block;
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 24px;
}

.claim-steps__text {
  display: block;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

@media (max-width: 1040px) {
  .claim-aside {
    top: 16px;
  }
}

@media (max-width: 960px) {
  .claim__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .claim-aside {
    position: static;
  }

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

@media (max-width: 640px) {
  .claim-choices--two,
  .claim-product {
    grid-template-columns: minmax(0, 1fr);
  }
}

.faq-section__action {
  margin-top: 14px;
}

/* Checkout: a reduced frame without the navigation, steps on top and the summary on the right
   of every step. */
.checkout [hidden] {
  display: none;
}

.checkout-header {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.checkout-header__row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
}

.checkout-header__actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.checkout-header__back {
  padding-inline: 16px;
}

.checkout-header__help {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--color-on-ink);
  transition: var(--transition-state);
}

.checkout-header__help:hover {
  color: var(--color-brand-tint);
}

.checkout-header__help > span {
  display: grid;
}

.checkout-header__help-label {
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.checkout-header__help-value {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
}

.checkout-footer {
  margin-top: 32px;
  background: var(--color-ink);
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: 1.5;
}

.checkout-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}

.checkout-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.checkout-footer__links a {
  color: var(--color-on-ink-muted);
}

.checkout-footer__links a:hover {
  color: var(--color-on-ink);
}

/* Steps: done ones lead back with a check, the current one is red, the next ones wait. The row
   sits in the middle of the page and the lines only join the steps, so it stays centred. */
.checkout-steps__list {
  display: flex;
  max-width: 860px;
  margin: 16px auto 0;
}

.checkout-steps__item {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.checkout-steps__item:last-child {
  flex: none;
}

.checkout-steps__item:not(:last-child)::after {
  flex: 1;
  min-width: 24px;
  height: 2px;
  margin: 0 16px;
  border-radius: 1px;
  background: var(--color-line-strong);
  content: "";
  transition: background-color 0.12s ease;
}

.checkout-steps__item[data-state="done"]::after {
  background: var(--color-ink);
}

.checkout-steps__link {
  display: flex;
  flex: none;
  gap: 12px;
  align-items: center;
  color: var(--color-fg);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--text-title--line-height);
  transition: var(--transition-state);
}

a.checkout-steps__link:hover {
  color: var(--color-brand);
}

.checkout-steps__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
  transition: var(--transition-state);
}

.checkout-steps__mark .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.checkout-steps__item[data-state="done"] .checkout-steps__mark {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.checkout-steps__item[data-state="current"] .checkout-steps__mark {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.checkout-steps__item[data-state="next"] .checkout-steps__link {
  color: var(--color-fg-muted);
}

.checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

.checkout__main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.checkout__title {
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.checkout__lead {
  margin-top: -8px;
  margin-bottom: 4px;
  color: var(--color-fg-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.cart-items {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.cart-item {
  display: grid;
  grid-template-areas: "image info qty price remove";
  grid-template-columns: 72px minmax(0, 1fr) auto 120px 38px;
  gap: 8px 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line-soft);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-item[data-leaving] {
  opacity: 0;
  transform: translateX(12px);
}

.cart-item__image {
  grid-area: image;
  aspect-ratio: 1;
}

.cart-item__info {
  display: grid;
  grid-area: info;
  gap: 4px;
  min-width: 0;
}

.cart-item__name {
  color: var(--color-fg);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: 1.3;
}

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

.cart-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.cart-item > .quantity,
.cart-item__fixed {
  grid-area: qty;
}

.cart-item__fixed {
  justify-self: center;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.cart-item__price {
  display: grid;
  grid-area: price;
  justify-items: end;
}

.cart-item__line {
  font-family: var(--font-mono);
  font-size: var(--text-title);
  font-weight: 600;
}

.cart-item__unit {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.cart-item__remove,
.cart-item__remove-space {
  grid-area: remove;
}

.cart-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 48px 24px;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  animation: category-appear 0.3s ease both;
}

.cart-empty__icon {
  width: 32px;
  height: 32px;
  color: var(--color-fg-hint);
}

.cart-empty__title {
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
}

.cart-empty__text {
  max-width: 420px;
  margin-bottom: 8px;
  color: var(--color-fg-muted);
}

.cart-coupon {
  max-width: 420px;
}

.cart-more {
  margin-top: 24px;
}

.cart-more__title {
  margin-bottom: 14px;
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
}

/* The summary follows the page on wide screens, there is no sticky header in the checkout. */
.checkout-summary {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.checkout-summary__title {
  font-size: var(--text-title);
  font-weight: var(--text-title--font-weight);
}

/* The rows of the summary are divided, so the products, the discount, the delivery and the
   payment read one by one. */
.checkout-summary__items {
  display: grid;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.4;
}

.checkout-summary__items li {
  padding-block: 12px;
  border-bottom: 1px solid var(--color-line-soft);
}

.checkout-summary__items li:first-child {
  padding-top: 0;
}

.checkout-summary__items li:last-child {
  border-bottom: 0;
}

/* Anything free is marked the same way everywhere in the checkout. */
.price-free {
  color: var(--color-success);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checkout-summary__items li,
.checkout-summary__row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.checkout-summary__items li span:last-child,
.checkout-summary__row dd {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.checkout-summary__rows {
  display: grid;
  gap: 8px;
  font-size: var(--text-ui);
}

.checkout-summary__row dt {
  color: var(--color-fg-muted);
}

.checkout-summary__total {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--text-title);
  font-weight: 600;
}

/* On the last step the price heads the panel as a tinted band across its whole width. */
.checkout-summary__due {
  display: grid;
  gap: 6px;
  margin: -22px -22px 4px;
  padding: 22px;
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-canvas);
}

.checkout-summary__due-label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.checkout-summary__due-price {
  font-family: var(--font-mono);
  font-size: var(--text-heading-xl);
  font-weight: 600;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.checkout-summary__due-note {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.checkout-summary__total strong {
  font-family: var(--font-mono);
  font-size: var(--text-heading-lg);
  font-weight: 600;
}

.checkout-summary__net {
  margin-top: -8px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  text-align: right;
}

.checkout-summary__actions {
  display: grid;
  gap: 8px;
}

.checkout-summary__next {
  width: 100%;
}

/* On the last step the consents stand between the price and the button that sends the order. */
.checkout-summary__consents {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-summary__consents-title {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.checkout-summary__terms {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

.checkout-summary__trust {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
}

.checkout-summary__trust li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkout-summary__trust .icon {
  width: 14px;
  height: 14px;
  color: var(--color-success);
}

.checkout-choices {
  margin-top: 16px;
}

.checkout-review__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* The final check and the receipt use the rows of the cart, fixed and reaching the edges of their
   panel, so the list looks the same in every step. */
.form-panel > .cart-items--fixed {
  margin: 16px -28px -28px;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.form-panel > .cart-items--fixed:not(:last-child) {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
}

.checkout-review__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.checkout-review__text {
  margin-top: 10px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.checkout-review__text strong {
  color: var(--color-fg);
}

/* Pages after the order: a calm head in the colour of the result, then what happens next. */
.order-result {
  display: grid;
  gap: 20px;
  max-width: 760px;
  margin: 24px auto 0;
}

.order-result__head {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 12px 0 8px;
  text-align: center;
  animation: category-appear 0.3s ease both;
}

.order-result__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
}

.order-result__head[data-tone="error"] .order-result__icon {
  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  color: var(--color-brand);
}

.order-result__icon .icon {
  width: 30px;
  height: 30px;
}

.order-result__title {
  font-size: var(--text-heading-xl);
  font-weight: 700;
  line-height: var(--text-heading-xl--line-height);
  letter-spacing: var(--text-heading-xl--letter-spacing);
}

.order-result__number {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
}

.order-result__number strong {
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
}

.order-result__lead {
  max-width: 560px;
  color: var(--color-fg-muted);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
}

.order-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.order-result__back {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-self: center;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
}

.order-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px;
  align-items: center;
}

.order-payment__rows,
.order-recap__rows {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.order-payment__row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: var(--text-ui);
}

.order-payment__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.order-payment__row dt {
  color: var(--color-fg-muted);
}

.order-payment__row dd {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 600;
}

.order-payment__qr {
  aspect-ratio: 1;
}

.order-next__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
}

.order-next__item {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.order-next__number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.order-next__title {
  font-size: var(--text-ui);
  font-weight: 600;
}

.order-next__text {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.order-recap__state {
  padding: 3px 8px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.order-recap__total dt,
.order-recap__total dd {
  color: var(--color-fg);
  font-weight: 600;
}

.order-help__list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-left: 18px;
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.5;
  list-style: disc;
}

@media (max-width: 960px) {
  .checkout__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-summary {
    position: static;
  }

  .checkout-review__pair,
  .order-next__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .checkout-header__help-label,
  .checkout-header__back-prefix {
    display: none;
  }

  .checkout-header__actions {
    gap: 12px;
  }

  .checkout-header__help-value {
    font-size: var(--text-mono-sm);
    white-space: nowrap;
  }

  /* The current step keeps its whole name, the others shrink to the number. */
  .checkout-steps__item[data-state="current"] {
    flex: 1 0 auto;
  }

  .checkout-steps__item:not([data-state="current"]) .checkout-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .checkout-steps__item:not(:last-child)::after {
    min-width: 12px;
    margin: 0 8px;
  }

  .checkout-steps__mark {
    width: 32px;
    height: 32px;
  }

  .checkout__title,
  .order-result__title {
    font-size: var(--text-heading-lg);
    line-height: var(--text-heading-lg--line-height);
  }

  /* The name takes the whole width next to the picture, the removal sits in the corner and the
     quantity with the price go under it. */
  .cart-item {
    position: relative;
    grid-template-areas:
      "image info info"
      "qty qty price";
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 16px;
  }

  .cart-item__info {
    padding-right: 36px;
  }

  .cart-item > .quantity,
  .cart-item__fixed {
    justify-self: start;
  }

  .cart-item__remove {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .cart-item__remove-space {
    display: none;
  }

  .form-panel > .cart-items--fixed {
    margin-inline: -16px;
    margin-bottom: -20px;
  }

  .form-panel > .cart-items--fixed:not(:last-child) {
    margin-bottom: 0;
  }

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

  .order-payment__qr {
    width: 160px;
    justify-self: center;
  }
}

/* The page is a column at least as high as the window. The content grows, so the footer always
   reaches the bottom edge even on a short page. */
.shop-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.shop-page > main {
  flex: 1 0 auto;
  width: 100%;
}

/* Choice cards with a picture of the carrier or of the payment. */
.choice-card__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-fg);
  transition: var(--transition-state);
}

.choice-card--icon:has([data-checked]) .choice-card__logo {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.choice-card__logo .icon {
  width: 18px;
  height: 18px;
}

.choice-card__text {
  flex: 1;
  min-width: 0;
}

/* Rows after the products: the discount, the delivery and the payment close the list. */
.cart-item--extra {
  grid-template-areas: "image info price remove";
  grid-template-columns: 72px minmax(0, 1fr) 120px 38px;
  padding-block: 12px;
  background: var(--color-stripe-b);
}

.cart-item--extra + .cart-item--extra {
  border-top: 0;
}

.cart-item__symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  justify-self: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg-muted);
  aspect-ratio: auto;
}

.cart-item--extra[data-kind="discount"] .cart-item__symbol,
.cart-item--extra[data-kind="discount"] .cart-item__line {
  color: var(--color-brand);
}

.cart-item--extra .cart-item__name {
  font-weight: 600;
}

.cart-item--extra .cart-item__line {
  font-size: var(--text-mono-lg);
}

.cart-item__discount {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

.cart-coupon__applied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cart-coupon__chip .icon:first-child {
  color: var(--color-brand);
}

.checkout-summary__extra span:first-child {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.checkout-summary__extra .icon {
  width: 14px;
  height: 14px;
}

.checkout-summary__extra[data-kind="discount"],
.checkout-summary__row--discount dd {
  color: var(--color-brand);
}

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

/* The pickup point or the store replaces the delivery address. */
.checkout-pickup {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  animation: category-appear 0.2s ease both;
}

.checkout-pickup__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-brand);
}

.checkout-pickup__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.checkout-pickup__label {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

.checkout-pickup__name {
  font-size: var(--text-title-sm);
}

.checkout-pickup__note {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
}

.checkout-form__company {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  animation: category-appear 0.2s ease both;
}

.checkout-form__other {
  margin-top: 16px;
}

[data-cart-other] {
  margin-top: 18px;
  animation: category-appear 0.2s ease both;
}

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

/* The result of the check of an address, the correction is one click away. */
.address-check {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-ui-sm);
  animation: category-appear 0.2s ease both;
}

.address-check[data-tone="ok"] {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  color: var(--color-success);
}

.address-check[data-tone="warn"] {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 70%, var(--color-ink));
}

.address-check .icon {
  width: 16px;
  height: 16px;
}

.address-check[data-tone="ok"] .address-check__warn,
.address-check[data-tone="warn"] .address-check__ok {
  display: none;
}

.address-check__fix {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-state);
}

.address-check__fix:hover {
  background: var(--color-surface);
}

@media (max-width: 640px) {
  .cart-item--extra {
    grid-template-areas: "image info price";
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .cart-item--extra .cart-item__info {
    padding-right: 0;
  }

  .checkout-pickup {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .checkout-pickup .button {
    grid-column: 1 / -1;
  }
}

/* Search results: chips to narrow the query, then the products and the articles. */
.search-page [hidden],
.not-found [hidden] {
  display: none !important;
}

.search-page__facets {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.search-page__facet {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.search-page__facet-title {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-page__chips .search-chip {
  padding-inline: 10px;
}

.search-page__section {
  margin-top: 40px;
}

.search-page__title {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 16px;
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  letter-spacing: var(--text-heading-md--letter-spacing);
  line-height: var(--text-heading-md--line-height);
}

.search-page__count {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 400;
}

.search-page__empty {
  margin-top: 32px;
}

.search-page__suggestions {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 20px;
}

/* A missing page: a calm box with the ways on, the bestsellers under it. */
.not-found__box {
  display: grid;
  justify-items: center;
  max-width: 640px;
  margin: 24px auto 0;
  padding: 40px 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.not-found__code {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
}

.not-found__title {
  margin-top: 16px;
  font-size: var(--text-heading-lg);
  font-weight: var(--text-heading-lg--font-weight);
  letter-spacing: var(--text-heading-lg--letter-spacing);
  line-height: var(--text-heading-lg--line-height);
}

.not-found__lead {
  max-width: 460px;
  margin-top: 10px;
  color: var(--color-fg-muted);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .search-page__facets {
    padding: 16px;
  }

  .search-page__facet {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .not-found__box {
    padding: 32px 16px;
  }

  .not-found__actions .button {
    flex: 1 1 100%;
  }
}

/* Prohlídka: the start of the presentation. Three stories side by side, each a list of steps
   that lift like the cards of the e-shop. */
.tour-hero {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.tour-hero__inner {
  display: grid;
  justify-items: start;
  padding-block: 40px 48px;
}

.tour-hero__logo .logo__image {
  height: 44px;
}

.tour-hero__eyebrow {
  margin-top: 32px;
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-hero__title {
  margin-top: 8px;
  font-size: var(--text-display);
  font-weight: var(--text-display--font-weight);
  letter-spacing: var(--text-display--letter-spacing);
  line-height: var(--text-display--line-height);
}

.tour-hero__lead {
  max-width: 640px;
  margin-top: 14px;
  color: var(--color-on-ink-muted);
  font-size: var(--text-title-sm);
  line-height: 1.55;
}

.tour-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.tour {
  padding-block: 32px 64px;
}

.tour__scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid);
  align-items: start;
}

.tour-scenario {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tour-scenario__head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.tour-scenario__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.tour-scenario__icon .icon {
  width: 20px;
  height: 20px;
}

.tour-scenario__eyebrow {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-scenario__title {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: var(--text-title--line-height);
}

.tour-scenario__lead {
  color: var(--color-fg-muted);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.tour-steps {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.tour-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  transition: var(--transition-lift);
}

.tour-step:hover {
  border-color: var(--color-fg);
  box-shadow: var(--shadow-lift);
  color: var(--color-fg);
  transform: translateY(var(--lift-y));
}

.tour-step__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 600;
}

.tour-step__text {
  display: grid;
  gap: 3px;
  padding-top: 3px;
}

.tour-step__title {
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.3;
}

.tour-step__note {
  color: var(--color-fg-muted);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.tour-step__arrow {
  width: 16px;
  height: 16px;
  margin-top: 6px;
  color: var(--color-fg-hint);
  transition:
    color 0.12s ease,
    transform 0.12s ease;
}

.tour-step:hover .tour-step__arrow {
  color: var(--color-brand);
  transform: translateX(2px);
}

.tour-materials {
  margin-top: 48px;
}

.tour-materials__title {
  margin-bottom: 16px;
  font-size: var(--text-heading-md);
  font-weight: var(--text-heading-md--font-weight);
  letter-spacing: var(--text-heading-md--letter-spacing);
  line-height: var(--text-heading-md--line-height);
}

.tour-materials__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-grid);
}

.tour-material {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  transition: var(--transition-lift);
}

.tour-material:hover {
  border-color: var(--color-fg);
  box-shadow: var(--shadow-lift);
  color: var(--color-fg);
  transform: translateY(var(--lift-y));
}

.tour-material__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-canvas);
}

.tour-material__icon .icon {
  width: 18px;
  height: 18px;
}

.tour-material__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tour-material__title {
  font-size: var(--text-ui);
  font-weight: 600;
}

.tour-material__note {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
}

@media (max-width: 1100px) {
  .tour__scenarios {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 640px) {
  .tour-hero__inner {
    padding-block: 28px 32px;
  }

  .tour-hero__title {
    font-size: var(--text-heading-xl);
    line-height: var(--text-heading-xl--line-height);
  }

  .tour-hero__actions .button {
    flex: 1 1 100%;
  }

  .tour-scenario {
    padding: 18px 16px;
  }

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

/* The presentation page is no page of the e-shop, the banner of cookies waits for the e-shop. */
body:has([data-tour]) .cookie-banner {
  display: none !important;
}