/* Isolated public design system. Admin styles remain in styles.css. */



:root{--p-ink:#162434;--p-muted:#647386;--p-line:#e0e6ed;--p-red:#d91f2d;--p-soft:#f6f8fa}html{scroll-behavior:auto}body{margin:0;color:var(--p-ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:white}*{box-sizing:border-box}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.public-wrap{width:min(1360px,calc(100% - 80px));margin:auto}.public-header{height:80px;background:#fff;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--p-line)}.public-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.public-logo{font-size:26px;font-weight:900;letter-spacing:-1.5px;color:#172333;line-height:1}.public-logo span{font-size:9px;display:block;letter-spacing:2px;color:var(--p-red);margin-top:7px}.public-nav{display:flex;align-items:center;gap:36px}.public-nav a{font-size:14px;font-weight:650;color:#596779;transition:color .2s}.public-nav a:hover,.public-nav a.active{color:var(--p-red)}.public-menu{display:none;border:1px solid var(--p-line);background:#fff;border-radius:8px;padding:8px 12px}.public-content{min-height:65vh;animation:publicEnter .4s ease both}@keyframes publicEnter{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:none}}.public-eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--p-red)}.public-hero{min-height:min(680px,70vw);position:relative;display:flex;align-items:center;overflow:hidden;background:#182839;color:#fff}.public-hero.with-media{min-height:620px}.public-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.public-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,25,38,.85),rgba(12,25,38,.36) 75%)}.public-hero-content{position:relative;z-index:1;padding:110px 0}.public-hero-content .public-eyebrow{color:#ff7a83}.public-hero h1{font-size:clamp(44px,6vw,82px);line-height:1.06;letter-spacing:-.055em;max-width:800px;margin:20px 0}.public-hero p{font-size:18px;line-height:1.65;max-width:600px;color:#d9e2ea;margin-bottom:32px}.public-primary{display:inline-flex;background:var(--p-red);color:#fff;min-height:48px;padding:13px 23px;border-radius:8px;align-items:center;gap:25px;font-size:14px;font-weight:800;transition:background .22s,transform .22s}.public-primary:hover{background:#b81828;transform:translateY(-2px)}.public-hero-controls{position:absolute;bottom:32px;right:5%;z-index:3;display:flex;align-items:center;gap:18px}.public-hero-controls button{border:1px solid #ffffff99;border-radius:50%;height:40px;width:40px;background:#14283a88;color:#fff}.public-hero-controls span{font-size:13px}.public-section{padding:80px 0}.public-section-soft{background:var(--p-soft)}.public-section-heading{margin-bottom:30px}.public-section-heading h2{font-size:clamp(26px,3vw,42px);margin:12px 0 7px;letter-spacing:-.04em}.public-section-heading p{color:var(--p-muted);line-height:1.5;margin:0}.public-supplier-grid,.public-family-grid,.public-products-grid{display:grid;gap:20px}.public-supplier-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.public-family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.public-products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.public-supplier-card,.public-product-card,.public-family-card{border:1px solid var(--p-line);border-radius:13px;overflow:hidden;background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s;min-width:0}.public-supplier-card:hover,.public-product-card:hover,.public-family-card:hover{transform:translateY(-4px);border-color:#cbd5df;box-shadow:0 12px 32px #10203011}.public-supplier-logo{height:160px;padding:25px;display:flex;align-items:center;justify-content:center;background:#fafbfc;border-bottom:1px solid var(--p-line)}.public-supplier-logo img{max-width:100%;max-height:100%;object-fit:contain}.public-supplier-card>div:last-child{padding:23px}.public-supplier-card h3,.public-product-card h3,.public-family-card h3{font-size:20px;letter-spacing:-.035em;margin:10px 0}.public-supplier-card p,.public-product-card p{font-size:13px;line-height:1.6;color:var(--p-muted);min-height:60px}.public-supplier-card span:last-child,.public-card-link{font-size:13px;font-weight:800;color:var(--p-red)}.public-family-image,.public-card-photo{aspect-ratio:16/10;overflow:hidden;background:var(--p-soft)}.public-family-image img,.public-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.public-family-card:hover img,.public-product-card:hover img{transform:scale(1.035)}.public-family-card>div:last-child{padding:22px}.public-family-card>div:last-child>span:last-child{font-size:13px;color:var(--p-muted)}.public-card-info{padding:22px}.public-card-meta{font-size:11px;color:var(--p-muted);font-weight:700}.public-card-link{display:flex;justify-content:space-between;margin-top:20px}.public-media-placeholder{width:100%;height:100%;min-height:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;background:linear-gradient(140deg,#f8fafc,#eef2f6);color:#99a7b3}.public-media-placeholder span{font-size:23px;font-weight:900;letter-spacing:-.05em}.public-media-placeholder small{font-size:9px;letter-spacing:.16em}.public-text-link{display:inline-block;margin-top:30px;color:var(--p-red);font-weight:750;font-size:14px}.public-footer{border-top:1px solid var(--p-line);padding:40px 0;background:#f9fafb}.public-footer .public-wrap{display:flex;gap:25px;align-items:center;justify-content:space-between}.public-footer strong{font-size:15px}.public-footer span,.public-footer a{font-size:13px;color:var(--p-muted)}.public-page{padding:34px 0 90px}.public-breadcrumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--p-muted);margin-bottom:52px}.public-breadcrumb a:hover{color:var(--p-red)}.public-titlebar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 40px}.public-titlebar h1,.public-detail-banner h1,.public-product-intro h1{font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.055em;margin:12px 0 14px}.public-titlebar p{margin:0;color:var(--p-muted)}.public-count{border:1px solid var(--p-line);padding:10px 14px;border-radius:30px;color:var(--p-muted);font-size:13px;white-space:nowrap}.public-filters{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr auto;gap:12px;align-items:end;padding:20px;background:var(--p-soft);border:1px solid var(--p-line);border-radius:12px;margin-bottom:25px}.public-filters label{display:grid;gap:8px;min-width:0}.public-filters label span{font-size:11px;font-weight:750;color:var(--p-muted)}.public-filters input,.public-filters select{min-width:0;width:100%;height:44px;border:1px solid #d5dfe8;background:#fff;padding:0 12px;border-radius:8px;color:var(--p-ink);font-size:13px}.public-clear{height:44px;border:1px solid #d5dfe8;border-radius:8px;background:#fff;color:var(--p-muted);padding:0 15px;font-weight:700}.public-empty{grid-column:1/-1;width:100%;padding:58px 25px;border:1px dashed #cbd5df;text-align:center;border-radius:12px;background:#fafbfc}.public-empty p{color:var(--p-muted);font-size:14px}.public-pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:36px;font-size:13px}.public-pagination button{background:#fff;border:1px solid var(--p-line);padding:12px;border-radius:8px}.public-pagination button:disabled{opacity:.35;cursor:default}.public-detail-banner{min-height:290px;border-radius:16px;overflow:hidden;position:relative;background:#182839;color:#fff;display:flex;align-items:center}.public-detail-banner>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.35}.public-detail-banner-text{padding:55px;position:relative;z-index:1}.public-detail-banner p{color:#d7e0e8;max-width:680px;line-height:1.6}.public-product-detail{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;margin-bottom:65px}.public-main-image{aspect-ratio:4/3;border:1px solid var(--p-line);border-radius:12px;overflow:hidden;background:var(--p-soft)}.public-main-image>img{width:100%;height:100%;object-fit:contain}.public-thumbnails{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.public-thumb{width:82px;height:72px;border:2px solid var(--p-line);background:var(--p-soft);padding:0;border-radius:8px;overflow:hidden}.public-thumb.selected{border-color:var(--p-red)}.public-thumb img{height:100%;width:100%;object-fit:cover}.public-product-intro{padding-top:10px}.public-product-summary{font-size:20px;line-height:1.55;font-weight:550}.public-description{font-size:15px;line-height:1.85;color:var(--p-muted);white-space:pre-line}.public-detail-info{display:grid;gap:13px;margin:30px 0}.public-detail-info a{font-size:14px;font-weight:700;color:var(--p-red)}.public-spec-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:60px}.public-detail-section{margin-bottom:40px}.public-detail-section h2{font-size:24px;letter-spacing:-.035em;border-bottom:1px solid var(--p-line);padding-bottom:17px;margin:0 0 20px}.public-specs{margin:0}.public-specs>div{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--p-line);font-size:14px}.public-specs dt{color:var(--p-muted)}.public-specs dd{margin:0;font-weight:750}.public-feature-list{margin:0;padding-left:20px;color:var(--p-muted);line-height:2}.public-documents{display:grid;gap:10px}.public-documents button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;background:#fff;border:1px solid var(--p-line);border-radius:8px}.public-documents small{display:block;color:var(--p-muted);margin-top:4px}.public-documents b{color:var(--p-red);font-size:13px;white-space:nowrap}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #da4f5b;outline-offset:3px}@media(max-width:1150px){.public-supplier-grid,.public-products-grid{grid-template-columns:repeat(3,1fr)}.public-filters{grid-template-columns:repeat(2,1fr)}.public-search-field{grid-column:1/-1}}@media(max-width:760px){.public-wrap{width:calc(100% - 36px)}.public-header{height:70px}.public-menu{display:block}.public-nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;padding:22px;flex-direction:column;align-items:stretch;gap:20px;border-bottom:1px solid var(--p-line)}.public-nav.open{display:flex}.public-hero.with-media,.public-hero{min-height:500px}.public-hero-content{padding:70px 0}.public-section{padding:55px 0}.public-supplier-grid,.public-family-grid,.public-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-product-detail,.public-spec-layout{grid-template-columns:1fr;gap:25px}.public-titlebar{align-items:start;flex-direction:column}.public-detail-banner-text{padding:30px}.public-footer .public-wrap{align-items:start;flex-direction:column}.public-breadcrumb{margin-bottom:28px}}@media(max-width:480px){.public-supplier-grid,.public-family-grid,.public-products-grid,.public-filters{grid-template-columns:1fr}.public-search-field{grid-column:auto}.public-page{padding-bottom:55px}.public-card-info{padding:17px}.public-hero h1{font-size:44px}.public-hero-controls{bottom:15px}.public-specs>div{gap:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}







/* Phase 5 feedback fixes */



html{scroll-behavior:auto!important;scroll-padding-top:0}



.public-logo{display:inline-flex;align-items:center;justify-content:flex-start;min-width:90px;text-decoration:none}



.public-logo img{display:block;max-width:178px;width:auto;height:48px;object-fit:contain}



.public-logo img[hidden],.public-logo-fallback[hidden]{display:none!important}



.public-logo-fallback{font-size:27px;letter-spacing:-.05em;font-weight:900;color:#132136}



.public-hero.with-media{position:relative;isolation:isolate;overflow:hidden}



.public-hero-slides{position:absolute;inset:0;z-index:-2;pointer-events:none}



.public-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 900ms ease,visibility 900ms ease;will-change:opacity}



.public-hero-slide.is-active{opacity:1;visibility:visible}



.public-hero-slide img{display:block;width:100%;height:100%;object-fit:cover}



@media(prefers-reduced-motion:reduce){.public-hero-slide{transition:none}}







.public-hero-slides{z-index:0}



.public-hero-shade{z-index:1;pointer-events:none}



.public-hero-content{z-index:2}



.public-hero-controls{z-index:3}







/* HOMEPAGE HERO DISPLAY FIX */







.public-hero.with-media {



  position: relative;



  min-height: 620px;



  overflow: hidden;



  isolation: isolate;



}







.public-hero-slides {



  position: absolute;



  inset: 0;



  z-index: 0;



  overflow: hidden;



}







.public-hero-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  visibility: hidden;



  transition:



    opacity 1s ease,



    visibility 1s ease;



}







