/* Brine & Dandy (concept) · shared components */

/* Page head: tabloid front page */
.phead{padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px);border-bottom:3px double var(--ink)}
.phead .kicker{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px}
.phead h1{max-width:16ch}
.phead .lead{margin-top:18px}
.edition{display:inline-flex;align-items:center;gap:8px;font:500 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);padding:6px 10px;border-radius:3px;background:var(--card)}

/* Photo in paper wrap */
.wrap-photo{position:relative;background:var(--paper);padding:14px 14px 34px;border:1px solid var(--rule);box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.wrap-photo img{width:100%;height:auto}
.wrap-photo figcaption{position:absolute;left:14px;right:14px;bottom:8px;font:500 .72rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.photo{border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;z-index:2;display:grid;place-items:center;text-align:center;width:120px;height:120px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);font:400 1.05rem/1 var(--display);transform:rotate(10deg);box-shadow:3px 3px 0 var(--ink);padding:10px}
.sticker small{display:block;font:500 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}

/* Cards */
.card{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:22px}
.card-flat{background:var(--card);border:1px solid var(--grout);border-radius:var(--r);padding:22px}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
@media (min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:720px) and (max-width:1023px){.g3.g3-2{grid-template-columns:1fr 1fr}}

/* Price board rows */
.board{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden}
.board-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 20px;background:var(--ink);color:#fff}
.board-h h2,.board-h h3{font:400 1.6rem/1 var(--display);color:#fff}
.board-h p{margin:0;font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#E3DFD3}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 20px;border-top:1px solid var(--grout);align-items:start}
.row:first-of-type{border-top:0}
.row-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-weight:700;font-size:1.06rem}
.row-name a{text-decoration:none}
.row-name a:hover{text-decoration:underline}
.row-desc{grid-column:1/-1;margin:0;color:var(--ink-2);font-size:.95rem;max-width:62ch}
.row-al{grid-column:1/-1;font:500 .74rem/1.4 var(--mono);color:var(--ink-2);letter-spacing:.02em}
.row-al b{font-weight:500;color:var(--ink)}
.row-price{font:500 1rem/1.3 var(--mono);text-align:right;white-space:nowrap}
.row-price span{display:block;font-size:.78rem;color:var(--ink-2)}
.row-act{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.row.sold{background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(23,24,26,.035) 10px 20px)}
.row.sold .row-name>a,.row.sold .row-name>span:first-child{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-2)}
@media (min-width:720px){.row{grid-template-columns:1fr auto auto}.row-name{grid-column:1;grid-row:1}.row-price{grid-column:2;grid-row:1}.row-act{grid-column:3;grid-row:1}.row-desc,.row-al{grid-column:1/2}}

/* Forms */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.legend{font-weight:700;font-size:.95rem}
.field .hint{font-size:.86rem;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card)}
textarea.input{min-height:96px;resize:vertical}
.input[aria-invalid=true]{border-color:var(--warn);box-shadow:0 0 0 2px rgba(138,46,18,.18)}
.err{color:var(--warn);font-size:.88rem;font-weight:600}
.check{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink);flex-shrink:0}
fieldset{border:0;margin:0 0 16px;padding:0;min-width:0}
legend{padding:0;margin-bottom:8px}
.opt-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:flex;flex-direction:column;gap:2px;min-height:52px;justify-content:center;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);font-weight:600}
.opt span small{font:500 .78rem/1.2 var(--mono);color:var(--ink-2)}
.opt input:checked+span{background:var(--gold);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.opt input:disabled+span{opacity:.5;border-style:dashed;cursor:not-allowed}
.preview-note{font:500 .78rem/1.3 var(--mono);color:var(--ink-2);letter-spacing:.04em}
.ok-box{border:1.5px solid var(--ok);background:#EEF4EF;color:var(--ok);padding:16px 18px;border-radius:var(--r);font-weight:600}
.warn-box{border:1.5px solid var(--warn);background:#FBEFE9;color:var(--warn);padding:14px 16px;border-radius:var(--r);font-weight:600}

/* Dialog / sheet */
dialog.dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:2px solid var(--ink);border-radius:10px;background:var(--tile);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog.dlg::backdrop{background:rgba(23,24,26,.55)}
.dlg-h{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:20px 22px 14px;border-bottom:3px double var(--ink)}
.dlg-h h2{font-size:1.8rem}
.dlg-b{padding:18px 22px;overflow:auto;max-height:calc(100vh - 220px)}
.dlg-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--grout);background:var(--paper)}
.x{min-width:44px;min-height:44px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);font-size:1.2rem;line-height:1}

/* Toast */
.toast{position:fixed;left:50%;bottom:78px;z-index:120;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;pointer-events:none;transition:all .25s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.toast{bottom:28px}}

/* Accordion */
.acc{border-top:1.5px solid var(--ink)}
.acc details{border-bottom:1px solid var(--grout)}
.acc summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 2px;font-weight:700;font-size:1.06rem;cursor:pointer;min-height:48px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:400 1.6rem/1 var(--display)}
.acc details[open] summary::after{content:"–"}
.acc details>div{padding:0 2px 18px;color:var(--ink-2);max-width:68ch}

/* Hours table */
.hours{width:100%;border-collapse:collapse}
.hours th,.hours td{text-align:left;padding:10px 0;border-bottom:1px solid var(--grout);vertical-align:top}
.hours th{font-weight:700;width:38%}
.hours td{font-family:var(--mono);font-size:.95rem}
.hours tr.today th,.hours tr.today td{background:var(--gold-2)}
.hours tr.today th{padding-left:10px}.hours tr.today td{padding-right:10px}
.status-line{font-weight:700}

/* Steps / progress */
.steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 24px;counter-reset:s;flex-wrap:wrap}
.steps li{counter-increment:s;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border:1.5px solid var(--grout);border-radius:999px;font-weight:600;font-size:.9rem;color:var(--ink-2);background:var(--card)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--paper-2);font:500 .8rem/1 var(--mono)}
.steps li[aria-current=step]{border-color:var(--ink);color:var(--ink)}
.steps li[aria-current=step]::before{background:var(--gold);box-shadow:inset 0 0 0 1.5px var(--ink)}
.steps li.done::before{content:"✓";background:var(--ink);color:#fff}

/* Ticket (order number, tracker) */
.ticket{background:var(--card);border:1.5px dashed var(--ink);border-radius:var(--r);padding:20px;font-family:var(--mono)}
.ticket .big{font:400 2.6rem/1 var(--display)}

/* Delivery sheet links */
.dlist{display:grid;gap:10px}
.dlist a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:12px 16px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);font-weight:700;text-decoration:none}
.dlist a:hover{background:var(--gold-2)}
.dlist small{font:500 .74rem/1.2 var(--mono);color:var(--ink-2)}

/* Example review */
.quote{margin:0;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:24px;position:relative}
.quote p{font:400 1.3rem/1.25 var(--display);margin-bottom:14px}
.quote footer{font:500 .78rem/1.4 var(--mono);color:var(--ink-2)}

.mapfig{margin:0;border:1.5px solid var(--ink);background:var(--card);padding:10px}
.mapfig img{width:100%}
.mapfig figcaption{margin-top:8px}
.card>h2.h3:first-child,.card>h3:first-child,.card-flat>h3{margin-bottom:8px}
.card p:last-child,.card-flat p:last-child{margin-bottom:0}