/* =====================================================================
   CATEGORY TEMPLATE (taxonomy-product_category.php) — ported from
   performance.html / lifestyle.html. Everything shared (tokens, nav,
   buttons, mobile nav, footer, search field, focus states) lives in
   faito-shared.css instead.
===================================================================== */

/* ===== PAGE BANNER ===== */
.page-banner{
  position:relative; height:64vh; min-height:440px; overflow:hidden;
  display:flex; align-items:flex-end; padding:0 0 56px;
  background:var(--near-black);
}
@media(max-width:768px){ .page-banner{height:56vh; min-height:400px; padding-bottom:36px;} }
/* "Compact banner" toggle (Page → Page Banner meta box) — falls back to the
   same 440px floor .page-banner already has via min-height, just without
   stretching to fill 64vh of the viewport. */
.page-banner.compact{height:auto;}
@media(max-width:768px){ .page-banner.compact{height:auto;} }
.page-banner .split-photo{position:absolute; inset:-8% -8%; background-repeat:no-repeat; background-size:cover; background-position:center 40%;}
.page-banner .split-tint{position:absolute; inset:0; mix-blend-mode:color; opacity:0.55;}
.page-banner .split-tint.cyan-tint{background:linear-gradient(135deg, var(--faito-blue) 0%, var(--scooter-cyan) 100%);}
.page-banner .split-tint.amber-tint{background:linear-gradient(135deg, var(--lifestyle-amber) 0%, #7a4f1f 100%);}
.page-banner .split-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,26,44,0) 0%, rgba(11,13,16,0.2) 65%, rgba(11,13,16,0.8) 100%);}
.page-banner .wrap{position:relative; z-index:1;}
.breadcrumb{font-size:12px; letter-spacing:0.12em; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{opacity:0.8;}
.breadcrumb a:hover{opacity:1; color:var(--scooter-cyan);}
.page-eyebrow{font-size:12px; letter-spacing:0.22em; font-weight:600; color:var(--scooter-cyan); margin-bottom:16px;}
.page-title{font-size:clamp(38px,6vw,72px); text-transform:uppercase; margin-bottom:18px; max-width:820px;}
.page-copy{font-family:'Inter'; color:var(--muted); font-size:16px; max-width:520px; line-height:1.65;}

/* ===== INLINE SEARCH BAND ===== */
.product-search{padding:22px 0; background:var(--panel); border-bottom:1px solid var(--line);}

/* ===== CATEGORY GRID (parent view) ===== */
.systems{padding:110px 0 100px; background:var(--near-black);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:20px;}
.section-head h2{font-size:clamp(30px,4vw,44px); text-transform:uppercase;}
.section-head p{color:var(--muted); font-size:14.5px; max-width:360px;}
.system-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:900px){.system-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:560px){.system-grid{grid-template-columns:1fr;}}
.system-card{
  position:relative; background:var(--near-black); padding:38px 30px; min-height:220px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s ease, transform .3s ease;
}
.system-card:hover{background:var(--panel); transform:translateY(-2px);}
/* .sc-top (icon/name/tag) sits at the top, .sc-link at the bottom — two
   direct flex children of the card, so justify-content:space-between
   spreads them apart the same way whether or not an image is set. */
.system-card .sc-icon{width:42px; height:42px; opacity:0.95;}
.system-card .sc-name{font-family:'Rajdhani'; font-weight:600; font-size:22px; margin-top:24px; text-transform:uppercase;}
.system-card .sc-top .sc-icon + .sc-name{margin-top:24px;}
.system-card .sc-top .sc-name:first-child{margin-top:0;}
.system-card .sc-tag{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5;}
.system-card .sc-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; letter-spacing:0.08em; font-weight:600; color:var(--scooter-cyan);
}
.system-card .sc-link svg{width:14px; height:14px; transition:transform .2s ease;}
.system-card:hover .sc-link svg{transform:translateX(3px);}

/* ---- with a per-category card thumbnail set (Products → Categories → Edit) ---- */
.system-card.has-image{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:260px;
}
.system-card.has-image::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,13,16,0.15) 0%, rgba(11,13,16,0.35) 45%, rgba(11,13,16,0.92) 100%);
  transition:opacity .3s ease;
}
.system-card.has-image:hover::before{opacity:0.85;}
.system-card.has-image:hover{background-color:transparent; transform:translateY(-2px);}
.system-card.has-image .sc-top,
.system-card.has-image .sc-link{position:relative; z-index:1;}
.system-card.has-image .sc-name,
.system-card.has-image .sc-tag{color:var(--white); text-shadow:0 1px 6px rgba(0,0,0,0.5);}
.system-card.has-image .sc-link{text-shadow:0 1px 6px rgba(0,0,0,0.5);}