.public-hero-slide.is-active {



  opacity: 1;



  visibility: visible;



}







.public-hero-slide img {



  position: absolute;



  inset: 0;



  display: block;



  width: 100%;



  height: 100%;



  object-fit: cover;



}







.public-hero-shade {



  position: absolute;



  inset: 0;



  z-index: 1;



  pointer-events: none;



}







.public-hero-content {



  position: relative;



  z-index: 2;



}







.public-hero-controls {



  z-index: 3;



}







/* TECH ELECTRIQUE — ORIGINAL WEBSITE LOGO SIZE */







.public-header {



  min-height: 105px;



  height: auto;



}







.public-logo {



  display: flex;



  align-items: center;



  justify-content: flex-start;



  flex-shrink: 0;



  width: 205px;



}







.public-logo img {



  display: block;



  width: 195px;



  height: 90px;



  max-width: none;



  max-height: none;



  object-fit: contain;



  object-position: left center;



}







/* Tablet */



@media (max-width: 900px) {



  .public-logo {



    width: 185px;



  }







  .public-logo img {



    width: 180px;



    height: 82px;



  }



}







/* Mobile */



@media (max-width: 600px) {



  .public-header {



    min-height: 90px;



  }







  .public-logo {



    width: 165px;



  }







  .public-logo img {



    width: 160px;



    height: 75px;



  }



}







