/* ===== L'Artisan — store pages (catalog + bundle) =====
   Shared component styles for the multi-page store. Relies on the design
   tokens (:root vars), base elements, header/footer/nav, and .club styles
   defined in styles.css. */

/* Inner-page header (clears the fixed site header) */
.page-head{padding:150px 0 8px;text-align:center;background:radial-gradient(120% 90% at 50% 0%, rgba(107,78,42,.18), transparent 60%)}
.page-head .eyebrow{display:block;margin-bottom:18px}
.page-head h1{font-size:clamp(34px,5vw,58px);color:var(--brass-bright);margin-bottom:18px;letter-spacing:.02em}
.page-head p{max-width:620px;margin:0 auto;font-size:20px;color:var(--parchment)}
.page-head .page-head-specs{margin-top:18px;margin-bottom:0}
/* Italic subtitle under a page-head heading (same treatment as .story-sub). */
.page-head .page-sub{font-family:var(--body);font-style:italic;font-size:clamp(17px,2.2vw,22px);color:var(--parchment-dim);letter-spacing:.01em}

/* ===== Wood Chips page ===== */
/* Intro line that sits above the flavour explorer (was in the page-head; keeps
   the same centred, parchment treatment now that it lives lower on the page). */
.wc-intro{max-width:620px;margin:0 auto 40px;text-align:center;font-size:20px;color:var(--parchment)}
/* Tighten the space between the purchase block (carousel + pricing + Buy It Now)
   and the flavour intro below it, so the "Every kit ships…" line sits close to
   the button instead of across a full, empty section gap. */
.wc-buy-band{padding-bottom:8px}
.wc-flav-band{padding-top:30px}

/* ===== Our Catalog — flavour grid ===== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{border:1px solid var(--line);border-radius:4px;padding:34px 30px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));display:flex;flex-direction:column;transition:border-color .35s,transform .35s}
.cat-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.cat-tin{width:104px;height:104px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#000;margin-bottom:22px}
.cat-tin img{width:100%;height:100%;object-fit:cover}
.cat-card h3{font-size:27px;margin-bottom:4px}
.cat-card .pair{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold);margin-bottom:16px}
.cat-card .note{font-size:17px;color:var(--parchment);line-height:1.55;margin-bottom:18px;flex:1}
.cat-card .best{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--parchment-dim)}
.cat-card .best b{color:var(--brass-bright);font-weight:600}
.cat-cta{text-align:center;margin-top:54px}

/* ===== Bundle page ===== */
.bundle-wrap{max-width:920px;margin:0 auto}
/* Kit bullets above the pricing cards — same markup/style as the Signature Kit's
   .product-points, but laid out 2-up and centred so they stay compact and don't
   crowd the pricing cards below. Stacks to one column on narrow phones. */
.product-points.kit-points{grid-template-columns:1fr 1fr;gap:10px 30px;max-width:680px;margin:2px auto 32px;justify-items:start}
@media(max-width:600px){ .product-points.kit-points{grid-template-columns:1fr;max-width:340px;gap:9px;margin:0 auto 26px} }
/* Kit image between the intro and the bundle cards (same cutout + soft shadow
   as the product hero), moderate size so it doesn't dominate. */
.bundle-hero{max-width:330px;margin:0 auto 42px}
.bundle-hero img{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,0.55))}
/* Photo hero (glasses): a real photograph rather than a cutout, so frame it. */
.bundle-hero-photo{max-width:440px}
.bundle-hero-photo img{border:1px solid var(--line);border-radius:8px}
/* 360° multi-view grid hero (kit): a wider dark-background photo grid, so give it
   a little more room to stay legible; same centered position + soft shadow. */
