/* The shop: the Configurator (create.html), the basket, the checkout and the order page. It uses the tokens and
   the parts of site.css (buttons, option chips, the spec sheet, the room of the frame preview, the Almanac). */

[hidden] { display: none !important; }
/* --top: where the page begins, under the bar and, while the shop is a demo, the line that says so */
.shop { --demo: 0px; --top: calc(var(--bar) + var(--demo)); }
.shop.is-demo { --demo: 2.25rem; }
.shop main { padding-top: var(--top); }
[data-page="create"] .top .button { display: none; }                  /* this page is where that button leads */
.shop .page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.shop h1 { font: 500 clamp(1.25rem, 1rem + 1.2vw, 2rem)/1.3 var(--wide); letter-spacing: .14em; text-transform: uppercase; font-feature-settings: "case"; text-wrap: balance; }
.shop h1 + p { margin-top: 1rem; }

/* this shop is a demo: said on every page of it, under the bar, and again where money would change hands */
.demo { position: fixed; inset: var(--bar) 0 auto; z-index: 25; display: grid; place-items: center; height: var(--demo); margin: 0; max-width: none;
  padding: 0 var(--gutter); background: color-mix(in srgb, #FFCC70 30%, var(--bg)); color: var(--fg); border-bottom: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.2; text-align: center; }

.button[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.button.wide { width: 100%; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: .2em;
  text-decoration-thickness: 1px; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------ form parts */
.field { display: grid; gap: .4rem; margin: 0 0 1.25rem; min-width: 0; }
.field > label, .field > .label { color: var(--fg2); font-size: .9375rem; }
.field.two { grid-template-columns: 1fr 1fr; column-gap: .75rem; }
.field.two > label { grid-row: 1; }
.field.two > input, .field.two > select { grid-row: 2; }
.field.two > .note { grid-row: 3; grid-column: 1 / -1; }
.shop input[type="text"], .shop input[type="email"], .shop input[type="date"], .shop input[type="time"], .shop select {
  width: 100%; min-width: 0; height: 3rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.2 var(--text); }
.shop input[type="date"], .shop input[type="time"] { font-family: var(--mono); font-size: .9375rem; }
.shop input:hover, .shop select:hover { border-color: var(--fg2); }
.shop input:focus-visible, .shop select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.shop input[aria-invalid="true"] { border-color: #B3261E; }
.shop input[type="range"] { width: 100%; height: 1.5rem; margin: 0; accent-color: var(--accent); }
.note { margin: 0; max-width: none; color: var(--fg2); font-size: .9375rem; }
.note.bad { color: #B3261E; }
.night .note.bad, :root[data-theme="dark"] .note.bad { color: #FFB4AB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note.bad { color: #FFB4AB; } }
.ends { display: flex; justify-content: space-between; color: var(--fg2); font-size: .8125rem; }
.check { display: grid; grid-template-columns: 1.25rem 1fr; gap: .7rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--line); cursor: pointer; }
.check:last-child { border-bottom: 1px solid var(--line); }
.check input { width: 1.125rem; height: 1.125rem; margin: .2rem 0 0; accent-color: var(--accent); }
.check b { display: block; font-weight: 600; }
.check span { color: var(--fg2); font-size: .9375rem; }
.check span b, .check span.plain { color: var(--fg); font-size: 1rem; }
.checks { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.checks legend { padding: 0; margin-bottom: .45rem; color: var(--fg2); font-size: .9375rem; }
.more { margin: 0 0 1.25rem; }
.more summary { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; color: var(--accent); font-size: .9375rem; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: -45deg; transition: rotate .2s; }
.more[open] summary::before { rotate: 45deg; }

/* a place, searched by name */
.search { position: relative; }
.search ul { position: absolute; z-index: 6; inset: calc(100% + 4px) 0 auto; margin: 0; padding: .25rem 0; list-style: none; max-height: 17rem; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 18px 30px -18px rgba(11, 16, 32, .45); }
.search ul[hidden] { display: none; }
.search li { padding: .6rem .9rem; cursor: pointer; }
.search li[aria-selected="true"] { background: var(--surface); }
.search li.none { color: var(--fg2); cursor: default; }

/* ----------------------------------------------------------- Configurator */
.maker { display: grid; background: var(--bg); }
/* The stage: the picture as large as its place allows. On a small screen it stands above the step, and takes most
   of the screen where the view is chosen (.framing); on a wide one it stays beside the steps (below). */
/* It follows the page: paper by day, the night by night. The artwork itself is always the sky. */
.shop { --stage: radial-gradient(120% 85% at 50% 38%, #FFFFFF, #F3F4F7 58%, #E6E9EF); --stage-press: rgba(11, 16, 32, .07);
  --stage-paper: 0 0 0 1px rgba(11, 16, 32, .1), 0 34px 60px -34px rgba(11, 16, 32, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shop { --stage: radial-gradient(120% 85% at 50% 38%, #131B33, #0B1020 58%, #070A14); --stage-press: rgba(226, 232, 242, .12);
    --stage-paper: 0 0 0 1px rgba(226, 232, 242, .16), 0 34px 60px -34px rgba(0, 0, 0, .9); }
}
:root[data-theme="dark"] .shop { --stage: radial-gradient(120% 85% at 50% 38%, #131B33, #0B1020 58%, #070A14); --stage-press: rgba(226, 232, 242, .12);
  --stage-paper: 0 0 0 1px rgba(226, 232, 242, .16), 0 34px 60px -34px rgba(0, 0, 0, .9); }
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; height: min(56svh, 34rem); color: var(--fg);
  background: var(--stage); }
.stage.framing { height: min(80svh, 48rem); }
.stage-view { position: relative; display: grid; place-items: center; min-height: 0; padding: clamp(.9rem, 2.6vw, 2.25rem) clamp(.9rem, 2.6vw, 2.25rem) .7rem; overflow: hidden;
  container-type: size; }
.stage-art, .stage-room { grid-area: 1 / 1; transition: opacity .3s ease, visibility .3s; }
.stage-art { display: grid; place-items: center; width: 100%; height: 100%; }
.stage[data-show="room"] .stage-art { opacity: 0; visibility: hidden; }      /* still laid out: the Preview keeps its size */
.stage[data-show="art"] .stage-room { opacity: 0; visibility: hidden; }
/* the paper has the shape of the Format (--ar: its width over its height, set by create.js) and fits the stage */
.paper { position: relative; flex: none; width: min(100cqw, calc(100cqh * var(--ar, .714))); aspect-ratio: var(--ar, .714); background: #05070C;
  box-shadow: var(--stage-paper); }
.paper.almanac { background: #FFFFFF center / 100% 100% no-repeat; }
.paper.almanac.dark, .mini.almanac.dark { background-color: #04060A; }       /* the Almanac as text under the caption: the dark the picture ends in */
.pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pic.dragging { cursor: grabbing; }
.stage.framing .pic { touch-action: none; }                                 /* choosing the view: a finger turns the sky */
.pic:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-room { width: min(100cqw, calc((100cqh - 2rem) * 220 / 225)); margin: 0; }
.stage-room figcaption { padding-top: .6rem; color: var(--fg2); font-size: .8125rem; text-align: center; }
.stage-room .wall-piece { transition: none; }
.mini { position: relative; overflow: hidden; aspect-ratio: var(--ar, .714); background: #05070C; }
.mini.almanac { background: #FFFFFF center / 100% 100% no-repeat; }
.mini canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.stage-msg { grid-area: 1 / 1; z-index: 2; margin: 0; max-width: 26rem; padding: 1rem 1.25rem; text-align: center; color: var(--fg); font-size: .9375rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.stage-msg[hidden] { display: none; }
.stage-msg small { display: block; margin-top: .5rem; color: var(--fg2); font-size: .8125rem; }
.stage-msg code { font: 400 .8125rem var(--mono); }
.stage-hint { position: absolute; left: 50%; top: clamp(1.5rem, 4vw, 3.25rem); z-index: 2; translate: -50% 0; margin: 0; padding: .5rem .95rem; border-radius: 2rem; white-space: nowrap;
  background: rgba(7, 10, 20, .7); color: var(--night-ink); border: 1px solid rgba(226, 232, 242, .22); font-size: .875rem; pointer-events: none;
  transition: opacity .4s; }
.stage-hint[hidden] { display: none; }
.stage-hint::before { content: ""; display: inline-block; width: 1.5rem; height: .5rem; margin-right: .55rem; vertical-align: middle;
  border-block: 1.5px solid currentColor; border-radius: 1px; opacity: .7; clip-path: polygon(0 50%, 22% 0, 22% 40%, 78% 40%, 78% 0, 100% 50%, 78% 100%, 78% 60%, 22% 60%, 22% 100%); background: currentColor; }

/* under the picture: where it looks. The tape turns with the view, and can be dragged itself. */
.stage-foot { display: grid; gap: .35rem; padding: 0 clamp(.9rem, 2.6vw, 2.25rem) clamp(.7rem, 1.6vw, 1.1rem); }
.tape { display: block; width: 100%; height: 3.25rem; cursor: ew-resize; touch-action: none; }
.stage-tools { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.stage-tools .pair { grid-column: 1; }
.stage-tools .heading { grid-column: 2; }
.stage-tools .fov-step { grid-column: 3; }
.pair { display: inline-flex; justify-self: start; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.pair button { min-height: 2.25rem; padding: 0 .85rem; border: 0; background: none; color: var(--fg2); font: 500 .875rem/1 var(--text); cursor: pointer; }
.pair button + button { border-left: 1px solid var(--line); }
.pair button:hover { color: var(--fg); }
.pair button[aria-pressed="true"] { background: var(--stage-press); color: var(--fg); }
.pair button:focus-visible, .fov-step button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pair[hidden] { display: none; }
.heading { margin: 0; max-width: none; text-align: center; color: var(--fg2); font-size: .875rem; white-space: nowrap; }
.heading b { color: var(--fg); font-weight: 500; }
.fov-step { display: inline-flex; justify-self: end; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.fov-step button { width: 2.5rem; height: 2.25rem; padding: 0; border: 0; background: none; color: var(--fg); font: 400 1.125rem/1 var(--text); cursor: pointer; }
.fov-step button + button { border-left: 1px solid var(--line); }
.fov-step button:hover { background: var(--stage-press); }

.panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 0 var(--gutter); }
.steps { position: relative; padding-top: 1.1rem; }
.steps ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.steps button { display: grid; gap: .15rem; width: 100%; padding: .55rem 0 .8rem; border: 0; background: none; color: var(--fg2); font: 500 .9375rem/1.2 var(--text); text-align: left; cursor: pointer; }
.steps button:hover { color: var(--fg); }
.steps button[aria-current="step"] { color: var(--fg); }
.steps .n { font: 400 .75rem/1 var(--mono); color: var(--fg2); }
.steps-line { display: block; height: 2px; background: var(--line); }
.steps-line::before { content: ""; display: block; height: 100%; background: var(--horizon); clip-path: inset(0 calc(100% - var(--done, 25%)) 0 0); transition: clip-path .35s ease; }
.step { padding-block: clamp(1.4rem, 3vw, 2.1rem) 1.5rem; min-width: 0; }
.step[hidden] { display: none; }
.step h2 { margin-bottom: .5em; }
.step h2:focus { outline: none; }
.step > .quiet { margin-bottom: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { min-height: 2.25rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--fg); font: 400 .9375rem/1 var(--text); cursor: pointer; }
.chips button:hover { border-color: var(--fg); }
.chips button.best { border-color: transparent; background: var(--surface); }
.chips button[aria-busy="true"] { color: var(--fg2); }
.chips.winds { margin-top: .1rem; }
.chips.winds button { min-width: 2.25rem; padding: 0 .4rem; font: 400 .8125rem/1 var(--mono); color: var(--fg2); }
.chips.winds button:hover { color: var(--fg); }
.count { float: right; font: 400 .8125rem/1.6 var(--mono); }

/* the three products, each a row to choose */
.kinds { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.kinds label { position: relative; display: block; cursor: pointer; }
.kinds input { position: absolute; opacity: 0; }
.kinds label > span { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.kinds label + label > span { margin-top: .5rem; }
.kinds b { font-weight: 600; }
.kinds small { grid-column: 1; color: var(--fg2); font-size: .9375rem; }
.kinds em { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 400 .9375rem var(--mono); font-style: normal; white-space: nowrap; }
.kinds input:checked + span { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.kinds input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.opts[hidden] { display: none; }
.step .almanac { margin-top: .6rem; padding: 1.25rem; font-size: .8125rem; box-shadow: none; border: 1px solid rgba(11, 16, 32, .12); }
.step .almanac h3 { font-size: .875rem; }
.step .sheet { margin: 1.4rem 0 0; }

.panel-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; margin-inline: calc(-1 * var(--gutter));
  padding: .8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.go { display: flex; align-items: center; gap: 1rem; margin-left: auto; min-width: 0; }
.total { margin: 0; max-width: none; min-width: 0; line-height: 1.25; text-align: right; }
.total b { display: block; font-size: 1.25rem; font-weight: 500; }
.total span { display: block; color: var(--fg2); font-size: .8125rem; }
.panel-foot .button { flex: none; white-space: nowrap; }

@media (min-width: 62em) {
  .maker { grid-template-columns: minmax(0, 1fr) clamp(23rem, 34vw, 30rem); align-items: start; }
  .stage, .stage.framing { position: sticky; top: var(--top); height: calc(100svh - var(--top)); }
  .panel { min-height: calc(100svh - var(--top)); padding: 0 clamp(1.5rem, 2.6vw, 2.5rem); }
  .panel-foot { margin-inline: calc(-1 * clamp(1.5rem, 2.6vw, 2.5rem)); padding-inline: clamp(1.5rem, 2.6vw, 2.5rem); }
}
@media (max-width: 61.99em) {
  /* small screens: the tape, the heading and the zoom belong to the step that chooses the view; the choice between
     the artwork and the wall to the step that chooses the product (.choosing) */
  .stage:not(.framing) .tape, .stage:not(.framing) .heading, .stage:not(.framing) .fov-step, .stage:not(.choosing) .pair { display: none; }
  .stage:not(.framing):not(.choosing) .stage-foot { display: none; }
  .stage:not(.framing):not(.choosing) .stage-view { padding-bottom: clamp(.9rem, 2.6vw, 2.25rem); }
  .stage-tools { grid-template-columns: 1fr auto; row-gap: .1rem; }
  .stage-tools .heading { grid-column: 1; text-align: left; }
  .stage-tools .fov-step { grid-column: 2; }
  .stage-tools .pair { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 30em) {
  .total span { display: none; }
  .panel-foot .button { padding: 0 1.1rem; }
  .field.two { column-gap: .5rem; }
}

/* ------------------------------------------------- basket, checkout, order */
.cols { display: grid; gap: 2.5rem; align-items: start; padding-bottom: var(--band); }
@media (min-width: 58em) { .cols { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: clamp(2rem, 5vw, 5rem); } .cols > aside { position: sticky; top: calc(var(--bar) + 1.5rem); } }
.items { margin: 0; padding: 0; list-style: none; }
.item { display: grid; grid-template-columns: clamp(5rem, 22vw, 9rem) 1fr; gap: 1rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.item:last-child { border-bottom: 1px solid var(--line); }
.item-pic { display: grid; place-items: start center; }
.item-pic img { max-height: 12rem; width: auto; box-shadow: 0 0 0 1px rgba(11, 16, 32, .16), 0 20px 30px -22px rgba(11, 16, 32, .6); }
.item h2, .item h3 { font: 600 1.0625rem/1.4 var(--text); letter-spacing: 0; text-transform: none; margin: 0 0 .3rem; }
.item p { margin: 0 0 .15rem; color: var(--fg2); font-size: .9375rem; max-width: none; }
.item .fig { white-space: normal; }
.item-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-top: .8rem; }
.item-foot .price { font-size: 1.0625rem; }
.item-do { display: flex; gap: 1.25rem; }
.sum { margin: 0; padding: 1.5rem; background: var(--surface); }
.sum h2 { font: 600 1.0625rem/1.4 var(--text); letter-spacing: 0; text-transform: none; margin: 0 0 1rem; }
.sum dl { margin: 0; }
.sum dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.sum dt { color: var(--fg2); }
.sum dd { margin: 0; font-family: var(--mono); font-size: .9375rem; }
.sum .all { margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); font-weight: 600; }
.sum .all dt { color: var(--fg); }
.sum .button { margin-top: 1.25rem; }
.sum .quiet { margin: .9rem 0 0; font-size: .8125rem; }
.sum-items { margin: 0 0 1rem; padding: 0 0 1rem; list-style: none; border-bottom: 1px solid var(--line); }
.sum-items li { display: grid; grid-template-columns: 3rem 1fr auto; gap: .8rem; align-items: center; padding: .4rem 0; font-size: .9375rem; }
.sum-items img { width: 3rem; max-height: 4.2rem; object-fit: contain; }
.sum-items span { color: var(--fg2); font-size: .8125rem; display: block; }
.empty { padding-block: clamp(2rem, 6vw, 4rem) var(--band); }
.empty p { margin-bottom: 1.5rem; }

.form section { padding: 1.6rem 0 .4rem; border-top: 1px solid var(--line); }
.form section:first-child { border-top: 0; padding-top: 0; }
.form h2 { font: 600 1.0625rem/1.4 var(--text); letter-spacing: 0; text-transform: none; margin: 0 0 1.1rem; }
.form .opts { margin-bottom: 1.25rem; }
.form .check { border: 0; padding: .3rem 0; }
.agree { margin: 1.2rem 0 0; }

.done { padding-bottom: var(--band); }
.done .serial { margin: 0 0 .4rem; font: 400 .9375rem var(--mono); color: var(--fg2); }
.next { counter-reset: n; display: grid; gap: 1.25rem; margin: 2rem 0 2.5rem; padding: 0; list-style: none; }
.next li { counter-increment: n; display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.next li::before { content: counter(n); font: 400 .8125rem/1.9 var(--mono); color: var(--fg2); }
.next b { display: block; font-weight: 600; }
.next span { color: var(--fg2); }
@media (min-width: 52em) { .next { grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; } }
.spec pre { margin: .6rem 0 1.2rem; padding: 1rem; overflow-x: auto; background: var(--surface); font: 400 .8125rem/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.spec p { color: var(--fg2); font-size: .9375rem; }

/* a full sky has no field to widen and no direction to look: the circle is the whole picture */
.stage.full .tape, .stage.full .fov-step { display: none; }