/* spa-model-grid v1.4.6 — 2026-08-06 (grid->button 40px; reverted the -60px trim that hid the button) */
/* Spa Model Grid — all rules scoped under .smg (multi-instance safe; JS isolates by root id) */
.smg{ --smg-fg:#1a1a1a; --smg-muted:#6b7280; --smg-line:#e5e7eb;
  font-family:inherit; color:var(--smg-fg); }
/* boxed: constrain to theme content width instead of full-bleed (v1.4.0) */
.smg{ max-width:var(--smg-maxw,1200px); margin-inline:auto; padding-inline:clamp(16px,4vw,24px); }
.smg *{ box-sizing:border-box; }
.smg{ line-height:1.35; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.smg h2,.smg p,.smg div,.smg button{ margin:0; }   /* theme margin/line-height leak defense */
/* BYHT-proven containment — nothing may widen the page (flex/grid min-width:auto inflation) */
.smg{ overflow-x:clip; }
.smg img{ max-width:100%; }
.smg__grid > *, .smg__card, .smg__media, .smg__meta, .smg__filters, .smg__controls{ min-width:0; max-width:100%; }

.smg .smg__heading{ text-align:center; font-size:clamp(1.4rem,2.5vw,2rem); font-weight:700;
  margin:0 0 1.25rem; letter-spacing:-.01em; line-height:1.2; }

/* controls (Size/Price switch — shown only when enabled) */
.smg__controls{ display:flex; justify-content:center; gap:.5rem; margin:0 0 1rem; }
.smg__switch{ display:inline-flex; border:1px solid var(--smg-line); border-radius:999px; overflow:hidden; }
.smg__switch button{ border:0; background:transparent; padding:.4rem .95rem; font:inherit; font-size:.85rem;
  color:var(--smg-muted); cursor:pointer; }
.smg__switch button[aria-pressed="true"]{ background:var(--smg-accent); color:#fff; }

/* filter tabs (seat counts or price tiers) */
.smg .smg__filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem .9rem;
  margin:0 0 1.25rem; padding:0 .25rem; }
@media(max-width:639px){
  .smg__filters{ gap:.3rem .8rem; }
  .smg__filter{ font-size:.75rem; padding:.25rem .05rem; }
  .smg__grid{ gap:.75rem; }                      /* tighter columns -> wider cards */
  .smg__card{ padding:.15rem .15rem .75rem; }     /* card chrome -> image */
  .smg__media img{ transform:scale(1.07); }       /* reclaim the baked-in white margin; media box clips */
  .smg__meta{ padding:.5rem .1rem 0; }
}
.smg__filter{ border:0; background:transparent; font:inherit; font-size:.8rem; font-weight:600; line-height:1.3;
  letter-spacing:.04em; text-transform:uppercase; color:var(--smg-muted); cursor:pointer;
  padding:.35rem .1rem; border-bottom:2px solid transparent; white-space:nowrap; }
.smg__filter:hover{ color:var(--smg-fg); }
.smg__filter[aria-pressed="true"]{ color:var(--smg-accent); border-bottom-color:var(--smg-accent); }
.smg__filter:focus-visible{ outline:2px solid var(--smg-accent); outline-offset:3px; border-radius:2px; }

/* grid */
.smg__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--smg-gap);
  align-items:start; }
@media(min-width:640px){ .smg__grid{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:960px){ .smg__grid{ grid-template-columns:repeat(var(--smg-cols),1fr);} }

/* card */
.smg__card{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--smg-card-bg); border-radius:var(--smg-radius); padding:.5rem .5rem 1rem;
  transition:transform .25s ease, box-shadow .25s ease; }
.smg__card--nolink{ cursor:default; }
.smg__card:focus-visible{ outline:2px solid var(--smg-accent); outline-offset:3px; }
/* v1.4.1: the card is an <a>, so the theme's global a:hover (green) was tinting the model name.
   Force the card + name to the blue accent on hover instead. */