.bundle-hero-360{max-width:560px}
.bundle-hero-360 img{border-radius:8px}
.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bundle-card{position:relative;border:1px solid var(--line);border-radius:5px;padding:36px 26px 30px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));cursor:pointer;transition:border-color .3s,transform .3s,box-shadow .3s;text-align:center}
.bundle-card:hover{transform:translateY(-3px)}
.bundle-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 24px 60px rgba(0,0,0,.5)}
.bundle-radio{width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;margin:0 auto 18px;position:relative;transition:.3s}
.bundle-card.selected .bundle-radio{background:var(--gold)}
.bundle-card.selected .bundle-radio::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--ink)}
.bundle-card h3{font-size:26px;color:var(--brass-bright);margin-bottom:4px}
.bundle-sub{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--parchment-dim);margin-bottom:18px}
.bundle-price{font-family:var(--display);font-size:34px;color:var(--brass-bright);line-height:1}
.bundle-was{display:block;margin-top:6px;font-size:16px;color:var(--parchment-dim);text-decoration:line-through}
.bundle-save{display:inline-block;margin-top:12px;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--ink);background:var(--brass);border-radius:2px;padding:4px 10px}
.bundle-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--ink);background:var(--gold);padding:5px 14px;border-radius:2px}
/* Two badges on one card (e.g. Most popular + Best value): a centered row of
   pills sitting on the card's top edge, same look as the single badge. */
.bundle-badges{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:flex;gap:6px;white-space:nowrap}
.bundle-badges .bundle-badge{position:static;top:auto;left:auto;transform:none;font-size:10px;padding:4px 10px;letter-spacing:.12em}
.bundle-badges .bundle-badge:last-child{background:var(--brass-bright)}
.bundle-note{font-size:15px;color:var(--parchment-dim);margin-top:16px}
.bundle-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.bundle-cta .btn{min-width:220px;justify-content:center}
.bundle-fine{text-align:center;color:var(--parchment-dim);font-size:15px;margin-top:22px;max-width:520px;margin-left:auto;margin-right:auto}
/* Customer review card below the CTA — static image, centered, consistent spacing */
.bundle-review{margin:44px auto 0;max-width:440px}
.bundle-review img{width:100%;display:block;border-radius:10px}

/* Spinning-glasses hero is a carousel (lifestyle + the three designs). A square
   1:1 frame keeps the lifestyle shot's right-side callouts legible; object-fit
   cover trims only a sliver off the near-square design shots — no letterboxing. */
.bundle-carousel-hero{max-width:460px;margin:0 auto 40px}
.bundle-carousel-hero .carousel-slide{aspect-ratio:1/1}
.bundle-carousel-hero .carousel-slide img{object-fit:cover;object-position:center}

