/* ==========================================================================
 * Site v3: ranges group.
 *
 * 1. Range pages (/systemat/, /concept-130/): page-templates/range-detail.php, rebuilt from the
 *    landing page components in landing-v3/lp3.css. lp3.css is scoped to body.lp3 there; here the
 *    components sit inside <article class="lp3 rd"> so the site header, footer and base styles
 *    (all written for body:not(.lp3)) keep working. This file supplies the lp3 tokens for that
 *    wrapper plus the range-only parts (hero buttons and chips, finish grid, logo row).
 * 2. Finishes listing: taxonomy-finish_category.php + template-parts/finish-category/*.
 * 3. Single finish: single-finish.php.
 *
 * Loaded after css/site-v3.css. No focus styles, by agency rule.
 * ======================================================================== */

/* ==========================================================================
 * 1. Range pages
 * ======================================================================== */
body.page-template-range-detail .rd{
  --lp3-olive:#474d37;--lp3-olive-d:#3a3f2d;--lp3-paper:#fbf7eb;--lp3-ink:#1d1d1b;--lp3-line:rgb(71 77 55/.22);
  --lp3-serif:"Kudryashev Headline",Georgia,serif;--lp3-sans:"Haas Grot Disp","Helvetica Neue",Arial,sans-serif;
  --lp3-r:4px;--lp3-gut:16px;--lp3-max:1280px;
  display:block;background:var(--lp3-paper);color:var(--lp3-ink);font:400 16px/1.6 var(--lp3-sans);letter-spacing:0
}
@media(min-width:768px){body.page-template-range-detail .rd{--lp3-gut:40px}}
@media(min-width:1024px){body.page-template-range-detail .rd{font-size:17px}}
html:has(body.page-template-range-detail){scroll-behavior:smooth}

/* The base gives every link and image a 4px radius; full-bleed photos and text links stay square. */
body.page-template-range-detail .rd :is(.lp3-hero__bg,.lp3-consult__img img,.lp3-link){border-radius:0!important}

/* Sections a little tighter than the landing pages */
body.page-template-range-detail .rd .lp3-sec{padding:56px 0}
@media(min-width:1024px){body.page-template-range-detail .rd .lp3-sec{padding:72px 0}}
body.page-template-range-detail .rd .lp3-sec--white{background:#fff}
body.page-template-range-detail .rd h2{font-size:clamp(30px,3.2vw,44px);line-height:1.08}
@media(max-width:767px){body.page-template-range-detail .rd h2{font-size:28px;line-height:1.1}}

/* ---------- Hero: the site header sits over it ---------- */
body.page-template-range-detail .rd-hero .lp3-hero__main{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--header-height,64px) + 32px);padding-bottom:40px}
body.page-template-range-detail .rd-hero .lp3-hero__copy{max-width:780px}
body.page-template-range-detail .rd-hero h1{font-size:clamp(44px,6vw,84px);line-height:1}
body.page-template-range-detail .rd-hero .lp3-hero__sub{max-width:600px}
body.page-template-range-detail .rd-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
body.page-template-range-detail .rd-chips{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:8px}
@media(min-width:1100px){body.page-template-range-detail .rd-chips{grid-template-columns:repeat(4,max-content)}}
body.page-template-range-detail .rd-chips li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--lp3-r);box-shadow:inset 0 0 0 1px rgb(255 255 255/.45);font:500 14px/1.2 var(--lp3-sans);white-space:nowrap}
body.page-template-range-detail .rd-chips .lp3-ic{width:20px;height:20px}
@media(min-width:1024px){body.page-template-range-detail .rd-hero .lp3-hero__main{padding-top:calc(var(--header-height,130px) + 40px);padding-bottom:56px}}
@media(max-width:767px){
  body.page-template-range-detail .rd-hero{min-height:calc(100svh - 56px - var(--wp-adminbar,0px));display:flex;flex-direction:column;justify-content:flex-end}
  body.page-template-range-detail .rd-hero .lp3-hero__main{padding-bottom:32px}
  body.page-template-range-detail .rd-hero h1{font-size:44px}
  body.page-template-range-detail .rd-hero__btns{display:grid;grid-template-columns:1fr}
  body.page-template-range-detail .rd-chips{grid-template-columns:1fr 1fr;gap:6px}
  body.page-template-range-detail .rd-chips li{padding:8px 10px;font-size:13px;white-space:normal}
  body.page-template-range-detail .rd-chips .lp3-ic{width:18px;height:18px}
}

/* ---------- Why choose ---------- */
/* ---------- Intro: the page's opening paragraph ---------- */
body.page-template-range-detail .rd-intro.lp3-sec{padding:56px 0}
body.page-template-range-detail .rd .rd-intro__p{max-width:880px;font-size:20px;line-height:1.55}
body.page-template-range-detail .rd .rd-intro__p+.rd-intro__p{margin-top:14px}