/* ===== SORT CONTROL (leaf view) ===== */
.sort-form{flex:none;}
/* Standard visually-hidden utility — WordPress core ships this class on its
   own admin/front-end templates, but this theme doesn't enqueue that
   stylesheet, so it's defined here for the sort <label> above. */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px;
  margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;
  word-wrap:normal !important;
}
@media(max-width:640px){.section-head{flex-wrap:wrap;} .sort-form{width:100%;} .sort-form .select-wrap, .sort-form .search-select{width:100%;}}

/* ===== PRODUCT LINE GROUPS ("Product Line" sort — leaf view) ===== */
.product-line-group{margin-bottom:48px;}
.product-line-group:last-child{margin-bottom:0;}
.product-line-heading{
  display:flex; align-items:baseline; gap:10px;
  font-family:'Rajdhani'; font-weight:600; font-size:19px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--white); margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.product-line-count{
  font-family:system-ui, sans-serif; font-weight:400; text-transform:none;
  letter-spacing:normal; font-size:12.5px; color:var(--muted);
}

/* ===== PRODUCT LISTING GRID (leaf view — real products) ===== */
.product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(3, 1fr);}}
@media(max-width:720px){.product-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr;}}

/* ----- --cols3: applied ONLY to a scrolling line's rail (see
   taxonomy-product_category.php) — a scrolling line always shows 3 tiles
   per view (33% each), never 4 (25% each). A non-scrolling line (3 or
   fewer tiles total) never gets this class and always stays at the plain
   4-column grid above, so every non-scrolling line's tiles match width
   regardless of whether that particular line has a banner. ----- */
.product-grid--cols3{grid-template-columns:repeat(3, 1fr);}
@media(max-width:480px){.product-grid--cols3{grid-template-columns:repeat(2, 1fr);}}

/* ----- Scroll variant: used when a Product Line group has more tiles than
   fit one row (see taxonomy-product_category.php). Rather than letting the
   grid wrap into a second/third row, this turns the group into a single
   horizontal rail — scrollable and drag-to-scroll (FAITO.makeRailDraggable,
   wired up in category.js) the same way the Bestsellers rail already works.
   A scrolling line's tiles are always sized for 3-per-view (33.33%) via
   --cols3 above, wider and easier to read mid-drag than the plain grid's
   4-per-view (25%) — a deliberate difference from a non-scrolling line,
   not a bug. ----- */
.product-grid--scroll{
  display:flex; grid-template-columns:none; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; cursor:grab; user-select:none;
  -ms-overflow-style:none; scrollbar-width:none;
}
.product-grid--scroll::-webkit-scrollbar{display:none;}
.product-grid--scroll.dragging{cursor:grabbing; scroll-snap-type:none;}
.product-grid--scroll.dragging .product-tile{pointer-events:none;}
.product-grid--scroll .product-tile{flex:0 0 25%; scroll-snap-align:start;}
.product-grid--scroll.product-grid--cols3 .product-tile{flex-basis:33.3333%;}
@media(max-width:1000px){.product-grid--scroll .product-tile{flex-basis:33.3333%;}}
@media(max-width:720px){.product-grid--scroll .product-tile{flex-basis:50%;}}
@media(max-width:480px){.product-grid--scroll .product-tile{flex-basis:100%;}}

/* ----- Line row: wraps the banner tile + the product grid/rail together so
   they still read as one continuous row of equal-size cards. Used only for
   a scrolling line (see taxonomy-product_category.php) — the banner sits
   here as a fixed, non-scrolling sibling (it's the line's identity, not
   another card to drag past), sized to match the scroll rail's own
   3-per-view tile width (33.33%, see .product-grid--cols3 above — a
   scrolling line is always 3-per-view, wider than the plain 4-column
   grid's 25%, which only applies to a non-scrolling line), while only
   .product-grid--scroll itself scrolls. A non-scrolling line keeps its
   old, simpler markup (banner + tiles as siblings inside one plain
   .product-grid) and never uses this class. ----- */
.product-line-row{display:flex; gap:1px; background:var(--line); border:1px solid var(--line);}
.product-line-row .product-line-banner{flex:0 0 33.3333%;}
/* Non-scrolling line with a banner: the product grid sits directly beside
   the banner inside .product-line-row, so it must not draw its own
   background/border on top of the row's (that would double the outer
   border and the gap color) — the row already supplies both; only the
   grid's internal 1px gaps (between its own tiles) still need to show. */