/* Design picker (configurator): one dropdown per glass in the chosen set. */
.design-picker{max-width:520px;margin:30px auto 0}
.design-title{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--gold);text-align:center;margin-bottom:16px}
.design-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.design-row .design-label{flex:0 0 96px;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--parchment-dim)}
.design-select{flex:1;color:var(--parchment);border:1px solid var(--line);border-radius:4px;padding:12px 40px 12px 14px;font-family:var(--body);font-size:16px;cursor:pointer;appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A868' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center/12px, linear-gradient(160deg,var(--walnut-2),var(--ink))}
.design-select:focus{outline:none;border-color:var(--gold)}

/* Demo video below the CTA — same player treatment as the home page video */
.bundle-video{display:flex;justify-content:center;margin-top:44px}

@media(max-width:820px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .page-head{padding-top:128px}
  .story-head{padding-top:128px}
  .cat-grid{grid-template-columns:1fr}
  .bundle-cta .btn{width:100%}

  /* Compact bundle cards: a tight row (radio · name/desc · price/save) so all
     three fit on a phone screen without a long scroll. Same content + tags +
     selection highlight, smaller footprint. */
  .bundle-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto;gap:16px}
  .bundle-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"radio name price" "radio sub was" "radio note save";
    align-items:center;column-gap:14px;row-gap:1px;text-align:left;padding:14px 16px;
  }
  .bundle-card:hover{transform:none}
  .bundle-radio{grid-area:radio;margin:0;width:20px;height:20px}
  .bundle-card.selected .bundle-radio::after{inset:5px}
  .bundle-card h3{grid-area:name;font-size:20px;margin:0;line-height:1.15}
  .bundle-sub{grid-area:sub;margin:0;font-size:11px;letter-spacing:.12em}
  .bundle-price{grid-area:price;font-size:25px;line-height:1;text-align:right}
  .bundle-was{grid-area:was;margin:0;font-size:14px;text-align:right}
  .bundle-save{grid-area:save;margin:0;justify-self:end;font-size:10px;padding:3px 8px}
  .bundle-note{grid-area:note;margin:3px 0 0;font-size:12px;line-height:1.25}
  .bundle-badge{top:-9px;font-size:10px;padding:4px 9px;letter-spacing:.12em}
  .bundle-badges{top:-9px}
  .bundle-badges .bundle-badge{top:auto;padding:4px 9px}

  /* Flavour guide (wood-chips) — scaled down so the widget isn't oversized on phones. */
  .flav{gap:22px}
  .flav-tab{font-size:15px;padding:8px 12px}
  .flav-panel{padding:22px;min-height:0}
  .flav-panel .tin{gap:13px;margin-bottom:16px}
  .flav-panel .tin img{width:66px;height:66px}
  .flav-panel h3{font-size:21px}
  .flav-panel .pair{font-size:11px}
  .flav-panel .note{font-size:15px;margin-bottom:16px}
  .flav-panel .best{font-size:12px}

  /* Oak Club (wood-chips) — compact the membership widget on phones so it isn't
     oversized. Card padding, copy and list all scale down; desktop unchanged.
     h3 + last note carry inline sizes, so override those with !important. */
  .club{padding:44px 0}
  .club-inner{gap:26px}
  .club-copy h2{font-size:26px;margin-bottom:14px}
  .club-copy p{font-size:16px;margin-bottom:14px}
  .club-card{padding:24px 22px}
  .club-card .ribbon{font-size:11px;margin-bottom:14px;letter-spacing:.2em}
  .club-card h3{font-size:20px!important;margin-bottom:4px!important}
  .club-card .price{font-size:18px;margin:6px 0 16px}
  .club-card .price small{font-size:14px}
  .club-card ul{margin:16px 0}
  .club-card li{padding:10px 0;font-size:15px;gap:11px}
  .club-card li svg{width:16px;height:16px}
  .club-card p{font-size:13px!important}
}

/* ===== Checkout / order form ===== */
.checkout-wrap{max-width:600px;margin:0 auto}
.order-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-radius:5px;padding:18px 22px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));margin-bottom:30px}
.order-summary .os-label{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--gold);margin-bottom:5px}
.order-summary .os-bundle{font-family:var(--display);font-size:19px;color:var(--brass-bright)}
.order-summary .os-designs{font-family:var(--body);font-size:14px;color:var(--parchment-dim);margin-top:5px}
.order-summary .os-total{margin-left:auto;font-family:var(--display);font-size:28px;color:var(--brass-bright)}
.order-summary .os-change{font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--parchment-dim);border-bottom:1px solid var(--line);padding-bottom:2px;flex:none}
.order-summary .os-change:hover{color:var(--brass-bright)}

.checkout-form .field{margin-bottom:18px}
.checkout-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkout-form label{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold);margin-bottom:7px}
.checkout-form input,.checkout-form select,.checkout-form textarea{width:100%;background:rgba(14,11,8,.55);border:1px solid var(--line);border-radius:3px;color:var(--parchment);font-family:var(--body);font-size:17px;padding:13px 15px;transition:border-color .25s}
.checkout-form textarea{resize:vertical;min-height:70px}
.checkout-form select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A0722A' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{outline:none;border-color:var(--gold)}
.checkout-form input::placeholder,.checkout-form textarea::placeholder{color:var(--parchment-dim);opacity:.7}

