/* LP-W16: two new ranges, Béton (line street) and Charms. James, 2026-10-15: "In addition to sport line, we need a cool
   line of affordable street inspired line with denim and camo prints ect. We also want a line of charms."
   Loaded after system.css: the range bar and the hero tiles take five ranges, the new-lines panels, and the hero frames
   of the two new range pages (measured from their photographs, so the whole dog shows). */

/* ---------- the range bar: as many tabs as ranges (--n is set by shop.js) ---------- */
.range-tabs,.range-tabs.has-5{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));border-radius:var(--r-md);overflow:hidden}
.range-tabs button{padding:16px 16px 15px}
.range-tabs strong{font-size:clamp(24px,1.1vw + 12px,30px)}
@media(max-width:1150px){
  .range-tabs,.range-tabs.has-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .range-tabs button{border-bottom:1px solid #30142526}
  .range-tabs button:nth-child(3n){border-right:0}
}
@media(max-width:700px){
  .range-tabs,.range-tabs.has-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .range-tabs button{min-height:64px;padding:11px 10px;gap:4px}
  .range-tabs button:nth-child(2n){border-right:1px solid #30142526}
  .range-tabs button:nth-child(3n){border-right:0}
  .range-tabs strong{font-size:21px;white-space:nowrap}
  .range-tabs .dots i{width:8px;height:8px}
}

/* ---------- hero: five range tiles (cards from system.css); three to a row when the copy column is narrow ---------- */
.hero-copy{container:herocopy/inline-size}
.hero-ranges{grid-template-columns:repeat(5,minmax(0,1fr))}
.hero-ranges a{margin:0;min-width:0;padding:14px 14px 12px}
.hero-ranges .rn{font-size:clamp(22px,.8vw + 12px,30px);white-space:nowrap}
@container herocopy (max-width:760px){
  .hero-ranges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-ranges .rn{font-size:clamp(24px,1vw + 14px,34px)}
}
@media(max-width:700px){
  .hero-ranges{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-ranges a{margin:0;padding:10px 10px 9px}
  .hero-ranges .rn{font-size:21px}
}

/* ---------- the new lines: two panels ---------- */
.lines-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.line-panel{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:#fffdfb;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.line-panel:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.line-panel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.line-copy{display:grid;gap:12px;justify-items:start;padding:clamp(20px,2vw,32px)}
.line-copy h3{font-size:clamp(34px,2.4vw + 10px,52px);line-height:1}
.line-copy h3 em{color:var(--accent)}
.line-copy>p:not(.eyebrow){font-size:var(--fs-body);color:var(--muted);max-width:460px}
.line-copy .button{margin-top:6px}
.line-panel:first-child{background:#e9e7e3}
.line-panel:first-child h3 em{color:#26354f}
@media(max-width:700px){
  .lines-grid{grid-template-columns:1fr;gap:18px}
  .line-copy h3{font-size:34px}
}

/* ---------- hero frames of the new range pages (bounds measured on the photographs; see integrate_images.py) ---------- */
.hero-visual[data-range=street]{--hr:.8;--hx:50%;--hy:40%}
.hero-visual[data-range=charms]{--hr:.8;--hx:50%;--hy:40%}