.smg .smg__card, .smg .smg__card:link, .smg .smg__card:visited{ color:var(--smg-fg); }
.smg .smg__card:hover, .smg .smg__card:hover .smg__name,
.smg .smg__card:focus-within, .smg .smg__card:focus-within .smg__name{ color:var(--smg-accent); }

/* media box — fixed aspect, image centered & contained so mixed sizes stay uniform.
   Aspect per product type: hot tubs 4:3 · saunas 1:1 · swim spas 1:2 (rotated top-view, portrait) */
.smg__media{ position:relative; aspect-ratio:4/3; border-radius:calc(var(--smg-radius) - 2px);
  overflow:hidden; background:var(--smg-card-bg); }
.smg[data-type="sauna"] .smg__media{ aspect-ratio:1/1; }
.smg[data-type="swim-spa"] .smg__media{ aspect-ratio:1/2; }
.smg__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .35s ease, transform .35s ease; }
.smg__img--top{ opacity:0; background:var(--smg-card-bg,#fff); }  /* opaque backing fills the tile — covers the angle regardless of image shape */
.smg__media::after{ content:""; position:absolute; inset:0; background:var(--smg-accent);
  opacity:0; transition:opacity .3s ease; pointer-events:none; }

/* hover effects — hover-capable devices only; touch shows the front angle, one tap navigates */
@media(hover:hover){
[data-hover="fade"] .smg__card:hover .smg__img--top,
[data-hover="fade"] .smg__card:focus-within .smg__img--top{ opacity:1; }
[data-hover="fade"] .smg__card:hover .smg__img--angle,
[data-hover="fade"] .smg__card:focus-within .smg__img--angle{ opacity:0; }
[data-hover="grow"] .smg__card:hover .smg__img--angle{ transform:scale(1.07); }
[data-hover="lift"] .smg__card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
[data-hover="tint"] .smg__card:hover .smg__media::after{ opacity:.16; }
[data-hover="colored"] .smg__card:hover .smg__media::after{ opacity:.28; }
}

/* meta */
.smg__meta{ text-align:center; padding:.75rem .25rem 0; }
.smg__brand{ color:var(--smg-accent); font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.3; }
.smg .smg__name{ font-size:1.05rem; font-weight:700; margin:.15rem 0 .1rem; line-height:1.25; }
.smg__sub{ color:var(--smg-muted); font-size:.85rem; line-height:1.35; }
.smg__price{ color:var(--smg-accent); font-weight:700; letter-spacing:.06em; }
.smg .smg__specs{ margin-top:.15rem; }

/* See more (v1.4.0) — reveals models in batches so the grid isn't a wall */
/* v1.4.4: needs .smg prefix to beat the `.smg div{margin:0}` reset above — without it the
   margin-top was silently zeroed (why 28/48/68px all looked identical). */
.smg .smg__more{ text-align:center; margin-top:40px; }
.smg__more[hidden]{ display:none; }
.smg__more-btn{ font-family:var(--ff-btn, "Poppins", Arial, sans-serif); font-weight:600; font-size:.85rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--smg-accent); background:transparent; border:2px solid var(--smg-accent);
  border-radius:var(--br-btn, 3px);   /* v1.4.2: match the theme buttons (3px, Poppins) */
  padding:.7rem 1.9rem; cursor:pointer; transition:background .2s ease, color .2s ease; }
.smg__more-btn:hover, .smg__more-btn:focus-visible{ background:var(--smg-accent); color:#fff; outline:none; }

.smg__empty{ text-align:center; color:var(--smg-muted); padding:2rem 0; }
.smg__count{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@supports not (aspect-ratio:4/3){
  .smg__media::before{ content:""; display:block; padding-top:75%; }
  .smg[data-type="sauna"] .smg__media::before{ padding-top:100%; }
  .smg[data-type="swim-spa"] .smg__media::before{ padding-top:200%; }
}
.smg [hidden]{ display:none !important; }

@media(prefers-reduced-motion:reduce){
  .smg__media img,.smg__card,.smg__media::after{ transition:none; }
}