/* SPRCLB · Build your box. build.html + the homepage #build section. Loads after sprclb.css and uses its tokens. */

.bx [hidden],.bxm [hidden]{display:none!important}
.bx,.bxm{--pick:var(--accent)}
@supports (background:color-mix(in srgb,red 50%,white)){.bx,.bxm{--pick:color-mix(in srgb,var(--accent) 58%,var(--paper))}}

/* ---------- the page section ---------- */
.bx{position:relative;background:var(--cream);border-radius:var(--r-panel);padding:28px 28px 56px}
.bx-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:14px 0 26px}
.bx-h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,5vw,80px);line-height:.95;letter-spacing:-.01em;margin:6px 0 0}
.bx-h1 em{font-style:italic}
.bx-script{font-family:var(--script);font-size:clamp(26px,2.2vw,34px);line-height:1;color:var(--olive);margin:0 0 0 .2em}
.bx-intro{max-width:40ch;margin-top:6px;font-size:17px}

.bx-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);grid-template-areas:"left head" "left right";grid-template-rows:auto 1fr;column-gap:44px;align-items:start}
.bx-head{grid-area:head}
.bx-left{grid-area:left}
.bx-right{grid-area:right}
.bx-left{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 100px);max-height:calc(100svh - 100px)}
.bx-dock{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}

