/* ===== Storefront — TIALA brand: Gypsum, Ink, Burgundy, Teal, a spark of Saffron (tokens.css) ===== */

.muted{color:var(--muted)}
.link{color:var(--teal);font-size:var(--small);text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer;padding:0}
.link:hover{color:var(--ink)}
.crumbs{font-size:var(--small);color:var(--muted);padding-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--burg)}
.empty{padding-block:clamp(60px,10vw,120px);text-align:center;display:grid;gap:16px;justify-items:center}

/* Header cart badge */
.cart-btn{position:relative}
.cart-badge{position:absolute;top:3px;inset-inline-end:1px;min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 5px;line-height:1}
.cart-badge[data-count="0"]{display:none}

/* Toast with link */
.toast a{color:var(--gold);margin-inline-start:6px}

/* ---- Page banner (shop, family) ---- */
.page-banner{padding-block:clamp(18px,3vw,34px) clamp(28px,5vw,56px)}
.banner-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.banner-copy{display:grid;gap:14px;justify-items:start;position:relative;padding-inline-start:22px}
.banner-copy::before{content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--burg)}
.banner-copy .lead{max-width:44ch}
.banner-media{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden}
.banner-media .ph{width:100%;height:100%}
.switch{font-size:var(--small);color:var(--teal);border-bottom:1px solid var(--teal);padding-bottom:2px;margin-top:6px}
@media (max-width:760px){.banner-grid{grid-template-columns:1fr}.banner-media{order:-1;aspect-ratio:16/9}}

/* ---- Collection page ---- */
.collection-banner .banner-media.cover{aspect-ratio:1;max-width:520px;justify-self:end;width:100%}
.collection-banner .banner-grid{grid-template-columns:1fr minmax(0,520px)}
.col-templates .cat .body p,.col-editors .cat .body p{color:var(--burg)}
@media (max-width:760px){.collection-banner .banner-grid{grid-template-columns:1fr}.collection-banner .banner-media.cover{max-width:none;justify-self:stretch}}

/* ---- Family index ---- */
.families{padding-top:0}
.family-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.family-grid.ready{grid-template-columns:repeat(5,1fr)}
.family-card{display:grid;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,transform .2s}
.family-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.fc-media{aspect-ratio:var(--grid-ratio,698/874)}
.fc-media .ph{width:100%;height:100%}
.fc-body{padding:16px 16px 18px;display:grid;gap:6px;position:relative}
.fc-index{font-family:var(--font-display);color:var(--gold-dim);font-size:.95rem;letter-spacing:.06em}
html[dir=rtl] .fc-index{font-family:var(--font-body)}
.fc-body h2{font-size:1.35rem}
html[dir=rtl] .fc-body h2{font-size:1.15rem}
.fc-body p{font-size:var(--small);color:var(--muted)}
.fc-count{font-size:.75rem;color:var(--burg3);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
html[dir=rtl] .fc-count{letter-spacing:0;text-transform:none}
@media (max-width:1100px){.family-grid,.family-grid.ready{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.family-grid,.family-grid.ready{grid-template-columns:1fr 1fr;gap:12px}.fc-body h2{font-size:1.1rem}.fc-body{padding:12px}}

/* Home categories with 8 families */
.cats.cats-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cats.cats-4{grid-template-columns:repeat(2,1fr)}}
.cats .more,.block .more{display:flex;justify-content:center;margin-top:28px}

/* ---- Listing ---- */
.listing{padding-top:0}
.sub-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none}
.sub-filter .chip{white-space:nowrap;flex:0 0 auto}
.sub-filter .chip[aria-selected=true]{background:var(--burg);color:var(--color-on-primary);border-color:var(--burg)}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;font-size:.92rem;display:inline-flex;align-items:center;gap:8px;min-height:40px}
.result-count{font-size:var(--small);color:var(--muted);margin-bottom:12px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.product-grid{grid-template-columns:1fr 1fr;gap:12px}}
.empty-family{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,5vw,56px);display:grid;gap:14px;justify-items:center;text-align:center}
.empty-family .lead{margin:0 auto}