.pay-title{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold);margin-bottom:10px}
.pay-opts{display:grid;gap:12px}
.pay-opt{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--line);border-radius:4px;padding:16px 18px;cursor:pointer;transition:border-color .25s,background .25s;position:relative}
.pay-opt.selected{border-color:var(--gold);background:rgba(160,114,42,.08)}
.pay-opt input{position:absolute;opacity:0;width:0;height:0}
.pay-radio{flex:none;width:20px;height:20px;border:1px solid var(--gold);border-radius:50%;margin-top:2px;position:relative;transition:.25s}
.pay-opt.selected .pay-radio{background:var(--gold)}
.pay-opt.selected .pay-radio::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--ink)}
.pay-opt input:focus-visible+.pay-radio{outline:2px solid var(--brass);outline-offset:2px}
.pay-text b{display:block;font-family:var(--display);font-size:18px;color:var(--brass-bright);font-weight:500}
.pay-text small{display:block;font-size:14px;color:var(--parchment-dim);margin-top:2px}
/* Disabled payment option (e.g. Whish — shown but not selectable yet) */
.pay-opt.is-disabled{opacity:.55;cursor:not-allowed}
.pay-opt.is-disabled .pay-radio{border-color:var(--parchment-dim)}
.pay-opt.is-disabled .pay-text b{color:var(--parchment)}
.pay-soon{display:inline-block;margin-left:8px;vertical-align:middle;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:500;color:var(--brass);background:rgba(160,114,42,.12);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}

.checkout-submit{width:100%;justify-content:center;font-size:16px;padding:17px;margin-top:26px}
.checkout-submit.is-loading{opacity:.7;cursor:default}
.privacy{text-align:center;font-size:13px;color:var(--parchment-dim);margin-top:14px}

/* ===== Thank-you page ===== */
.thankyou{max-width:600px;margin:0 auto;text-align:center}
.ty-mark{width:74px;height:74px;margin:0 auto 26px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;background:rgba(160,114,42,.1)}
.ty-mark svg{width:34px;height:34px;stroke:var(--brass-bright);fill:none;stroke-width:2}
.thankyou h1{margin-bottom:18px}
.thankyou p{font-size:19px;color:var(--parchment);margin-bottom:14px;line-height:1.6}
.thankyou .ty-note{font-size:15px;color:var(--parchment-dim)}
.ty-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ty-actions .btn{min-width:210px;justify-content:center}

@media(max-width:520px){
  .checkout-form .field-row{grid-template-columns:1fr;gap:0}
  .order-summary .os-total{margin-left:0}
  .ty-actions .btn{width:100%}
}

/* ===== Our Story page ===== */
/* Page title + subtitle above the hero — its own padded band that clears the
   fixed header (same clearance as .page-head). Cinzel gold title, elegant sub. */
.story-head{padding:150px 0 14px;text-align:center}
.story-head h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(30px,4.4vw,50px);line-height:1.14;color:var(--brass-bright);margin-bottom:16px}
.story-head .story-sub{font-family:var(--body);font-style:italic;font-size:clamp(17px,2.2vw,22px);color:var(--parchment-dim);letter-spacing:.01em}
/* Hero image — dark, moody, no text overlay (sits directly below .story-head). */
.story-hero{position:relative;min-height:70vh;max-height:75vh;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line-soft)}
.story-hero img{width:100%;height:75vh;object-fit:contain;object-position:center;display:block}
.story-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,11,8,.6),transparent 24%,transparent 66%,rgba(14,11,8,.85))}
/* Below the desktop breakpoint, drop ALL height constraints on the hero and let it
   size to the image itself — the image scales to full width at its natural height
   (no fixed vh box, no top/bottom letterbox), sitting snug under the title band. */