/* ---------- the scene ---------- */
.bx-stage,.bxm-stage{position:relative;overflow:hidden;background-color:var(--wall,#EABBB7);transition:background-color .35s ease;isolation:isolate}
.bx-stage{border-radius:24px;aspect-ratio:4/3;max-height:calc(100vh - 300px);max-height:calc(100svh - 300px);min-height:340px;width:100%}
.bx-stage::before,.bxm-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 8%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),radial-gradient(90% 80% at 90% 100%,rgba(53,41,31,.10),rgba(53,41,31,0) 60%)}
.bx-stage::after,.bxm-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .21 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.bx-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;overflow:visible}
.bx-noscript{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#F1E6D4;z-index:1}
[data-night="date-night"] .bx-stage::after{opacity:.35}

/* price tag over the scene: HTML, never SVG text */
.bx-tag{position:absolute;z-index:2;right:16px;top:14px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px;
  padding:9px 16px 10px 20px;border-radius:18px;background:rgba(255,253,248,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -18px rgba(53,41,31,.5)}
.bx-tag-size{font-size:10px;color:var(--ink2)}
.bx-tag-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.02}
.bx-tag-price{display:flex;align-items:baseline;gap:10px}
.bx-tag-price [data-bx-price]{font-size:17px;font-weight:500;letter-spacing:.02em}
.bx-tag-price .small{font-size:12px;color:var(--ink2)}

.bx-lidbtn{position:absolute;z-index:2;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;
  border:1px solid rgba(53,41,31,.28);background:rgba(255,253,248,.9);color:var(--ink);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s ease,color .2s ease}
.bx-lidbtn::before{content:"";width:18px;height:12px;border-radius:2px;border:1.5px solid currentColor;border-top-width:4px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bx-lidbtn[aria-pressed="true"]::before{transform:translate(-2px,-3px) rotate(-8deg)}
.bx-lidbtn:hover{background:var(--paper)}

/* the quick 'how many' switch: floats over the picture on wide screens, docks under it on phones */
.bx-dock{position:relative}
.bx-quick{display:flex;align-items:center;gap:10px}
.bx-quick-l{font-size:10px;color:var(--ink2);white-space:nowrap}
.bx-quick-seg{display:flex;gap:3px;min-width:0}
.bx-q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;min-width:78px;padding:4px 12px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.bx-q b{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.bx-q small{font-size:10.5px;line-height:1.15;color:var(--ink2);white-space:nowrap}
.bx-q:hover{background:var(--cream2)}
.bx-q[aria-pressed="true"]{background:var(--pick);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bx-q[aria-pressed="true"] small{color:var(--ink)}
.bx-q:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:901px){
  .bx-quick{position:absolute;z-index:3;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:5px 5px 5px 18px;border-radius:999px;
    background:rgba(255,253,248,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -18px rgba(53,41,31,.5)}
  .bx-lidbtn{left:16px;top:14px;right:auto;bottom:auto}
}
@media (min-width:901px) and (max-width:1180px){
  .bx-list{columns:1}
  .bx-quick{padding-left:5px}
  .bx-quick-l{display:none}
  .bx-q{min-width:64px;padding:4px 8px}
}

/* step chips */
.bx-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-overflow-scrolling:touch}
.bx-chips::-webkit-scrollbar{display:none}
.bx-chips a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px 0 7px;border-radius:999px;border:1px solid var(--line);background:var(--paper);text-decoration:none;
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}
.bx-chips a .num{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:var(--cream2);font-family:var(--serif);font-size:14px;letter-spacing:0}
.bx-chips a:hover{border-color:rgba(53,41,31,.45)}
.bx-chips a[aria-current]{border-color:var(--ink);background:var(--pick)}
.bx-chips a[aria-current] .num{background:var(--paper)}
.bx-chips-m{display:none}
.bx-chips-d{flex-wrap:wrap;margin-bottom:10px;overflow:visible}

/* ---------- under the lid ---------- */
.bx-inside{flex:1 1 auto;min-height:150px;overflow:auto;overscroll-behavior:contain;background:var(--paper);border-radius:20px;padding:20px 24px 18px;
  box-shadow:0 1px 0 #E5D8C2,0 2px 0 #D9CBB4,0 18px 30px -22px rgba(53,41,31,.35)}
.bx-inside-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.bx-inside-head .h3{font-size:28px}
.bx-list{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.bx-list li{break-inside:avoid;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line2);font-size:13.5px;line-height:1.35;color:var(--ink)}
.bx-list .q{font-family:var(--serif);font-size:19px;line-height:1;text-align:right;color:var(--ink)}
.bx-list em{font-style:normal;color:var(--mute)}
.bx-list li.is-add .l::before{content:"+ ";color:var(--brass);font-weight:500}
.bx-need{margin:12px 0 0}

/* ---------- the steps ---------- */
.bx-right{min-width:0}
.bx-step{border:0;margin:0;padding:26px 0 28px;border-top:1px solid var(--line);min-width:0;scroll-margin-top:96px}
.bx-step:first-child{border-top:0;padding-top:6px}
.bx-step > * + *{margin-top:14px}
.bx-legend{display:flex;align-items:center;gap:12px;padding:0;float:left;width:100%;margin-bottom:12px}
.bx-legend + *{clear:both;margin-top:0}
.bx-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);font-family:var(--serif);font-size:18px;line-height:1}
.bx-hint{margin:0;color:var(--ink2)}
.bx-sub{border:0;padding:0;margin:0;min-width:0;display:block}
.bx-sub + .bx-sub{margin-top:22px}
.bx-sub > legend,.bx-sublabel{display:block;padding:0;margin-bottom:10px}
.bx-sub-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.bx-note{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.bx-note::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--brass);margin-top:6px}
.bx-preset{font-family:var(--script);font-size:24px;line-height:1.2;color:var(--olive)}
.bx-preset::before{display:none}

/* night cards */
.bx-nights{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bx-night{position:relative;display:block}
.bx-night input,.bx-size input,.bx-glass input,.bxm-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.bx-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:9px 18px 9px 9px;border-radius:18px;background:var(--paper);border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .25s ease}
.bx-sw{width:64px;height:64px;border-radius:11px;overflow:hidden;background:var(--sw);box-shadow:0 1px 0 rgba(53,41,31,.08),0 8px 14px -10px rgba(53,41,31,.55)}
.bx-sw svg,.bxm-sw svg{width:100%;height:100%;display:block;text-transform:none;letter-spacing:normal;font-weight:400;font-style:normal}
.bx-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.bx-t b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.02}
.bx-t span{font-size:13.5px;line-height:1.35;color:var(--mute)}
.bx-from{font-size:10.5px;color:var(--ink2);white-space:nowrap}
.bx-night:hover .bx-card{border-color:rgba(53,41,31,.4)}
.bx-night input:checked + .bx-card{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fff}
@supports (background:color-mix(in srgb,red 50%,white)){.bx-night input:checked + .bx-card{background:color-mix(in srgb,var(--sw) 16%,var(--paper))}}
.bx-night input:focus-visible + .bx-card,.bx-size input:focus-visible + span,.bx-glass input:focus-visible + span,.bxm-chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--paper)}

