/* ============================================================================
   sections/products.css — Products showcase (banner + filter + cards + modal)
   ----------------------------------------------------------------------------
   Rebuilt 1:1 against the client's reference mockup. Cards are rendered by
   assets/js/products.js from the Store (seeded by assets/data/products.js).
   ========================================================================== */

/* ============================================================================
   "OUR PRODUCTS" BANNER — the Bengal delta at first light
   ----------------------------------------------------------------------------
   Full-bleed band: paddy-sunrise photo right, dissolving into Midnight Navy;
   faint jamdani weave over the navy; golden paddy-stalk art at the left
   margin; the "Rooted in Bengal" seal riding the torn gold deckle edge lower
   right, with a shapla blossom ghosted at the very page edge.
   ========================================================================== */
.section--products { padding-top: 0; padding-inline: 0; overflow: hidden; }
/* The catalogue runs on a wider stage than the 1240px editorial column — the
   reference's three-across plates nearly touch the page margins. (Scoped to
   the DIRECT child so the banner's own .container keeps the standard measure.) */
.section--products > .container { max-width: min(1478px, 100%); }
.products-banner {
  position: relative; width: 100%;
  min-height: clamp(280px, 24vw, 420px);   /* compacted */
  margin-bottom: clamp(3rem, 5vw, 4.4rem);   /* room for the seal's overhang */
  display: flex; align-items: center;
}
/* the photograph, full-bleed right, feathered into the navy left and top */
.pb-scene {
  position: absolute; inset: 0 0 0 auto; width: min(62%, 1080px);
  background: url("../../img/scene/paddy-sunrise.webp") center right / cover no-repeat;
  -webkit-mask:
    linear-gradient(90deg,  transparent 0%, #000 30%),
    linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.35) 100%);
  -webkit-mask-composite: source-in;
          mask:
    linear-gradient(90deg,  transparent 0%, #000 30%),
    linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.35) 100%);
          mask-composite: intersect;
}
/* navy wash: keeps the title side pure Midnight Navy and re-darkens the base */
.products-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,  var(--indigo-900) 30%, rgba(8,27,69,.55) 46%, transparent 62%),
    linear-gradient(180deg, transparent 62%, rgba(8,27,69,.55) 96%);
}
/* faint jamdani weave over the navy half — the reference's patterned ground */
.pb-weave {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../../img/patterns/jamdani-gold.svg") 0 0 / 150px auto repeat;
  opacity: .05;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent 75%);
          mask: linear-gradient(90deg, #000 45%, transparent 75%);
}
/* the golden paddy stalk, cropped from the client's art, feathered into place */
.pb-stalk {
  position: absolute; left: 0; top: 6%; z-index: 2; height: 88%; width: auto;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(90deg, #000 62%, transparent 96%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask:
    linear-gradient(90deg, #000 62%, transparent 96%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
          mask-composite: intersect;
}
.pb-inner { position: relative; z-index: 3; width: 100%; }
.pb-copy { max-width: 36em; padding-left: clamp(4rem, 9vw, 10rem); }
.pb-title { line-height: .9; margin: 0; }
.pb-our {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 3.1rem); color: var(--gold-300);
  letter-spacing: .015em;
}
.pb-products {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3.4rem, 7.2vw, 6.4rem); color: var(--rice-white);
  letter-spacing: .004em; margin-top: -.04em;
}
/* thin gold rule with a lotus-diamond at its heart */
.pb-rule {
  display: flex; align-items: center; gap: .55rem;
  margin: 1.05rem 0 1.6rem; color: var(--gold-500);
  width: min(100%, 24em);
}
.pb-rule i { height: 1px; flex: 1; }
.pb-rule i:first-child { background: linear-gradient(90deg, rgba(200,162,74,.15), var(--gold-500)); }
.pb-rule i:last-child { background: linear-gradient(90deg, var(--gold-500), rgba(200,162,74,.15)); }
.pb-rule svg { width: 22px; height: 22px; flex: none; }
.pb-sub {
  font-family: var(--font-serif); font-size: clamp(1.08rem, 1.5vw, 1.38rem);
  color: var(--gold-100); opacity: .92; max-width: 18.5em; line-height: 1.55;
}
/* the seal riding the torn edge, lower right — as drawn in the reference */
.pb-seal {
  position: absolute; z-index: 5;
  right: clamp(1.2rem, 5vw, 5.5rem); bottom: -34px;
  width: clamp(200px, 17vw, 252px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.15rem 1.4rem 1.3rem;
  border: 1px solid rgba(200,162,74,.7); border-radius: 10px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(20,49,113,.5), transparent 60%),
    rgba(6,15,38,.88);
  color: var(--gold-300); font-family: var(--font-serif);
  box-shadow: 0 22px 50px -22px rgba(1,3,15,.9);
}
.pb-lotus { width: 40px; height: auto; color: var(--gold-300); }
.pb-seal span { font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.55; letter-spacing: .015em; }
/* the shapla blossom ghosted at the very page edge, beside the seal */
.pb-shapla {
  position: absolute; z-index: 4; right: 0; bottom: -44px;
  width: clamp(72px, 7vw, 112px); pointer-events: none;
  -webkit-mask: radial-gradient(150% 130% at 100% 55%, #000 52%, transparent 82%);
          mask: radial-gradient(150% 130% at 100% 55%, #000 52%, transparent 82%);
}
/* the torn gold deckle edge */
.pb-torn {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; height: 34px;
  background: url("../../img/ornaments/torn-edge.svg") center bottom / 100% 100% no-repeat;
  filter: drop-shadow(0 -1px 6px rgba(200,162,74,.18));
}

@media (max-width: 860px) {
  .pb-scene { width: 100%; opacity: .45; -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%); }
  .pb-seal { position: static; margin: 1.4rem auto 0; bottom: auto; }
  .products-banner { flex-direction: column; justify-content: center; padding-block: 2.5rem 3rem; margin-bottom: 2.4rem; }
  .pb-copy { padding-left: clamp(3rem, 19vw, 7.5rem); }  /* clear of the stalk art */
  .pb-shapla { display: none; }
}
@media (max-width: 520px) {
  .pb-stalk { opacity: .55; }
}

/* ============================================================================
   FILTER — circled gold line-art category glyphs with hairline dividers
   ----------------------------------------------------------------------------
   Thin-gold roundels holding Bengali line-art food glyphs, names beneath in a
   fine serif, a 1px gold divider between neighbours. The active category keeps
   its navy ground and earns a second, outer ring + a tapered gold underline.
   ========================================================================== */
.filter-bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
}
.cat-filter {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  background: none; border: 0; cursor: pointer;
  padding: .2rem clamp(.6rem, 1.7vw, 1.7rem);
  color: var(--frost-100);
  transition: color var(--dur) var(--ease);
}
/* the hairline divider between neighbours */
.cat-filter + .cat-filter::before {
  content: ""; position: absolute; left: 0;
  top: clamp(10px, 1.2vw, 20px); height: clamp(30px, 3.2vw, 46px); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,162,74,.4), transparent);
}
.cat-round {
  position: relative;
  display: grid; place-items: center;
  width: clamp(54px, 5.6vw, 78px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.3px solid rgba(200,162,74,.5);
  color: var(--gold-500);
  background: radial-gradient(120% 120% at 50% 30%, rgba(200,162,74,.07), transparent 70%);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cat-ico { width: 52%; height: 52%; }
.cat-label {
  font-family: var(--font-serif); font-size: clamp(.95rem, 1.1vw, 1.14rem);
  letter-spacing: .02em; color: inherit; white-space: nowrap;
  position: relative; padding-bottom: .38rem;
}
.cat-filter:hover .cat-round { border-color: var(--gold-300); color: var(--gold-300); transform: translateY(-2px); }
/* active: brighter glyph + a second, outer ring — never a solid gold fill */
.cat-filter.is-active .cat-round { border-color: rgba(216,189,114,.9); color: var(--gold-300); }
.cat-filter.is-active .cat-round::after {
  content: ""; position: absolute; inset: -7px;
  border: 1px solid rgba(200,162,74,.55); border-radius: 50%;
}
/* …and a tapered gold underline beneath its name */
.cat-filter.is-active .cat-label::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 30%, var(--gold-500) 70%, transparent);
}
@media (max-width: 700px) {
  .cat-filter + .cat-filter::before { display: none; }
  .cat-filter { padding: .2rem .55rem; }
  .cat-label { font-size: .82rem; }
}