.product-line-row > .product-grid{flex:1 1 auto; background:none; border:0; min-width:0;}
@media(max-width:720px){.product-line-row .product-line-banner{flex-basis:50%;}}
/* Below 480px there's no room for a fixed banner beside a scrolling row
   without squeezing both — stack the banner above the rail instead, each
   at full width, rather than cramming them side by side. */
@media(max-width:480px){
  .product-line-row{flex-direction:column;}
  .product-line-row .product-line-banner{flex-basis:auto; width:100%;}
  .product-line-row .product-line-banner{display:none;}
}

/* ----- Scroll wrap: holds ONLY the scrollable rail + its button/fade, as
   its own positioning context — separate from .product-line-row (which
   also contains the fixed banner) so the button/fade sit over the
   scrollable tiles only, never drifting onto the banner beside them. Used
   two ways (see taxonomy-product_category.php): nested inside
   .product-line-row for a bannered, scrolling line (where the row already
   draws the outer border/background, so the rail itself must not draw its
   own on top), or standalone for a bannerless, scrolling line (where the
   rail IS the whole group and needs its own border/background, same as a
   plain .product-grid would). ----- */
.product-line-scroll-wrap{position:relative; min-width:0;}
.product-line-row .product-line-scroll-wrap{flex:1 1 auto;}
.product-line-row .product-line-scroll-wrap .product-grid--scroll{gap:1px; background:none; border:0;}

/* ----- Scroll buttons: small click-to-advance arrows for a scrolling line,
   on top of the drag-to-scroll behaviour category.js already wires up — a
   visible "there's more this way" cue rather than relying on a visitor to
   discover they can drag. There are two (‹ prev on the left, › next on the
   right); category.js sets .can-prev / .can-next on the wrapper, and each
   button (plus its edge fade) is only shown while there's actually more to
   scroll to in that direction — so a long line shows only › at the start,
   both in the middle, and only ‹ at the end. Hidden at <=720px, where a
   native swipe is the more natural gesture. ----- */
.product-line-scroll-btn{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; padding:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,12,16,0.78); border:1px solid var(--line); color:var(--white);
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.product-line-scroll-btn.is-prev{left:10px;}
.product-line-scroll-btn.is-next{right:10px;}
.product-line-scroll-wrap.can-prev .product-line-scroll-btn.is-prev,
.product-line-scroll-wrap.can-next .product-line-scroll-btn.is-next{display:flex;}
.product-line-scroll-btn:hover{background:var(--scooter-cyan); border-color:var(--scooter-cyan); color:var(--near-black);}
.product-line-scroll-btn:active{transform:translateY(-50%) scale(0.92);}
/* Soft fades over each rail edge, behind its button, reinforce that content
   continues past that edge — decorative only, never blocks drag/click. */
.product-line-scroll-wrap::before,
.product-line-scroll-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:64px;
  pointer-events:none; z-index:1; opacity:0; transition:opacity .2s ease;
}
.product-line-scroll-wrap::before{left:0; background:linear-gradient(270deg, transparent, rgba(5,6,8,0.65));}
.product-line-scroll-wrap::after{right:0; background:linear-gradient(90deg, transparent, rgba(5,6,8,0.65));}
.product-line-scroll-wrap.can-prev::before,
.product-line-scroll-wrap.can-next::after{opacity:1;}
@media(max-width:720px){
  .product-line-scroll-btn{display:none !important;}
  .product-line-scroll-wrap::before,
  .product-line-scroll-wrap::after{width:36px;}
}

/* ----- Product Line banner tile — first tile in a line's row when that
   line has an image set (Products → Product Lines → Edit → Line Image).
   One image filling the whole tile, name overlaid at the bottom over a
   gradient. Deliberately NOT aspect-ratio:1/1 — this tile's height is
   stretched by the grid/flex row to match its taller siblings (thumb +
   name + price), and pairing a fixed 1:1 ratio with that already-stretched,
   definite height is what inflated this column's width unevenly in an
   earlier version. Dropping aspect-ratio and just filling the tile
   (background-size:cover crops the photo to fit) avoids that entirely. ----- */
.product-line-banner{
  position:relative; background-size:cover; background-position:center;
  background-color:var(--panel); display:flex; align-items:flex-end;
}
.product-line-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.05) 55%, transparent 100%);
}
.product-line-banner-name{
  position:relative; z-index:1; padding:16px 18px; width:100%;
  font-family:'Rajdhani'; font-weight:600; font-size:15px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--white);
}
.product-tile{
  display:flex; flex-direction:column; background:var(--near-black);
  transition:background .3s ease;
}
.product-tile:hover{background:var(--panel);}
.product-tile .product-thumb{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(70,184,218,0.16), rgba(41,87,164,0.24));
  overflow:hidden;
}
.product-tile .product-thumb svg{width:44px; height:44px; opacity:0.8;}
.product-tile .product-thumb img{width:100%; height:100%; object-fit:cover;}
.product-tile .product-info{padding:18px 20px 22px;}
.product-tile .product-cat{font-size:10.5px; letter-spacing:0.1em; color:var(--scooter-cyan); text-transform:uppercase; margin-bottom:6px;}
.product-tile .product-name{font-family:'Rajdhani'; font-weight:600; font-size:16px; margin-bottom:6px; color:var(--white);}
.product-tile .product-price{font-size:13px; color:var(--muted);}