body.page-template-range-detail .rd-why .lp3-why__list{margin-top:24px}
body.page-template-range-detail .rd-why--noimg{display:block}
@media(max-width:1023px){body.page-template-range-detail .rd-why .lp3-why__img{display:none}}

/* ---------- Content rows ---------- */
body.page-template-range-detail .rd-split .lp3-split__p{font-size:17px;line-height:1.6}
body.page-template-range-detail .rd-split .lp3-split__p:first-of-type{margin-top:18px!important}
body.page-template-range-detail .rd-split .lp3-split__img{height:420px!important}
@media(max-width:1023px){body.page-template-range-detail .rd-split .lp3-split__img{height:240px!important}}
@media(min-width:1024px){body.page-template-range-detail .rd .lp3-split{gap:64px}}
body.page-template-range-detail .rd-more{margin-top:20px}
body.page-template-range-detail .rd-more summary{list-style:none;cursor:pointer;display:inline-block}
body.page-template-range-detail .rd-more summary::-webkit-details-marker{display:none}
body.page-template-range-detail .rd-more[open] summary{display:none}
body.page-template-range-detail .rd-more__body>.lp3-split__p:first-child{margin-top:0!important}

/* ---------- More about (accordion) ---------- */
body.page-template-range-detail .rd-more-sec .lp3-faq summary{padding:18px 0}
body.page-template-range-detail .rd-faq__body{padding:0 0 22px;max-width:780px}
body.page-template-range-detail .rd .rd-faq__body p{padding:0;margin:12px 0 0!important;font-size:16px;line-height:1.6}
body.page-template-range-detail .rd .rd-faq__body p:first-child{margin-top:0!important}
body.page-template-range-detail .rd-faq__body ul{margin:12px 0 0;padding-left:20px;list-style:disc}
body.page-template-range-detail .rd-faq__body li{margin-top:6px}
body.page-template-range-detail .rd-faq__body li::marker{color:var(--lp3-olive)}