/* ---- Search — one gold hairline, quiet until needed --------------------- */
.cat-search {
  display: flex; align-items: center; gap: .6rem;
  max-width: 460px; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(200,162,74,.35);
  color: var(--gold-500);
  transition: border-color var(--dur) var(--ease);
}
.cat-search:focus-within { border-color: var(--gold-300); }
.cat-search svg { width: 17px; height: 17px; flex: none; }
.cat-search input {
  flex: 1; background: none; border: 0; outline: none;
  font-family: var(--font-serif); font-size: 1.05rem;
  color: var(--frost-100); letter-spacing: .01em;
}
.cat-search input::placeholder { color: rgba(233,219,178,.6); font-style: italic; }
.cat-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============================================================================
   PRODUCT CARDS — horizontal gold-framed plates with scooped "ticket" corners
   ----------------------------------------------------------------------------
   Photo LEFT (~51%), Midnight-Navy panel RIGHT: category eyebrow (dash + ✦),
   serif name, a line of copy, origin with a pin, "Explore Product ⟶" pinned to
   the panel foot over a long gold underline. The gilt frame is drawn as four
   corner SVGs + hairline edges so every corner carries the reference's scoop;
   a CSS mask carves the same scoops out of the photo/panel beneath.
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.1rem, 1.6vw, 1.5rem);
}
.product-card.is-hidden { display: none; }