@media(max-width:960px){
  .story-hero{min-height:0;max-height:none;height:auto}
  .story-hero img{width:100%;height:auto;object-fit:contain;display:block}
}
/* Centered intro copy (gold eyebrow + headline + body + brand + tagline). */
.story-intro{max-width:760px;margin:0 auto;text-align:center}
.story-intro .eyebrow{display:block;margin-bottom:22px}
.story-intro h2{font-size:clamp(28px,4vw,44px);color:var(--brass-bright);margin-bottom:26px;line-height:1.25;letter-spacing:.02em}
.story-intro p{font-size:19px;color:var(--parchment);line-height:1.8;margin-bottom:20px}
.story-intro .story-brand{font-family:var(--display);letter-spacing:.18em;color:var(--brass-bright);font-size:20px;margin-top:36px;margin-bottom:8px}
.story-intro .story-tagline{font-family:var(--util);text-transform:uppercase;letter-spacing:.3em;font-size:14px;color:var(--gold);margin-bottom:0}
.story-lead{max-width:720px;margin:0 auto;text-align:center;font-size:20px;color:var(--parchment);line-height:1.7}
.story-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:60px}
.story-block.reverse .story-media{order:2}
.story-media{border:1px solid var(--line);border-radius:5px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));aspect-ratio:4/3;overflow:hidden}
.story-media img{width:100%;height:100%;object-fit:cover;display:block}
.story-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;color:var(--parchment-dim);text-align:center;padding:24px}
.story-ph svg{width:38px;height:38px;stroke:var(--gold);fill:none;stroke-width:1.3;opacity:.7}
.story-ph span{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:11px;opacity:.8}
.story-copy .eyebrow{display:block;margin-bottom:14px}
.story-copy h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:16px;line-height:1.2}
.story-copy p{font-size:18px;color:var(--parchment);line-height:1.7;margin-bottom:14px}
.story-ph-text{color:var(--parchment-dim);font-style:italic}
.story-quote{max-width:760px;margin:66px auto 0;text-align:center;font-family:var(--display);font-size:clamp(22px,3vw,30px);color:var(--brass-bright);line-height:1.45}
.story-cta{text-align:center;margin-top:58px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:720px){
  .story-block{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .story-block.reverse .story-media{order:0}
  .story-media{aspect-ratio:16/10;max-width:440px;margin:0 auto;width:100%}
  .story-copy h2{font-size:23px}
  .story-copy p{font-size:16px}
  .story-cta .btn{width:100%;max-width:360px}
}

/* ===== Oak Club sign-up modal (catalog page) ===== */
.club-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.club-modal.open{display:flex}
.club-backdrop{position:absolute;inset:0;background:rgba(8,6,4,.72);backdrop-filter:blur(3px)}
.club-dialog{position:relative;z-index:1;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));padding:38px 32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.club-dialog .eyebrow{display:block;margin-bottom:12px}
.club-dialog h3{font-size:28px;color:var(--brass-bright);margin-bottom:12px;line-height:1.15}
.club-modal-lede{font-size:16px;color:var(--parchment-dim);line-height:1.55;margin-bottom:24px}
.club-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--brass);font-size:30px;line-height:1;cursor:pointer;padding:4px;transition:color .2s}
.club-close:hover{color:var(--brass-bright)}

@media(max-width:520px){
  .club-dialog{padding:32px 22px 26px}
  .club-dialog h3{font-size:24px}
}

/* ===== Image lightbox (product + story images) =====
   Full-screen dark overlay showing one image scaled to fit. Injected once per
   page by main.js and opened by clicking any [data-lightbox] image. Close by
   clicking the backdrop or pressing Escape. Multi-image sets (the carousels and
   the Up-close gallery) are browsable inside the lightbox — click the left/right
   half of the image on desktop, swipe on mobile — with no visible arrows. */
[data-lightbox] img,img[data-lightbox]{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.92);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;cursor:zoom-out;-webkit-tap-highlight-color:transparent}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;object-fit:contain;display:block;border-radius:2px;box-shadow:0 24px 80px rgba(0,0,0,.6);transform:scale(.985);transition:transform .22s ease;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lightbox.open img{transform:scale(1)}
/* Multi-image sets use the image itself as the (invisible) prev/next surface. */
.lightbox.is-multi img{cursor:pointer}
/* Gallery captions must not intercept the click meant for the image beneath. */
.gal-cap{pointer-events:none}
body.lightbox-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .lightbox,.lightbox img{transition:none}
}