/* =====================================================================
   ControlUnits Sections – styles of all our page sections (one file, loaded on the home page, the shop / category
   pages and /support/; see CU_Sections). Blocks in this order:
     home     – "Vehicle components repair" tiles [cu_repair_tiles]
     shop     – category tiles [cu_category_tiles] + the scroll row / slider shared with [cu_new_products]
     home     – "New Repair Services" [cu_new_products], "Browse by vehicle make" [cu_make_browser],
                benefits bar [cu_benefits_bar]
     support  – /support/ cards [cu_support_cards]
     home     – tiles head, "View repairs", hover description (additions to [cu_repair_tiles])
     home     – "Electronics remanufacture" [cu_home_services]
   ===================================================================== */

/* =====================================================================
   Home page tiles "Vehicle components repair" – [cu_repair_tiles] (0.8.0)
   Same look as the former Elementor info-box carousel; hover like the mega menu tiles.
   ===================================================================== */
.cu-tiles{display:grid;grid-template-columns:repeat(var(--cu-tiles-cols,6),minmax(0,1fr));gap:10px;}
.cu-tiles .cu-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;
  background:#fff;border:1px solid transparent;border-radius:5px;text-align:center;
  text-decoration:none !important;color:#000;transition:border-color .15s,box-shadow .15s;
}
.cu-tiles .cu-tile:hover,.cu-tiles .cu-tile:focus-visible{border-color:#be1622;box-shadow:0 6px 16px -8px rgba(226,0,26,.5);}
.cu-tiles .cu-tile:focus{outline:none;}
.cu-tiles .cu-tile-thumb{display:flex;align-items:center;justify-content:center;width:220px;max-width:100%;aspect-ratio:1/1;}
.cu-tiles .cu-tile-img{width:100%;max-width:100%;height:auto;display:block;}
.cu-tiles .cu-tile-title{
  margin:0;font-family:"Inter Tight",Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;line-height:1.2;color:#000;
}
@media (max-width:1024px){ .cu-tiles{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:767px){ .cu-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} .cu-tiles .cu-tile-title{font-size:16px;} }

/* =====================================================================
   Shop / category page tiles – [cu_category_tiles] (0.9.0)
   Replaces WoodMart's category carousel: native scroll-snap row, 7 / 4 / 2 per view, mouse drag + slim slider (0.10.0).
   ===================================================================== */
.cu-cat-tiles{position:relative;--cu-cat-per:7;--cu-cat-gap:10px;}
.cu-cat-track{
  cursor:grab;display:grid;grid-auto-flow:column;gap:var(--cu-cat-gap);
  grid-auto-columns:calc((100% - (var(--cu-cat-per) - 1) * var(--cu-cat-gap)) / var(--cu-cat-per));
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:2px 0 14px;margin-bottom:-12px; /* room for the hover shadow */
}
.cu-cat-track::-webkit-scrollbar{display:none;}
.cu-cat-tiles .cu-cat-tile{
  scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;
  background:#fff;border:1px solid var(--wd-bordered-brd, var(--brdcolor-gray-300, rgba(0,0,0,.106)));border-radius:5px;
  text-align:center;text-decoration:none !important;color:#000;transition:border-color .15s,box-shadow .15s;
}
.cu-cat-tiles .cu-cat-tile:hover,.cu-cat-tiles .cu-cat-tile:focus-visible{border-color:#be1622;box-shadow:0 6px 16px -8px rgba(226,0,26,.5);}
.cu-cat-tiles .cu-cat-tile:focus{outline:none;}
.cu-cat-thumb{display:block;width:100%;aspect-ratio:1/1;}
.cu-cat-tiles .cu-cat-img{width:100%;height:100%;object-fit:contain;display:block;}
.cu-cat-name{font-family:"Inter Tight",sans-serif;font-size:16px;font-weight:500;line-height:1.4;color:#000;}
.cu-cat-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none;}
.cu-cat-track.is-dragging .cu-cat-tile{pointer-events:none;}
.cu-cat-tiles .cu-cat-tile img{-webkit-user-drag:none;user-select:none;}
/* slim slider under the tiles: thumb = visible share of the row (drag it or click the bar) */
.cu-cat-bar{position:relative;height:6px;margin:16px auto 0;max-width:360px;border-radius:3px;background:var(--brdcolor-gray-300, #e3e5e8);cursor:pointer;touch-action:none;}
.cu-cat-bar[hidden]{display:none;}
.cu-cat-thumb-bar{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:#be1622;cursor:grab;transition:background .15s;}
.cu-cat-thumb-bar:active{cursor:grabbing;}
.cu-cat-bar:hover .cu-cat-thumb-bar{background:#9c1019;}
/* an empty shortcode (page without sub-categories) must not leave a gap in the Elementor container */
.elementor-widget-shortcode:has(.elementor-shortcode:empty){display:none;}
@media (max-width:1024px){ .cu-cat-tiles{--cu-cat-per:4;} }
@media (max-width:767px){ .cu-cat-tiles{--cu-cat-per:2;} .cu-cat-name{font-size:13px;} }

/* =====================================================================
   Home "New Repair Services" – [cu_new_products] (0.11.0): the shop's product cards in our scroll row + slider
   (same slider as [cu_category_tiles]); desktop 233px cards + 10px gap like the category grid (0.11.1), tablet 2, phone 1.5 per view.
   ===================================================================== */
.cu-prod-slider{--cu-cat-per:4;--cu-cat-gap:10px;position:relative;}
/* desktop: cards as wide as in the category grid (233px, 10px gap – owner 2026-10-07), the next card peeks in */
@media (min-width:1025px){ .cu-prod-slider .cu-slider-track{grid-auto-columns:233px !important;} }
.cu-prod-slider .cu-slider-track{
  display:grid !important;grid-auto-flow:column;grid-template-columns:none !important;gap:var(--cu-cat-gap) !important;
  grid-auto-columns:calc((100% - (var(--cu-cat-per) - 1) * var(--cu-cat-gap)) / var(--cu-cat-per));
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;
  margin-left:0 !important;margin-right:0 !important;
}
.cu-prod-slider .cu-slider-track::-webkit-scrollbar{display:none;}
.cu-prod-slider .cu-slider-track > *{scroll-snap-align:start;width:auto !important;max-width:none !important;}
.cu-prod-slider .cu-slider-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none;}
.cu-prod-slider .cu-slider-track.is-dragging > *{pointer-events:none;}
.cu-prod-slider img{-webkit-user-drag:none;}
@media (max-width:1024px){ .cu-prod-slider{--cu-cat-per:2;} }
@media (max-width:767px){ .cu-prod-slider{--cu-cat-per:1.5;} }

/* =====================================================================
   Home "Browse by vehicle make" – [cu_make_browser] (0.12.0): tabs Popular / A–Z, three tool tiles
   (registration = coming soon, part number = header search, contact), make tiles with logo, repair form / phone bar.
   ===================================================================== */
.cu-makes{--cu-red:#be1622;--cu-brd:var(--brdcolor-gray-300, #e3e5e8);}
.cu-makes-sub{margin:0 0 18px;color:#6b7280;font-size:15px;line-height:1.5;text-align:center;}
.cu-makes-tabs{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto 18px;padding:4px;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.cu-makes .cu-makes-tab{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 22px !important;border:0 !important;border-radius:6px !important;
  background:transparent !important;color:#374151 !important;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;text-transform:none !important;letter-spacing:0;cursor:pointer;box-shadow:none !important;transition:background .15s,color .15s;}
.cu-makes .cu-makes-tab svg{width:18px;height:18px;flex:0 0 auto;}
.cu-makes .cu-makes-tab:hover{color:var(--cu-red) !important;}
.cu-makes .cu-makes-tab.is-active{background:var(--cu-red) !important;color:#fff !important;}
.cu-makes .cu-makes-tab[data-tab="popular"].is-active svg{fill:currentColor;}
.cu-makes-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px;}
.cu-makes-tool{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--cu-brd);border-radius:6px;
  color:#111 !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s;}
a.cu-makes-tool:hover,a.cu-makes-tool:focus-visible{border-color:var(--cu-red);box-shadow:0 6px 16px -8px rgba(226,0,26,.5);outline:none;}
.cu-makes-tool-ic{display:flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;border-radius:8px;background:#f3f4f6;color:#111;}
.cu-makes-tool-ic svg{width:24px;height:24px;}
.cu-makes-tool-txt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
.cu-makes-tool-title{font-family:"Inter Tight",sans-serif;font-size:15px;font-weight:600;line-height:1.3;}
.cu-makes-tool-desc{font-size:13px;line-height:1.4;color:#6b7280;}
.cu-makes-tool.is-soon{cursor:default;background:#f9fafb;}
.cu-makes-tool.is-soon .cu-makes-tool-ic,.cu-makes-tool.is-soon .cu-makes-tool-desc{opacity:.5;}
.cu-makes-tool.is-soon .cu-makes-tool-title{color:#8b8f97;}
.cu-soon{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#fbecee;color:var(--cu-red);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px;white-space:nowrap;}
.cu-makes-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.cu-makes-grid[hidden]{display:none;}
.cu-make{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 12px;background:#fff;border:1px solid var(--cu-brd);border-radius:6px;
  color:#111 !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s;}
.cu-make:hover,.cu-make:focus-visible{border-color:var(--cu-red);box-shadow:0 6px 16px -8px rgba(226,0,26,.5);outline:none;}
.cu-make-logo{display:flex;align-items:center;justify-content:center;flex:0 0 46px;height:34px;}
.cu-makes .cu-make-img{max-width:46px;max-height:34px;width:auto;height:auto;object-fit:contain;}
.cu-make-name{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.25;}
.cu-make-chev{display:flex;flex:0 0 auto;color:var(--cu-red);}
.cu-make-chev svg{width:16px;height:16px;stroke-width:2.4;}
.cu-makes-cta{display:flex;align-items:center;gap:20px;margin-top:22px;padding:20px 24px;background:#fff;border:1px solid var(--cu-brd);border-radius:8px;}
.cu-makes-cta-ic{display:flex;align-items:center;justify-content:center;flex:0 0 64px;height:64px;border-radius:50%;background:#f3f4f6;color:#111;}
.cu-makes-cta-ic svg{width:30px;height:30px;}
.cu-makes-cta-txt{flex:1 1 auto;min-width:0;}
.cu-makes-cta-txt h3{margin:0 0 4px;font-family:"Inter Tight",sans-serif;font-size:19px;font-weight:700;line-height:1.3;}
.cu-makes-cta-txt p{margin:0;font-size:14px;line-height:1.5;color:#6b7280;}
.cu-makes-cta-btns{display:flex;gap:12px;flex:0 0 auto;}
.cu-makes-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 18px;border:1px solid var(--cu-red);border-radius:6px;background:#fff;
  color:var(--cu-red) !important;font-weight:700;font-size:14px;text-decoration:none !important;white-space:nowrap;transition:background .15s,color .15s;}
.cu-makes-btn svg{width:18px;height:18px;flex:0 0 auto;}
.cu-makes-btn svg:last-child{width:14px;height:14px;stroke-width:2.4;}
.cu-makes-btn:hover{background:#fbecee;}
.cu-makes-btn.is-primary{background:var(--cu-red);color:#fff !important;}
.cu-makes-btn.is-primary:hover{background:#9c1019;border-color:#9c1019;}
/* header search highlight after "Search by part number" */
.cu-search-pulse{animation:cu-search-pulse 1.6s ease-out 1;border-radius:6px;}
@keyframes cu-search-pulse{0%{box-shadow:0 0 0 0 rgba(190,22,34,.55);}70%{box-shadow:0 0 0 12px rgba(190,22,34,0);}100%{box-shadow:0 0 0 0 rgba(190,22,34,0);}}
@media (max-width:1024px){
  .cu-makes-grid{grid-template-columns:repeat(4,1fr);}
  .cu-makes-tools{grid-template-columns:1fr;}
  .cu-makes-cta{flex-wrap:wrap;}
  .cu-makes-cta-btns{width:100%;}
}
@media (max-width:767px){
  .cu-makes-sub{font-size:14px;}
  .cu-makes-tabs{width:100%;}
  .cu-makes .cu-makes-tab{flex:1 1 0;justify-content:center;padding:8px 10px !important;}
  .cu-makes-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .cu-make{min-height:50px;padding:8px 10px;gap:8px;}
  .cu-make-logo{flex-basis:38px;height:30px;}
  .cu-makes .cu-make-img{max-width:38px;max-height:30px;}
  .cu-make-name{font-size:13px;}
  .cu-makes-cta{padding:16px;gap:14px;}
  .cu-makes-cta-ic{flex-basis:48px;height:48px;}
  .cu-makes-cta-ic svg{width:24px;height:24px;}
  .cu-makes-cta-txt h3{font-size:17px;}
  .cu-makes-cta-btns{flex-direction:column;}
  .cu-makes-btn{justify-content:center;}
}

/* Home benefits bar under the menu – [cu_benefits_bar] (0.13.x): 4 columns with thin dividers (2 x 2 on tablet / mobile),
   hover like the mega menu; the rating item links to both review pages in its second line */
.cu-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1350px;margin:0 auto;}
.cu-benefits .cu-benefit{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;border-left:1px solid var(--brdcolor-gray-300,#e3e5e8);color:#000 !important;text-decoration:none !important;}
.cu-benefits .cu-benefit:first-child{border-left:0;}
.cu-benefits .cu-benefit-icon{display:block;flex:0 0 auto;width:auto;height:46px;max-width:none;margin:0;object-fit:contain;transition:transform .2s;}
.cu-benefits .cu-benefit-txt{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cu-benefits .cu-benefit-title{font-family:"Inter Tight",sans-serif;font-size:16px;font-weight:600;line-height:1.3;transition:color .2s;}
.cu-benefits .cu-benefit-sub{font-size:12px;line-height:1.4;color:#000;}
.cu-benefits a.cu-benefit:hover .cu-benefit-title,.cu-benefits a.cu-benefit:focus-visible .cu-benefit-title{color:#be1622;}
.cu-benefits a.cu-benefit:hover .cu-benefit-icon{transform:translateY(-2px);}
.cu-benefits a.cu-benefit:focus{outline:none;}
.cu-benefits .cu-benefit-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.cu-benefits .cu-benefit-links a{color:#000 !important;font-weight:600;text-decoration:underline !important;text-decoration-color:rgba(0,0,0,.25) !important;text-underline-offset:3px;transition:color .2s;}
.cu-benefits .cu-benefit-links a:hover,.cu-benefits .cu-benefit-links a:focus-visible{color:#be1622 !important;text-decoration-color:#be1622 !important;}
.cu-benefits .cu-benefit-links span{color:#9ca3af;}
.cu-benefits .cu-benefit-star{color:#f5a623;}
@media (max-width:1024px){
  .cu-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;}
  .cu-benefits .cu-benefit:nth-child(odd){border-left:0;}
}
@media (max-width:767px){
  .cu-benefits{row-gap:12px;}
  /* 0.14.2: the wider pictures sit above the text (centred) – the text keeps the whole column, no 3-line wraps */
  .cu-benefits .cu-benefit{flex-direction:column;justify-content:flex-start;gap:6px;padding:0 6px;text-align:center;}
  .cu-benefits .cu-benefit-icon{flex-basis:auto;width:auto;height:34px;}
  .cu-benefits .cu-benefit-txt{gap:2px;align-items:center;}
  .cu-benefits .cu-benefit-links{justify-content:center;}
  .cu-benefits .cu-benefit-title{font-size:13px;line-height:1.25;}
  .cu-benefits .cu-benefit-sub{font-size:11px;line-height:1.35;}
  .cu-benefits .cu-benefit-links{gap:4px;}
}

/* ---- 0.15.0: /support/ page cards [cu_support_cards] – owner 2026-10-14. Style of the new cards (How It Works on
   products, mega menu tiles): white card, thin border, radius 10, owner's picture left, title + text, chevron;
   hover red border + soft red shadow. 3 columns filled top to bottom like before, 2 on tablet, 1 on mobile. */
.cu-support{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--cu-sup-rows,4),auto);grid-auto-flow:column;gap:18px 20px;}
.cu-support .cu-support-card{display:flex;align-items:center;gap:18px;min-height:128px;padding:18px 18px 18px 16px;background:#fff;border:1px solid #e7e8ec;border-radius:10px;color:#1c1d20 !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s;}
.cu-support .cu-support-card:hover,.cu-support .cu-support-card:focus-visible{border-color:#be1622;box-shadow:0 6px 16px -8px rgba(226,0,26,.5);}
.cu-support .cu-support-card:focus{outline:none;}
.cu-support .cu-support-ico{flex:0 0 104px;height:84px;display:flex;align-items:center;justify-content:center;}
.cu-support .cu-support-ico img{display:block;width:auto;height:auto;max-width:104px;max-height:84px;object-fit:contain;transition:transform .2s;}
.cu-support .cu-support-card:hover .cu-support-ico img{transform:translateY(-2px);}
.cu-support .cu-support-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;}
.cu-support .cu-support-title{margin:0;font-family:"Inter Tight",sans-serif;font-size:18px;line-height:1.25;font-weight:600;color:#1c1d20;transition:color .15s;}
.cu-support .cu-support-card:hover .cu-support-title{color:#be1622;}
.cu-support .cu-support-text{font-size:14px;line-height:1.5;color:#5b616e;}
.cu-support .cu-support-chev{flex:0 0 18px;display:flex;color:#c4c8d0;transition:color .15s,transform .15s;}
.cu-support .cu-support-chev svg{width:18px;height:18px;}
.cu-support .cu-support-card:hover .cu-support-chev{color:#be1622;transform:translateX(2px);}
@media (max-width:1024px){
  .cu-support{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--cu-sup-rows-t,6),auto);}
}
@media (max-width:640px){
  .cu-support{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:12px;}
  .cu-support .cu-support-card{min-height:0;gap:14px;padding:14px 14px 14px 12px;}
  .cu-support .cu-support-ico{flex-basis:80px;height:64px;}
  .cu-support .cu-support-ico img{max-width:80px;max-height:64px;}
  .cu-support .cu-support-title{font-size:16px;}
  .cu-support .cu-support-text{font-size:13.5px;}
}

/* 0.18.0: home page "Vehicle components repair" – section head (same style as "Electronics remanufacture" of the
   ControlUnits Home plugin) and a "View repairs" row with an arrow at the foot of every tile */
.cu-tiles-head{max-width:760px;margin:0 auto 32px;text-align:center;}
.cu-tiles-head .cu-tiles-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--wd-primary-color,#be1622);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;}
.cu-tiles-head .cu-tiles-eyebrow::before,.cu-tiles-head .cu-tiles-eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.5;}
.cu-tiles-head .cu-tiles-heading{margin:0;font-size:42px;line-height:1.15;text-wrap:balance;}
.cu-tiles-head .cu-tiles-lead{margin:10px 0 0;color:#5c6068;font-size:17px;line-height:1.5;text-wrap:balance;}
.cu-tiles .cu-tile-title{flex:0 0 auto;}
.cu-tiles .cu-tile-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;align-self:stretch;margin-top:auto;padding:12px 4px 2px;border-top:1px solid #ececec;color:#1d1d1f;font-family:"Inter Tight",Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;line-height:1.2;}
.cu-tiles .cu-tile-cta-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fdecee;color:#be1622;transition:background-color .15s,color .15s,transform .15s;}
.cu-tiles .cu-tile:hover .cu-tile-cta-ico,.cu-tiles .cu-tile:focus-visible .cu-tile-cta-ico{background:#be1622;color:#fff;transform:translateX(3px);}
.cu-tiles .cu-tile:hover .cu-tile-cta-text,.cu-tiles .cu-tile:focus-visible .cu-tile-cta-text{color:#be1622;}
@media (max-width:1024px){ .cu-tiles-head .cu-tiles-heading{font-size:34px;} }
@media (max-width:767px){
  .cu-tiles-head{margin-bottom:22px;}
  .cu-tiles-head .cu-tiles-heading{font-size:26px;}
  .cu-tiles-head .cu-tiles-lead{font-size:15px;}
  .cu-tiles .cu-tile-cta{font-size:13px;padding-top:10px;}
  .cu-tiles .cu-tile-cta-ico{width:30px;height:30px;}
}

/* 0.18.1: home tiles – titles like the card titles of "Electronics remanufacture" below (Inter Tight 700, -0.01em),
   text left-aligned (picture stays centred) – owner */
.cu-tiles .cu-tile{align-items:flex-start;text-align:left;}
.cu-tiles .cu-tile-thumb{align-self:center;}
.cu-tiles .cu-tile-title{align-self:stretch;padding:0 4px;font-weight:700;letter-spacing:-.01em;}

/* 0.19.0 / 0.19.3: home tiles – description on hover (desktop): the picture gets 48px smaller and the text slides in
   under the title, the tile keeps its height (owner's choice); phones / touch: no hover, no description */
.cu-tiles .cu-tile{position:relative;container-type:inline-size;}
.cu-tiles .cu-tile-thumb{aspect-ratio:auto;height:min(220px,100cqi);transition:height .3s ease;}
.cu-tiles .cu-tile-img{width:auto;height:100%;max-height:100%;object-fit:contain;}
.cu-tiles .cu-tile-desc{display:block;align-self:stretch;height:0;margin-top:-10px;padding:0 4px;overflow:hidden;opacity:0;color:#5c6068;font-family:Inter,Arial,Helvetica,sans-serif;font-size:14px;font-weight:400;line-height:1.45;transition:height .3s ease,opacity .3s ease;}
.cu-tiles .cu-tile-desc-in{display:block;padding-top:6px;}
.cu-tiles .cu-tile:hover .cu-tile-thumb,.cu-tiles .cu-tile:focus-visible .cu-tile-thumb{height:calc(min(220px,100cqi) - 48px);}
.cu-tiles .cu-tile:hover .cu-tile-desc,.cu-tiles .cu-tile:focus-visible .cu-tile-desc{height:48px;opacity:1;}
@media (hover:none){
  .cu-tiles .cu-tile-desc{display:none;}
  .cu-tiles .cu-tile:hover .cu-tile-thumb{height:min(220px,100cqi);}
}

/* =====================================================================
   Home page: "Electronics remanufacture" — [cu_home_services].
   Centered header (eyebrow, heading, lead) and three dark service
   cards: badge and title on the left next to the icon on the right,
   copy and red accent bar below (1.3.0).
   Desktop: three columns. Tablet and phone: one row that scrolls
   sideways with snap, the next card peeking in.
   ===================================================================== */

.cu-services {
	--cu-svc-accent: var(--wd-primary-color, #be1622);
	--cu-svc-card-top: #2e2e2e;      /* 1.4.0: neutral dark grey around #242424 (the earlier banners), no blue tint */
	--cu-svc-card-bottom: #1b1b1b;
	--cu-svc-badge-bg: #ffc72c;
	--cu-svc-badge-text: #17181c;
	--cu-svc-card-text: #c4c7ce;
	--cu-svc-lead: #5c6068;
}

/* ---- Header ---- */
.cu-services .cu-services__head {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}

.cu-services .cu-services__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	color: var(--cu-svc-accent);
	font-family: var(--wd-text-font, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cu-services .cu-services__eyebrow::before,
.cu-services .cu-services__eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.cu-services .cu-services__title {
	margin: 0;
	font-size: 42px;
	line-height: 1.15;
	text-wrap: balance;
}

.cu-services .cu-services__lead {
	margin: 10px 0 0;
	color: var(--cu-svc-lead);
	font-size: 17px;
	line-height: 1.5;
}

/* ---- Cards ---- */
.cu-services .cu-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card (1.3.0): badge and title on the left at the height of the icon on the right, the description and the accent
   bar below over the full width. The title stays on one line: its size follows the free width next to the icon
   (container units), "Replacement Units" being the longest (about 8.4 em) – smaller titles, bigger icons. */
.cu-services .cu-service {
	--cu-svc-ico: min(170px, 44cqi);
	--cu-svc-gap: 16px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas: "badge media" "title media" "text text" "bar bar";
	column-gap: var(--cu-svc-gap);
	margin: 0;
	padding: 26px 28px 28px;
	box-sizing: border-box;
	container-type: inline-size;
	overflow: hidden;
	background: linear-gradient(165deg, var(--cu-svc-card-top) 0%, var(--cu-svc-card-bottom) 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(17, 18, 22, 0.14);
}

.cu-services .cu-service__top,
.cu-services .cu-service__heading {
	display: contents;
}

/* Same box for every icon (wide and square pictures), so titles and descriptions line up across the cards. */
.cu-services .cu-service__media {
	grid-area: media;
	align-self: center;
	width: var(--cu-svc-ico);
	height: calc(var(--cu-svc-ico) * 0.6);
}

.cu-services .cu-service__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
}

.cu-services .cu-service__badge {
	grid-area: badge;
	justify-self: start;
	align-self: end;
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--cu-svc-badge-bg);
	color: var(--cu-svc-badge-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.cu-services .cu-service__title {
	grid-area: title;
	align-self: start;
	margin: 0;
	white-space: nowrap;
	color: #fff;
	font-size: clamp(16px, calc((100cqi - var(--cu-svc-ico) - var(--cu-svc-gap)) / 8.6), 24px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cu-services .cu-service__text {
	grid-area: text;
	margin: 18px 0 22px;
	color: var(--cu-svc-card-text);
	font-size: 15px;
	line-height: 1.6;
}

/* Accent bar at the foot, so the bars line up across cards. */
.cu-services .cu-service::after {
	content: "";
	grid-area: bar;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--cu-svc-accent);
}

/* ---- Tablet and phone: one sideways-scrolling row ---- */
@media (max-width: 1024px) {
	.cu-services .cu-services__grid {
		grid-auto-columns: max(280px, 46%);
		grid-auto-flow: column;
		grid-template-columns: none;
		gap: 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-bottom: 12px;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.cu-services .cu-service {
		scroll-snap-align: start;
	}

	.cu-services .cu-services__title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.cu-services .cu-services__head {
		margin-bottom: 22px;
	}

	.cu-services .cu-services__title {
		font-size: 26px;
	}

	.cu-services .cu-services__lead {
		font-size: 15px;
	}

	.cu-services .cu-services__grid {
		grid-auto-columns: 88%;
		gap: 14px;
	}

	.cu-services .cu-service {
		--cu-svc-ico: min(150px, 38cqi);
		--cu-svc-gap: 12px;
		padding: 22px 20px 24px;
	}
}