/* TECH ELECTRIQUE — LARGE HEADER LOGO */







.public-header {



  height: 125px !important;



}







.public-header-inner {



  height: 100%;



  align-items: center;



}







.public-logo {



  display: flex;



  align-items: center;



  width: 300px;



  min-width: 300px;



  height: 110px;



}







.public-logo img {



  display: block;



  width: 280px !important;



  max-width: none !important;



  height: 105px !important;



  max-height: none !important;



  object-fit: contain;



  object-position: left center;



}







@media (max-width: 760px) {



  .public-header {



    height: 100px !important;



  }







  .public-logo {



    width: 220px;



    min-width: 0;



    height: 85px;



  }







  .public-logo img {



    width: 215px !important;



    height: 80px !important;



  }







  .public-nav {



    top: 100px;



  }



}







/* TECH ELECTRIQUE — COMPACT HEADER LOGO */







.public-logo {



  width: 180px !important;



  min-width: 0 !important;



  height: auto !important;



}







.public-logo img {



  width: 175px !important;



  height: auto !important;



  max-width: 100% !important;



  max-height: none !important;



  object-fit: contain;



}







@media (max-width: 600px) {



  .public-logo {



    width: 150px !important;



  }







  .public-logo img {



    width: 145px !important;



  }



}







/* PUBLIC HEADER — NAVIGATION REFINEMENT */







/* Home, Suppliers, Search */



.public-nav a,



.public-nav button {



  font-size: 16px !important;



  font-weight: 650 !important;



  padding: 12px 16px !important;



  line-height: 1.4;



  border-radius: 9px;



  white-space: nowrap;



}







/* Spacing between navigation items */



.public-nav {



  gap: 14px !important;



  align-items: center;



}







/* Smooth hover effect */



.public-nav a:hover,



.public-nav button:hover {



  color: #e51d2a;



  transition: color 0.2s ease;



}







/* Smaller screens */



@media (max-width: 760px) {



  .public-nav a,



  .public-nav button {



    font-size: 15px !important;



    padding: 11px 13px !important;



  }







  .public-nav {



    gap: 8px !important;



  }



}







/* Hide unnecessary empty product columns */







.public-product-detail.no-gallery {



  grid-template-columns: 1fr;



}







.public-product-detail.no-gallery .public-product-intro {



  max-width: 900px;



}







.public-spec-layout:has(> .public-detail-section:only-child) {



  grid-template-columns: minmax(0, 1fr);



}







/* ========================================



   SUPPLIER PAGE — FULL-WIDTH HERO



   ======================================== */







.supplier-hero {



  position: relative;



  width: 100vw;



  max-width: 100vw;







  margin-left: calc(50% - 50vw);



  margin-right: calc(50% - 50vw);







  min-height: 550px;







  display: flex;



  align-items: center;







  background: #182a3b;



  overflow: hidden;



  isolation: isolate;



}







/* Full-width cover image */







.supplier-hero-media {



  position: absolute;



  inset: 0;



  z-index: 0;



}







.supplier-hero-media img {



  display: block;







  width: 100%;



  height: 100%;







  object-fit: cover;



  object-position: center;



}







/* Dark gradient for readable text */







.supplier-hero-overlay {



  position: absolute;



  inset: 0;



  z-index: 1;







  background: linear-gradient(



    90deg,



    rgba(9, 20, 32, 0.82) 0%,



    rgba(9, 20, 32, 0.52) 45%,



    rgba(9, 20, 32, 0.10) 100%



  );







  pointer-events: none;



}