.product-card {
  position: relative; cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 24px 50px -28px rgba(1,3,15,.85);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 36px 68px -28px rgba(1,3,15,.95); }
.pc-frame {
  position: relative; height: 100%;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(163deg, #0E2757 0%, #0A2050 45%, #081B45 100%);
  display: grid; grid-template-columns: 46% 1fr;
  min-height: clamp(280px, 24vw, 336px);   /* full height — client: keep product cards spacious */
  -webkit-mask:
    radial-gradient(circle 5.4px at 26px 0,               transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at calc(100% - 26px) 0,   transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 26px 100%,             transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at calc(100% - 26px) 100%,transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 0 26px,               transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 100% 26px,             transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 0 calc(100% - 26px),   transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 100% calc(100% - 26px),transparent 4.9px, #000 5.4px),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle 5.4px at 26px 0,               transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at calc(100% - 26px) 0,   transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 26px 100%,             transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at calc(100% - 26px) 100%,transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 0 26px,               transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 100% 26px,             transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 0 calc(100% - 26px),   transparent 4.9px, #000 5.4px),
    radial-gradient(circle 5.4px at 100% calc(100% - 26px),transparent 4.9px, #000 5.4px),
    linear-gradient(#000, #000);
          mask-composite: intersect;
}
/* ---- the gilt frame: four scooped corners + hairline edges -------------- */
.pc-gild { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: rgba(200,162,74,.65); transition: color var(--dur) var(--ease), filter var(--dur) var(--ease); }
.product-card:hover .pc-gild { color: rgba(216,189,114,.9); filter: drop-shadow(0 0 6px rgba(200,162,74,.25)); }
.pc-corner { position: absolute; width: 40px; height: 40px; }
.pc-corner--tl { top: 0; left: 0; }
.pc-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.pc-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.pc-corner--br { bottom: 0; right: 0; transform: scale(-1,-1); }
.pc-edge { position: absolute; background: currentColor; }
.pc-edge--t { top: .35px; left: 39px; right: 39px; height: 1.3px; }
.pc-edge--b { bottom: .35px; left: 39px; right: 39px; height: 1.3px; }
.pc-edge--l { left: .35px; top: 39px; bottom: 39px; width: 1.3px; }
.pc-edge--r { right: .35px; top: 39px; bottom: 39px; width: 1.3px; }

.pc-photo { position: relative; overflow: hidden; background: var(--indigo-800); }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.product-card:hover .pc-photo img { transform: scale(1.05); }
/* a slow gilt light-sweep crosses the photo on hover — the "polish" */
.pc-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(233,219,178,.18) 50%, transparent 58%);
  transform: translateX(-130%); transition: transform 1s var(--ease);
}
.product-card:hover .pc-photo::before { transform: translateX(130%); }

.pc-body {
  position: relative; z-index: 1;
  padding: clamp(1.3rem, 1.9vw, 1.9rem) clamp(1.2rem, 1.8vw, 1.7rem);
  display: flex; flex-direction: column; align-items: flex-start;
}
/* ---- the panel's line ornaments (drawn by products.js) ------------------ */
/* a tasselled kite hanging from the top border, just right of the seam */
.pc-tassel { position: absolute; top: 0; left: 14px; width: 22px; height: 64px; color: var(--gold-500); opacity: .5; pointer-events: none; }
/* lota-pata vine at the panel's top-right */
.pc-vine { position: absolute; top: 8px; right: 8px; width: 58px; height: 58px; transform: scaleX(-1); color: var(--gold-500); opacity: .22; pointer-events: none; }
/* a paddy stalk rising through the panel's bottom-right */
.pc-paddy { position: absolute; bottom: 0; right: 12px; width: 58px; height: 110px; color: var(--gold-500); opacity: .26; pointer-events: none; }

.pc-cat {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-300); font-family: var(--font-body);
}
.pc-dash { width: 14px; height: 1px; background: var(--gold-500); flex: none; }
.pc-star { color: var(--gold-500); font-style: normal; font-size: .8rem; letter-spacing: 0; }
.pc-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.5rem, 1.75vw, 1.8rem); color: var(--rice-white);
  line-height: 1.05; margin-bottom: .8rem;
}
.pc-desc {
  font-family: var(--font-body); font-weight: 400;
  font-size: .92rem; color: rgba(242,247,253,.9); line-height: 1.6; margin-bottom: 1.05rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-loc {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-serif); font-size: 1.02rem;
  color: var(--gold-100); margin-bottom: .55rem;
}
/* the trade fact a bulk buyer scans for first */
.pc-moq {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(233,219,178,.75); margin-bottom: 1rem;
}
/* keyboard buyers get the same gold attention as hovering ones */
.product-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-500), 0 24px 50px -28px rgba(1,3,15,.85);
}
.pc-pin { width: 15px; height: 17px; color: var(--gold-500); flex: none; }
.pc-explore {
  position: relative; margin-top: auto;
  display: inline-flex; align-items: center; gap: .8rem; width: max-content;
  font-family: var(--font-serif); font-size: 1.08rem; letter-spacing: .02em;
  color: var(--frost-100); padding-bottom: .55rem;
}
.pc-explore .pc-arrow { display: inline-flex; color: var(--gold-300); transition: transform var(--dur) var(--ease); }
.product-card:hover .pc-explore .pc-arrow { transform: translateX(6px); }
.pc-explore::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 118%; height: 1px;
  background: linear-gradient(90deg, rgba(200,162,74,.85) 70%, transparent);
}

