/* Design page: the grid of products under the personalized design. Each card is ordinary HTML framed like the cards of the catalog and of the design
   library; its picture is a canvas that design-products.js paints with what the design renderer draws for that product. Until the first picture
   arrives the card shows the product's catalog photo (and for good when there is no JavaScript). The body is a column that has room under the name
   for what comes next to a product (a size, a price, a button) without the cards changing shape. */

.design-products { margin-top: 28px; }
.design-products-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.design-products-head h2 { font-size: 1.0625rem; font-weight: 740; letter-spacing: -.012em; }
.design-products-head .text-link { font-size: .875rem; }
.design-products-note { margin-top: 16px; color: var(--ink-2); font-size: .9375rem; }

/* Two cards to a row in the design's own column (a card is large enough to see the print well); one product keeps the width of one card. */
.product-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.product-live {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: 12px; background: #f7f8f2; box-shadow: 0 2px 6px rgba(15, 26, 20, .025);
}

/* The picture area has the shape of the mockup, so a picture that arrives (or is redrawn) never moves what is around it. */
.product-live-stage {
    position: relative; flex: none; aspect-ratio: var(--product-ratio, 1 / 1); overflow: hidden;
    border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #f7f8f2, #e8ebdf);
}
.product-live-poster, .product-live-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.product-live-poster { padding: 4%; object-fit: contain; opacity: .55; }
.product-live-canvas[hidden] { display: none; }
.product-live-stage.is-live .product-live-poster { display: none; }
.product-live-stage.is-loading::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: design-shimmer 1.35s ease-in-out infinite; pointer-events: none;
}
/* The loader: a ring in the middle of the picture while the first picture is made, and over a dimmed picture while a new one is. */
.product-live-spinner {
    position: absolute; top: 50%; left: 50%; z-index: 2; display: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box;
    border: 3px solid rgba(15, 26, 20, .14); border-top-color: var(--accent-strong); border-radius: 50%; animation: search-spin .8s linear infinite; pointer-events: none;
}
.product-live-stage.is-loading .product-live-spinner, .product-live-stage.is-updating .product-live-spinner { display: block; }
.product-live-stage.is-updating::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(247, 248, 242, .55); pointer-events: none; }
.product-live-status {
    position: absolute; inset: auto 0 0; z-index: 1; margin: 0; padding: 8px 12px; background: rgba(247, 248, 242, .94);
    color: var(--ink); font-size: .8125rem; line-height: 1.4;
}
.product-live-status .text-link { font-size: inherit; }

.product-live-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 14px 16px 16px; }
.product-live-brand { margin: 0 0 4px; overflow: hidden; color: var(--ink-2); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.product-live-title { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 700; line-height: 1.28; letter-spacing: -.012em; text-wrap: balance; }
.product-live-title a { color: inherit; text-decoration: none; }
.product-live-title a:hover { color: var(--accent-strong); }
.product-live-title a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }

/* The colors the product comes in, pinned to the bottom of the card. A button is 28px for a finger; the dot inside it is 20px. */
.product-live-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: auto -4px -4px; padding-top: 10px; border-top: 1px solid var(--line); }
.product-live-color { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.product-live-color::before {
    content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--swatch, var(--paper-3));
    box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .22); transition: box-shadow .15s ease;
}
.product-live-color:hover::before { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .22), 0 0 0 2px #f7f8f2, 0 0 0 3px rgba(15, 26, 20, .4); }
.product-live-color[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(15, 26, 20, .22), 0 0 0 2px #f7f8f2, 0 0 0 4px var(--ink); }
.product-live-color:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 0; }