/* Product card (shared: home + listings) */
.product{display:grid;transition:border-color .2s}
.product:hover{border-color:var(--gold)}
.product .thumb{position:relative;aspect-ratio:var(--grid-ratio,698/874)}
.product .thumb .ph{width:100%;height:100%}
.product .tag{position:absolute;inset-inline-start:10px;top:10px;background:var(--gold);color:var(--ink);font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px}
.product .body{padding:14px;display:grid;gap:4px;text-align:start;justify-items:start}
.product h3{font-size:1rem;font-family:var(--font-body);font-weight:600;color:var(--ink)}
.product .from{font-weight:400;color:var(--burg3);font-size:var(--small)}

/* ---- Own item block (home) ---- */
.own{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--teal);color:var(--color-on-primary);border-radius:var(--radius-lg);overflow:hidden}
.own-copy{padding:clamp(28px,5vw,56px);display:grid;gap:14px;align-content:center;justify-items:start}
.own-copy h2{color:var(--color-on-primary)}
.own-copy .eyebrow{color:var(--gold-soft)}
.own-copy .lead{color:var(--color-on-primary);opacity:.85}
.own-points{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--small)}
.own-points li{display:flex;gap:10px;align-items:center}
.own-points li::before{content:"";width:18px;height:1px;background:var(--gold)}
.own .btn-primary{background:var(--gold);color:var(--burg)}
.own-media{min-height:300px;aspect-ratio:4/3}
.own-media .ph{width:100%;height:100%}
@media (max-width:760px){.own{grid-template-columns:1fr}.own-media{order:-1;min-height:200px}}

/* ---- Ready product page ---- */
.rpd{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);padding-block:18px clamp(40px,6vw,80px);align-items:start}
.gallery{display:grid;gap:10px;position:sticky;top:84px}
.g-main{aspect-ratio:auto;border-radius:var(--radius-lg);overflow:hidden}
.g-main .ph{width:100%;height:100%}
.g-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.g-thumb{aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0}
.g-thumb .ph{width:100%;height:100%;font-size:0}
.g-thumb .ph span{display:none}
.g-thumb[aria-pressed=true]{border-color:var(--burg)}
.rpd-info{display:grid;gap:18px}
.rpd-info h1{font-size:clamp(2rem,4vw,2.8rem)}
.rpd-price{display:flex;align-items:baseline;gap:8px}
.rpd-price span{font-size:1.8rem;font-weight:600;color:var(--burg);font-family:var(--font-display)}
html[dir=rtl] .rpd-price span{font-family:var(--font-arabic)}
.rpd-price small{color:var(--muted);font-size:var(--small)}
.opt h3{font-size:.95rem;font-family:var(--font-body);font-weight:600;color:var(--burg);margin-bottom:10px}
html[dir=rtl] .opt h3{font-family:var(--font-arabic)}
.opt h3 small{font-weight:400;color:var(--muted)}
.opt .chip[aria-pressed=true]{background:var(--burg);color:var(--color-on-primary);border-color:var(--burg)}
.buy-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.buy-row .btn{flex:1;min-width:200px}
.assurances{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:var(--small);color:var(--muted)}
.assurances li::before{content:"· ";color:var(--gold-dim)}
@media (max-width:860px){
  .rpd{grid-template-columns:1fr}
  .gallery{position:static}
  .buy-row .btn{display:none}
}
.ready-bar .btn{margin-inline-start:auto}

