/* Property page (Property.dc.html desktop, Mobile.dc.html at <= 900px). Brand tokens from base.css only. */

.m-only{display:none !important}
.brass{color:var(--brass)}
.small{font-size:14px}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;align-self:flex-start}

/* Breadcrumb */
.crumbs{padding-top:24px;padding-bottom:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.crumbs .label{color:var(--stone)}
.crumbs a.label:hover{color:var(--brass)}
.crumbs .here{color:var(--ink)}

/* Gallery: big first photo + up to four small. Photos past the fifth exist for
   the phone swipe strip and the lightbox; on desktop they stay hidden. */
.gal{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:290px 290px;gap:8px;overflow:hidden}
.gal-cell{position:relative;display:block;overflow:hidden;background:#D9D1C1;min-width:0}
.gal-cell img{width:100%;height:100%;object-fit:cover}
.gal-cell.big{grid-row:span 2}
.gal-cell.extra{display:none}
.gal-cell:focus-visible{outline-offset:-4px}
.gal-n1{grid-template-columns:1fr}
.gal-n1 .gal-cell.big{grid-row:span 2}
.gal-n2,.gal-n3{grid-template-columns:2fr 1fr}
.gal-n2 .gal-cell:not(.big){grid-row:span 2}
.gal-n4 .gal-cell:nth-child(4){grid-column:2 / span 2}
.gal-empty .gal-cell.big{justify-content:space-between;align-items:flex-start}
.gal .avail{position:absolute;top:16px;left:16px;background:var(--linen);z-index:1}
.gal-empty .avail{position:relative;top:auto;left:auto}
/* Under contract and sold pages (2026-10-26): the same colours as the flags on the /land/ cards */
.pill.st-spoken,.gal .pill.st-spoken{background:#9A6B12;color:#fff;border-color:transparent}
.pill.st-sold,.gal .pill.st-sold{background:var(--raspberry-dark,#A63659);color:#fff;border-color:transparent}
.rail-gone-h{font-size:24px;line-height:1.2;margin:0}
.rail-gone p{margin:0}
.mbar-status{font-family:var(--serif)}
.gal-actions{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;z-index:1}
.btn.line.gal-btn{min-height:40px;padding:0 14px;background:var(--linen)}
/* Round 4: a play button centred on the lead photo when the parcel has a video. The lead photo is
   the left 2 of 4 columns (2 of 3 with two or three photos, all of it with one). */
.gal-play{position:absolute;top:50%;left:25%;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none}
.gal-play svg{box-sizing:content-box;padding:22px 20px 22px 24px;border-radius:50%;background:rgba(22,25,34,0.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,0.7);box-shadow:0 8px 28px rgba(0,0,0,0.3);transition:transform .15s ease,background .15s ease}
.gal-play span{font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,0.6)}
.gal-play:hover svg{transform:scale(1.08);background:var(--raspberry,#C34271)}
.gal-n2 .gal-play,.gal-n3 .gal-play{left:33.33%}
.gal-n1 .gal-play{left:50%}

/* Two columns: content + rail */
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:72px;align-items:start;padding-top:48px;padding-bottom:40px}
.pp-main{min-width:0;display:flex;flex-direction:column}
.pp-head{display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
.pp-head h1{font-size:60px;max-width:800px}
.pills{display:flex;gap:10px;flex-wrap:wrap}

/* Key facts: hairline rows, not tiles */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.fact{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--hair);min-width:0}
.fact .k{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--stone)}
.fact .v{font-family:var(--serif);font-size:24px;line-height:1.1;overflow-wrap:anywhere}
.fact .n{font-size:13px}
.fact-link{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);text-decoration:underline;text-underline-offset:4px;padding:4px 0}
.fact-link::after{content:" ↓"}

/* Sections */
.sec{display:flex;flex-direction:column;gap:20px;padding:48px 0;border-top:1px solid var(--hair)}
.sec h2{font-size:38px}
.desc{margin-top:40px}
.desc p{margin:0}
.desc .lead{font-size:28px;line-height:1.35}
.desc .body{font-size:17px;color:#4A4439}

.video{position:relative;aspect-ratio:16 / 9;background:#D9D1C1}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.chk-i{flex:0 0 auto;margin-top:3px}
/* A long county note: the first sentence is the bullet, the rest opens under it */
.use-more{min-width:0}
.use-more summary{cursor:pointer;list-style:none}
.use-more summary::-webkit-details-marker{display:none}
.use-more summary::after{content:" More";font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--stone);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.use-more[open] summary::after{content:" Less"}
.use-more p{margin:8px 0 0;font-size:14px;line-height:1.5}
.sec p.small{margin:0}

/* Map */
.map-wrap{position:relative;min-width:0;max-width:100%}
.map{position:relative;background:#B9B6A2;line-height:0}
.map img{width:100%;height:auto}
/* Land id map: Jon, 2026-10-29: hide the title bar, Full Screen and Layers & Basemaps, which sit in the
   map's top 64px, and keep the box the same size. The +/- zoom is bottom-right, so it stays. */
.map-landid{overflow:hidden;aspect-ratio:2/1;min-height:360px}
.map-landid iframe{display:block;position:absolute;top:-66px;left:0;width:100%;height:calc(100% + 66px);border:0}
/* Property Tour: the frame runs 76px past the box so the tour's tab bar (74px: Floodplain, Soil, Land Use...) is cut off.
   Jon, 2026-10-29: crop the top too. The tour sits the parcel below its own centre, so 70px off the top centres it in the box. */
.map-tour{overflow:hidden;aspect-ratio:2/1;min-height:360px}
.map-tour iframe{position:absolute;top:-70px;left:-80px;width:calc(100% + 160px);height:calc(100% + 146px);aspect-ratio:auto;min-height:0}
.map-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-attr{position:absolute;right:0;bottom:0;padding:3px 8px;font-size:10px;line-height:1.4;letter-spacing:0.02em;color:var(--ink);background:rgba(242,237,227,0.85)}
.map-ph{height:440px}
.map-btns{position:absolute;top:16px;right:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn.line.map-btn{min-height:40px;padding:0 14px;background:var(--linen)}
.btn.line.gal-btn:hover,.btn.line.map-btn:hover{background:var(--ink);color:var(--linen)}
.where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.where-col{display:flex;flex-direction:column;gap:8px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;display:flex;flex-direction:column;gap:4px;color:#4A4439}
.copy-btn{align-self:flex-start;font-weight:600;background:none;border:0;padding:8px 0;min-height:40px;cursor:pointer;font-family:var(--sans)}
.copy-btn:hover{color:var(--ink)}
.corners-more summary{cursor:pointer;list-style:revert}
.head-acres{font-weight:700;color:var(--ink)}

/* Accordion sections: plain open sections on desktop, + / – rows on phones */
details.acc > summary{list-style:none;cursor:default}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::marker{content:""}
@media (min-width:901px){
  details.acc > summary{pointer-events:none}
}

/* Details list */
dl.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
dl.details div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #E2DACB;font-size:15px;min-width:0}
dl.details dt{color:var(--stone);margin:0;flex:0 0 auto}
dl.details dd{margin:0;text-align:right;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
dl.details div.wide{grid-column:span 2;flex-direction:column;align-items:flex-start;gap:6px}
dl.details div.wide dd{text-align:left;align-items:flex-start;font-size:14px;color:var(--stone)}
.verify{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);text-decoration:underline;text-underline-offset:4px;padding:4px 0}
.verify::after{content:" ↗"}

/* Two ways to buy */
.buy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.buy-card{border:1px solid var(--ink);border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0;cursor:pointer;background:none;transition:border-color .15s ease}
/* Jon, 2026-10-29: the picked card has the black outline, the other is grey (buy-pick.js). */
.buy-card[aria-checked="false"]{border-color:var(--hair)}
.buy-card[aria-checked="false"]:hover{border-color:var(--stone)}
.buy-card[aria-checked="false"] .label{color:var(--stone)}
.buy-card:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.buy-card .price{font-size:48px}
.buy-card .fin-price{font-size:30px;line-height:1.2}
.fin-price strong{font-weight:700}
.label.muted{color:var(--stone)}
.line{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.line > span:last-child{text-align:right}
.line.hair{padding-top:12px}
.line.strong{font-weight:500}
.fine{margin:0;font-size:13px}

/* Guarantee */
.guarantee{gap:10px}
.guarantee h2{font-size:32px}
.g-text{margin:0;font-size:15px;max-width:620px}

/* Review band */
.review{gap:16px;background:var(--parchment);margin:0 -40px;padding:48px 40px;border-top:none}
.review blockquote{margin:0;font-size:28px;font-style:italic;line-height:1.3;max-width:720px}
.review-by{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.review-by .who{font-weight:500}

.faq-sec{gap:8px}
.faq-sec > summary h2{margin-bottom:12px}

/* Not quite the one? */
.notquite{gap:14px}
.notquite h2{font-size:32px}
.notquite p{margin:0;max-width:560px;color:#4A4439}
.btns{display:flex;gap:12px;flex-wrap:wrap}

.disclaimer{margin:0 0 112px;font-size:12px;letter-spacing:0.02em}

/* Rail */
.pp-rail{display:flex;flex-direction:column;gap:16px}
.rail{border:1px solid #E2DDD3;border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:20px;background:#fff;box-shadow:0 1px 2px rgba(22,25,34,0.06),0 12px 32px rgba(22,25,34,0.08)}
/* Round 5 (Jon): the terms are one phrase, "$117 a month for 72 months", the monthly big and the
   term right beside it; what is due today sits under it, smaller. Still on the tinted panel. */
.rail-terms{padding:20px;border-radius:10px;background:#F4F1EA}
.terms{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink)}
.terms p{margin:0}
/* Jon, 2026-10-29: invoice rows, like the Review and pay summary he liked. Labels left, amounts
   right, all ink; the two totals (due today, then monthly) are bold with the amount in serif. */
.t-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.t-total{font-weight:700;font-size:18px;padding-top:8px;border-top:1px solid #E2DDD3}
.t-total .price{font-size:26px;font-weight:400;white-space:nowrap}
.t-total .per{font-size:0.55em}
.t-then{margin-top:4px}
/* Jon, 2026-10-29: the monthly is one phrase in one size, smaller than due today, the payment bold. */
.t-mo{font-size:21px;padding-top:8px;border-top:1px solid #E2DDD3}
.t-mo-v{text-align:right}
.t-mo-v .nw,.fin-price .nw{white-space:nowrap}
.t-mo-v strong{font-weight:700}

/* The compact rail that floats once the full one has scrolled away (rail-float.js). */
.rail-mini{display:flex;flex-direction:column;gap:14px;border:1px solid #E2DDD3;border-radius:14px;padding:20px 22px;background:#fff;box-shadow:0 1px 2px rgba(22,25,34,0.06),0 12px 32px rgba(22,25,34,0.12);position:sticky;top:24px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.rail-mini[hidden]{display:none}
.rail-mini.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.mini-terms{display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.mini-today{font-family:var(--serif);font-size:20px}
.mini-today .price{font-size:34px}
.mini-then{font-size:16px}
.mini-then strong{font-weight:600}
.rail-mini .reserve{min-height:52px}
.rail-mini .text-listing{gap:8px}
.rail-mini .text-listing input.field,.rail-mini .text-listing .btn{min-height:44px}
@media (min-width:901px){.pp-rail{align-self:stretch}}
/* Round 5: the monthly as a filled badge beside the title. */
.pill.pill-mo{background:var(--forest);border-color:var(--forest);color:var(--linen)}
.rail-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rail-no{font-size:12px;letter-spacing:0.1em;text-align:right;overflow-wrap:anywhere}
.rail-price{display:flex;flex-direction:column;gap:6px}
.rail-price .price{font-size:56px}
.rail-price .muted{font-size:14px}
.u{text-decoration:underline;text-underline-offset:3px}
.rail-lines{display:flex;flex-direction:column;gap:8px}
.rail-lines .first{padding-top:4px}
.rail-lines .strong{font-size:17px}
.reserve{min-height:60px;font-size:13px}
.rail-what{font-size:13px;text-align:center;color:#4A4439}
.rail-stripe{font-size:12px;text-align:center;letter-spacing:0.02em;margin-top:-10px}
.rail-reassure{padding-top:16px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:#4A4439;text-align:center}
.rail-proof{padding-top:16px;display:flex;flex-direction:column;gap:6px;text-align:center}
.rail-proof .serif{font-size:19px}
.rail-proof .muted{font-size:13px}
.rail-text{padding-top:16px;display:flex;flex-direction:column;gap:10px}
.rail-text .btn{min-height:46px}
.text-listing{display:flex;flex-direction:column;gap:10px}
.text-listing input.field{min-height:46px}
.btn.line.soft{border-color:var(--hair);color:#4A4439}
.btn.line.soft:hover{border-color:var(--ink);color:var(--linen)}
.rail-keep{font-size:12px;text-align:center}
.rail-keep-left{text-align:left}
.text-listing .btn{letter-spacing:0.1em;white-space:nowrap}

/* Sticky only when the whole rail fits the window, or its form would be unreachable while scrolling. */
@media (min-width:901px) and (min-height:980px){.pp-rail{position:sticky;top:24px;align-self:start}.rail-mini{display:none !important}}

/* Lightbox (gallery.js) */
.lb{position:fixed;inset:0;z-index:200;background:var(--forest);color:var(--linen);display:flex;flex-direction:column}
.lb[hidden]{display:none}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
.lb-count{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#A9B3A9}
.lb-fig{flex:1;margin:0;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 64px 24px}
.lb-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-btn{min-width:52px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--linen);border:1px solid rgba(242,237,227,0.7);border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);padding:0 16px}
.lb-btn:hover{background:var(--linen);color:var(--forest)}
.lb-btn:focus-visible{outline-color:var(--brass-dark)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);padding:0;font-size:22px;letter-spacing:0}
.lb-prev{left:8px}.lb-next{right:8px}
html.lb-open{overflow:hidden}

/* ---------- Phones (Mobile.dc.html) ---------- */
@media (max-width:900px){
  .m-only{display:revert !important}
  .d-only{display:none !important}
  body.property{font-size:16px;line-height:1.55;padding-bottom:calc(124px + env(safe-area-inset-bottom))}

  .crumbs{padding-top:12px;padding-bottom:12px;gap:8px}
  .crumbs .label{font-size:11px}

  /* Gallery becomes a full-bleed swipe strip */
  .gal-wrap{padding:0}
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;height:300px;scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal-cell,.gal-cell.extra,.gal-cell.big{display:block;flex:0 0 100%;height:300px;scroll-snap-align:start}
  .gal-empty .gal-cell:not(.big){display:none}
  .gal-empty .gal-cell.big{display:flex}
  .gal{position:relative}
  .gal-wrap{position:relative}
  .gal .avail{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:0.14em;padding:5px 9px}
  .gal-actions{position:absolute;right:12px;bottom:12px}
  .btn.line.gal-btn{min-height:52px;font-size:13px}

  .pp{display:block;padding-top:22px;padding-bottom:0}
  .pp-head{gap:12px;padding-bottom:10px}
  .pp-head h1{font-size:32px}
  .pp-head .label{font-size:11px}
  .pills{gap:6px}
  .pill{font-size:10px;letter-spacing:0.14em;padding:5px 9px}

  .m-price{display:flex !important;flex-direction:column;gap:12px;margin-top:6px}
  .m-price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .m-price-l{display:flex;flex-direction:column;gap:4px}
  .m-price-l .price{font-size:34px}
  .m-price-l .muted{font-size:12px}
  .m-price-r{text-align:right;font-size:12px}
  .m-price-r .serif{font-size:22px}
  .m-price .rail-terms{padding:16px}
  .t-total .price{font-size:24px}
  .terms-today{font-size:14px}
  .m-due{margin:0;font-size:13px}
  .m-proof{display:flex;flex-direction:column;gap:4px}
  .m-trust{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500}
  .m-star{font-size:17px}

  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:6px 0 20px}
  .fact{gap:3px;padding:14px 0}
  .fact .k{font-size:10px}
  .fact .v{font-size:19px}

  .sec{gap:12px;padding:28px 0}
  .sec h2{font-size:26px}
  .desc{margin-top:0}
  .desc .lead{font-size:22px;line-height:1.3}
  .desc .body{font-size:15px;color:var(--stone)}
  .uses{grid-template-columns:1fr;gap:12px}
  .chk{gap:10px;font-size:15px}
  .chk-i{width:18px;height:18px}

  /* Jon, 2026-10-30: on phones the land id map pushed the page wider than the screen and cut off the
     floating button. aspect-ratio 2/1 with min-height 360px makes the box at least 720px wide, so on a
     phone the map is a near-square box that fits the screen width instead. */
  .map-landid,.map-tour{aspect-ratio:auto;min-height:0;width:100%;height:min(125vw,520px)}
  /* Jon, 2026-10-30: a little taller, and crop the bottom so the land id logo, Map Legend, zoom and 3D
     buttons (and "Open interactive map") are off the box. The same 160px comes off the top, which also
     covers the 66px title bar, so the property stays centered. */
  .map-landid:not(.map-tour) iframe{top:-160px;height:calc(100% + 320px)}
  .map-btns{position:static;display:flex;gap:8px;margin-top:12px}
  .btn.line.map-btn{flex:1;min-height:52px;font-size:13px;background:transparent}
  .map-ph{height:240px}
  .where{grid-template-columns:1fr;gap:16px}
  .copy-btn{min-height:52px;font-size:13px}

  /* Accordions: + / – rows */
  details.acc{padding:0;gap:0}
  details.acc > summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:18px 0}
  details.acc > summary h2{font-family:var(--sans);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;line-height:1.3;margin:0}
  details.acc > summary::after{content:"+";color:var(--stone);font-size:16px}
  details.acc[open] > summary::after{content:"–"}
  details.acc[open]{padding-bottom:24px}
  details.acc[open] > summary{margin-bottom:8px}
  details.acc + details.acc,.legal-acc{border-top:1px solid var(--hair)}
  .legal-acc{border-bottom:1px solid var(--hair)}
  .legal-text{margin:0;font-size:14px}
  dl.details{grid-template-columns:1fr}
  dl.details div.legal{display:none}
  .buy{grid-template-columns:1fr;gap:16px}
  .buy-card{padding:22px}
  .buy-card .price{font-size:40px}
  .buy-card .fin-price{font-size:26px}
  .g-line{margin:0;font-size:22px;line-height:1.2}
  .faq-sec > summary h2{margin-bottom:0}

  /* Not on the phone artboard */
  .review,.notquite{display:none}

  /* Rail: on phones only the "Text us!" block and the lead form remain */
  .pp-rail{position:static;margin-top:8px}
  .rail{border:0;padding:28px 0 8px;gap:14px;background:transparent;box-shadow:none;border-radius:0}
  .gal-play,.gal-n1 .gal-play,.gal-n2 .gal-play,.gal-n3 .gal-play{left:50%}
  .gal-play svg{padding:16px 14px 16px 18px}
  .m-ask{display:flex !important;align-items:center;gap:12px}
  .m-ask-l{display:flex;flex-direction:column;gap:2px;flex:1}
  .m-ask-l .serif{font-size:20px}
  .m-ask-l .muted{font-size:13px}
  .m-ask .btn{padding:0 18px;min-height:52px;font-size:13px}
  .rail-text{border-top:0;padding-top:0}
  .rail-text .btn,.text-listing input.field{min-height:52px}
  .rail-text .btn{font-size:13px}

  .disclaimer{margin:0;padding:8px 0 40px;font-size:11px}

  /* Sticky bottom bar */
  /* Two rows: the price on its own line, the buttons under it. "Reserve for $599" wrapped to three lines when all three shared one row at 360px. */
  .mbar{display:flex !important;flex-wrap:wrap;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--linen);border-top:1px solid var(--ink);padding:10px 20px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:8px 10px}
  .mbar-price{display:flex;flex-basis:100%;justify-content:center;align-items:baseline;gap:8px;line-height:1.1}
  .mbar-price .price{font-size:22px}
  .mbar-price .price small{font-size:11px}
  .mbar-price .muted{font-size:11px;letter-spacing:0.06em;white-space:nowrap}
  .mbar .btn{min-height:48px;padding:0 14px;font-size:13px;letter-spacing:0.1em;white-space:nowrap}
  .mbar-reserve{flex:1}

  .lb-fig{padding:0 0 84px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
}
.buy-go{margin-top:24px}
.buy-go .btn{width:100%}