/* Main content */







.supplier-hero-content {



  position: relative;



  z-index: 2;







  width: 100%;



  max-width: 1440px;



  margin: 0 auto;







  padding: 90px 6%;



}







.supplier-hero-inner {



  max-width: 750px;



}







.supplier-hero .public-eyebrow {



  color: #ff3545;



  font-size: 13px;



  font-weight: 800;



  letter-spacing: 0.18em;



  margin-bottom: 20px;



}







.supplier-hero h1 {



  color: #ffffff;



  font-size: clamp(52px, 6vw, 90px);



  font-weight: 800;



  line-height: 1.05;



  letter-spacing: -0.045em;



  margin: 0 0 24px;



}







.supplier-hero p {



  max-width: 650px;







  color: #e2e8f0;



  font-size: 19px;



  line-height: 1.7;



  margin: 0;



}







/* When no cover is uploaded */







.supplier-hero.no-cover {



  background: linear-gradient(



    125deg,



    #182a3b 0%,



    #243d55 100%



  );



}







/* Product families below hero */







.supplier-families-section {



  padding-top: 55px;



}







/* Responsive */







@media (max-width: 760px) {







  .supplier-hero {



    min-height: 420px;



  }







  .supplier-hero-content {



    padding: 65px 24px;



  }







  .supplier-hero h1 {



    font-size: clamp(42px, 9vw, 62px);



  }







  .supplier-hero p {



    font-size: 16px;



  }







  .supplier-hero-overlay {



    background: linear-gradient(



      90deg,



      rgba(9, 20, 32, 0.85),



      rgba(9, 20, 32, 0.38)



    );



  }







  .supplier-families-section {



    padding-top: 35px;



  }



}







/* SUPPLIER HERO — OVERLAY BREADCRUMB */







.supplier-hero-breadcrumb {



  position: absolute;



  top: 28px;



  left: max(24px, calc((100vw - 1440px) / 2 + 85px));



  z-index: 5;







  display: inline-flex;



  align-items: center;







  padding: 10px 16px;







  border: 1px solid rgba(255,255,255,0.25);



  border-radius: 10px;







  background: rgba(10, 22, 34, 0.38);



  backdrop-filter: blur(12px);



  -webkit-backdrop-filter: blur(12px);







  color: #fff;



}







/* Existing breadcrumb markup */







.supplier-hero-breadcrumb .public-breadcrumb {



  margin: 0;



  padding: 0;



  color: rgba(255,255,255,0.8);



}







.supplier-hero-breadcrumb a {



  color: rgba(255,255,255,0.85);



  text-decoration: none;



}







.supplier-hero-breadcrumb a:hover {



  color: #fff;



}







.supplier-hero-breadcrumb span {



  color: #fff;



}







@media (max-width: 760px) {



  .supplier-hero-breadcrumb {



    top: 18px;



    left: 20px;



    padding: 8px 12px;



  }



}







/* SUPPLIER HERO — SOFT BREADCRUMB CONTRAST */







.supplier-hero-breadcrumb {



  position: absolute;



  top: 28px;



  left: max(24px, calc((100vw - 1440px) / 2 + 85px));



  z-index: 5;







  /* Remove rectangular appearance */



  border: none !important;



  border-radius: 0 !important;



  background: transparent !important;



  backdrop-filter: none !important;



  -webkit-backdrop-filter: none !important;



  padding: 8px 12px;







  /* Allow the glow to fade naturally */



  isolation: isolate;



}







/* Soft, borderless white glow */



.supplier-hero-breadcrumb::before {



  content: "";



  position: absolute;



  inset: -12px -24px;



  z-index: -1;







  background: radial-gradient(



    ellipse at center,



    rgba(255,255,255,0.88) 0%,



    rgba(255,255,255,0.65) 35%,



    rgba(255,255,255,0.25) 65%,



    transparent 100%



  );







  filter: blur(12px);



  pointer-events: none;



}







/* Dark text for contrast */



.supplier-hero-breadcrumb,



.supplier-hero-breadcrumb .public-breadcrumb,



.supplier-hero-breadcrumb a,



.supplier-hero-breadcrumb span {



  color: #182a3b !important;



  text-shadow: 0 1px 2px rgba(255,255,255,0.5);



}







.supplier-hero-breadcrumb a:hover {



  color: #e51d2a !important;



}







/* Keep original breadcrumb alignment */



.supplier-hero-breadcrumb .public-breadcrumb {



  margin: 0 !important;



  padding: 0 !important;



}







/* Mobile */



@media (max-width: 760px) {



  .supplier-hero-breadcrumb {



    top: 18px;



    left: 20px;



  }



}







/* SUPPLIER HERO — FULL UPPER-LEFT CORNER FADE */







/* Remove the previous breadcrumb glow */



.supplier-hero-breadcrumb::before {



  display: none !important;



}







/* White gradient covering the upper-left corner */



.supplier-hero::after {



  content: "";



  position: absolute;



  inset: 0;



  z-index: 2;







  background: radial-gradient(



    ellipse 75% 85% at 0% 0%,



    rgba(255,255,255,0.92) 0%,



    rgba(255,255,255,0.70) 22%,



    rgba(255,255,255,0.35) 48%,



    rgba(255,255,255,0.10) 70%,



    transparent 100%



  );







  pointer-events: none;



}







/* Breadcrumb above the gradient */



.supplier-hero-breadcrumb {



  z-index: 5;



  background: transparent !important;



  border: none !important;



  box-shadow: none !important;



  backdrop-filter: none !important;



}







/* Keep breadcrumb text dark */



