/* ── Order (order.html, js/korder.js): the craft table of Customize (css/custom.css) holding one long form,
   its five stitched cards in two columns, and the sum beside them; the photos hang as polaroids ── */
.or-table { display: block; }
.or-form { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 400); gap: calc(var(--u) * 34); align-items: start; }
.or-card { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 16); min-width: 0; margin: 0; padding: calc(var(--u) * 36) calc(var(--u) * 34);
  border: 0; background: url("../img/c/story-linen.webp?h=0207da0f") center / calc(var(--u) * 420) auto, #fbf5ea; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(110, 60, 40, .18); }
.or-card::before { content: ""; position: absolute; inset: calc(var(--u) * 10); pointer-events: none; border: 2px dashed rgba(162, 96, 63, .5); }
.or-card legend { float: left; width: 100%; display: flex; align-items: center; gap: .6em; padding: 0; margin-bottom: calc(var(--u) * 4);
  font: 400 calc(var(--u) * 28)/1.1 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: #7a4a3a; }
.or-card legend + * { clear: both; }
.or-card legend b { display: grid; place-items: center; width: 1.5em; aspect-ratio: 1; border-radius: 50%; background: #4a5f6b; color: #f7f1e6; font-size: .6em; }
#or-1 { grid-column: 1 / 3; } #or-2 { grid-column: 1 / 3; }
.or-sum { grid-column: 3; grid-row: 1 / 6; position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 16); padding: calc(var(--u) * 40) calc(var(--u) * 36);
  background: url("../img/c/fab-2-soft.webp?h=3070c6c1") 0 0 / calc(var(--u) * 160) auto, #f4ecd2; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(110, 60, 40, .2); }
.or-sum::before { content: ""; position: absolute; inset: calc(var(--u) * 10); pointer-events: none; border: 2px dashed rgba(122, 74, 58, .5); }
.or-sum h2 { margin: 0; font: 400 calc(var(--u) * 30)/1 "Alfa Slab One", serif; letter-spacing: .04em; text-transform: uppercase; color: #4a5f6b; }
.or-sum dl { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 10) calc(var(--u) * 14); margin: 0; padding: calc(var(--u) * 18); border-radius: 10px; background: rgba(255, 252, 246, .85);
  font: 500 calc(var(--u) * 17)/1.3 "Zilla Slab", serif; color: #4a4038; }
.or-sum dt { margin: 0; } .or-sum dd { margin: 0; text-align: right; font-weight: 700; }
.or-sum dt:first-child, .or-sum dt:first-child + dd { padding-bottom: calc(var(--u) * 10); border-bottom: 1.5px dashed rgba(122, 74, 58, .3); font-weight: 700; color: #7a4a3a; }
.or-sum dd b { font: 400 calc(var(--u) * 22)/1 "Alfa Slab One", serif; color: #4a5f6b; }
.or-time { margin: 0; font: italic 600 calc(var(--u) * 17)/1.3 "Zilla Slab", serif; color: #7a4a3a; }
.or-send { align-self: stretch; text-align: center; }
.or-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 14); }
.or-photos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 14); margin: calc(var(--u) * 6) 0 0; padding: 0; list-style: none; }
.or-photos li:nth-child(odd) { transform: rotate(-2deg); } .or-photos li:nth-child(even) { transform: rotate(2deg); }
.or-photos .cz-pol-btn { cursor: pointer; }
.or-del { position: absolute; left: -7px; top: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #4a5f6b; color: #fff;
  font: 700 15px/1 sans-serif; font-style: normal; opacity: 0; transition: opacity .2s; }
.or-photos .cz-pol-btn:hover .or-del, .or-photos .cz-pol-btn:focus-visible .or-del { opacity: 1; }
.or-cover { display: grid; grid-template-columns: calc(var(--u) * 150) 1fr; gap: calc(var(--u) * 16); align-items: start; }
.or-cover > img, .or-cover > span { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 3px 10px rgba(60, 40, 25, .22); border: 4px solid #fff; box-sizing: border-box; }
.or-cover > span { display: grid; place-items: center; padding: 1em; text-align: center; background: repeating-linear-gradient(45deg, #efe7da 0 6px, #e8dfd0 6px 12px);
  font: 600 calc(var(--u) * 14)/1.3 "Zilla Slab", serif; color: #8a7a6c; }
.or-covers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: calc(var(--u) * 200); overflow: auto; }
.or-covers button { display: block; width: calc(var(--u) * 48); padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; opacity: .7; box-shadow: 0 0 0 2px transparent; }
.or-covers button.is-on { opacity: 1; box-shadow: 0 0 0 3px #7a4a3a; }
.or-covers img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.or-two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }
.cz-field select { width: 100%; box-sizing: border-box; padding: .7em .85em; border: 0; border-bottom: 2px dashed rgba(122, 74, 58, .4); border-radius: 6px 6px 0 0;
  background: rgba(255, 252, 246, .85); font: 500 calc(var(--u) * 20)/1.4 "Zilla Slab", Georgia, serif; color: #3f3a34; }
.cz-field em { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; color: #9a8a7c; }
.or-payi { display: grid; place-items: center; width: 2.4em; aspect-ratio: 1; border-radius: 8px; background: #5b3f8c; color: #fff; font: 700 calc(var(--u) * 14)/1 "Zilla Slab", serif; font-style: normal; }
.or-payi--vf { background: #c8202a; }
.or-paynote { margin: 0; font: italic 500 calc(var(--u) * 15)/1.4 "Zilla Slab", serif; color: #7b6d62; }
/* the thank-you */
.or-done { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(60, 45, 38, .45); }
.or-done[hidden] { display: none; }
.or-done-card { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box; padding: 40px 36px 34px;
  background: url("../img/c/story-linen.webp?h=0207da0f") center / 420px auto, #fbf5ea; box-shadow: 0 20px 50px rgba(40, 25, 15, .35); }
.or-done-card::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 2px dashed rgba(162, 96, 63, .5); }
.or-done-card h2 { margin: 0 0 10px; font: 400 36px/1 "Alfa Slab One", serif; letter-spacing: .04em; text-transform: uppercase; color: #4a5f6b; }
.or-done-card p { margin: 0 0 16px; font: 500 16px/1.55 "Zilla Slab", serif; color: #4a4038; }
.or-done-card pre { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 252, 246, .9); white-space: pre-wrap; font: 500 14px/1.5 "Zilla Slab", serif; color: #3f3a34; }
.or-done-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.or-done-btns .cz-ghost { text-decoration: none; font-size: 13px; }
.or-x { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font: 400 30px/1 serif; color: #7a4a3a; }
@media (max-width: 1100px) {
  .or-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .or-sum { grid-column: 1 / 3; grid-row: auto; }
}
@media (max-width: 989px) {
  .or-form { grid-template-columns: 1fr; gap: 18px; }
  #or-1, #or-2, .or-sum { grid-column: auto; }
  .or-card { padding: 24px 20px; } .or-card legend { font-size: 21px; }
  .or-pick { grid-template-columns: 1fr 1fr; }
  .or-cover { grid-template-columns: 110px 1fr; } .or-covers button { width: 40px; } .or-covers { max-height: 150px; }
  .or-two { grid-template-columns: 1fr; }
  .or-photos .cz-pol-btn { width: 70px; }
  .or-sum { padding: 26px 22px; } .or-sum h2 { font-size: 22px; } .or-sum dl { font-size: 14px; } .or-sum dd b { font-size: 18px; } .or-time { font-size: 14px; }
  .cz-field select { font-size: 16px; } .or-paynote, .or-cover > span { font-size: 13px; } .or-payi { font-size: 12px; }
  .or-del { opacity: 1; }
}
/* the polaroids fill the card's width: seven to a row, five on a phone */
.or-photos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--u) * 18) calc(var(--u) * 14); }
.or-photos .cz-pol-btn { width: 100%; }
@media (max-width: 989px) { .or-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; } .or-photos .cz-pol-btn { width: 100%; padding: 4px 4px 12px; } .or-del { width: 18px; height: 18px; font-size: 12px; left: -5px; top: -5px; } }

/* mistake-proofing (his note 2026-11-06): each card ticks when it is done; a missing bit is marked where it is */
.or-card.is-done legend b { background: #6f7f4c; font-size: 0; }
.or-card.is-done legend b::before { content: "\2713"; font: 700 calc(var(--u) * 17)/1 "Zilla Slab", sans-serif; }
.or-card.is-bad::before { border-color: #c0573a; border-style: solid; }
.cz-field input.is-bad, .cz-field select.is-bad { outline: 2px solid #c0573a; outline-offset: 2px; background: #fbeee8; }
.or-need { margin: 0; }
.or-ph { position: relative; }
.or-ph .cz-pol-btn { cursor: pointer; }
.or-ph.is-cover .cz-pol-btn { box-shadow: 0 0 0 3px #7a4a3a, 0 6px 12px rgba(60, 40, 25, .3); }
.or-covtag { position: absolute; left: 50%; bottom: 2px; translate: -50% 0; padding: 2px 7px; border-radius: 99px; background: #7a4a3a; color: #f7f1e6;
  font: 700 10px/1.2 "Zilla Slab", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.or-del { opacity: 1 !important; z-index: 2; border: 0; cursor: pointer; padding: 0; }
.or-cover { grid-template-columns: calc(var(--u) * 190); }
@media (max-width: 989px) {
  .or-del { width: 26px; height: 26px; left: -8px; top: -8px; font-size: 16px; }
  .or-cover { grid-template-columns: 46vw; }
  .or-covtag { font-size: 8px; padding: 1px 5px; }
  .cz-upload { padding: 1.15em 1em; }
}
.or-card.is-done legend b { position: relative; color: transparent; font-size: .6em; }
.or-card.is-done legend b::before { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 1em/1 "Zilla Slab", sans-serif; }

/* the payment policy (Sama's words, 2026-11-06), as three stitched steps */
.or-policy { display: flex; flex-direction: column; gap: calc(var(--u) * 10); margin: 0; padding: 0; list-style: none; counter-reset: pol; }
.or-policy li { position: relative; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 52); border-radius: 10px; background: rgba(255, 252, 246, .85);
  font: 500 calc(var(--u) * 17)/1.45 "Zilla Slab", serif; color: #4a4038; counter-increment: pol; }
.or-policy li::before { content: counter(pol); position: absolute; left: calc(var(--u) * 14); top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: calc(var(--u) * 26); aspect-ratio: 1; border-radius: 50%; background: #7a4a3a; color: #f7f1e6; font: 700 calc(var(--u) * 14)/1 "Zilla Slab", serif; }
html.k-ar .or-policy li { padding: calc(var(--u) * 12) calc(var(--u) * 52) calc(var(--u) * 12) calc(var(--u) * 14); }
html.k-ar .or-policy li::before { left: auto; right: calc(var(--u) * 14); }
.or-wait { display: block; width: 100%; aspect-ratio: 1; background: repeating-linear-gradient(45deg, #efe7da 0 6px, #e8dfd0 6px 12px); animation: or-wait 1s ease-in-out infinite alternate; }
@keyframes or-wait { to { opacity: .45; } }
.or-card[hidden] { display: none; }
@media (max-width: 989px) { .or-policy li { font-size: 14px; padding: 10px 12px 10px 44px; } html.k-ar .or-policy li { padding: 10px 44px 10px 12px; } .or-policy li::before { width: 22px; font-size: 12px; } }

/* sending: a stitched progress bar, then the thank-you with the order number */
.or-upbox { display: flex; flex-direction: column; gap: 8px; }
.or-up { height: 14px; border-radius: 99px; background: rgba(255, 252, 246, .9); box-shadow: inset 0 0 0 1.5px rgba(122, 74, 58, .3); overflow: hidden; }
.or-up i { display: block; height: 100%; width: var(--p, 0%); background: repeating-linear-gradient(45deg, #4a5f6b 0 8px, #5d7482 8px 16px); transition: width .4s; }
.or-upbox p { margin: 0; font: 600 calc(var(--u) * 16)/1.3 "Zilla Slab", serif; color: #4a5f6b; }
.or-send:disabled { opacity: .6; cursor: progress; }
.or-sent { display: none; }
.or-done.is-sent .or-sent { display: block; }
.or-done.is-sent .or-sent ~ * { display: none; }
.or-code { margin: 6px 0 14px !important; font: 400 34px/1 "Alfa Slab One", serif !important; letter-spacing: .04em; color: #7a4a3a !important; }
.or-sent .k-btn { margin-top: 8px; }
@media (max-width: 989px) { .or-upbox p { font-size: 14px; } }
.or-done.is-sent .or-x { display: block; }

.or-backlink { position: absolute; inset-inline-start: 7.5%; top: calc(var(--u) * 120); text-decoration: none; font-size: calc(var(--u) * 16); }
.or-backlink span { font-size: 1.3em; line-height: 0; }
html.k-ar .or-backlink span { display: inline-block; scale: -1 1; }
@media (max-width: 989px) { .or-backlink { position: static; display: inline-flex; margin: 0 0 14px; font-size: 14px; } .k-or .cz-head { text-align: start; } .k-or .cz-head h1, .k-or .cz-head > p { text-align: center; } }
.or-upbox[hidden] { display: none; }

/* Sama's number, where the deposit goes (one number: WhatsApp, InstaPay, Vodafone Cash) */
.or-paybox { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 14) calc(var(--u) * 16); border: 1.5px dashed rgba(91, 63, 140, .35); border-radius: 12px; background: rgba(255, 255, 255, .55); }
.or-paybox .cz-hint { margin: 0; } .or-paybox a { color: inherit; font-weight: 700; }
.or-paynum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.or-paynum b { font: 700 calc(var(--u) * 26)/1.1 "Zilla Slab", serif; letter-spacing: .04em; color: #2f4458; }
.or-numcopy { padding: .45em 1em; font-size: calc(var(--u) * 14); }
.or-sent .or-done-btns { margin-top: 6px; }
@media (max-width: 989px) { .or-paybox { padding: 12px 14px; gap: 6px; } .or-paynum b { font-size: 22px; } .or-numcopy { font-size: 13px; } }

/* ── every product (his message, 2026-11-07): the chosen piece big, the others behind "Choose something else" in
   her four groups, a stepper for the sticks, and the questions each piece asks ── */
.or-chosen { display: flex; align-items: center; gap: calc(var(--u) * 26); padding: calc(var(--u) * 16); border-radius: 14px; background: rgba(255, 253, 248, .75); box-shadow: inset 0 0 0 2px rgba(122, 74, 58, .25); }
.or-chosen img { width: calc(var(--u) * 150); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(70, 40, 25, .22)); }
.or-chosen div { display: flex; flex-direction: column; gap: .45em; }
.or-chosen b { font: 400 calc(var(--u) * 26)/1.15 "Alfa Slab One", "Zilla Slab", serif; letter-spacing: .04em; text-transform: uppercase; color: #7a4a3a; }
.or-chosen span { font: 600 calc(var(--u) * 19)/1 "Zilla Slab", serif; letter-spacing: .06em; color: #5d5a53; } .or-chosen s { opacity: .55; margin-inline-end: .4em; }
.or-change summary { display: inline-block; cursor: pointer; font: 600 calc(var(--u) * 17)/1.4 "Zilla Slab", serif; color: #7a4a3a; text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.or-change summary::-webkit-details-marker { display: none; }
.or-change[open] summary { margin-bottom: calc(var(--u) * 10); }
.or-pick { display: block; }
.or-pick-h { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); font: 400 calc(var(--u) * 18)/1 "Alfa Slab One", serif; letter-spacing: .06em; text-transform: uppercase; color: #4a5f6b; }
.or-pick-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.or-pick-g .cz-prod img { width: 64%; }
.or-step { display: flex; align-items: center; gap: 10px; }
.or-step input { width: 5em; text-align: center; }
.or-step .cz-ghost { width: 2.6em; height: 2.6em; padding: 0; font-size: 1.1em; }
.or-ask[hidden], .or-qty[hidden], .or-mag-only[hidden], .or-opt[hidden] { display: none !important; }
.or-ten-h { margin: 0; font: 700 calc(var(--u) * 15)/1.2 "Zilla Slab", serif; letter-spacing: .1em; text-transform: uppercase; color: #7b4b33; }
.or-ten ol { display: grid; gap: calc(var(--u) * 8); margin: calc(var(--u) * 8) 0 0; padding-inline-start: 1.6em; }
.or-ten li::marker { font: 700 .9em "Zilla Slab", serif; color: #a2603f; }
.or-ten input { width: 100%; box-sizing: border-box; }
@media (max-width: 989px) {
  .or-chosen { gap: 14px; padding: 10px; } .or-chosen img { width: 84px; } .or-chosen b { font-size: 16px; } .or-chosen span { font-size: 13px; }
  .or-change summary { font-size: 14px; } .or-pick-h { font-size: 13px; }
  .or-pick-g { grid-template-columns: 1fr 1fr; gap: 8px; }
  .or-ten-h { font-size: 12px; }
}
.or-step .cz-ghost { font: 700 22px/1 "Zilla Slab", serif; letter-spacing: 0; }

/* the camera cards' packs: 10, 15 or 30 (his message, 2026-11-07) */
.or-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.or-packs[hidden] { display: none; }
.or-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: calc(var(--u) * 14) calc(var(--u) * 8); border-radius: 12px; cursor: pointer;
  background: rgba(255, 253, 248, .8); box-shadow: inset 0 0 0 2px rgba(122, 74, 58, .2); transition: transform .3s var(--ease-back), box-shadow .2s; }
.or-pack input { position: absolute; opacity: 0; }
.or-pack:has(input:checked) { box-shadow: inset 0 0 0 2px #7a4a3a; transform: translateY(-3px); }
.or-pack:has(input:focus-visible) { outline: 2px solid #8ea6b8; }
.or-pack b { font: 400 calc(var(--u) * 34)/1 "Alfa Slab One", serif; color: #4a5f6b; }
.or-pack span { font: 600 calc(var(--u) * 14)/1 "Zilla Slab", serif; letter-spacing: .1em; text-transform: uppercase; color: #7b6d62; }
.or-pack em { font: 700 calc(var(--u) * 16)/1 "Zilla Slab", serif; font-style: normal; color: #7a4a3a; }
@media (max-width: 989px) { .or-packs { gap: 8px; } .or-pack b { font-size: 26px; } .or-pack span { font-size: 11px; } .or-pack em { font-size: 13px; } }

.or-chosen .or-inside { width: calc(var(--u) * 120); aspect-ratio: 1; object-fit: cover; padding: 5px 5px 16px; background: #fffdf8; rotate: 4deg; filter: none; box-shadow: 0 6px 12px rgba(70, 40, 25, .25); }

/* every magazine can be made on Customize too (his call, 2026-11-10) */
.or-cz { margin-top: calc(var(--u) * 12); }
.or-cz a { color: #7a4a3a; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* camera cards (2026-11-12): Sama's card, once per photo of the pack */
.or-photos.or-photos--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 12px; }
.or-photos--cards li, .or-photos--cards li:nth-child(odd), .or-photos--cards li:nth-child(even) { transform: none; }
.or-cc { position: relative; aspect-ratio: var(--cd-r); border-radius: 3px; box-shadow: 0 1px 2px rgba(60, 35, 20, .18), 0 6px 14px rgba(60, 35, 20, .12); }
.or-cc-ph { position: absolute; overflow: hidden; background: #efe9e2; display: grid; place-items: center; }
.or-cc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-cc-ph b { font: 600 14px/1 "Zilla Slab", serif; color: #b9a99a; }
.or-cc .or-del { position: absolute; right: -6px; top: -6px; left: auto; opacity: 1; }