/* how many */
.bx-sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bx-size{position:relative;display:block}
.bx-size > span,.bx-glass > span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:62px;padding:10px 16px;border-radius:16px;border:1px solid rgba(53,41,31,.3);background:var(--paper);
  transition:background-color .2s ease,border-color .2s ease}
.bx-size b,.bx-glass b{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.bx-size b i{font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink2)}
.bx-size small,.bx-glass small{font-size:12.5px;color:var(--ink2)}
.bx-size input:checked + span,.bx-glass input:checked + span{background:var(--pick);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bx-size.is-off > span{opacity:.45}
.bx-size.is-off small{text-decoration:none}
.bx-size input:disabled{cursor:not-allowed}
.bx-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;background:none;border:0;padding:0;cursor:pointer}
.bx-ten{background:var(--cream2);border-radius:16px;padding:14px 18px}
.bx-ten p{margin:0}
.bx-ten-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px!important}
.bx-ten-links a{display:inline-flex;align-items:center;min-height:40px}

/* glasses */
.bx-glasses{display:flex;flex-wrap:wrap;gap:8px}
.bx-glass{position:relative;display:block;flex:1 1 150px}
.bx-static{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:14px 18px;border-radius:16px;background:var(--paper);border:1px dashed rgba(53,41,31,.3)}
.bx-static b{font-family:var(--serif);font-weight:400;font-size:21px}
.bx-static span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

/* extras */
.bx-pj{background:var(--paper);border-radius:18px;padding:16px 18px 6px}
.bx-pj .bx-hint{font-size:13px}
.bx-pj-rows{margin-top:10px}
.bx-pj-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-top:1px solid var(--line2)}
.bx-pj-k{display:flex;align-items:baseline;gap:12px}
.bx-pj-k b{font-family:var(--serif);font-size:24px;font-weight:400;min-width:30px}
.bx-pj-n{min-width:28px;text-align:center;font-size:16px;font-weight:500}
.bx-pj-row.is-m .bx-pj-n{margin-right:44px}
.bx-step-btns{display:inline-flex;align-items:center;gap:4px}
.bx-step-btns button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(53,41,31,.3);background:transparent;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease}
.bx-step-btns button:hover:not(:disabled){background:var(--cream2)}
.bx-step-btns button:disabled{opacity:.3;cursor:not-allowed}
.bx-guide{margin:4px 0 10px}
.bx-guide summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none}
.bx-guide summary::-webkit-details-marker{display:none}
.bx-guide-t{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 8px}
.bx-guide-t th,.bx-guide-t td{padding:6px 4px;border-top:1px solid var(--line2);text-align:left}
.bx-guide-t thead th{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-top:0}
.bx-adds .addon{min-height:62px}
.bx-adds .addon .t b{font-size:20px}
.bx-add-step{display:flex;align-items:center;gap:14px;min-height:62px;border-top:1px solid var(--line)}
.bx-add-step .t{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.35}
.bx-add-step .t b{font-family:var(--serif);font-weight:400;font-size:20px}
.bx-add-step .t span{font-size:13px;color:var(--mute)}
.bx-add-step .p{font-size:13px;font-weight:500;white-space:nowrap}
.bx-add-step output{min-width:24px;text-align:center;font-weight:500}
.bx-add.is-inc{cursor:default}
.bx-add.is-inc input{opacity:.55}
.bx-add.is-inc .p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}

/* when and where */
.bx .pill-opt input:checked + span{background:var(--pick)}
.bx-area{display:flex;flex-direction:column;gap:4px}
.bx-area .label .small{text-transform:none;letter-spacing:0;font-weight:400}
.bx .gift{margin-top:22px}

/* order */
.bx-cta{display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:1px solid var(--line)}
.bx-after{text-align:center;margin:0}
.bx-after a{font-size:inherit}

