/* LP-W12: shop by range. James on LP-W11: the Pour elle / Pour lui / Sport links under the hero were "barely noticeable
   and not in the filters". The three ranges now lead the header, sit in the hero as tiles, and head the catalog as a
   range bar above the grid (the Range dropdown is gone). Loaded after retail.css. */

/* header: ranges first, a hairline, then the categories */
.site-header>nav .nav-ranges{display:flex;align-items:center;gap:inherit}
.site-header>nav .nav-ranges a{font-weight:600}
.site-header>nav .nav-sep{width:1px;height:18px;background:#30142540;flex:none}
/* below 1024 px the full row wraps, so the header keeps the ranges; categories stay in the category cards and the catalog sidebar */
@media(max-width:1023px){.site-header>nav [data-nav-category]{display:none}.site-header>nav .nav-sep{display:none}.site-header>nav .nav-ranges{gap:26px}}

/* palette dots: decorative, the colors each range comes in */
.dots{display:flex;gap:5px}
.dots i{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #30142533}

/* hero: three range tiles in place of three small links */
.hero-ranges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-top:1px solid var(--line)}
.hero-ranges a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 10px;padding:18px 16px 16px 0;margin-right:16px;border-right:1px solid var(--line);min-height:44px}
.hero-ranges a:last-child{border-right:0;margin-right:0}
.hero-ranges .rn{font:400 30px/1 Cormorant,Georgia,serif}
.hero-ranges .ra{font-size:14px;transition:transform .2s}
.hero-ranges .rm{grid-column:1/-1;font-size:11px;color:var(--muted)}
.hero-ranges .dots{grid-column:1/-1}
.hero-ranges a:hover .rn,.hero-ranges a[aria-current] .rn{color:var(--accent)}
.hero-ranges a:hover .ra{transform:translate(2px,-2px)}
.hero-ranges a[aria-current] .rn{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* catalog: the range bar */
.range-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #30142540;margin:0 0 30px}
.range-tabs.has-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.range-tabs:empty{display:none}
.range-tabs button{display:grid;gap:7px;align-content:start;justify-items:start;text-align:left;padding:16px 20px 15px;min-height:88px;border:0;border-right:1px solid #30142526;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.range-tabs button:last-child{border-right:0}
.range-tabs strong{font:400 30px/1 Cormorant,Georgia,serif}
.range-tabs span{font-size:11px;color:var(--muted)}
.range-tabs span em{font-style:normal}
.range-tabs button:hover strong{color:var(--accent)}
.range-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.range-tabs button[aria-pressed=true] strong{color:var(--bg)}
.range-tabs button[aria-pressed=true] span{color:#fff8f2cc}
.range-tabs button[aria-pressed=true] .dots i{box-shadow:inset 0 0 0 1px #fff8f266}
.range-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
@media(min-width:1151px){.catalog-tools{grid-template-columns:2fr repeat(4,minmax(0,1fr))}}

/* menu: ranges first, as large as the categories */
#navigation-dialog .drawer-range-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#navigation-dialog .drawer-range-nav small{font:12px Manrope,sans-serif;color:var(--muted)}

@media(max-width:700px){
  .hero-ranges{margin-top:22px}
  .hero-ranges a{padding:12px 8px 12px 0;margin-right:10px;gap:5px 6px}
  .hero-ranges .rn{font-size:22px;white-space:nowrap}
  .hero-ranges .ra{display:none}
  .hero-ranges .rm{font-size:12px}
  .range-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}
  .range-tabs.has-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .range-tabs button{min-height:68px;padding:12px 14px;gap:5px;border-bottom:1px solid #30142526}
  .range-tabs button:nth-child(2n){border-right:0}
  .range-tabs strong{font-size:24px}
  .range-tabs span{font-size:12px}
  .range-tabs span em{display:none}
}
@media(max-width:380px){.hero-ranges .rm{display:none}}
@media(prefers-reduced-motion:reduce){.hero-ranges .ra{transition:none}}