/* ---------- Finishes: 4-column grid, with a "see all" tile to fill the row ---------- */
body.page-template-range-detail .rd-fin__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media(min-width:900px){body.page-template-range-detail .rd-fin__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}}
body.page-template-range-detail .rd-fin__card{display:block;text-decoration:none;color:inherit}
body.page-template-range-detail .rd-fin__card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--lp3-r)}
body.page-template-range-detail .rd-fin__card h3{margin-top:12px!important;font-size:18px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
body.page-template-range-detail .rd-fin__card:hover h3{text-decoration-color:currentColor}
body.page-template-range-detail .rd-fin__card p{margin-top:4px!important;font-size:15px;line-height:1.5}
body.page-template-range-detail .rd-fin__all{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/3;padding:20px;border-radius:var(--lp3-r);background:var(--lp3-olive);color:#fff;text-decoration:none;font:500 15px/1.3 var(--lp3-sans);letter-spacing:.04em;text-transform:uppercase;transition:background .2s}
body.page-template-range-detail .rd-fin__all:hover{background:var(--lp3-olive-d)}
body.page-template-range-detail .rd-fin__all .lp3-ic{align-self:flex-end;width:28px;height:28px}

/* ---------- As seen in: one compact row, logos at their own proportions ---------- */
body.page-template-range-detail .rd-logos.lp3-sec{padding:40px 0}
body.page-template-range-detail .rd-logos__in{display:grid;gap:16px;align-items:center}
@media(min-width:1024px){body.page-template-range-detail .rd-logos__in{grid-template-columns:160px minmax(0,1fr);gap:40px}}
body.page-template-range-detail .rd .rd-logos__title{font:500 13px/1.3 var(--lp3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--lp3-olive)}
body.page-template-range-detail .rd-logos__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px}
body.page-template-range-detail .rd-logos__row li{flex:0 0 calc(25% - 12px);display:flex;justify-content:center}
body.page-template-range-detail .rd .rd-logo{height:44px!important;width:auto!important;max-width:100%;object-fit:contain;border-radius:0!important}
@media(min-width:1024px){
  body.page-template-range-detail .rd-logos__row{flex-wrap:nowrap;justify-content:space-between;gap:24px}
  body.page-template-range-detail .rd-logos__row li{flex:0 1 auto}
  body.page-template-range-detail .rd .rd-logo{height:64px!important}
}

/* ---------- Consultation ---------- */
body.page-template-range-detail .rd-consult .lp3-consult__copy p{max-width:460px}
@media(min-width:1024px){body.page-template-range-detail .rd-consult .lp3-consult__form{padding-top:48px;padding-bottom:48px}}
body.page-template-range-detail .rd .rd-faq__graphic{display:block;width:auto;max-width:min(100%,320px);max-height:220px;object-fit:contain;margin-top:16px}
body.page-template-range-detail .rd [id]{scroll-margin-top:var(--header-height,0px)}

/* Phones: every section within one 812px screen */
@media(max-width:767px){
  body.page-template-range-detail .rd .lp3-sec{padding:48px 0}
  body.page-template-range-detail .rd .lp3-split{gap:24px}
  body.page-template-range-detail .rd-intro.lp3-sec{padding:40px 0}
  body.page-template-range-detail .rd .rd-intro__p{font-size:17px}
  /* Why: icon beside the title, text full width below */
  body.page-template-range-detail .rd-why .lp3-why__list li{grid-template-columns:24px minmax(0,1fr);gap:4px 10px;align-items:center;padding:14px 0}
  body.page-template-range-detail .rd-why .lp3-why__list li>div{display:contents}
  body.page-template-range-detail .rd-why .lp3-why__list .lp3-ic{width:24px;height:24px;margin:0}
  body.page-template-range-detail .rd-why .lp3-why__list h3{font-size:18px}
  body.page-template-range-detail .rd-why .lp3-why__list p{grid-column:1/-1;margin-top:4px!important;font-size:15px;line-height:1.5}
  body.page-template-range-detail .rd-split.lp3-sec{padding:44px 0}
  body.page-template-range-detail .rd-split h2{font-size:26px}
  body.page-template-range-detail .rd-split .lp3-split__p{font-size:16px;line-height:1.55}
  body.page-template-range-detail .rd-split .lp3-split__img{height:200px!important}
  body.page-template-range-detail .rd-consult .lp3-consult__img{min-height:300px}
  body.page-template-range-detail .rd-consult .lp3-consult__form{padding:24px var(--lp3-gut) 32px}
  body.page-template-range-detail .rd-consult .lp3-form{padding:24px 20px}
}

/* ==========================================================================
 * 2. Finishes listing (/finish-category/finishes/)
 *    Desktop: list of fronts on the left, the selected front large on the right.
 *    Bordered cells become a plain 4-column grid (7 fronts: 4 + 3, never one alone).
 * ======================================================================== */
body.tax-finish_category [x-data="finishStore"]{--fc-gut:16px;color:var(--v3-ink)}
@media(min-width:768px){body.tax-finish_category [x-data="finishStore"]{--fc-gut:40px}}
/* Kudryashev at weight 500 resolves to the hairline "Headline Sans" cut, so headings stay at 400. */
body.tax-finish_category [x-data="finishStore"] .font-serif{font-family:var(--v3-serif);font-weight:400}
body.tax-finish_category [x-data="finishStore"] section.h-\[76px\]{height:auto;min-height:76px;padding:20px var(--fc-gut) 8px;border:0}
body.tax-finish_category [x-data="finishStore"] h1{font:400 clamp(32px,3.2vw,44px)/1.08 var(--v3-serif);letter-spacing:-.005em;margin:0}
/* Layout toggles: line icons, current one in ink, the other mid grey */
body.tax-finish_category [x-data="finishStore"] section.h-\[76px\] button{width:44px;height:44px;border-radius:var(--v3-r);background:transparent}
body.tax-finish_category [x-data="finishStore"] section.h-\[76px\] button svg{width:24px;height:24px;font-size:24px}
body.tax-finish_category [x-data="finishStore"] section.h-\[76px\] button svg.\!text-\[\#9E9E9E\]{color:#8a8a85!important}
/* Group label ("Fronts"): an eyebrow, no box */
body.tax-finish_category .finish-model{height:auto;padding:8px var(--fc-gut) 16px;border:0;font:500 13px/1.3 var(--v3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--v3-olive)}
body.tax-finish_category .finish-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px 16px;padding:0 var(--fc-gut) 48px;border:0}
body.tax-finish_category .finish-list>div{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:0;margin:0;border:0;background:transparent!important}
body.tax-finish_category .finish-list>div img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--v3-r);transition:box-shadow .2s}
/* Grid view (5 classes become 4 columns): slightly wider photos so two rows fit the screen */
body.tax-finish_category .finish-list.grid-cols-5>div img{aspect-ratio:3/2}
body.tax-finish_category .finish-list>div>div{font:500 16px/1.35 var(--v3-sans);text-align:left;text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
body.tax-finish_category .finish-list>div:hover>div{text-decoration-color:currentColor}
/* Selected front: olive ring on the photo and an underlined name */
body.tax-finish_category .finish-list>div[class*="bg-[#0000000D]"] img{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--v3-olive)}
body.tax-finish_category .finish-list>div[class*="bg-[#0000000D]"]>div{text-decoration-color:currentColor}
/* Right-hand preview */
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\]{padding:32px var(--fc-gut) 40px;max-height:none;gap:20px;justify-content:center}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\]>div:first-child{height:auto}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\]>div:first-child img{width:100%;max-height:calc(100vh - 360px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--v3-r)}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] span.font-serif{font:400 32px/1.1 var(--v3-serif)}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px!important;margin-top:8px;border-radius:var(--v3-r);background:var(--v3-olive)!important;color:#fff!important;font:500 15px/1 var(--v3-sans);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] .btn:hover{background:var(--v3-olive-d)!important}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] .btn>span{color:#fff!important}
body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] .btn>span::before,body.tax-finish_category [x-data="finishStore"] .lg\:pt-\[90px\] .btn>span::after{display:none}
/* The divider between the two panes stays a hairline */
body.tax-finish_category [x-data="finishStore"] .border-l.border-\[\#0000001A\]{border-color:var(--v3-line)}

/* Phones and tablets (template-parts/finish-category/mobile.php). Both views (split and grid)
 * show every front in a wrapping grid: 2 columns on phones, 4 from 600px. No sideways scrolling,
 * no cell borders. With an odd count on 2 columns the last front spans the row as a wide card. */
@media(max-width:1023px){
  body.tax-finish_category .lg\:hidden section.h-\[76px\]{border:0}
  /* The list grows with its content instead of scrolling inside a screen-high box */
  body.tax-finish_category [x-data="finishStore"]>.max-h-screen{max-height:none}
  body.tax-finish_category .lg\:hidden .overflow-y-scroll{height:auto}
  /* Selected front, large (split view) */
  body.tax-finish_category .lg\:hidden .h-1\/2{height:auto}
  body.tax-finish_category .lg\:hidden a.h-\[400px\]{height:auto;padding:4px var(--fc-gut) 24px}
  body.tax-finish_category .lg\:hidden a.h-\[400px\] img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--v3-r)}
  body.tax-finish_category .lg\:hidden [class*="h-[calc(100vh-80px)]"]{height:auto}
  body.tax-finish_category .lg\:hidden .overflow-y-scroll{overflow:visible}
  body.tax-finish_category .lg\:hidden .overflow-y-scroll>section,body.tax-finish_category .lg\:hidden .overflow-y-scroll>section>div{width:100%}
  /* Group label ("Fronts") in grid view: an eyebrow, no box */
  body.tax-finish_category .lg\:hidden .h-\[62px\]{height:auto;padding:8px var(--fc-gut) 14px;border:0;font:500 13px/1.3 var(--v3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--v3-olive)}
  /* The two lists: the split-view row and the grid-view grid */
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;width:100%;overflow:visible;padding:0 var(--fc-gut) 40px;scroll-snap-type:none}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid)>*{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;width:auto;min-width:0;margin:0;padding:0;border:0;background:transparent!important;color:inherit;text-decoration:none}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid)>*>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--v3-r)}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid)>*>div{align-items:flex-start;gap:2px}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid) .text-sm{font:500 17px/1.3 var(--v3-sans);text-align:left;white-space:normal;text-wrap:balance}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid) .text-xs{display:block;font:500 13px/1.3 var(--v3-sans);letter-spacing:.04em;text-align:left;color:var(--v3-olive)!important}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid)>:last-child:nth-child(odd){grid-column:1/-1}
  /* Selected front in the split view */
  body.tax-finish_category .lg\:hidden .overflow-x-auto>[class*="bg-[#0000000D]"] img{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--v3-olive)}
}
@media(min-width:600px) and (max-width:1023px){
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid){grid-template-columns:repeat(4,minmax(0,1fr))}
  body.tax-finish_category .lg\:hidden :is(.overflow-x-auto,.w-screen.grid)>:last-child:nth-child(odd){grid-column:auto}
}

/* ==========================================================================
 * 3. Single finish: the photo and colours are in css/site-v3/finish.css;
 *    "You may be interested" here is a plain 5-across row.
 * ======================================================================== */
body.single-finish main>div.border-t{gap:32px;padding:72px 40px 88px;border-color:var(--v3-line);background:var(--v3-paper)}
body.single-finish main>div.border-t>.font-serif{font:400 clamp(32px,3.4vw,46px)/1.06 var(--v3-serif);text-align:left;max-width:1280px;width:100%;margin:0 auto}
body.single-finish main>div.border-t>.flex{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:1280px;width:100%;margin:0 auto}
body.single-finish main>div.border-t>.flex>a{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0;margin:0;border:0;color:inherit;text-decoration:none}
body.single-finish main>div.border-t>.flex>a img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--v3-r)}
body.single-finish main>div.border-t>.flex>a span{font:500 16px/1.35 var(--v3-sans);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
body.single-finish main>div.border-t>.flex>a:hover span{text-decoration-color:currentColor}