/* Cart (vision §E12). The lamp is off here: no grain, no pools, nothing over a print. Each line shows
   what will print on the achromatic proof surround, flat and true to colour.
   The shared commerce pieces (.print-thumb, .summary) are also used by /checkout, which links this
   file before its own. */
@layer pages {
  /* ---------- the flat print preview (shared with checkout) ---------------------------------- */
  /* A square proof slot; inside it the print at its own shape (--print-ar, set from the catalog's
     trim for that size), the print file filling it like the lab's fillPrintArea, a frame round it for
     framed prints. Never lit, never shadowed, never filtered. */
  .print-thumb {
    --pad: 9%;
    --frame-w: 0px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    inline-size: 100%;
    aspect-ratio: 1;
    padding: var(--pad);
    background: var(--proof);
    container-type: size;
  }
  .print-thumb[data-frame] { --frame-w: 4.6cqi; }
  .print-thumb[data-frame="black"] { --frame-c: #1b1917; }
  .print-thumb[data-frame="white"] { --frame-c: #f5f3ee; }
  .print-thumb[data-frame="natural"] { --frame-c: #c9a679; }
  .print-thumb[data-frame="walnut"] { --frame-c: #5e3d2b; }
  .print-thumb__frame {
    display: block;
    padding: var(--frame-w);
    background: var(--frame-c, transparent);
  }
  .print-thumb__print {
    display: grid;
    place-items: center;
    inline-size: min(100cqi - 2 * var(--frame-w), (100cqb - 2 * var(--frame-w)) * var(--print-ar, 0.75));
    aspect-ratio: var(--print-ar, 0.75);
    overflow: hidden;
  }
  /* The frame's rebate: a hairline where the print meets the moulding. */
  .print-thumb[data-frame] .print-thumb__print { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.22); }
  .print-thumb__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .print-thumb[data-state="unavailable"] .print-thumb__print {
    background:
      repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in oklab, var(--ink) 9%, transparent) 7px 8px),
      var(--sunken);
  }
  .print-thumb__none {
    padding: 0.4em;
    color: var(--ink-2);
    font: 500 10.5px/1.25 var(--font-mono);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }

  /* ---------- the summary panel (shared with checkout): e1 raised surface ---------------------- */
  .summary {
    display: grid;
    gap: var(--space-5);
    padding: clamp(24px, 2.2vw, 36px);
    background: var(--raised);
    box-shadow: var(--e1);
  }
  .summary__title {
    font: 420 var(--step-2)/1.15 var(--font-display);
    letter-spacing: -0.005em;
  }
  .summary__rows { margin: 0; }
  .summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block: 1px solid var(--rule);
  }
  .summary__row + .summary__row { border-block-start: 0; }
  .summary__row dt { font: 500 var(--step-0)/1.3 var(--font-ui); }
  .summary__row dd {
    margin: 0;
    font: 600 var(--step-1)/1.2 var(--font-ui);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.005em;
  }
  .summary__facts { display: grid; gap: var(--space-2); }
  .summary__line {
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
  }
  .summary__line strong {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .summary__line .draft-note { margin-block-start: var(--space-2); }

  /* ---------- page ---------------------------------------------------------------------------- */
  /* The footer starts at the fold, so lines drawn by JavaScript never push anything into view. */
  .cart { min-block-size: calc(100svh - var(--header-h)); }
  .cart__wrap { padding-block: clamp(28px, 4.2vw, 64px) 0; }

  .cart__head {
    display: grid;
    gap: var(--space-5);
    margin-block-end: clamp(28px, 3.4vw, 48px);
  }
  .cart__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.42em;
  }
  .cart__count {
    color: var(--ink-2);
    font: 450 var(--step--1)/1 var(--font-mono);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  .cart__count:empty { display: none; }

  /* Back from Stripe without paying: a calm note, not an alarm (an "i", never a check or a warning). */
  .cart__notice {
    --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.25a6.75 6.75 0 1 0 0 13.5A6.75 6.75 0 0 0 8 1.25zm0 1.4a5.35 5.35 0 1 1 0 10.7 5.35 5.35 0 0 1 0-10.7zM8 4.1a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9zM7.3 7h1.4v4.9H7.3z'/%3E%3C/svg%3E");
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--raised);
    box-shadow: var(--e1);
    font: 500 var(--step-0)/1.5 var(--font-ui);
  }
  .cart__notice::before {
    content: "";
    flex: none;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin-block-start: 0.2em;
    background: var(--ink-2);
    -webkit-mask: var(--icon-info) center / contain no-repeat;
    mask: var(--icon-info) center / contain no-repeat;
  }
  .cart__notice[hidden] { display: none; }
  /* An order paid on an earlier visit: the success treatment (--ok, a check, and the words). */
  .cart__notice--paid::before {
    background: var(--ok);
    -webkit-mask-image: var(--icon-check);
    mask-image: var(--icon-check);
  }
  .cart__notice .mono { font-size: 0.94em; letter-spacing: 0.02em; }

  .cart__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    align-items: start;
  }
  /* Drawn by JavaScript from this browser's storage: nothing shows until it is right. */
  .cart:not([data-ready]) .cart__body { visibility: hidden; }

  /* ---------- lines ----------------------------------------------------------------------------- */
  .cart-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--rule);
  }
  .line {
    --thumb: clamp(132px, 38vw, 176px);
    display: grid;
    grid-template-columns: var(--thumb) minmax(0, 1fr);
    grid-template-areas:
      "art main"
      "art price"
      "controls controls";
    grid-template-rows: auto 1fr auto;
    gap: var(--space-2) clamp(16px, 2.4vw, 32px);
    padding-block: clamp(20px, 2.4vw, 32px);
    border-block-end: 1px solid var(--rule);
  }
  .line__art { grid-area: art; align-self: start; }
  .line__thumb { display: block; color: inherit; }
  .line__main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-1); min-inline-size: 0; }
  .line__price { grid-area: price; align-self: start; }
  .line__controls {
    grid-area: controls;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-6);
    padding-block-start: var(--space-3);
  }

  .line__title {
    margin: 0 0 var(--space-1);
    font: 400 var(--step-1)/1.2 var(--font-display);
    letter-spacing: 0;
    text-wrap: pretty;
  }
  .line__title .title { font-weight: 400; }
  .line__title a {
    text-decoration-color: transparent;
    text-underline-offset: 0.18em;
  }
  .line__title a:is(:hover, :focus-visible) { text-decoration-color: var(--accent); }
  .line__ai {
    color: var(--ink-2);
    font: 500 var(--step--1)/1.3 var(--font-ui);
    font-style: normal;
    letter-spacing: 0.01em;
  }
  .line__variant {
    color: var(--ink-2);
    font: 400 var(--step--1)/1.45 var(--font-mono);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .line__meta {
    color: var(--ink-2);
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .line__meta--ai { display: flex; align-items: center; text-transform: none; letter-spacing: 0; padding-block-start: 2px; }

  .line__total {
    font: 600 var(--step-1)/1.2 var(--font-ui);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.005em;
  }
  .line__each {
    margin-block-start: 2px;
    color: var(--ink-2);
    font: 400 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.02em;
  }
  .line__each[hidden] { display: none; }

  .line__qty { display: grid; gap: var(--space-2); }
  .line__qty[hidden] { display: none; }
  .line__qty-label {
    color: var(--ink-2);
    font: 600 var(--step--2)/1 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .line__remove,
  .line__undo { min-block-size: 44px; color: var(--ink-2); }
  .line__remove:hover,
  .line__undo:hover { color: var(--ink); }
  .line__cap {
    flex-basis: 100%;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.45;
  }
  .line__cap[hidden] { display: none; }

  /* A line that can't be ordered: why, in --alert with its icon; only Remove is offered. */
  .line__problem {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    max-inline-size: 44ch;
    margin-block-start: var(--space-3);
    color: var(--alert);
    font: 500 var(--step--1)/1.45 var(--font-ui);
  }
  .line__problem[hidden] { display: none; }
  .line__problem::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.12em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .line__problem:focus { outline: none; }
  .line__problem:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; }
  .line--problem .line__remove { color: var(--ink); text-decoration-color: var(--alert); }

  /* Removed, with Undo on the line itself (the toast offers it too). */
  .line.line--removed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-5);
    padding-block: var(--space-3);
  }
  .line__removed {
    flex: 1 1 18rem;
    min-inline-size: 0;
    color: var(--ink-2);
    font: 400 var(--step--1)/1.45 var(--font-ui);
  }
  .line__removed .title { color: var(--ink); font-family: var(--font-display); }

  /* ---------- summary --------------------------------------------------------------------------- */
  .summary__checkout { margin-block-start: var(--space-1); }
  .summary__checkout[aria-disabled="true"] { cursor: not-allowed; }
  .summary__blocked {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin-block-start: calc(var(--space-2) * -1);
    color: var(--alert);
    font: 500 var(--step--1)/1.45 var(--font-ui);
  }
  .summary__blocked::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.12em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .summary__blocked[hidden] { display: none; }
  .summary__stripe {
    margin-block-start: calc(var(--space-2) * -1);
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.45;
  }

  /* ---------- empty --------------------------------------------------------------------------- */
  .cart__empty { display: grid; gap: var(--space-8); }
  .cart:not([data-cart="empty"]) .cart__empty { display: none; }
  .cart[data-cart="empty"] .cart__summary { display: none; }
  .cart[data-cart="empty"]:not([data-removed]) .cart__body { display: none; }
  .cart[data-cart="empty"][data-removed] .cart__body { margin-block-end: var(--space-6); }
  .cart__empty-head { padding-block: 0; }

  .cart__suggest { display: grid; gap: var(--space-5); }
  .cart__suggest[hidden] { display: none; }
  /* Three paintings hung in one justified row (the Paintings grid in small): each tile grows in
     proportion to its aspect ratio from a zero basis, so all three share one height and together
     fill the width. True aspect ratios, never cropped. Phones: one column (below). */
  .cart__suggest-list {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cart__suggest-item {
    flex: var(--ar) var(--ar) 0;
    min-inline-size: 0;
  }
  @media (max-width: 599.98px) {
    .cart__suggest-list { flex-direction: column; gap: var(--space-7); }
    /* Full width for landscapes; a portrait stops at 420 px tall. */
    .cart__suggest-item { flex: none; inline-size: min(100%, calc(var(--ar) * 420px)); }
  }

  .cart__nojs {
    max-inline-size: 46rem;
    color: var(--ink-2);
  }
  .cart__nojs a { color: var(--ink); }
  :root:not(.js) .cart__body,
  :root:not(.js) .cart__empty { display: none; }

  /* ---------- wider screens ----------------------------------------------------------------------- */
  @media (min-width: 600px) {
    .line {
      --thumb: 176px;
      grid-template-columns: var(--thumb) minmax(0, 1fr) auto;
      grid-template-areas:
        "art main price"
        "art controls controls";
      grid-template-rows: 1fr auto;
      column-gap: var(--space-6);
    }
    .line__price { text-align: end; }
    .line__title { font-size: var(--step-2); }
  }

  @media (min-width: 1024px) {
    .cart__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
    .cart__head > * { grid-column: 1 / span 7; }
    .cart__body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .cart__lines { grid-column: 1 / span 7; }
    .cart__summary {
      grid-column: 9 / -1;
      position: sticky;
      inset-block-start: var(--space-6);
    }
    .line { --thumb: 200px; }
    .cart[data-cart="empty"][data-removed] .cart__body .cart__lines { grid-column: 1 / span 8; }
  }

  @media (max-width: 599.98px) {
    .line__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
    .line__each { margin: 0; }
    .line__controls { justify-content: space-between; }
  }

  @media (forced-colors: active) {
    .print-thumb { border: 1px solid CanvasText; }
    .print-thumb__frame { border: 2px solid CanvasText; }
    .summary { border: 1px solid CanvasText; }
    .cart__notice { border: 1px solid CanvasText; }
    .cart__notice::before,
    .line__problem::before,
    .summary__blocked::before { forced-color-adjust: none; background: CanvasText; }
  }
}