@media (max-width: 620px) {
  .pc-frame { grid-template-columns: 1fr; min-height: 0; }
  .pc-photo { aspect-ratio: 16 / 11; }
}

/* ============================================================================
   CLOSING PULL-QUOTE — gold italics between a nouka and a shapla
   ========================================================================== */
.pq {
  position: relative; text-align: center;
  margin-top: clamp(3rem, 6vw, 4.6rem);
  padding: clamp(1.6rem, 3.4vw, 3rem) 0 clamp(1rem, 2.4vw, 1.6rem);
}
.pq-text {
  position: relative; z-index: 1;
  max-width: 56ch; margin: 0 auto .65rem;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.28rem, 2.3vw, 1.9rem); line-height: 1.5;
  color: var(--gold-300);
}
.pq-mark { font-size: 1.35em; color: var(--gold-500); line-height: 0; vertical-align: -.12em; }
.pq-orn { width: 54px; height: auto; color: var(--gold-500); opacity: .9; display: inline-block; }
.pq-boat {
  position: absolute; left: clamp(-.5rem, 1vw, 2rem); bottom: -6px;
  width: clamp(150px, 17vw, 235px); height: auto;
  color: var(--gold-500); opacity: .55; pointer-events: none;
}
.pq-lotus {
  position: absolute; right: clamp(-3.5rem, -3vw, -1rem); bottom: -10px;
  width: clamp(110px, 12vw, 165px); height: auto;
  color: var(--gold-500); opacity: .5; pointer-events: none;
}
@media (max-width: 900px) {
  .pq-boat, .pq-lotus { position: static; display: block; margin: .8rem auto 0; opacity: .45; }
  .pq { display: flex; flex-direction: column; align-items: center; }
  .pq-lotus { display: none; }
}

/* ---- Product detail modal ------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(2,7,26,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-panel {
  width: min(960px, 100%); max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, var(--blue-900), var(--navy-950));
  border: 1.35px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  transform: translateY(20px) scale(.98); transition: transform var(--dur) var(--ease);
}
.modal.is-open .modal-panel { transform: none; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.modal-gallery { position: relative; min-height: 320px; background: var(--royal-700); overflow: hidden; }
.modal-gallery img[data-gallery-main] {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
  transition: transform .5s var(--ease);
}
.modal-gallery img[data-gallery-main].is-zoomed { transform: scale(1.9); cursor: zoom-out; }
.modal-thumbs {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
  display: flex; gap: .45rem;
}
.modal-thumb {
  width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 1.35px solid rgba(200,162,74,.45); border-radius: 6px; overflow: hidden;
  background: var(--indigo-900); opacity: .75;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-thumb.is-active, .modal-thumb:hover { opacity: 1; border-color: var(--gold-300); }
.modal-body { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .9rem; }
.modal-body h3 { font-size: 1.8rem; color: var(--frost-100); }
.modal-body .spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; font-size: var(--fs-small); }
.modal-body .spec-list dt { color: var(--gold-300); font-weight: 600; }
.modal-body .spec-list dd { color: var(--text-muted-on-dark); }
.modal-body .modal-actions { display: flex; gap: .6rem; margin-top: auto; flex-wrap: wrap; }
.modal-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(2,7,26,.6); border: 1.35px solid var(--line); color: var(--gold-300); }

/* Empty state */
.products-empty { text-align: center; color: var(--text-muted-on-dark); padding: var(--space-8) 0; }

/* Mobile "Show more" — hidden by JS everywhere except capped phone lists */
.show-more { margin-top: 1.2rem; }

@media (max-width: 760px) {
  .modal-grid { grid-template-columns: 1fr; }
  .modal-gallery { min-height: 220px; aspect-ratio: 16/10; }
}