/* Seventh Avenue Media · the quote picker + slip (homepage and services). Ported verbatim from the approved mock. */
.tape{ position:absolute; top:-14px; width:96px; height:30px; background:rgba(240,228,200,.72); box-shadow:0 1px 2px rgba(0,0,0,.2); z-index:3; }
.tape-l{ left:6%; transform:rotate(-5deg); } .tape-r{ right:6%; transform:rotate(4deg); }
/* =========================================================
   THE QUOTE: pick off the chalkboards, the slip in the studio window fills in
   ========================================================= */
.prices{ overflow:hidden; padding:var(--sec) var(--pad); background-color:#1a4433;
  background-image:linear-gradient(180deg, rgba(28,11,25,.5), rgba(28,11,25,0) 22%, rgba(0,0,0,.25)),
    linear-gradient(90deg, rgba(0,0,0,.22) 2px, transparent 2px), linear-gradient(180deg, rgba(0,0,0,.22) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
  background-size:auto, 64px 32px, 64px 32px, 64px 32px; }
.prices-wrap{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); grid-template-areas:"head head" "picker slip"; gap:clamp(36px, 4vw, 64px) clamp(40px, 5vw, 88px); align-items:start; }
.prices-head{ grid-area:head; max-width:900px; }
.prices h2{ font:900 clamp(44px, 5.4vw, 88px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.prices-head p{ margin-top:20px; font-size:clamp(17px, 1.3vw, 20px); color:#e6efe3; max-width:34em; }

.picker{ grid-area:picker; display:grid; gap:clamp(34px, 3vw, 48px); }
.pk-board{ margin:0; min-width:0; position:relative; padding:clamp(16px, 2vw, 26px) clamp(14px, 2vw, 26px) clamp(10px, 1.4vw, 18px); background:#1d2321; color:#eef0e6;
  border:8px solid #6b4a2b; border-radius:3px; box-shadow:0 14px 30px rgba(0,0,0,.4), inset 0 0 40px rgba(255,255,255,.04);
  background-image:radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.06), transparent 60%); }
.pk-legend{ float:left; width:100%; padding:0 0 12px; margin-bottom:4px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; border-bottom:2px solid rgba(238,240,230,.4);
  font:900 clamp(26px, 2.4vw, 36px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.06em; color:#fff; }
.pk-legend span{ font:600 15px/1.2 var(--f-body); text-transform:none; letter-spacing:0; color:#cfd3c6; }
.pk-legend + *{ clear:both; }
.opt{ position:relative; display:grid; grid-template-columns:34px minmax(0, 1fr) auto; grid-template-areas:"box name price" "box meta meta"; gap:4px 14px; align-items:baseline;
  padding:16px 12px; margin:0 -12px; border-bottom:1.5px dashed rgba(238,240,230,.2); cursor:pointer; border-radius:3px; transition:background-color .2s; }
.opt:last-child{ border-bottom:0; }
.opt:hover{ background:rgba(255,255,255,.05); }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.box{ grid-area:box; align-self:start; width:28px; height:28px; margin-top:2px; position:relative; border:3px solid #eef0e6; border-radius:3px; }
.opt-name{ grid-area:name; font:800 clamp(23px, 2vw, 30px)/1.05 var(--f-display); text-transform:uppercase; letter-spacing:.05em; color:#fff; }
.opt-price{ grid-area:price; font:800 clamp(24px, 2.1vw, 32px)/1.05 var(--f-display); letter-spacing:.04em; white-space:nowrap; color:#fff; }
.opt-meta{ grid-area:meta; font-size:15px; line-height:1.45; color:#d4d8cc; }
.opt:has(input:checked){ background:rgba(255,181,71,.13); }
.opt:has(input:checked) .box{ background:var(--sodium); border-color:var(--sodium); }
.opt:has(input:checked) .box::after{ content:""; position:absolute; left:7px; top:1px; width:8px; height:15px; border:solid var(--ink); border-width:0 3.5px 3.5px 0; transform:rotate(45deg); }
.opt:has(input:checked) .opt-price{ color:var(--sodium); }
.opt:has(input:focus-visible){ outline:3px solid var(--sodium); outline-offset:2px; }

.slip-col{ grid-area:slip; display:grid; gap:24px; align-content:start; }
.qwin{ position:relative; padding:clamp(54px, 5vw, 70px) clamp(16px, 2.4vw, 34px) clamp(26px, 3vw, 40px); border:clamp(10px, 1.2vw, 16px) solid var(--bottle-2);
  background:radial-gradient(ellipse 80% 60% at 50% 30%, #5a2a2a 0%, #2a1220 55%, #160a14 100%);
  box-shadow:inset 0 0 0 4px #f4efe2, inset 0 0 0 7px rgba(0,0,0,.4), 0 0 0 3px #0e2a1f, 0 30px 60px rgba(0,0,0,.5); }
.qwin::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0 12%, rgba(255,255,255,0) 12% 34%, rgba(255,255,255,.05) 34% 39%, rgba(255,255,255,0) 39%); }
.qwin-gilt{ position:absolute; left:0; right:0; top:clamp(14px, 1.6vw, 22px); text-align:center; font:400 clamp(17px, 1.9vw, 26px)/1 var(--f-slab);
  background-image:linear-gradient(180deg, #fff1b8 0%, #e9c15d 40%, #a8742a 62%, #f3d27a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(1px 2px 0 #3b1f0c); }
.slip{ position:relative; z-index:2; background:#fbf4e6; color:var(--ink); padding:30px 24px 26px; transform:rotate(-1deg);
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(36,16,29,.06) 31px 32px);
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 22px 40px rgba(0,0,0,.5); }
.slip .tape{ top:-13px; width:84px; height:28px; }
.slip-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:3px solid var(--ink); }
.slip-h{ font:900 clamp(40px, 4.4vw, 58px)/.85 var(--f-display); text-transform:uppercase; }
.slip-from{ margin-top:6px; font-size:14px; font-weight:600; color:#5a3a4b; }
.slip-date{ font-size:14px; text-align:right; color:#5a3a4b; white-space:nowrap; }
.slip-date span{ display:block; font-weight:700; color:var(--ink); }
.slip-lines{ width:100%; border-collapse:collapse; margin-top:4px; }
.slip-lines thead th{ padding:10px 0 6px; border-bottom:1px solid rgba(36,16,29,.3); font-size:13px; font-weight:700; text-align:left; color:#5a3a4b; }
.slip-lines thead th:last-child{ text-align:right; }
.slip-lines td{ padding:12px 0; border-bottom:1.5px dashed rgba(36,16,29,.3); vertical-align:top; }
.slip-lines td:first-child{ padding-right:14px; }
.slip-lines td b{ display:block; font-weight:700; font-size:16px; }
.slip-lines td span{ display:block; font-size:14px; line-height:1.4; color:#5a3a4b; }
.slip-lines td:last-child{ text-align:right; white-space:nowrap; font:800 22px/1.1 var(--f-display); letter-spacing:.03em; }
.slip-lines td:last-child span{ display:inline; font:inherit; color:inherit; }
.slip-lines small{ margin-left:2px; font:600 13px var(--f-body); }
.slip-pay{ margin-top:16px; padding:14px 16px; display:grid; gap:8px; background:var(--plum); color:var(--cream); }
.slip-pay div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.slip-pay dt{ font-weight:600; font-size:15.5px; }
.slip-pay dd{ font:800 28px/1 var(--f-display); letter-spacing:.03em; color:var(--sodium); }
.slip-sign{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:92px; }
.sl{ display:block; height:1.5px; background:var(--ink); }
.sl-n{ display:block; margin-top:6px; font-size:13px; color:#5a3a4b; }
.slip-stamp{ position:absolute; right:20px; bottom:86px; padding:.16em .42em .1em; font:900 clamp(24px, 2.6vw, 34px)/1 "Big Shoulders Stencil Display", var(--f-display); text-transform:uppercase; letter-spacing:.05em;
  color:#b8351f; border:3px solid #b8351f; border-radius:3px; transform:rotate(-9deg); opacity:.9; pointer-events:none; mix-blend-mode:multiply; }

.trust{ display:grid; gap:10px; }
.trust li{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; }
.trust li::before{ content:""; flex:none; width:18px; height:10px; border-left:3px solid var(--sodium); border-bottom:3px solid var(--sodium); transform:rotate(-45deg) translateY(-3px); }
.prices-ed{ padding-left:18px; border-left:3px solid var(--sodium); font-size:17px; color:#fff; }
.prices-ed span{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--sodium); }
.slip-col > .btn{ justify-self:start; }
@media (min-width: 1100px){ .slip-col{ position:sticky; top:calc(var(--header-h) + 24px); } }
@media (max-width: 1099px){
  .prices-wrap{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "picker" "slip"; }
  .slip-col{ max-width:620px; }
}
@media (max-width: 640px){
  .pk-board{ border-width:6px; }
  .opt{ grid-template-columns:30px minmax(0, 1fr) auto; gap:4px 12px; padding:14px 10px; margin:0 -10px; }
  .box{ width:26px; height:26px; }
  .opt:has(input:checked) .box::after{ left:6px; width:8px; height:14px; }
  .qwin{ padding:50px 12px 22px; }
  .slip{ padding:26px 16px 22px; transform:rotate(-.6deg); }
  .slip-lines td:last-child{ font-size:20px; }
  .slip-pay{ padding:12px; }
  .slip-pay dd{ font-size:24px; }
  .slip-sign{ gap:14px; margin-top:84px; }
  .slip-stamp{ right:12px; bottom:80px; }
  .slip-col > .btn{ justify-self:stretch; }
}