/* ---------- phones and small tablets: the scene docks at the top ---------- */
@media (max-width:900px){
  .bx{padding:30px 0 36px}
  .bx-head{order:0;align-items:center;text-align:center;padding:0 20px;margin:0 0 22px;gap:8px}
  .bx-script{margin:0}
  .bx-h1{font-size:clamp(48px,14vw,68px)}
  .bx-intro{font-size:16px;text-align:center;max-width:36ch}
  .bx-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .bx-grid > *,.bx-dock,.bx-stage,.bx-chips-m{min-width:0;max-width:100%}
  .bx-left,.bx-right{display:contents}
  .bx-dock{order:1;position:sticky;top:0;z-index:45;gap:0;margin:0;padding:6px 6px 0;background:var(--cream);border-radius:0 0 22px 22px;box-shadow:0 14px 18px -16px rgba(53,41,31,.4)}
  .bx-stage{aspect-ratio:auto;height:min(46vh,72vw);height:min(46svh,72vw);max-height:none;min-height:0;border-radius:18px}
  .bx-quick{padding:8px 2px 10px}
  .bx-quick-l{display:none}
  .bx-quick-seg{flex:1 1 auto;gap:3px;padding:3px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
  .bx-q{flex:1 1 0;min-width:0;min-height:46px;padding:4px 2px}
  .bx-q b{font-size:10.5px;letter-spacing:.11em}
  .bx-q small{font-size:10px}
  .bx-chips-d{display:none}
  .bx-form{order:2;padding:6px 20px 0}
  .bx-inside{order:3;margin:6px 16px 0;max-height:none;overflow:visible;flex:none}
  .bx-cta{order:4;margin:24px 20px 0}
  .bx-step{scroll-margin-top:calc(min(46svh,72vw) + 80px)}
  .bx-step:first-child{padding-top:18px}
  .bx-tag{left:8px;right:8px;top:8px;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 14px;border-radius:999px}
  .bx-tag-size{display:none}
  .bx-tag-title{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bx-tag-price{gap:7px}
  .bx-tag-price [data-bx-price]{font-size:14.5px}
  .bx-tag-price .small{font-size:11px}
  .bx-lidbtn{right:8px;bottom:8px;min-height:36px;padding:0 13px 0 11px;font-size:10px;gap:8px}
  .bx-lidbtn::before{width:15px;height:10px;border-top-width:3px}
  .bx-list{columns:1}
  .bx-card{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding-right:14px}
  .bx-sw{width:56px;height:56px}
  .bx-t b{font-size:22px}
  .bx-t span{font-size:13px}
}
/* short phones (SE and friends): a slightly shorter picture so the form keeps room to breathe */
@media (max-width:900px) and (max-height:740px){
  .bx-stage{height:min(38vh,64vw);height:min(38svh,64vw)}
  .bx-step{scroll-margin-top:calc(min(38svh,64vw) + 80px)}
  .bx-q{min-height:42px}
}
@media (max-width:420px){
  .bx-card{grid-template-columns:56px minmax(0,1fr);row-gap:4px}
  .bx-sw{grid-row:span 2}
  .bx-from{grid-column:2;font-size:10px}
  .bx-size > span{padding:10px 12px}
  .bx-size b i{display:block}
  .bx-size .bx-dot{display:none}
}
@media (max-width:600px){
  .bx-add-step{flex-wrap:wrap;gap:6px 14px;padding:12px 0}
  .bx-add-step .t{flex:1 1 100%}
  .bx-add-step .bx-step-btns{margin-left:auto}
}
@media (min-width:901px) and (max-height:820px){
  .bx-stage{min-height:300px;max-height:calc(100vh - 236px);max-height:calc(100svh - 236px)}
  .bx-inside{min-height:118px;padding-top:14px}
  .bx-inside-head .h3{font-size:24px}
}

/* ---------- homepage: Build your box ---------- */
.bxm-wrap{margin-top:var(--gut)}
.bxm{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"intro stage" "copy stage";grid-template-rows:auto 1fr;background:var(--cream);border-radius:var(--r-panel);overflow:hidden;overflow:clip}
.bxm-intro{grid-area:intro;padding:64px 56px 0;display:flex;flex-direction:column;gap:18px}
.bxm-intro .h2{margin-top:-2px}
.bxm-intro .body{max-width:44ch}
.bxm-copy{grid-area:copy;padding:24px 56px 56px;display:flex;flex-direction:column;gap:20px}
.bxm-stage{grid-area:stage}
.bxm-field{border:0;margin:0;padding:0;min-width:0}
.bxm-field legend{padding:0;margin-bottom:10px}
.bxm-chips{display:flex;flex-wrap:wrap;gap:8px}
.bxm-nights{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bxm-nights .bxm-chip > span{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;height:100%;min-height:0;padding:6px 6px 10px;border-radius:16px;white-space:normal;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;letter-spacing:0;text-transform:none;line-height:1.02}
.bxm-nights .bxm-sw{width:100%;height:auto;aspect-ratio:1/1;border-radius:11px;box-shadow:0 1px 0 rgba(53,41,31,.08),0 8px 14px -10px rgba(53,41,31,.55)}
.bxm-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bxm-sizes .bxm-chip > span{display:flex;justify-content:center;padding:0 6px;width:100%}
.bxm-chip{position:relative;display:block}
.bxm-chip > span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 7px;border-radius:999px;border:1px solid rgba(53,41,31,.3);background:var(--paper);
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}
.bxm-size > span{padding:0 16px}
.bxm-sw{display:inline-block;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(53,41,31,.12)}
.bxm-chip input:checked + span{background:var(--pick);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bxm-chip.is-off > span{opacity:.4;text-decoration:line-through}
.bxm-note{margin:10px 0 0}
.bxm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);margin-top:4px}
.bxm-price{display:flex;flex-direction:column;gap:4px;margin:0}
.bxm-total{font-family:var(--serif);font-size:46px;line-height:1}
.bxm-small{margin:0}
.bxm-stage{min-height:560px}
.bxm-stage .bx-scene{position:absolute;inset:0}
.bxm-tag{position:absolute;z-index:2;left:22px;top:20px;display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:16px;background:rgba(255,253,248,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bxm-tag b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.05}
.bxm-tag .label{font-size:10.5px;color:var(--ink2)}
@media (max-width:960px){
  .bxm{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "copy";grid-template-rows:auto}
  .bxm-intro{padding:36px 22px 22px;gap:14px}
  .bxm-stage{min-height:0;aspect-ratio:4/3}
  .bxm-copy{padding:20px 22px 36px;gap:18px}
  .bxm-tag{left:10px;top:10px;flex-direction:row;align-items:baseline;gap:10px;padding:6px 14px;border-radius:999px}
  .bxm-tag b{font-size:18px}
  .bxm-tag .label{order:2;font-size:9.5px}
  .bxm-total{font-size:40px}
  .bxm-nights{gap:6px}
  .bxm-nights .bxm-chip > span{padding:4px 3px 8px;gap:6px;font-size:14px;border-radius:14px}
  .bxm-nights .bxm-sw{border-radius:10px}
  .bxm-sizes{gap:6px}
  .bxm-sizes .bxm-chip > span{font-size:11px;letter-spacing:.1em;padding:0 2px}
  .bxm-field legend{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .bx-stage,.bxm-stage,.bx-card,.bx-lidbtn::before{transition:none}
}
@media (forced-colors:active){
  .bx-night input:checked + .bx-card,.bx-size input:checked + span,.bx-glass input:checked + span,.bxm-chip input:checked + span,.bx-chips a[aria-current]{outline:3px solid Highlight;outline-offset:2px}
}

/* sign-off pass: in the desktop column the list scrolls, so a soft shadow shows there is more above or below */
@media (min-width:901px){
  .bx-inside{background:
    linear-gradient(#FFFDF8 30%,rgba(255,253,248,0)) center top/100% 40px no-repeat local,
    linear-gradient(rgba(255,253,248,0),#FFFDF8 70%) center bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(53,41,31,.18),rgba(53,41,31,0)) center top/100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(53,41,31,.18),rgba(53,41,31,0)) center bottom/100% 14px no-repeat scroll,
    #FFFDF8}
}