.supplier-hero-breadcrumb,



.supplier-hero-breadcrumb a,



.supplier-hero-breadcrumb span {



  color: #182a3b !important;



}







/* SUPPLIER HERO — REMOVE SPACE BELOW HEADER */







.public-page:has(> .supplier-hero) {



  padding-top: 0 !important;



}







.public-page:has(> .supplier-hero) > .supplier-hero {



  margin-top: 0 !important;



}







/* Remove any top spacing from supplier page wrapper */



.public-wrap.public-page:has(.supplier-hero) {



  padding-top: 0 !important;



}







/* =========================================



   FAMILY + PRODUCT CARD REFINEMENT



   ========================================= */







.public-family-card,



.public-product-card {



  display: flex;



  flex-direction: column;



  overflow: hidden;



  height: 100%;



  min-width: 0;



  text-decoration: none;



  transition:



    transform 250ms ease,



    box-shadow 250ms ease,



    border-color 250ms ease;



}







/* Cards without images */







.public-family-card.no-image,



.public-product-card.no-image {



  min-height: 190px;



  justify-content: space-between;



}







.public-family-card.no-image .public-family-info,



.public-product-card.no-image .public-card-info {



  flex: 1;



  display: flex;



  flex-direction: column;



  justify-content: center;



}







/* Family card content */







.public-family-info {



  padding: 22px;



  display: flex;



  flex-direction: column;



  flex: 1;



  gap: 10px;



}







.public-family-info h3 {



  margin: 0;



  line-height: 1.3;



}







.public-family-summary {



  margin: 0;



  color: #667085;



  font-size: 14px;



  line-height: 1.6;



}







.public-family-footer {



  margin-top: auto;



  padding-top: 16px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  color: #667085;



  font-size: 13px;



}







.public-family-arrow {



  font-size: 20px;



  color: #344054;



  transition: transform 250ms ease;



}







/* Real uploaded images */







.public-family-image,



.public-card-photo {



  width: 100%;



  overflow: hidden;



}







.public-family-image img,



.public-card-photo img {



  display: block;



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 450ms ease;



}







/* Product card content */







.public-card-info {



  display: flex;



  flex-direction: column;



  flex: 1;



  gap: 10px;



}







.public-card-info h3,



.public-card-info p {



  margin-top: 0;



}







.public-card-link {



  margin-top: auto;



}







/* Hover effects */







.public-family-card:hover,



.public-product-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 14px 35px rgba(16,24,40,.09);



  border-color: #cbd5e1;



}







.public-family-card:hover img,



.public-product-card:hover img {



  transform: scale(1.035);



}







.public-family-card:hover .public-family-arrow {



  transform: translate(3px, -3px);



}







/* Responsive */







@media (max-width: 600px) {



  .public-family-card.no-image,



  .public-product-card.no-image {



    min-height: 160px;



  }







  .public-family-info {



    padding: 18px;



  }



}







@media (prefers-reduced-motion: reduce) {



  .public-family-card,



  .public-product-card,



  .public-family-arrow,



  .public-family-image img,



  .public-card-photo img {



    transition: none;



  }



}







/* =========================================



   FAMILY HERO — MATCH SUPPLIER HERO



   ========================================= */







.family-hero {



  position: relative;



  width: 100vw;



  max-width: 100vw;



  margin-left: calc(50% - 50vw);



  margin-right: calc(50% - 50vw);



  margin-top: 0;







  min-height: 550px;



  display: flex;



  align-items: center;







  background: #182a3b;



  overflow: hidden;



  isolation: isolate;



}







.family-hero-media {



  position: absolute;



  inset: 0;



  z-index: 0;



}







.family-hero-media img {



  display: block;



  width: 100%;



  height: 100%;



  object-fit: cover;



}







.family-hero-overlay {



  position: absolute;



  inset: 0;



  z-index: 1;







  background: linear-gradient(



    90deg,



    rgba(9,20,32,.82),



    rgba(9,20,32,.45) 55%,



    rgba(9,20,32,.1)



  );



}







/* Soft white fade from upper-left corner */



.family-hero::after {



  content: "";



  position: absolute;



  inset: 0;



  z-index: 2;







  background: radial-gradient(



    ellipse 75% 85% at 0% 0%,



    rgba(255,255,255,.92) 0%,



    rgba(255,255,255,.70) 22%,



    rgba(255,255,255,.35) 48%,



    rgba(255,255,255,.10) 70%,



    transparent 100%



  );







  pointer-events: none;



}







.family-hero-breadcrumb {



  position: absolute;



  top: 28px;



  left: max(24px, calc((100vw - 1440px) / 2 + 85px));



  z-index: 5;



  padding: 8px 12px;



}







.family-hero-breadcrumb .public-breadcrumb {



  margin: 0;



  padding: 0;



}







.family-hero-breadcrumb,



.family-hero-breadcrumb a,



.family-hero-breadcrumb span {



  color: #182a3b !important;



}







.family-hero-content {



  position: relative;



  z-index: 3;



  width: 100%;



  max-width: 1440px;



  margin: auto;



  padding: 90px 6%;



}







.family-hero-inner {



  max-width: 750px;



}







.family-hero .public-eyebrow {



  color: #ff3545;



  margin-bottom: 20px;



}







.family-hero h1 {



  color: #fff;



  font-size: clamp(52px, 6vw, 90px);



  line-height: 1.05;



  margin: 0 0 24px;



}







.family-hero p {



  color: #e2e8f0;



  font-size: 19px;



  line-height: 1.7;



  margin: 0;



}







/* Remove empty space above family hero */



