/* Hand-written rules for the design pages (loaded after the generated design.css): styles the design binds to runtime
   values, its width switches (the design re-renders at 900 px; here that's a media query), and states. */

/* Header: nav on wide screens, the "Menu" button and its list on narrow ones. */
.d-nav { background: none; border: none; padding: 6px 0; cursor: pointer; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #5E574F; border-bottom: 1px solid transparent; }
.d-nav:hover { color: #33302B; }
.d-nav[aria-current="page"] { color: #33302B; border-bottom-color: #33302B; }
@media (max-width: 899px) { .d-nav-wide { display: none; } }
@media (min-width: 900px) { .d-menu-btn, .d-menu-panel { display: none; } }
.d-menu-panel[hidden] { display: none; }
.d-account { margin-right: 8px; }

/* A form that's just a wrapper for a design button: no box of its own. */
.d-form-contents { display: contents; }

/* Home · Why every day: site.js fades the letters and reveals the handwriting as the section scrolls in. */
.d-why-letter { transition: opacity .25s ease; }
.d-why-pen { font-family: 'Caveat', cursive; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.1; color: #2B2A2E; display: inline-block; margin-top: clamp(4px, 1vw, 12px); transition: clip-path .2s linear; }

/* Inside Within: the box contents fly in once the section is in view. With JS (html.js) they wait for site.js to
   mark the section; without JS, or with reduced motion, they're simply there. */
.js .d-pack:not(.is-in) > * { display: none; }
@media (prefers-reduced-motion: reduce) { .d-pack * { animation: none !important; } }

/* The design's open/close rows (FAQ, product details, pre-order info) as native <details>: the summary is the
   design's button, and its +/− follows the open state. */
.d-summary { list-style: none; }
.d-summary::-webkit-details-marker { display: none; }
.d-sign::before { content: "+"; }
details[open] > summary .d-sign::before { content: "−"; }

/* Product · gallery stage: three circles whose colours follow the picture, and one scene at a time (data-img on
   .d-stage, set by site.js). 0 front, 1 unfolded, 2 back, 3 lifestyle photo, 4 what's in the box. */
.d-stage-a, .d-stage-b, .d-stage-c { position: absolute; aspect-ratio: 1; border-radius: 50%; transition: background .5s; }
.d-stage-a { width: 74%; top: -22%; left: -18%; background: #E2ECE5; }
.d-stage-b { width: 52%; bottom: -20%; right: -14%; background: #F7E9DA; }
.d-stage-c { width: 20%; bottom: 16%; left: -6%; background: #E4EDF5; }
.d-stage[data-img="1"] .d-stage-a { background: #F7E9DA; } .d-stage[data-img="1"] .d-stage-b { background: #E4EDF5; } .d-stage[data-img="1"] .d-stage-c { background: #F6DCD3; }
.d-stage[data-img="2"] .d-stage-a { background: #E4EDF5; } .d-stage[data-img="2"] .d-stage-b { background: #E2ECE5; } .d-stage[data-img="2"] .d-stage-c { background: #F7E9DA; }
.d-stage-photo { position: relative; height: 86%; aspect-ratio: 1/2; background: #fff url("/img/design/cover-front.webp") center / cover; box-shadow: 0 28px 60px rgba(51,48,43,.16); }
.d-stage[data-img="2"] .d-stage-photo { background-image: url("/img/design/cover-back.webp"); }
.d-stage [data-show="1"] { display: contents; }
.d-stage:not([data-img="0"]):not([data-img="2"]) [data-show="0 2"],
.d-stage:not([data-img="1"]) [data-show="1"],
.d-stage:not([data-img="3"]) [data-show="3"],
.d-stage:not([data-img="4"]) [data-show="4"] { display: none; }

/* Product · thumbnails (the ring marks the one shown). */
.d-thumb { height: clamp(84px, 10vw, 120px); border: none; box-shadow: inset 0 0 0 1px rgba(62,52,45,.08); border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; }
.d-thumb[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #D49384; }
.d-thumb-0, .d-thumb-4 { background: #E2ECE5; } .d-thumb-1 { background: #F7E9DA; } .d-thumb-2 { background: #E4EDF5; } .d-thumb-3 { background: #F6DCD3; }
.d-thumb-img { height: 100%; max-width: 100%; background: #fff center / cover no-repeat; }
.d-thumb-img-0 { aspect-ratio: 1/2; background-image: url("/img/design/cover-front.webp"); }
.d-thumb-img-1 { aspect-ratio: 3680/1260; background-color: transparent; background-image: url("/img/design/unfolded.webp"); background-size: contain; }
.d-thumb-img-2 { aspect-ratio: 1/2; background-image: url("/img/design/cover-back.webp"); }
.d-thumb-img-3 { aspect-ratio: 1/1; background-image: url("/img/design/nightstand.webp"); }
.d-thumb-img-4 { aspect-ratio: 125/216; background-image: url("/img/design/box-front.webp"); }

/* Product · stock line (green, amber when few are left, red when sold out). */
.d-stock { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4E6655; }
.d-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.d-stock-low { color: #9A6A2E; }
.d-stock-out { color: #A2463F; }

/* Product · gift box: warmer when ticked, and the note shows. */
.d-gift { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: #EEF3F8; border: none; border-radius: 14px; transition: background .3s; }
.d-gift:has(input:checked) { background: #F7E9DA; }
.d-gift:not(:has(input:checked)) .d-gift-more { display: none; }
.d-77cb25:disabled { cursor: default; }

/* Our story · values: four columns from 900 px, two from 560 px, else one (the design's breakpoints). */
.d-values { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
@media (min-width: 560px) { .d-values { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .d-values { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* The spam check (FormGuard) runs silently on the design's forms; only a failure is shown. */
.d-root .pow-status:not([data-state="failed"]) { display: none; }

/* Legal pages: the published Markdown in the design's Legal layout. Each heading opens a section like the design's
   bordered blocks (.d-ec7ed8 + .d-89ed42); paragraphs and lists as .d-0a6dc3. */
.d-legal { display: flex; flex-direction: column; gap: 14px; }
.d-legal > h2 { margin: 22px 0 0; padding-top: 36px; border-top: 1px solid rgba(51,48,43,.16); font-family: 'Spectral', serif; font-weight: 300; font-size: 30px; line-height: 1.2; }
.d-legal > h3 { margin: 8px 0 0; font-family: 'Spectral', serif; font-weight: 400; font-size: 21px; line-height: 1.3; }
.d-legal p, .d-legal li, .d-legal td, .d-legal th { margin: 0; font-size: 16px; line-height: 1.7; color: #4E4841; text-wrap: pretty; }
.d-legal ul, .d-legal ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.d-legal table { border-collapse: collapse; width: 100%; }
.d-legal th, .d-legal td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(51,48,43,.12); }
.d-legal th { color: #33302B; font-weight: 500; }

/* Checkout: the design's inputs (red border when invalid: ASP.NET's input-validation-error), delivery cards (a radio
   inside each; the checked one gets the dark border and dot), the pay button, the discount message. */
.d-input { width: 100%; padding: 15px 16px; border: 1px solid rgba(51,48,43,.2); border-radius: 10px; background: #FFFDF9; font-size: 15px; color: #33302B; outline: none; }
.d-input.input-validation-error, .d-input[aria-invalid="true"] { border-color: #C4524F; }
.d-input:focus-visible, .d-8bded4:focus-visible, .d-ccab67:focus-visible { border-color: #33302B; }
.d-rates { display: contents; }
.d-rate { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px; border: 1px solid rgba(51,48,43,.2); border-radius: 10px; background: #FFFDF9; cursor: pointer; text-align: left; color: #33302B; }
.d-rate:has(input:checked) { border-color: #33302B; }
.d-rate:has(input:focus-visible) { outline: 2px solid #8A5A4C; outline-offset: 2px; }
.d-rate-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.d-rate:has(input:checked) .d-rate-dot { background: #33302B; }
.d-pay { height: 62px; background: #33302B; color: #F7F2EA; border: none; border-radius: 999px; cursor: pointer; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.d-pay:disabled { opacity: .6; cursor: default; }
.d-code-msg { font-size: 13px; color: #A2463F; margin-top: -8px; }
.d-code-msg.ok { color: #4E6655; }
.d-gift-check:not(:has(input:checked)) .d-gift-more { display: none; }
.d-company > * + * { margin-top: 12px; }
.d-vat-check { display: block; margin-top: 6px; font-size: 13px; color: #6B645B; }
.d-vat-check.ok { color: #4E6655; }

/* Cart drawer: shown while open (site.js). */
.d-drawer:not(.open) { display: none; }
.d-contents { display: contents; }
/* The checkout link was a fixed-height <button> in the design; a link doesn't centre its text by itself. */
.d-a.d-9b9f38 { display: flex; align-items: center; justify-content: center; }
.d-d70033[hidden] { display: none; }