/*
 * Premium building blocks shared by Lagos and Luxe (loaded after base.css, before each theme's own theme.css, which
 * restyles them). Every rule reads the theme's own tokens (--bg, --surface, --ink, --muted, --line, --accent, --clay,
 * --radius), so each theme keeps its look. Formal does not load this file.
 */

/* ---- merchant look-and-feel choices (data-* set by the engine from validated settings) ---- */
@media (min-width: 1040px) {
  html[data-grid-columns="3"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-grid-columns="4"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html[data-card-ratio="square"] .card .media, html[data-card-ratio="square"] .rail-item .media { --ratio: 1/1; }
html[data-card-ratio="portrait"] .card .media, html[data-card-ratio="portrait"] .rail-item .media { --ratio: 4/5; }
html[data-button-shape="square"] { --radius: 0; }
html[data-button-shape="rounded"] { --radius: 10px; }
html[data-button-shape="pill"] { --radius: 14px; }
html[data-button-shape="pill"] .btn, html[data-button-shape="pill"] .opt, html[data-button-shape="pill"] .chip { border-radius: 999px; }

/* ---- free delivery ---- */
.fd-strip { margin: 0; padding: 10px var(--gutter, 16px); text-align: center; font-size: .875rem; font-weight: 600; background: var(--surface); border-block: 1px solid var(--line); }
.fd-bar { margin-bottom: 14px; font-size: .875rem; }
.fd-bar p { margin: 0 0 8px; }
.fd-track { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fd-track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.fd-nudge { margin-top: 8px; font-weight: 600; }

/* ---- campaign ---- */
.cmp { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cmp-radius, 0); overflow: hidden; }
.cmp-media .media { --ratio: 16/10; height: 100%; }
.cmp-text { display: grid; gap: 12px; align-content: center; justify-items: start; padding: 24px 20px 28px; }
.cmp-text h2 { font: var(--h2); margin: 0; }
.cmp-lead { margin: 0; color: var(--muted); max-width: 46ch; }
.cmp-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--ink); border-radius: var(--radius, 0); font-size: .9375rem; }
.cmp-code b { letter-spacing: .08em; }
.cmp-copy { min-height: 40px; padding: 0 14px; font-size: .875rem; }
.cmp-count { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--clay); }
@media (min-width: 900px) { .cmp:not(.plain) { grid-template-columns: 1fr 1fr; } .cmp-text { padding: 40px; } .cmp-media .media { --ratio: auto; min-height: 320px; } }

/* ---- trust / shopping facts ---- */
.trust { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border-block: 1px solid var(--line); }
.trust li { display: grid; gap: 4px; padding: 16px 4px; background: var(--bg); font-size: .9375rem; }
.trust li[hidden] { display: none; }
.trust b { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trust a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; background: none; border: 0; } .trust li { padding: 0 0 0 16px; border-left: 2px solid var(--clay); } }

/* ---- options that cannot be bought with the other choices (still selectable, so the shopper sees "Sold out") ---- */
.opt.na { color: var(--muted); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1px; }
.opt.na.on { color: var(--bg); }

/* ---- shop tools (filters, paging) and gallery thumbnails ---- */
.tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stock-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.stock-toggle input { width: 20px; height: 20px; accent-color: var(--ink); }
.more-row { display: flex; justify-content: center; margin-top: 32px; }
.more-row .btn { min-width: 220px; }
.thumbs { display: none; }
@media (min-width: 900px) {
  .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
  .thumb-btn { width: 72px; overflow: hidden; outline: 1px solid transparent; outline-offset: 2px; opacity: .7; padding: 0; border: 0; background: none; cursor: pointer; }
  .thumb-btn .media { --ratio: 4/5; display: block; }
  .thumb-btn.on { outline-color: var(--ink); opacity: 1; }
}
.pdp-info .acc { margin-top: 4px; }
.pdp-info .acc a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ---- quick view (a bottom sheet on phones, a dialog on larger screens) ---- */
#qv { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 92svh; overflow-y: auto; background: var(--bg); border-radius: 16px 16px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; overscroll-behavior: contain; }
#qv.open { transform: none; visibility: visible; transition: transform .25s ease; }
.qv-in { position: relative; display: grid; gap: 16px; padding: 18px var(--gutter, 16px) calc(18px + env(safe-area-inset-bottom)); }
.qv-in > .x { position: absolute; right: 6px; top: 6px; z-index: 2; background: var(--bg); border-radius: 50%; }
.qv-media .media { --ratio: 1/1; max-width: 220px; }
.qv-info { display: grid; gap: 12px; }
.qv-info h2 { font: var(--h3); font-size: 1.5rem; padding-right: 40px; margin: 0; }
.qv-buy { display: flex; gap: 10px; }
.qv-buy .grow { flex: 1; min-height: 54px; }
.qv-more { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.qv-loading { padding: 40px 0; text-align: center; }
@media (min-width: 720px) {
  #qv { left: 50%; right: auto; bottom: auto; top: 50%; width: min(880px, 94vw); border-radius: 12px; transform: translate(-50%, -46%); opacity: 0; transition: transform .22s ease, opacity .22s ease, visibility 0s .22s; }
  #qv.open { transform: translate(-50%, -50%); opacity: 1; transition: transform .22s ease, opacity .22s ease; }
  .qv-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 28px; }
  .qv-media .media { max-width: none; --ratio: 4/5; }
}