.public-wrap.public-page:has(> .family-hero) {



  padding-top: 0 !important;



}







.family-products-section {



  padding-top: 55px;



}







@media (max-width: 760px) {



  .family-hero {



    min-height: 420px;



  }







  .family-hero-content {



    padding: 65px 24px;



  }







  .family-hero-breadcrumb {



    top: 18px;



    left: 20px;



  }







  .family-hero h1 {



    font-size: clamp(42px, 9vw, 62px);



  }







  .family-hero p {



    font-size: 16px;



  }



}







/* =========================================



   PRODUCT DETAIL — TECHNICAL CATALOG STYLE



   ========================================= */







/* Product page container */







.public-product-detail.technical-layout {



  display: grid;



  grid-template-columns:



    minmax(0, 1fr)



    minmax(0, 1fr);







  align-items: start;



  gap: 48px;







  margin-top: 25px;



  margin-bottom: 36px;



}







/* No product image:



   Allow product information to use full width */







.public-product-detail.technical-layout.no-gallery {



  grid-template-columns: minmax(0, 1fr);



  gap: 0;



  margin-top: 15px;



  margin-bottom: 20px;



}







/* Product information */







.technical-layout .public-product-intro {



  display: flex;



  flex-direction: column;



  align-items: flex-start;







  min-width: 0;



  max-width: 660px;







  padding: 8px 0;



}







/* Supplier and family label */







.technical-layout .public-eyebrow {



  font-size: 13px;



  font-weight: 800;



  letter-spacing: 0.15em;



  margin-bottom: 14px;



}







/* Model name */







.technical-layout .public-product-intro h1 {



  font-size: clamp(46px, 5vw, 72px);



  line-height: 1.05;



  letter-spacing: -0.045em;







  margin: 0 0 20px;



}







/* Summary */







.technical-layout .public-product-summary {



  font-size: 18px;



  line-height: 1.65;



  color: #475467;







  margin: 0 0 14px;



}







/* Description */







.technical-layout .public-description {



  font-size: 15px;



  line-height: 1.75;



  color: #667085;







  margin: 0 0 20px;



}







/* Family and supplier navigation */







.technical-layout .public-detail-info {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  gap: 12px;







  margin: 12px 0 22px;



}







.technical-layout .public-detail-info a {



  display: inline-flex;



  align-items: center;







  padding: 11px 15px;







  border: 1px solid #e4e7ec;



  border-radius: 9px;







  background: #fff;



  color: #344054;







  font-size: 14px;



  font-weight: 650;



  text-decoration: none;







  transition:



    border-color 200ms ease,



    background-color 200ms ease,



    transform 200ms ease;



}







.technical-layout .public-detail-info a:hover {



  border-color: #cbd5e1;



  background: #f8fafc;



  transform: translateY(-2px);



}







/* Contact button */







.technical-layout .public-primary {



  display: inline-flex;



  align-items: center;



  justify-content: center;







  min-height: 46px;



  padding: 13px 22px;







  border-radius: 9px;







  font-size: 15px;



  font-weight: 750;



}







/* =========================================



   PRODUCT GALLERY



   ========================================= */







.technical-layout .public-gallery {



  width: 100%;



  min-width: 0;



}







.technical-layout .public-main-image {



  aspect-ratio: 4 / 3;







  overflow: hidden;







  border: 1px solid #e4e7ec;



  border-radius: 14px;







  background: #f8fafc;



}







.technical-layout .public-main-image img {



  display: block;



  width: 100%;



  height: 100%;



  object-fit: contain;



}







/* Thumbnails */







.technical-layout .public-thumbnails {



  margin-top: 12px;



  gap: 10px;



}







/* =========================================



   TECHNICAL SECTIONS



   ========================================= */







.public-spec-layout {



  margin-top: 20px;



  margin-bottom: 30px;



}







.public-detail-section {



  margin-bottom: 20px;



}







.public-detail-section h2 {



  margin-bottom: 18px;



}







/* =========================================



   RELATED MODELS



   ========================================= */







/* Bring related products closer



   when technical sections are absent */







.public-product-detail.technical-layout.no-gallery



  + .public-section {



  padding-top: 28px;



}







.public-spec-layout + .public-section {



  padding-top: 28px;



}







/* =========================================



   RESPONSIVE



   ========================================= */







@media (max-width: 900px) {







  .public-product-detail.technical-layout {



    grid-template-columns: 1fr;



    gap: 26px;



  }







  .technical-layout .public-product-intro {



    max-width: 100%;



  }







}







@media (max-width: 600px) {







  .public-product-detail.technical-layout {



    margin-top: 14px;



    margin-bottom: 20px;



  }







  .technical-layout .public-product-intro h1 {



    font-size: 44px;



  }







  .technical-layout .public-detail-info {



    gap: 9px;



  }







  .technical-layout .public-detail-info a {



    padding: 10px 12px;



    font-size: 13px;



  }







  .technical-layout .public-primary {



    width: 100%;



  }







}







/* PRODUCT DETAIL — COMPACT EMPTY CONTENT */







.public-product-detail.technical-layout.no-gallery {



  min-height: 0 !important;



  padding-bottom: 0 !important;



}







.technical-layout.no-gallery .public-product-intro {



  min-height: 0 !important;



  padding-bottom: 0 !important;



}







.technical-layout.no-gallery .public-product-intro h1 {



  margin-bottom: 16px;



}







.public-product-detail.technical-layout.no-gallery



  + .public-section {



  margin-top: 0 !important;



}











/* =========================================



   HOMEPAGE — MOBILE HERO REFINEMENT



   ========================================= */







