create-magic-storefront 0.4.0 → 0.6.0

package/template/app/styles/pages.css

@@ -0,0 +1,1839 @@
+/* Page layouts: product, blog, content pages, account, checkout. */
+@layer pages {
+  .page-title {
+    margin-bottom: var(--space-5);
+  }
+
+  /* Product page: gallery beside a sticky info column from 990px, stacked below. */
+  .product-page {
+    display: grid;
+    gap: var(--space-5);
+  }
+  @media (min-width: 990px) {
+    .product-page {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      gap: var(--space-8);
+      align-items: start;
+    }
+    .product-page__info {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-5));
+    }
+  }
+  .product-page__media {
+    min-width: 0;
+  }
+  /* Phones: the gallery runs edge to edge. */
+  @media (max-width: 749px) {
+    .product-page__media {
+      margin-inline: calc(var(--gutter) * -1);
+    }
+  }
+  .product-page__info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+  @media (max-width: 749px) {
+    .product-page {
+      gap: var(--space-4);
+    }
+    .product-page__info,
+    .buy-box {
+      gap: var(--space-3);
+    }
+  }
+  .product-page__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .product-page__vendor {
+    color: var(--muted);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .product-page__title {
+    font-size: var(--text-xl);
+    line-height: var(--leading-snug);
+  }
+  @media (min-width: 750px) {
+    .product-page__title {
+      font-size: var(--text-2xl);
+    }
+  }
+  .product-page__rating {
+    align-self: flex-start;
+    text-decoration: none;
+  }
+  .product-page__details {
+    border-top: 1px solid var(--line);
+  }
+  .product-page__details .prose {
+    max-width: none;
+  }
+
+  /* Gallery */
+  .gallery__viewport {
+    position: relative;
+  }
+  .gallery__track {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior-x: contain;
+  }
+  .gallery__track::-webkit-scrollbar {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gallery__track {
+      scroll-behavior: auto;
+    }
+  }
+  .gallery__slide {
+    position: relative;
+    flex: 0 0 100%;
+    overflow: hidden;
+    aspect-ratio: var(--media-ratio);
+    background: var(--placeholder);
+    scroll-snap-align: start;
+  }
+  /* Phones: the price and the add button stay above the fold. */
+  @media (max-width: 749px) {
+    .gallery__slide {
+      max-height: 44svh;
+    }
+  }
+  @media (min-width: 750px) {
+    .gallery__slide {
+      border-radius: var(--radius-md);
+    }
+  }
+  .gallery__slide img,
+  .gallery__slide video,
+  .gallery__slide .media-fallback {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .gallery__counter {
+    position: absolute;
+    right: var(--space-3);
+    bottom: var(--space-3);
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-pill);
+    background: rgb(0 0 0 / 0.55);
+    color: #fff;
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+  .gallery__arrow {
+    position: absolute;
+    top: 50%;
+    display: none;
+    border: 1px solid var(--line);
+    border-radius: 50%;
+    background: var(--surface);
+    box-shadow: var(--shadow-1);
+    transform: translateY(-50%);
+  }
+  .gallery__arrow--prev {
+    left: var(--space-3);
+  }
+  .gallery__arrow--next {
+    right: var(--space-3);
+  }
+  .gallery__arrow:disabled {
+    visibility: hidden;
+  }
+  .gallery__thumbs {
+    display: none;
+    gap: var(--space-2);
+    margin: var(--space-3) 0 0;
+    padding: 0 0 var(--space-1);
+    overflow-x: auto;
+    list-style: none;
+    scrollbar-width: thin;
+  }
+  @media (min-width: 750px) {
+    .gallery__counter {
+      display: none;
+    }
+    .gallery__arrow {
+      display: inline-flex;
+    }
+    .gallery__thumbs {
+      display: flex;
+    }
+  }
+  .gallery__thumb {
+    display: grid;
+    place-items: center;
+    width: 64px;
+    height: 64px;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: var(--placeholder);
+  }
+  .gallery__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .gallery__thumb[aria-current='true'] {
+    border-color: var(--fg);
+    box-shadow: inset 0 0 0 1px var(--fg);
+  }
+
+  /* Buy box */
+  .buy-box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .buy-box__actions {
+    display: flex;
+    gap: var(--space-2);
+  }
+  .buy-box__add {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .buy-box__wishlist {
+    width: 48px;
+    height: 48px;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+  }
+  .buy-box__wishlist[aria-pressed='true'] {
+    border-color: var(--line-strong);
+    box-shadow: none;
+    color: var(--danger);
+  }
+  .buy-box__wishlist[aria-pressed='true'] svg {
+    fill: currentColor;
+  }
+  .buy-box .quantity {
+    height: 48px;
+  }
+  .buy-box__delivery {
+    display: flex;
+    gap: var(--space-2);
+    align-items: flex-start;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+    color: var(--muted);
+    font-size: var(--text-sm);
+    white-space: pre-line;
+  }
+  .buy-box__delivery svg {
+    flex: none;
+    color: var(--fg);
+  }
+  .buy-box__note {
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+  }
+  .stock-note {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+  .stock-note__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--success);
+  }
+  .stock-note--low .stock-note__dot {
+    background: var(--warning);
+  }
+
+  /* Variant picker */
+  .variant-picker {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .variant-picker__legend {
+    margin-bottom: var(--space-2);
+    padding: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+  .variant-picker__value {
+    color: var(--muted);
+    font-weight: var(--weight-regular);
+  }
+  .variant-picker__values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+  /* Phones: one row that scrolls sideways, so the add button stays in view. */
+  @media (max-width: 749px) {
+    .variant-picker__values {
+      flex-wrap: nowrap;
+      margin-inline: calc(var(--gutter) * -1);
+      padding-inline: var(--gutter);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    .variant-picker__values::-webkit-scrollbar {
+      display: none;
+    }
+    .pill {
+      flex: none;
+    }
+  }
+  .pill {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 0 var(--space-4);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-pill);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--ease);
+  }
+  .pill:hover {
+    border-color: var(--fg);
+  }
+  .pill:has(input:checked) {
+    background: var(--fg);
+    border-color: var(--fg);
+    color: var(--bg);
+  }
+  .pill:has(input:focus-visible) {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .pill--unavailable {
+    color: var(--muted);
+    text-decoration: line-through;
+  }
+
+  /* Share */
+  .share {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .share__button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .share__status {
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+
+  /* Reviews and recommendations under the product */
+  .product-reviews,
+  .product-recommendations {
+    margin-top: var(--space-9);
+  }
+  .product-reviews__layout {
+    display: grid;
+    gap: var(--space-6);
+  }
+  @media (min-width: 990px) {
+    .product-reviews__layout {
+      grid-template-columns: 16rem minmax(0, 1fr);
+      gap: var(--space-8);
+      align-items: start;
+    }
+  }
+  .review-summary {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .review-summary__average {
+    font-size: var(--text-4xl);
+    font-weight: var(--weight-heading);
+    line-height: 1;
+  }
+  .review-summary__breakdown {
+    display: grid;
+    gap: var(--space-1);
+    margin: var(--space-2) 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--text-sm);
+  }
+  .review-summary__breakdown li {
+    display: grid;
+    grid-template-columns: 1ch 1fr 3ch;
+    gap: var(--space-2);
+    align-items: center;
+  }
+  .review-summary__bar {
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background: var(--subtle);
+  }
+  .review-summary__bar span {
+    display: block;
+    height: 100%;
+    background: var(--fg);
+  }
+  .review-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    align-items: flex-start;
+  }
+  .review-list__items {
+    align-self: stretch;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .review {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-5) 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .review:first-child {
+    padding-top: 0;
+  }
+  .review__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-3);
+  }
+  .review__author {
+    font-weight: var(--weight-medium);
+  }
+  .review__body {
+    max-width: 65ch;
+  }
+  .review__images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .review__images img {
+    border-radius: var(--radius-sm);
+    object-fit: cover;
+  }
+  .review__reply {
+    padding: var(--space-3) var(--space-4);
+    border-left: 2px solid var(--line-strong);
+    background: var(--subtle);
+  }
+  .review__reply-title {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+
+  /* Prose: merchant HTML (pages, articles, descriptions), at a readable measure. */
+  .prose {
+    max-width: 65ch;
+    line-height: 1.7;
+    overflow-wrap: break-word;
+  }
+  .prose > * + *,
+  .prose > div > * + * {
+    margin-top: 1em;
+  }
+  .prose h2,
+  .prose h3,
+  .prose h4 {
+    margin-top: 1.8em;
+    line-height: var(--leading-snug);
+    scroll-margin-top: calc(var(--header-h) + var(--space-5));
+  }
+  .prose h2 {
+    font-size: var(--text-2xl);
+  }
+  .prose h3 {
+    font-size: var(--text-xl);
+  }
+  .prose h4 {
+    font-size: var(--text-lg);
+  }
+  .prose a {
+    color: var(--accent-text);
+    text-underline-offset: 3px;
+  }
+  .prose ul,
+  .prose ol {
+    padding-left: 1.25em;
+  }
+  .prose li + li {
+    margin-top: 0.35em;
+  }
+  .prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+  }
+  .prose figure {
+    margin-inline: 0;
+  }
+  .prose figcaption {
+    margin-top: var(--space-2);
+    color: var(--muted);
+    font-size: var(--text-sm);
+    text-align: center;
+  }
+  .prose table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+  }
+  .prose th,
+  .prose td {
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--line);
+    text-align: left;
+  }
+  .prose th {
+    background: var(--subtle);
+    font-weight: var(--weight-medium);
+  }
+  .prose blockquote {
+    margin-inline: 0;
+    padding-left: var(--space-4);
+    border-left: 3px solid var(--line-strong);
+    color: var(--muted);
+    font-style: italic;
+  }
+  .prose hr {
+    border: 0;
+    border-top: 1px solid var(--line);
+  }
+
+  /* Content page (about, delivery, offer): a readable column. */
+  .content-page {
+    max-width: 48rem;
+    margin-inline: auto;
+  }
+  .content-page__title {
+    margin-bottom: var(--space-5);
+  }
+
+  /* Blog */
+  .blog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .blog > h2 {
+    margin-top: var(--space-4);
+  }
+  .blog-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .blog-header p {
+    max-width: 60ch;
+  }
+  .blog-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3) var(--space-5);
+  }
+  .blog-toolbar .blog-toolbar__search {
+    flex: 1 1 20rem;
+    margin: 0;
+  }
+  .blog-featured {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    margin-bottom: var(--space-4);
+  }
+  .article-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+    gap: var(--space-7) var(--space-5);
+  }
+  .article-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    text-decoration: none;
+  }
+  .article-card__media {
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius-md);
+    background: var(--placeholder);
+  }
+  .article-card__media img,
+  .article-card__media .media-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform var(--duration) var(--ease);
+  }
+  .article-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .article-card__category,
+  .article__category {
+    color: var(--accent-text);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    letter-spacing: 0.06em;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+  .article-card__title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-heading);
+    line-height: var(--leading-snug);
+  }
+  .article-card__excerpt {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--muted);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  @media (hover: hover) {
+    .article-card:hover .article-card__title {
+      text-decoration: underline;
+    }
+    .article-card:hover .article-card__media img {
+      transform: scale(1.03);
+    }
+  }
+  .article-card__meta,
+  .article__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-3);
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+  .article-card__meta > * + *::before,
+  .article__meta > * + *::before {
+    content: '·';
+    margin-right: var(--space-3);
+  }
+  @media (min-width: 750px) {
+    .article-card--feature {
+      display: grid;
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      gap: var(--space-7);
+      align-items: center;
+    }
+    .article-card--feature .article-card__title {
+      font-size: var(--text-3xl);
+      line-height: var(--leading-tight);
+    }
+    .article-card--feature .article-card__excerpt {
+      -webkit-line-clamp: 4;
+      font-size: var(--text-lg);
+    }
+  }
+
+  /* Article */
+  /* One reading column; wider when a table of contents sits beside the body. */
+  .article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+    max-width: 48rem;
+    margin: 0 auto;
+  }
+  @media (min-width: 990px) {
+    .article:has(.article__layout--toc) {
+      max-width: 64rem;
+    }
+  }
+  .article__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    max-width: 48rem;
+  }
+  .article__title {
+    font-size: var(--text-4xl);
+    line-height: var(--leading-tight);
+  }
+  .article__meta a {
+    color: inherit;
+  }
+  .article__cover {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: var(--radius-lg);
+  }
+  .article__layout {
+    display: grid;
+    gap: var(--space-6);
+  }
+  @media (min-width: 990px) {
+    .article__layout--toc {
+      grid-template-columns: 14rem minmax(0, 48rem);
+      gap: var(--space-8);
+      align-items: start;
+    }
+    .article__toc {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-5));
+    }
+  }
+  .article__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    max-width: 48rem;
+    min-width: 0;
+  }
+  .article__main .prose {
+    max-width: none;
+    font-size: var(--text-lg);
+  }
+  .article__toc {
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+    font-size: var(--text-sm);
+  }
+  .article__toc-title {
+    margin-bottom: var(--space-2);
+    font-weight: var(--weight-medium);
+  }
+  .article__toc ol {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .article__toc a {
+    color: var(--muted);
+    text-decoration: none;
+  }
+  .article__toc a:hover {
+    color: var(--fg);
+  }
+  .article__toc-item--h3 {
+    padding-left: var(--space-3);
+  }
+  .article__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding-block: var(--space-4);
+    border-block: 1px solid var(--line);
+  }
+  .article__related {
+    margin-top: var(--space-6);
+  }
+  .article-product {
+    max-width: 16rem;
+    margin: var(--space-4) 0;
+  }
+  .callout {
+    margin: var(--space-4) 0;
+    padding: var(--space-3) var(--space-4);
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius-sm);
+    background: var(--subtle);
+  }
+  .callout[data-callout='warning'] {
+    border-left-color: var(--danger);
+  }
+  .author-card {
+    display: flex;
+    gap: var(--space-4);
+    align-items: flex-start;
+    padding: var(--space-5);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+  }
+  .author-card img {
+    flex: none;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .author-card h1 {
+    margin: 0;
+  }
+
+  /* Catalog pages (collection, search): facets beside the grid at desktop width. */
+  .collection-hero {
+    display: grid;
+    gap: var(--space-5);
+    margin: var(--space-4) 0 var(--space-6);
+  }
+  .collection-hero--image {
+    align-items: center;
+  }
+  @media (min-width: 750px) {
+    .collection-hero--image {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-8);
+    }
+  }
+  .collection-hero__media {
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--radius-md);
+    background: var(--placeholder);
+  }
+  .collection-hero__media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .collection-hero__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .collection-hero__description {
+    max-width: 65ch;
+    color: var(--muted);
+  }
+  .collection-children {
+    margin-bottom: var(--space-6);
+  }
+  .collection-faq {
+    max-width: 48rem;
+    margin-top: var(--space-8);
+  }
+  .collection-faq h2 {
+    margin-bottom: var(--space-3);
+  }
+
+  .catalog {
+    display: grid;
+    gap: var(--space-4);
+  }
+  .catalog__facets:not(:has(.facets-button)) {
+    display: none;
+  }
+  @media (min-width: 990px) {
+    .catalog--with-facets {
+      grid-template-columns: 15rem minmax(0, 1fr);
+      gap: var(--space-7);
+      align-items: start;
+    }
+    .catalog__facets {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-4));
+      max-height: calc(100dvh - var(--header-h) - var(--space-6));
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+  }
+  .catalog__main {
+    min-width: 0;
+  }
+  .catalog__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-bottom: var(--space-4);
+  }
+  .catalog__count {
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+  .sort-select {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+  .sort-select__label {
+    color: var(--muted);
+    white-space: nowrap;
+  }
+  @media (max-width: 749px) {
+    .sort-select__label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+  }
+  .sort-select select {
+    width: auto;
+    min-height: 40px;
+    padding-block: 0;
+  }
+  .active-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-4);
+    margin-bottom: var(--space-5);
+  }
+  .active-filters .chips {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .active-filters .chips a {
+    min-height: 36px;
+    background: var(--subtle);
+  }
+  .active-filters__clear {
+    font-size: var(--text-sm);
+  }
+
+  /* Search */
+  .search-form {
+    position: relative;
+    display: flex;
+    gap: var(--space-2);
+    max-width: 40rem;
+    margin-bottom: var(--space-6);
+  }
+  .search-form__icon {
+    position: absolute;
+    top: 50%;
+    left: var(--space-3);
+    color: var(--muted);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+  .search-form input {
+    flex: 1;
+    min-width: 0;
+    padding-left: calc(var(--space-3) * 2 + 20px);
+  }
+  .search-trending {
+    margin-top: var(--space-6);
+  }
+  .search-trending__title {
+    margin-bottom: var(--space-3);
+    font-size: var(--text-lg);
+  }
+
+  /* Wishlist */
+  .wishlist__hint {
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+    font-size: var(--text-sm);
+  }
+  .wishlist__item {
+    position: relative;
+  }
+  .wishlist__remove {
+    position: absolute;
+    z-index: 2;
+    top: var(--space-2);
+    right: var(--space-2);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--surface);
+    box-shadow: var(--shadow-1);
+  }
+
+  /* Cart page: lines beside a sticky summary from 990px. */
+  .cart-page {
+    display: grid;
+    gap: var(--space-6);
+  }
+  @media (min-width: 990px) {
+    .cart-page {
+      grid-template-columns: minmax(0, 1fr) 24rem;
+      gap: var(--space-8);
+      align-items: start;
+    }
+    .cart-summary {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-5));
+    }
+  }
+  @container cart-lines (min-width: 480px) {
+    .cart-page__lines .cart-line__media {
+      width: 96px;
+    }
+    .cart-page__lines .cart-line {
+      grid-template-columns: 96px minmax(0, 1fr) auto;
+    }
+  }
+  .cart-summary {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-5);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+  .cart-summary__title {
+    font-size: var(--text-lg);
+  }
+  .cart-summary__rows {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--line);
+  }
+  .cart-summary__row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+  .cart-summary__row dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .cart-summary__row--total {
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--line);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-heading);
+  }
+  .cart-summary__continue {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    align-self: center;
+    font-size: var(--text-sm);
+  }
+  .discount-codes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .discount-codes__form {
+    display: flex;
+    gap: var(--space-2);
+  }
+  .discount-codes__form input {
+    flex: 1;
+    min-width: 0;
+  }
+  .discount-codes__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .discount-codes__list button {
+    min-height: 32px;
+    padding-inline: var(--space-3);
+    background: var(--subtle);
+  }
+  .discount-codes__refused {
+    color: var(--danger);
+    text-decoration: line-through;
+  }
+
+  /* Checkout: steps on the left, the order on the right from 990px; a summary bar on phones. */
+  .checkout {
+    display: grid;
+    gap: var(--space-5);
+  }
+  @media (min-width: 990px) {
+    .checkout {
+      grid-template-columns: minmax(0, 1fr) 26rem;
+      gap: var(--space-8);
+      align-items: start;
+    }
+  }
+  .checkout__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+    min-width: 0;
+  }
+  .checkout__main .page-title {
+    margin-bottom: 0;
+  }
+  .checkout__aside {
+    display: none;
+  }
+  @media (min-width: 990px) {
+    .checkout__aside {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-5));
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+      padding: var(--space-5);
+      border-radius: var(--radius-lg);
+      background: var(--subtle);
+    }
+    .checkout__summary-toggle {
+      display: none;
+    }
+  }
+  .checkout__aside-title {
+    font-size: var(--text-lg);
+  }
+  .checkout__summary-toggle {
+    /* Flush under the header: it is the page's first row on phones. */
+    margin: calc(var(--space-5) * -1) calc(var(--gutter) * -1) 0;
+    border-block: 1px solid var(--line);
+    background: var(--subtle);
+  }
+  .checkout__summary-toggle > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    min-height: 56px;
+    padding: 0 var(--gutter);
+    cursor: pointer;
+    list-style: none;
+  }
+  .checkout__summary-toggle > summary::-webkit-details-marker {
+    display: none;
+  }
+  .checkout__summary-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--accent-text);
+    font-size: var(--text-sm);
+  }
+  .checkout__summary-toggle[open] .checkout__summary-chevron {
+    transform: rotate(180deg);
+  }
+  .checkout__summary-toggle > .order-summary {
+    padding: 0 var(--gutter) var(--space-5);
+  }
+  .checkout__back {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    gap: var(--space-1);
+    align-self: center;
+    font-size: var(--text-sm);
+  }
+
+  .checkout-steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2) var(--space-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+  .checkout-steps__step {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .checkout-steps__number {
+    display: inline-grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--line-strong);
+    border-radius: 50%;
+    font-size: var(--text-xs);
+  }
+  .checkout-steps__step[aria-current='step'] {
+    color: var(--fg);
+    font-weight: var(--weight-medium);
+  }
+  .checkout-steps__step[aria-current='step'] .checkout-steps__number,
+  .checkout-steps__step--done .checkout-steps__number {
+    border-color: var(--fg);
+    background: var(--fg);
+    color: var(--bg);
+  }
+
+  .checkout-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-5);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+  .checkout-section__title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--text-lg);
+  }
+  .checkout-section__number {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--subtle);
+    font-size: var(--text-sm);
+  }
+  .checkout-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    align-items: flex-start;
+  }
+  .checkout-form > .field {
+    align-self: stretch;
+  }
+  .checkout-form__row {
+    display: grid;
+    gap: var(--space-3);
+    align-self: stretch;
+  }
+  @media (min-width: 750px) {
+    .checkout-form__row {
+      grid-template-columns: 1fr 1fr;
+    }
+    .checkout-form__row--location {
+      grid-template-columns: 1fr 1fr auto;
+      align-items: end;
+    }
+  }
+  .checkout-form__locate {
+    display: inline-flex;
+    gap: var(--space-2);
+    align-items: center;
+  }
+  .checkout-choices {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .checkout-choices__legend {
+    margin-bottom: var(--space-2);
+    padding: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+
+  .radio-card {
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+  .radio-card input {
+    flex: none;
+    margin-top: 3px;
+  }
+  .radio-card:has(input:checked) {
+    border-color: var(--fg);
+    box-shadow: inset 0 0 0 1px var(--fg);
+  }
+  .radio-card:has(input:focus-visible) {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .radio-card--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .radio-card__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .radio-card__title {
+    font-weight: var(--weight-medium);
+  }
+  .radio-card__detail {
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+  .radio-card__aside {
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+  }
+
+  .order-summary {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .order-summary__lines {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .order-summary__line {
+    display: grid;
+    grid-template-columns: 56px minmax(0, 1fr) auto;
+    gap: var(--space-3);
+    align-items: center;
+    font-size: var(--text-sm);
+  }
+  .order-summary__media {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: var(--surface);
+  }
+  .order-summary__media img,
+  .order-summary__media .media-fallback {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+  .order-summary__quantity {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    display: grid;
+    place-items: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border-radius: var(--radius-pill);
+    background: var(--muted);
+    color: var(--bg);
+    font-size: var(--text-xs);
+  }
+  .order-summary__name {
+    display: flex;
+    flex-direction: column;
+  }
+  .order-summary__price {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  .order-summary__rows {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0;
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--line);
+  }
+  .order-summary__row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+  .order-summary__row dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .order-summary__row--total {
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--line);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-heading);
+  }
+
+  .thank-you {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    align-items: center;
+    max-width: 32rem;
+    margin: var(--space-8) auto;
+    text-align: center;
+  }
+  .thank-you__icon {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--success);
+    color: var(--bg);
+  }
+  .thank-you__order {
+    font-size: var(--text-lg);
+  }
+  .thank-you__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-3);
+    margin-top: var(--space-3);
+  }
+
+  /* Sign-in card */
+  .auth-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    max-width: 26rem;
+    margin: var(--space-6) auto;
+    padding: var(--space-6);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+  .auth-card__title {
+    font-size: var(--text-2xl);
+  }
+  .auth-card__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    color: var(--muted);
+    font-size: var(--text-sm);
+  }
+  .auth-card__divider::before,
+  .auth-card__divider::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--line);
+  }
+
+  /* Account */
+  .account {
+    display: grid;
+    gap: var(--space-5);
+  }
+  @media (min-width: 990px) {
+    .account {
+      grid-template-columns: 14rem minmax(0, 1fr);
+      grid-template-areas:
+        'header header'
+        'notice notice'
+        'nav content';
+      gap: var(--space-6) var(--space-8);
+      align-items: start;
+    }
+    .account__header {
+      grid-area: header;
+    }
+    .account__notice {
+      grid-area: notice;
+    }
+    .account__nav {
+      position: sticky;
+      top: calc(var(--header-h) + var(--space-5));
+      grid-area: nav;
+      flex-direction: column;
+      overflow: visible;
+      margin: 0;
+      padding: 0;
+      border-bottom: 0;
+    }
+    .account__content {
+      grid-area: content;
+    }
+  }
+  .account__name {
+    font-size: var(--text-3xl);
+  }
+  .account__notice {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    align-items: flex-start;
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+  }
+  .account__nav {
+    display: flex;
+    gap: var(--space-1);
+    margin-inline: calc(var(--gutter) * -1);
+    padding: 0 var(--gutter);
+    overflow-x: auto;
+    border-bottom: 1px solid var(--line);
+    scrollbar-width: none;
+  }
+  .account__nav a {
+    flex: none;
+    padding: var(--space-3) var(--space-3);
+    border-bottom: 2px solid transparent;
+    color: var(--muted);
+    text-decoration: none;
+  }
+  .account__nav a:hover {
+    color: var(--fg);
+  }
+  .account__nav a[aria-current='page'] {
+    border-bottom-color: var(--fg);
+    color: var(--fg);
+    font-weight: var(--weight-medium);
+  }
+  @media (min-width: 990px) {
+    .account__nav a {
+      padding: var(--space-2) var(--space-3);
+      border-bottom: 0;
+      border-radius: var(--radius-sm);
+    }
+    .account__nav a[aria-current='page'] {
+      background: var(--subtle);
+    }
+  }
+  .account__content {
+    min-width: 0;
+  }
+  .account__section-title {
+    margin-bottom: var(--space-4);
+    font-size: var(--text-xl);
+  }
+
+  .order-list {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .order-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto 20px;
+    grid-template-areas:
+      'main total arrow'
+      'status status arrow';
+    gap: var(--space-2) var(--space-4);
+    align-items: center;
+    padding: var(--space-4);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+  }
+  .order-card:hover {
+    border-color: var(--line-strong);
+  }
+  @media (min-width: 750px) {
+    .order-card {
+      grid-template-columns: minmax(0, 1fr) auto auto 20px;
+      grid-template-areas: 'main status total arrow';
+    }
+  }
+  .order-card__main {
+    display: flex;
+    flex-direction: column;
+    grid-area: main;
+  }
+  .order-card__number {
+    font-weight: var(--weight-medium);
+  }
+  .order-card .order-status {
+    grid-area: status;
+    justify-self: start;
+  }
+  .order-card__total {
+    grid-area: total;
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+  }
+  .order-card__arrow {
+    grid-area: arrow;
+    color: var(--muted);
+  }
+  .order-status {
+    display: inline-flex;
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-pill);
+    background: var(--subtle);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+  }
+  .order-status--delivered {
+    background: color-mix(in srgb, var(--success) 14%, transparent);
+    color: var(--success);
+  }
+  .order-status--cancelled {
+    color: var(--muted);
+    text-decoration: line-through;
+  }
+
+  .order-detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .order-detail__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    align-self: flex-start;
+    font-size: var(--text-sm);
+  }
+  .order-detail__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+  .order-detail__title {
+    font-size: var(--text-xl);
+  }
+  .order-detail__lines {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .order-detail__line {
+    display: grid;
+    grid-template-columns: 64px minmax(0, 1fr) auto;
+    gap: var(--space-3);
+    align-items: center;
+  }
+  .order-detail__media {
+    overflow: hidden;
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-sm);
+    background: var(--placeholder);
+  }
+  .order-detail__media img,
+  .order-detail__media .media-fallback {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .order-detail__name {
+    display: flex;
+    flex-direction: column;
+  }
+  .order-detail__price {
+    white-space: nowrap;
+  }
+  .order-detail__grid {
+    display: grid;
+    gap: var(--space-5);
+  }
+  @media (min-width: 750px) {
+    .order-detail__grid {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-7);
+    }
+  }
+  .order-detail__facts {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+  .order-detail__fact-title {
+    margin-bottom: var(--space-1);
+    font-size: var(--text-sm);
+  }
+  .order-detail__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    align-items: center;
+  }
+  .order-detail__confirm {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--danger);
+    border-radius: var(--radius-md);
+  }
+
+  .address-list {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .address-card {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+  }
+  .address-card__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    align-items: flex-start;
+  }
+  .address-card__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+  }
+  .address-form,
+  .profile-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    max-width: 32rem;
+  }
+  .address-form {
+    padding: var(--space-4);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-md);
+  }
+
+  /* Contacts */
+  .contacts-page__grid {
+    display: grid;
+    gap: var(--space-5);
+  }
+  @media (min-width: 750px) {
+    .contacts-page__grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .contacts-card--wide,
+    .contacts-page__disclaimer {
+      grid-column: 1 / -1;
+    }
+  }
+  .contacts-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-5);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+  }
+  .contacts-card__title {
+    font-size: var(--text-lg);
+  }
+  .contacts-list {
+    display: grid;
+    gap: var(--space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .contacts-list li {
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+  }
+  .contacts-list svg {
+    flex: none;
+    margin-top: 3px;
+    color: var(--muted);
+  }
+  .contacts-card .chips {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .contacts-card .chips a {
+    gap: var(--space-2);
+  }
+  .contacts-hours {
+    display: grid;
+    gap: var(--space-1);
+    margin: 0;
+    font-size: var(--text-sm);
+  }
+  .contacts-hours div,
+  .contacts-requisites div {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+  .contacts-hours dt::first-letter {
+    text-transform: uppercase;
+  }
+  .contacts-hours dd,
+  .contacts-requisites dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+  .contacts-requisites {
+    display: grid;
+    gap: var(--space-2);
+    margin: 0;
+  }
+  .contacts-requisites dt {
+    color: var(--muted);
+  }
+  .contacts-branches {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: var(--space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .contacts-branch {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    align-items: flex-start;
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    background: var(--subtle);
+  }
+  .contacts-branch__name {
+    font-size: var(--text-base);
+  }
+
+  /* Not found */
+  .not-found__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    align-items: center;
+    width: min(100%, 32rem);
+  }
+  .not-found__actions .search-form {
+    width: 100%;
+    margin: 0;
+  }
+
+  /* Loading: the product image keeps the gallery's place. */
+  .product-loading__media {
+    position: absolute;
+    inset: 0;
+    border-radius: 0;
+  }
+}