@media (max-width: 560px) {
    .product-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .product-live-body { padding: 10px 11px 12px; }
    .product-live-title { margin-bottom: 10px; font-size: .9375rem; }
    /* 24px is the least a finger needs; five colors then fit side by side in a card of two to a row. */
    .product-live-colors { margin-inline: -2px; gap: 0; }
    .product-live-color { width: 24px; height: 24px; }
    .product-live-color::before { inset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-live-spinner { animation: none; }
    .product-live-stage.is-loading::after { animation: none; background: rgba(255, 255, 255, .2); }
    .product-live-color::before { transition: none; }
}

/* A card that opens the page of its product: the picture is the link (the title is the one for a keyboard and a screen reader). Under the loader and the
   retry button, over the picture. */
.product-live-open { position: absolute; inset: 0; z-index: 1; display: block; }
.product-live-status { z-index: 3; }
.product-live:has(.product-live-open:hover) .product-live-title a { text-decoration: underline; text-underline-offset: 4px; }

/* ── A product as a composition ─────────────────────────────────
   Not a catalog card: the picture is large on the left (up to 700 px, in the product's own proportion), and on the right are its name, its colors and the
   design's form (the home page's "Try it on a real product", and the page of a design on a product). The picture takes its whole column; the right side
   stays in view while the tall picture scrolls, so the form is always beside the part of the picture being looked at. */
.is-showcase .product-live-grid { display: block; }
.is-showcase .product-live {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start;
    overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.is-showcase .product-live-stage {
    width: 100%; max-width: 700px;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -22px rgba(15, 26, 20, .35);
}
.is-showcase .product-live-body { position: sticky; top: calc(var(--header-h) + 24px); max-width: 36rem; padding: 6px 0 0; }
.is-showcase .product-live-brand { margin-bottom: 6px; font-size: .75rem; }
.is-showcase .product-live-title { margin-bottom: 24px; font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.product-live-model { margin: -14px 0 20px; color: var(--ink-2); font-size: .8125rem; overflow-wrap: anywhere; }
.product-live-model span { margin-left: 6px; font-weight: 600; }
.is-showcase .product-live-colorlabel { margin: 0 0 6px; font-size: .8125rem; font-weight: 700; }
.is-showcase .product-live-colorname { margin-left: 8px; color: var(--ink-2); font-weight: 500; }
.is-showcase .product-live-colors { gap: 4px; margin: 0 -4px; padding: 0; border-top: 0; }
.is-showcase .product-live-color { width: 40px; height: 40px; }
.is-showcase .product-live-color::before { inset: 4px; }

/* ── The page of a design on a product ──────────────────────────
   The panel is longer than the picture here (sizes, the design's form), so it is the picture that stays in view: as tall as the window allows and no wider
   than its column, while the right side scrolls past it. */
.is-page .product-live-stage { position: sticky; top: calc(var(--header-h) + 24px); width: min(100%, calc((100vh - var(--header-h) - 48px) * var(--product-aspect, .75))); }
.is-page .product-live-body { position: static; }
.is-page .product-live-title { overflow-wrap: anywhere; }
.product-page-sizes { margin-top: 24px; }
.product-live-targets { display: grid; gap: 16px; margin-top: 24px; }
.product-live-targets[hidden], .product-live-target-group[hidden] { display: none; }
.product-live-target-label { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; }
.product-live-target-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.product-live-target { max-width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: .875rem; overflow-wrap: anywhere; cursor: pointer; }
.product-live-target:hover { border-color: var(--accent-strong); }
.product-live-target[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--paper-3, #e3e9dd); font-weight: 700; }
.product-live-target:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.product-live-target:disabled { opacity: .4; cursor: not-allowed; }
.product-live-options { display: grid; gap: 18px; }
.product-live-option-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .8125rem; }
.product-live-option-heading h2 { font-size: inherit; font-weight: 700; }
.product-live-option-heading span { color: var(--ink-2); }
.product-live-options .product-live-colors { gap: 6px; }
.product-live-options .product-live-color:disabled { opacity: .3; cursor: not-allowed; }
.product-live-color-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.product-price-summary { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-price-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.product-price-heading strong { font-size: 1.5rem; letter-spacing: -.025em; }
.product-price-heading span, .product-price-variant { font-size: .8125rem; color: var(--ink-2); }
/* The label of the sizes reads like the label of the colors above it (catalog.css has it small and capitalized for the product pages of the catalog). */
.product-page-sizes .product-label { margin: 0 0 6px; color: var(--ink); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.product-design { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-design-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.product-design-head h2 { font-size: .9375rem; font-weight: 740; letter-spacing: -.012em; }
.product-design-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .4); }
.product-design-card .personalizer-preview { position: static; min-width: 0; }
.product-design-card .personalizer-stage { max-height: 88px; border-radius: 7px; }
.product-design-card .personalizer-loading { gap: 0; font-size: 0; }
.product-design-card .personalizer-error { margin-top: 8px; flex-wrap: wrap; font-size: .8125rem; }
.product-design-about { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.product-design-name { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.product-design-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.product-design-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-size: .75rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.product-design-link:hover { border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(255, 255, 255, .55); }
.product-design-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.product-design .personalizer-form { margin-top: 0; }

@media (max-width: 960px) {
    .is-showcase .product-live { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .is-showcase .product-live-stage { width: min(100%, 560px); }
    .is-showcase .product-live-body { position: static; max-width: none; padding: 0; }
    .is-showcase .product-live-title { font-size: 1.5rem; }
    .is-showcase .product-live-colors { margin-inline: -4px; gap: 4px; }
    .is-showcase .product-live-color { width: 36px; height: 36px; }
    .is-page .product-live-stage { position: relative; top: auto; width: min(100%, 560px); }
}
@media (max-width: 480px) {
    .product-design-card { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 10px; }
}