@media (max-width: 760px) {







  /* Prevent horizontal overflow */



  html,



  body {



    max-width: 100%;



    overflow-x: clip;



  }







  /* Homepage hero */



  .public-hero,



  .public-hero.with-media {



    min-height: 560px;



    width: 100%;



  }







  /* Background image */



  .public-hero-slide img {



    object-fit: cover;



    object-position: center;



  }







  /* Stronger contrast behind text */



  .public-hero-shade {



    background: linear-gradient(



      90deg,



      rgba(12, 25, 38, 0.82) 0%,



      rgba(12, 25, 38, 0.55) 65%,



      rgba(12, 25, 38, 0.35) 100%



    );



  }







  /* Content area */



  .public-hero-content {



    width: 100%;



    padding: 65px 0 80px;



  }







  /* Small TECH Electrique label */



  .public-hero-content .public-eyebrow {



    font-size: 11px;



    letter-spacing: 0.14em;



  }







  /* Main hero heading */



  .public-hero h1 {



    font-size: clamp(36px, 8.5vw, 48px);



    line-height: 1.12;



    letter-spacing: -0.045em;



    max-width: 100%;



    margin: 18px 0;



    overflow-wrap: break-word;



  }







  /* Subtitle */



  .public-hero p {



    font-size: 15px;



    line-height: 1.65;



    max-width: 100%;



    margin-bottom: 25px;



  }







  /* Explore suppliers button */



  .public-hero .public-primary {



    min-height: 48px;



    padding: 13px 19px;



    font-size: 14px;



    gap: 18px;



    max-width: 100%;



  }







  /* Carousel navigation */



  .public-hero-controls {



    right: 18px;



    bottom: 16px;



    gap: 10px;



  }







  .public-hero-controls button {



    width: 36px;



    height: 36px;



  }







}







@media (max-width: 390px) {







  .public-hero h1 {



    font-size: 34px;



  }







  .public-hero,



  .public-hero.with-media {



    min-height: 520px;



  }







}







/* =========================================



   MOBILE HOMEPAGE — FINAL REFINEMENT



   ========================================= */







@media (max-width: 760px) {







  .public-hero,



  .public-hero.with-media {



    min-height: 510px;



  }







  .public-hero-content {



    padding: 55px 0 75px;



  }







  .public-hero h1 {



    font-size: clamp(34px, 8vw, 42px);



    line-height: 1.1;



    letter-spacing: -0.045em;



  }







  .public-hero p {



    font-size: 14px;



    line-height: 1.6;



    margin-bottom: 20px;



  }







  .public-hero .public-primary {



    padding: 12px 17px;



    min-height: 46px;



    font-size: 13px;



  }







  .public-hero-shade {



    background: linear-gradient(



      90deg,



      rgba(12,25,38,0.88),



      rgba(12,25,38,0.48)



    );



  }







}







@media (max-width: 390px) {







  .public-hero h1 {



    font-size: 33px;



  }







}







/* =========================================



   MOBILE LANDSCAPE — RESPONSIVE FIX



   ========================================= */







@media screen and (orientation: landscape)



  and (max-height: 550px)



  and (max-width: 1000px) {







  /* Compact header */







  .public-header {



    height: 76px !important;



    min-height: 76px !important;



  }







  .public-header-inner {



    height: 100%;



  }







  .public-logo {



    width: 155px !important;



    height: auto !important;



  }







  .public-logo img {



    width: 150px !important;



    height: auto !important;



  }







  /* Use hamburger navigation on landscape phones */







  .public-menu {



    display: block;



  }







  .public-nav {



    display: none;



    position: absolute;



    left: 0;



    right: 0;



    top: 76px;







    padding: 20px 24px;



    background: #fff;







    flex-direction: column;



    align-items: stretch;



    gap: 12px !important;







    border-bottom: 1px solid var(--p-line);



  }







  .public-nav.open {



    display: flex;



  }







  /* Hero height */







  .public-hero,



  .public-hero.with-media {



    min-height: 390px;



  }







  /* Compact hero content */







  .public-hero-content {



    padding: 45px 0 65px;



  }







  .public-hero h1 {



    font-size: clamp(34px, 5vw, 48px);



    max-width: 670px;



    line-height: 1.08;



    margin: 12px 0;



  }







  .public-hero p {



    font-size: 14px;



    max-width: 560px;



    line-height: 1.5;



    margin-bottom: 18px;



  }







  .public-hero-content .public-eyebrow {



    font-size: 11px;



  }







  .public-hero .public-primary {



    min-height: 42px;



    padding: 10px 16px;



    font-size: 13px;



  }







  /* Background image */







  .public-hero-slide img {



    object-fit: cover;



    object-position: center center;



  }







  .public-hero-shade {



    background: linear-gradient(



      90deg,



      rgba(12,25,38,.88),



      rgba(12,25,38,.48)



    );



  }







  /* Carousel controls */







  .public-hero-controls {



    bottom: 14px;



    right: 20px;



  }







}





/* ============================================================

   TECH ELECTRIQUE — PUBLIC LIBRARY RESPONSIVE FINISH

   Preserves existing homepage, supplier and family hero styling.

   ============================================================ */



.public-content, .public-wrap, .public-page { min-width: 0; }

.public-wrap { max-width: calc(100% - 32px); }

.public-content img, .public-content video { max-width: 100%; }

.public-product-detail > *, .public-spec-layout > *,

.public-filters > *, .public-titlebar > *, .public-footer .public-wrap > * { min-width: 0; }

.public-filters input, .public-filters select { min-width: 0; max-width: 100%; }