/* ---- Cart ---- */
.cart{padding-block:18px clamp(40px,6vw,80px)}
.cart-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cart-item{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;align-items:start}
.ci-thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--bg);display:grid;place-items:center;color:var(--muted)}
.ci-thumb .ph{width:100%;height:100%}
.ci-thumb.svg{padding:8px}
.ci-thumb.svg svg{width:100%;height:auto;max-height:100%}
.ci-body{display:grid;gap:8px}
.ci-body h2{font-size:1.25rem}
.ci-details{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;font-size:var(--small)}
.ci-details div{display:flex;gap:6px;min-width:0}
.ci-details dt{color:var(--muted)}
.ci-details dt::after{content:":"}
.ci-details dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.ci-price{text-align:end;display:grid;gap:2px;min-width:90px}
.ci-price b{font-size:1.15rem;color:var(--burg)}
.ci-price small{font-size:.78rem;color:var(--muted)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:40px;height:40px;font-size:1.15rem;color:var(--burg)}
.qty input{width:48px;text-align:center;border:0;font:inherit;background:transparent;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:grid;gap:12px;position:sticky;top:84px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}
.summary .row.total{border-top:1px solid var(--line);padding-top:12px;font-size:1.1rem}
.summary .row.total b{color:var(--burg);font-size:1.3rem}
.summary .btn[disabled]{opacity:.55;cursor:not-allowed}
.summary .note{font-size:.8rem;color:var(--muted)}
.cart-empty{padding-block:clamp(60px,10vw,120px);display:grid;gap:14px;justify-items:center;text-align:center}
.quote-note{font-size:var(--small);color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:6px 10px;display:inline-block}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:600px){
  .cart-item{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .ci-price{grid-column:2;text-align:start}
  .ci-details{grid-template-columns:1fr}
}

/* Designer inside the shell */
.editing-note{font-size:var(--small);color:var(--burg3);background:var(--card);border:1px dashed var(--gold-dim);border-radius:10px;padding:6px 12px;display:inline-block;margin-top:10px}

/* ---- Checkout (phase 4) ---- */
.checkout,.checkout-return{padding-block:18px clamp(40px,6vw,80px);display:grid;gap:16px}
.checkout-return{max-width:640px}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.co-main{display:grid;gap:18px}
.co-main fieldset{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);padding:16px 18px 18px;margin:0;display:grid;gap:12px}
.co-main legend{font-family:var(--font-display);font-size:1.2rem;color:var(--burg);padding:0 6px}
html[dir=rtl] .co-main legend{font-family:var(--font-arabic);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:12px}
.field{display:grid;gap:4px;font-size:var(--small);color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;min-height:46px;width:100%;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field.invalid input,.field.invalid select{border-color:#B3261E;background:#FFF6F5}
.field.invalid span{color:#B3261E}
.ship-options{display:grid;gap:8px}
.ship-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff;cursor:pointer}
.ship-opt:has(input:checked){border-color:var(--burg)}
.ship-opt b{margin-inline-start:auto;color:var(--burg)}
.co-summary h2{font-size:1.35rem}
.co-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.co-lines li{display:flex;justify-content:space-between;gap:12px}
.co-lines small{display:block;color:var(--muted)}
.notice{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:12px;padding:10px 14px;margin:0}
.note.warn{color:var(--warn-ink)}
.summary a.btn{text-align:center}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--burg);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr}.co-summary{position:static}}
@media (max-width:600px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- quote request (phase 6.7) ---------- */
.quote-page { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); padding-block: 8px 56px; }
@media (min-width: 900px) { .quote-page { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; } }
.quote-form-col h1 { margin-block: 0 6px; }
#quote-form { display: grid; gap: 16px; max-width: 34rem; margin-block-start: 20px; }
.q-field { display: grid; gap: 6px; }
.q-field > span { font-size: .88rem; color: var(--muted); }
.q-field input, .q-field textarea {
  font: inherit; color: inherit; background: var(--surface, #fff);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%;
}
.q-field textarea { resize: vertical; min-height: 5rem; }
.q-field input:focus-visible, .q-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.q-field [aria-invalid="true"] { border-color: #b4452f; }
.q-error { color: #b4452f; margin: 0; }
#quote-form .btn { justify-self: start; }
#quote-form .btn[disabled] { opacity: .6; pointer-events: none; }
.quote-summary { border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.quote-summary h2 { font-size: 1rem; margin-block: 0 12px; }
.q-preview { background: var(--surface-2); border-radius: 10px; padding: 12px; margin-block-end: 14px; }
.q-preview svg { display: block; width: 100%; height: auto; max-height: 15rem; }
.q-rows { margin: 0; display: grid; gap: 8px; }
.q-rows > div { display: flex; gap: 10px; justify-content: space-between; font-size: .9rem; }
.q-rows dt { color: var(--muted); }
.q-rows dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.quote-done { padding-block: 40px 64px; max-width: 34rem; }
.quote-done h1 { margin-block: 0 10px; }
.q-ref { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-block: 0 12px; }
.q-ref span { color: var(--muted); }
.q-ref strong { font-size: 1.15rem; letter-spacing: .04em; }
.q-pending { color: var(--muted); font-size: .9rem; }

/* ---------- product activation (phase 6.8) ---------- */
.product .tag.tag-quote { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.product.is-soon { cursor: default; }
.product.is-soon .thumb { filter: grayscale(.55); opacity: .8; }
.product .tag.tag-soon, .soon-badge .tag-soon { background: var(--ink); color: var(--card); }
.soon-badge .tag-soon { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.rpd.is-soon .btn[disabled] { opacity: .55; cursor: not-allowed; }
.product .tag.tag-builder { background: var(--surface-2); color: var(--ink); }
.rpd.quote-only .quote-note { margin-block: 6px 14px; }
.rpd.quote-only .rpd-info .btn { justify-self: start; }
/* simple configurator: reuses designer.css (.pdp .layout / .controls / .preview / .buy) */
.ctl .upload { display: grid; gap: 10px; }
.ctl .upload input[type=file] { font: inherit; font-size: .9rem; }
.ctl .upload .thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ctl .upload .pending { font-size: .8rem; color: var(--warn-ink); }
.ctl .field.invalid { border-color: #b4452f; }
.ctl .issue { font-size: .8rem; color: #b4452f; margin-top: 6px; }
.ctl textarea.field { min-height: 5rem; resize: vertical; }
.ctl input[type=color].field { padding: 4px; height: 46px; }

/* ---------- full taxonomy (phase 6 restore) ---------- */
.card.cat.soon { opacity: .72; cursor: default; }
.card.cat.soon .body p { color: var(--muted); font-size: .82rem; }

/* ---- Image fitting (ui.js › fitGrid) ----
   A grid takes the ratio most of its images share (--grid-ratio, set per grid); an image of another
   ratio is shown whole on the card colour — never cropped. The product page's main image keeps its
   own natural ratio; only the thumbnails stay uniform. */
.ph.contain{background:var(--card)}
.ph.contain::before{display:none}
.ph.contain img{object-fit:contain}
.g-main .ph{aspect-ratio:auto}
.g-main .ph.empty{aspect-ratio:1}
.g-main .ph img{position:static;width:100%;height:auto;object-fit:unset}

/* ---------- request engine (C06) ---------- */
.rq-form { display: grid; gap: 16px; max-width: 36rem; margin-block-start: 20px; }
.rq-page .eyebrow { display: block; margin-block-end: 6px; }
.rq-h2 { font-size: 1.05rem; margin-block: 14px 0; }
.rq-label em { font-style: normal; color: var(--muted); font-weight: 400; }
.rq-hint { color: var(--muted); font-size: .8rem; }
.rq-issue { color: #b4452f; font-size: .8rem; }
.rq-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.rq-choice legend { padding: 0; margin-block-end: 6px; }
.rq-choice .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-choice .chip { position: relative; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; display: inline-flex; align-items: center; }
.rq-choice .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rq-choice .chip:has(input:checked) { background: var(--burg); color: var(--color-on-primary); border-color: var(--burg); }
.rq-choice .chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.rq-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.rq-toggle input { width: 22px; height: 22px; accent-color: var(--burg); }
.rq-color-row { display: flex; align-items: center; gap: 10px; }
.rq-color-row input[type=color] { width: 56px; height: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rq-color-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--burg); }
.rq-upload .rq-pick { justify-self: start; min-height: 44px; }
.rq-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rq-files li { display: flex; align-items: center; gap: 10px; font-size: .9rem; background: var(--surface-2); border-radius: 10px; padding: 6px 10px; }
.rq-files small { color: var(--muted); }
.rq-remove { margin-inline-start: auto; min-width: 36px; min-height: 36px; border-radius: 10px; font-size: 1.1rem; color: var(--burg); }
.card.cat.request .body p { color: var(--burg); font-weight: 600; font-size: .82rem; }

/* C07: picture options (models, spools) and grouped options */
.rq-choice .chips.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rq-choice .chip.pic { display: grid; gap: 6px; padding: 6px 6px 10px; border-radius: 16px; text-align: center; align-content: start; }
.rq-choice .chip.pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.rq-choice .chip.pic span { display: grid; font-size: .86rem; font-weight: 600; }
.rq-choice .chip.pic small { font-weight: 400; color: var(--muted); font-size: .74rem; }
.rq-choice .chip.pic:has(input:checked) { color: var(--ink); background: var(--bg); border-color: var(--burg); box-shadow: inset 0 0 0 1px var(--burg); }
.rq-choice .chip.pic:has(input:checked) small { color: var(--burg); }
.rq-group { display: grid; gap: 8px; margin-block-end: 6px; }
.rq-group h3 { font-size: .9rem; margin: 6px 0 0; color: var(--burg); }
.rq-alt { font-size: .9rem; margin-block: -4px 8px; }

/* ---------- Newborn (مواليد) + gift options ---------- */
.nb{padding-block:18px clamp(40px,6vw,80px);display:grid;gap:18px}
.nw-head{max-width:720px}.nw-head h1{margin:0 0 6px}
.nb-group{margin:18px 0 4px;font-size:1.15rem}
.nb-card .nw-price{margin-top:6px;color:var(--color-text)}
.nb-card .nw-price small{color:var(--color-text-muted)}
.nb-soon{color:var(--color-text-muted);font-size:.9rem}
.nw-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,4vw,40px);align-items:start}
.nw-preview-col{position:sticky;top:12px}
.nw-preview{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-alt);aspect-ratio:1/1;display:grid}
.nw-preview img{width:100%;height:100%;object-fit:cover;display:block}
.nw-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;text-align:center;padding:12%;color:var(--nb-accent,#3b4a63);pointer-events:none}
.nw-name{font-size:clamp(1.6rem,6vw,3rem);line-height:1.15;word-break:break-word}
.nw-name.arabic{font-family:Amiri,var(--font-arabic),serif}.nw-name.latin{font-family:"Great Vibes",cursive}
.nb-lines{list-style:none;margin:0;padding:0;font-size:clamp(.85rem,2.6vw,1.1rem);display:grid;gap:.15em}
.nw-note,.nb-ask{color:var(--color-text-muted);font-size:var(--fs-small)}
.nb-form,.nb-order{display:grid;gap:14px}
.nb-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nw-field{display:grid;gap:6px}
.nb-check{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.nb-check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--color-primary)}
.nb-check small{display:block;color:var(--color-text-muted);margin-top:2px}
.nb-check span{min-width:0}
[data-field="ack"].invalid,.nb-check.invalid{outline:2px solid #b3261e;outline-offset:2px;border-radius:8px}
.nb-issue{color:#b3261e;font-size:var(--fs-small)}
.nb-error{color:#b3261e}
.nw-qty{display:flex;align-items:center;gap:12px}
.nw-qty .qty{display:inline-flex;align-items:center;border:1.5px solid var(--color-border);border-radius:12px;overflow:hidden;background:#fff}
.nw-qty .qty button{width:44px;height:44px;border:0;background:transparent;font-size:1.3rem;cursor:pointer}
.nw-qty .qty input{width:56px;height:44px;border:0;text-align:center;font:inherit;-moz-appearance:textfield}
.nb-tiers ul{margin:4px 0 0;padding-inline-start:18px;color:var(--color-text-muted)}
.nb-addons{display:grid;gap:2px}
.oc-desc{margin:0;color:var(--color-text-muted)}
.oc-sub{margin:6px 0 0;font-size:1.05rem}
.oc-hint{color:var(--color-text-muted);font-size:.8rem}
.oc-options{display:flex;flex-wrap:wrap;gap:8px}
.oc-option{position:relative}
.oc-option input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.oc-option span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--color-border,#D9CFC2);border-radius:999px;background:var(--color-surface);font-size:.9rem}
.oc-option input:checked+span{border-color:var(--tiala-burgundy,#6B1D2F);box-shadow:inset 0 0 0 1px var(--tiala-burgundy,#6B1D2F);font-weight:700}
.oc-option input:focus-visible+span{outline:2px solid var(--tiala-burgundy,#6B1D2F);outline-offset:2px}
.oc-range{display:flex;gap:12px;flex-wrap:wrap}
.oc-range label{display:grid;gap:4px;font-size:.85rem}.oc-range input{width:7.5em}
.oc-field.invalid .oc-options span,.oc-field.invalid input,.oc-field.invalid textarea{border-color:#B3261E}
.oc-more{margin-top:40px}.oc-more h2{font-size:1.25rem}
.nb-includes{display:grid;gap:4px}.nb-includes>span:not(.nb-tier){font-weight:700}
.nb-includes ul{margin:0;padding-inline-start:1.2em;display:grid;gap:2px}
.nb-tier{justify-self:start;padding:2px 10px;border-radius:999px;background:var(--color-surface-alt);font-size:.8rem;font-weight:700;letter-spacing:.02em}
.nb-clothing{margin-top:28px;padding:20px;border-radius:16px;background:var(--color-surface);display:grid;gap:10px}
.nb-clothing h2{margin:0;font-size:1.25rem}.nb-clothing p{margin:0}
.nb-clothing small{color:var(--color-text-muted)}
.nb-form .nb-clothing{margin-top:4px;padding:14px}
.nb-brands{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.nb-brands li{height:34px;display:flex;align-items:center}
.nb-brands img{height:100%;width:auto;max-width:120px;object-fit:contain}
.nb-chips{display:flex;gap:10px;flex-wrap:wrap}
.nb-own{padding:20px;display:grid;gap:8px;margin-top:10px}
.nb-own h2{margin:0}
.nb-basket,.nb-magnet{position:relative;width:100%;height:100%;display:grid}
.nb-basket img{width:100%;height:100%;object-fit:cover}
.nb-basket-letter{position:absolute;inset-inline:0;bottom:12%;text-align:center;font-size:clamp(2rem,9vw,4.5rem);font-weight:800;color:var(--nb-basket,#C9B8A2);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.nb-magnet{align-content:center;justify-items:center;gap:10px;padding:8%}
.nb-art{width:80%;aspect-ratio:1/1;border-radius:14px;display:grid;place-items:center;background:#fff;overflow:hidden}
.nb-art img{width:100%;height:100%;object-fit:contain}
.nb-art.placeholder{border:2px dashed var(--color-text-muted);color:var(--color-text-muted);padding:12px;text-align:center;font-size:.85rem}
.nb-magnet-name{font-size:1.4rem;font-weight:700;text-align:center;word-break:break-word}
.nb-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nb-deep{align-self:start}
.nb-details .nb-line{border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;display:grid;gap:12px}
.nb-section p{color:var(--color-text-muted)}
.gift-options{border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;display:grid;gap:8px}
.gift-options legend{font-weight:700;padding-inline:6px}
.gift-recipient{display:grid;gap:10px;padding:10px 0 4px}
.gift-recipient h3{margin:0;font-size:1rem}
@media (max-width:760px){
  .nw-grid{grid-template-columns:1fr}
  .nw-preview-col{position:static}
  .nb-two{grid-template-columns:1fr 1fr}
}

/* admin 5.6 — proof and quote pages */
.proof-page, .quote-status { display: grid; gap: 14px; max-width: 720px; }
.proof-img { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.proof-img img { display: block; width: 100%; height: auto; }
.proof-note { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
#pf-form { display: grid; gap: 10px; }
#pf-comment { width: 100%; }