.empty-category{color:var(--muted); font-size:15px; padding:40px 0;}

.pagination{display:flex; gap:8px; flex-wrap:wrap; margin-top:40px;}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; font-size:13px;
  border:1px solid var(--line); color:var(--muted);
}
.pagination a:hover{border-color:var(--scooter-cyan); color:var(--white);}
.pagination .current{border-color:var(--scooter-cyan); color:var(--white);}

/* ===== SPOTLIGHT (Brembo / Climate — parent view only) ===== */
.spotlight{
  position:relative; padding:140px 0; overflow:hidden;
  background:linear-gradient(160deg, #10161F 0%, #0B0D10 60%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.spotlight-graphic{position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:52%; opacity:0.5;}
@media(max-width:900px){.spotlight-graphic{opacity:0.16; width:100%; right:0;}}
.spotlight .wrap{position:relative; z-index:1; max-width:760px;}
.spotlight-eyebrow{font-size:12px; letter-spacing:0.22em; color:var(--scooter-cyan); font-weight:600; margin-bottom:20px;}
.spotlight h2{font-family:'Rajdhani'; font-weight:600; font-size:clamp(28px,3.6vw,46px); line-height:1.22; margin-bottom:22px;}
.spotlight p{color:var(--muted); font-size:15.5px; line-height:1.7; max-width:560px; margin-bottom:30px;}

/* ===== BESTSELLERS RAIL (parent view only — real _faito_is_bestseller products) ===== */
.bestsellers{padding:100px 0 110px; background:var(--near-black);}
.product-rail{
  display:flex; gap:1px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -ms-overflow-style:none; scrollbar-width:none; cursor:grab; user-select:none;
}
.product-rail.dragging{cursor:grabbing; scroll-snap-type:none;}
.product-rail.dragging .product-card{pointer-events:none;}
.product-rail::-webkit-scrollbar{display:none;}
.product-card{
  scroll-snap-align:start; flex:0 0 240px; background:var(--near-black);
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
  transition:background .3s ease, opacity .6s ease, transform .6s ease;
  opacity:0; transform:translateY(18px);
}
.product-card.in-view{opacity:1; transform:translateY(0);}
.product-card:hover{background:var(--panel);}
.product-card .product-thumb{
  height:180px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(70,184,218,0.16), rgba(41,87,164,0.24)); overflow:hidden;
}
.product-card .product-thumb svg{width:52px; height:52px; opacity:0.8;}
.product-card .product-thumb img{width:100%; height:100%; object-fit:cover;}
.product-card .product-info{padding:20px 22px 26px;}
.product-card .product-cat{font-size:11px; letter-spacing:0.1em; color:var(--scooter-cyan); text-transform:uppercase; margin-bottom:6px;}
.product-card .product-name{font-family:'Rajdhani'; font-weight:600; font-size:17px; margin-bottom:6px;}
.product-card .product-price{font-size:13.5px; color:var(--muted);}
.placeholder-note{margin-top:20px; font-size:12.5px; color:var(--muted); font-style:italic;}

/* ===== DEALER CTA BAND ===== */
.cta-band{padding:90px 0; text-align:center; background:var(--paper); color:var(--paper-ink);}
.cta-band h2{font-size:clamp(28px,4vw,44px); margin-bottom:16px;}
.cta-band p{color:#41403A; font-size:15.5px; max-width:480px; margin:0 auto 30px;}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.cta-band .btn.cyan{border-color:var(--faito-blue); color:var(--paper-ink);}
.cta-band .btn.cyan:hover{background:rgba(41,87,164,0.08);}
.cta-band .btn.amber{border-color:var(--lifestyle-amber); color:var(--paper-ink);}
.cta-band .btn.amber:hover{background:rgba(201,138,62,0.1);}


/* "No banner" page style (Page → Page Banner → Banner style): just a title
   under the site header, for simple text pages. */
.page-plain-title{padding:calc(var(--nav-h) + 56px) 0 0; background:var(--near-black);}
.page-plain-title .page-title{margin-bottom:12px;}
.page-plain-title + .systems{padding-top:48px;}

/* single blog post (single.php) */
.post-meta{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}