.public-product-intro h1, .public-titlebar h1,

.public-supplier-card h3, .public-product-card h3, .public-family-card h3,

.public-specs dd { overflow-wrap: anywhere; }

.public-primary { max-width: 100%; text-align: center; justify-content: center; }

.public-documents button { min-width: 0; }

.public-documents button > span { min-width: 0; overflow-wrap: anywhere; }



/* A laptop may not have enough width for four navigation links. */

@media (max-width: 1080px) {

  .public-menu { display: block; flex: 0 0 auto; }

  .public-nav {

    display: none; position: absolute; left: 0; right: 0;

    top: 100%; padding: 16px max(18px, 4vw) 22px;

    flex-direction: column; align-items: stretch !important; gap: 6px !important;

    background: #fff; border-bottom: 1px solid var(--p-line);

    box-shadow: 0 10px 22px rgba(16,24,40,.06);

  }

  .public-nav.open { display: flex; }

  .public-nav a { white-space: normal; overflow-wrap: anywhere; }

  .public-supplier-grid, .public-products-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

  .public-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .public-search-field { grid-column: 1 / -1; }

  .public-product-detail.technical-layout { grid-template-columns: minmax(0,1fr); }

  .technical-layout .public-product-intro { max-width: 100%; }

  .public-spec-layout { grid-template-columns: minmax(0,1fr); gap: 22px; }

}

@media (max-width: 760px) {

  .public-wrap { width: calc(100% - 36px); }

  .public-supplier-grid, .public-family-grid, .public-products-grid {

    grid-template-columns: repeat(2,minmax(0,1fr));

  }

  .public-titlebar { flex-wrap: wrap; }

  .public-footer .public-wrap { flex-wrap: wrap; }

  .public-detail-info { min-width: 0; }

  .public-hero h1, .supplier-hero h1, .family-hero h1 { overflow-wrap: anywhere; }

  .public-specs > div { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

}

@media (max-width: 520px) {

  .public-supplier-grid, .public-family-grid, .public-products-grid,

  .public-filters { grid-template-columns: minmax(0,1fr); }

  .public-search-field { grid-column: auto; }

  .public-filters { padding: 15px; }

  .public-product-detail.technical-layout { gap: 20px; }

  .technical-layout .public-product-intro h1 { font-size: clamp(32px,10vw,44px); }

  .public-specs > div { grid-template-columns: minmax(0,1fr); gap: 6px; }

  .public-detail-info { flex-direction: column; align-items: stretch; width: 100%; }

  .technical-layout .public-detail-info a { justify-content: center; width: 100%; }

  .public-documents button { gap: 8px; }

  .public-footer .public-wrap { gap: 14px; }

}

/* Preserve the previously agreed compact mobile landscape hero. */

@media screen and (orientation: landscape) and (max-height: 550px) and (max-width: 1000px) {

  .public-nav { top: 100%; }

}



/* =========================================

   PRODUCT DOCUMENTS — SMOOTH SCROLL OFFSET

   ========================================= */



/* Desktop: keep the Documents heading visible

   below the sticky navigation header */



#productDocumentsSection {

  scroll-margin-top: 150px;

}



/* Tablet and mobile */



@media (max-width: 760px) {



  #productDocumentsSection {

    scroll-margin-top: 120px;

  }



}



/* Mobile landscape */



@media screen and (orientation: landscape)

  and (max-height: 550px)

  and (max-width: 1000px) {



  #productDocumentsSection {

    scroll-margin-top: 95px;

  }



}

/* Phase 1 merge — accessibility without modifying approved layouts */
.public-nav a[aria-current="page"] { color: var(--p-red); }
.public-menu:focus-visible, .public-thumb:focus-visible, .public-hero-controls button:focus-visible { outline: 3px solid var(--p-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .public-hero-slide { transition: none !important; } }

/* Phase 2 — loading and progressive images */
.public-startup{min-height:75vh;display:grid;place-items:center;padding:40px 22px;background:#fff}
.public-startup-inner{width:min(650px,100%);display:grid;gap:18px}
.public-startup-line{height:19px;border-radius:8px;background:linear-gradient(100deg,#eef2f6 20%,#f9fafb 45%,#eef2f6 70%);background-size:220% 100%;animation:publicSkeleton 1.7s ease-in-out infinite}
.public-startup-short{width:29%;height:14px}.public-startup-title{width:72%;height:42px}.public-startup-wide{width:85%}
.public-startup-message{font-size:13px;color:#647386;margin-top:10px}
.public-media-pending{background:linear-gradient(100deg,#eef2f6 20%,#f9fafb 45%,#eef2f6 70%);background-size:220% 100%;animation:publicSkeleton 1.7s ease-in-out infinite}
.public-retry{margin-top:18px;border:1px solid var(--p-line);border-radius:9px;padding:12px 20px;background:#fff;font-weight:700;color:var(--p-ink)}
@keyframes publicSkeleton{to{background-position-x:-220%}}
@media(prefers-reduced-motion:reduce){.public-media-pending,.public-startup-line{animation:none}}

/* Phase 2: keyboard accessibility without altering the visual design */
.public-skip-link{position:fixed;left:16px;top:8px;z-index:200;background:#fff;color:#162434;padding:12px 18px;border:2px solid #d91f2d;border-radius:8px;transform:translateY(-180%)}
.public-skip-link:focus{transform:translateY(0)}
#main-content:focus{outline:none}
.public-nav a:focus-visible,.public-menu:focus-visible,.public-hero-controls button:focus-visible,.public-thumb:focus-visible{outline:3px solid #d91f2d;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.public-skip-link{transition:none}}