/* Ampele Electricals
   Palette from the 2025 guide: catalogue teal, brass, logo red, switch white.
   Edges follow the Delta brief: narrow corner radii, exact outer edges. */
:root{
  --ink:#0c2128; --teal-900:#072f3a; --teal-700:#0e5568; --brass:#c6a15b; --red:#e11b22;
  --porcelain:#eef2f3; --line:#d2dbde; --muted:#55686e; --led:#2aa8ff;
  --r:3px; --wrap:1180px;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.55 var(--font);color:var(--ink);background:var(--porcelain)}
img,svg{max-width:100%;display:block}
a{color:var(--teal-700);text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
[id]{scroll-margin-top:90px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05}
h2{font-size:clamp(1.55rem,2.8vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:68ch}
address{font-style:normal;margin-bottom:1em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}
.lede{font-size:1.2rem;color:var(--muted);max-width:60ch}

/* Buttons */
.btn{display:inline-block;font:600 1rem/1 var(--font);padding:.85rem 1.3rem;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#b9131a;color:#fff}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{color:inherit;background:rgba(127,127,127,.15)}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-row{display:flex;align-items:center;gap:1.5rem;min-height:68px;position:relative}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo img{height:46px;width:auto}
.logo-mark{width:42px;height:42px;background:var(--red);color:#fff;display:grid;place-items:center;font:600 1.6rem/1 var(--display);border-radius:var(--r);padding-bottom:4px}
.logo-text{font:600 1.4rem/1 var(--display);letter-spacing:.04em}
.logo-text small{display:block;font:500 .72rem/1.4 var(--font);letter-spacing:0;color:var(--muted)}
.nav{display:flex;align-items:center;gap:1.3rem;margin-left:auto}
.nav>a{color:var(--ink);text-decoration:none;font-weight:500;padding:.35rem 0;border-bottom:2px solid transparent}
.nav>a:hover,.nav>a[aria-current=page]{border-bottom-color:var(--red);color:var(--ink)}
.nav-search{display:flex}
.nav-search input{width:9.5rem;font:inherit;font-size:.95rem;padding:.4rem .6rem;border:1px solid #9fb0b5;border-right:0;border-radius:var(--r) 0 0 var(--r)}
.nav-search button{font:inherit;font-size:.95rem;padding:.4rem .7rem;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:0 var(--r) var(--r) 0;cursor:pointer}
.nav>.enquiry-link{border:1px solid var(--ink);padding:.4rem .75rem;border-radius:var(--r)}
.nav>.enquiry-link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.enquiry-count{display:inline-block;min-width:1.5em;text-align:center;background:var(--brass);color:var(--ink);border-radius:var(--r);padding:0 .3em;margin-left:.2em;font-weight:600}
.nav-toggle{display:none;margin-left:auto;font:600 1rem var(--font);padding:.5rem .9rem;background:#fff;border:1px solid var(--ink);border-radius:var(--r);cursor:pointer}
@media (max-width:1040px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:-1.25rem;right:-1.25rem;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:.6rem;padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--line)}
  .nav.is-open{display:flex}
  .nav-search input{flex:1;width:auto}
}

/* Hero: a dark room until the switch is pressed */
.hero{position:relative;overflow:hidden;background:var(--teal-900);color:#e6eff1;transition:background-color .6s ease,color .6s ease}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(55% 75% at 76% 48%,rgba(255,222,160,.75),transparent 70%);opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero.is-on{background:#f7f9f9;color:var(--ink)}
.hero.is-on::before{opacity:1}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero-copy p{font-size:1.2rem;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-stage{text-align:center}
.plate{position:relative;width:min(100%,320px);aspect-ratio:94/90;margin-inline:auto;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#e3e8ea);border-radius:9px;box-shadow:0 30px 60px -22px rgba(0,0,0,.6),inset 0 0 0 9px rgba(255,255,255,.7),inset 0 0 0 10px #d5dcdf}
.plate::before{content:'';position:absolute;inset:17% 29%;border-radius:4px;background:linear-gradient(135deg,#f6f8f9,#a9b3b8 45%,#eef1f2 55%,#98a3a8)}
.plate::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#041c23;opacity:.6;transition:opacity .6s ease;pointer-events:none;z-index:2}
.hero.is-on .plate::after{opacity:0}
.rocker{position:relative;z-index:1;width:36%;height:60%;border:0;border-radius:3px;cursor:pointer;background:linear-gradient(180deg,#fff 0%,#f3f5f6 49%,#d7dcdf 51%,#eceff0 100%);box-shadow:inset 0 0 0 1px #c6cfd3,0 7px 10px -5px rgba(0,0,0,.4);transition:background .15s,box-shadow .15s}
.hero.is-on .rocker{background:linear-gradient(180deg,#e1e6e8 0%,#d3d9dc 49%,#fff 51%,#f6f8f8 100%);box-shadow:inset 0 0 0 1px #c6cfd3,0 -5px 8px -5px rgba(0,0,0,.3)}
.plate-leds{position:absolute;right:13%;bottom:13%;display:flex;gap:5px;z-index:3}
.plate-leds i{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 10px 3px rgba(42,168,255,.85);transition:box-shadow .6s}
.hero.is-on .plate-leds i{box-shadow:none}
.plate-brand{position:absolute;right:12%;bottom:5.5%;font:600 .62rem var(--display);letter-spacing:.1em;color:#5a676c;z-index:1}
.hero-hint{margin:1.4rem auto 0;font-size:.98rem;opacity:.85;max-width:30ch}
@media (max-width:800px){.hero-grid{grid-template-columns:1fr}.plate{width:220px}}

/* Sections */
.section{padding-block:clamp(2.75rem,6vw,5rem)}
.section-white{background:#fff;border-block:1px solid var(--line)}
.page-head{background:#fff;border-bottom:1px solid var(--line);padding-block:clamp(2rem,5vw,3.5rem) clamp(1.5rem,3vw,2.25rem)}
.page-head + .section-white{border-top:0}
.crumbs{font-size:.95rem;color:var(--muted);margin-bottom:1rem}

/* Home: catalogue index */
.series-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:1.5rem}
.series-name{font-size:1.5rem;padding-top:.8rem;border-top:4px solid var(--brass)}
.index-list{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--ink)}
.index-list a{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.idx-name{font:600 1.3rem/1.2 var(--display)}
.idx-meta{grid-column:1;color:var(--muted);font-size:.95rem}
.idx-price{grid-column:2;grid-row:1/span 2;align-self:center;color:var(--muted)}
.index-list a:hover .idx-name{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:1.5rem 0}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--teal-900);color:#e6eff1;padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--r)}
.cta p{margin:0}
@media (max-width:800px){.series-grid,.facts{grid-template-columns:1fr}}

/* Category listing */
.tabs,.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tabs a,.jump a{padding:.4rem .8rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:#fff;font-size:.98rem}
.tabs a:hover,.jump a:hover{border-color:var(--ink)}
.tabs a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.series-block + .series-block{margin-top:3.5rem}
.cat-grid{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.cat-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);overflow:hidden}
.cat-card:hover{border-color:var(--ink);color:var(--ink)}
.cat-media{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(180deg,#f8fafa,#e5ebed);color:var(--teal-700)}
.cat-media svg{width:76px;height:76px}
.cat-media img{width:100%;height:100%;object-fit:cover}
.cat-text{padding:1rem 1.1rem 1.2rem}
.cat-name{display:block;font:600 1.3rem/1.2 var(--display)}
.cat-meta{display:block;color:var(--muted);font-size:.95rem;margin-top:.25rem}

/* Product groups and cards */
.group + .group{margin-top:3.25rem}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:1rem}
.group-head h2{margin:0}
.tags{margin:0;display:flex;gap:.4rem}
.tag{display:inline-block;font:500 .85rem/1 var(--font);padding:.3rem .5rem;border:1px solid var(--teal-700);color:var(--teal-700);border-radius:var(--r);vertical-align:middle}
.tag-new{border-color:var(--red);background:var(--red);color:#fff}
.group-note,.terms-note{color:var(--muted);font-size:.98rem}
.terms-note{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);max-width:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));padding:0 1px 1px 0}
.grid-spaced{margin-top:1.5rem}
.card{background:#fff;border:1px solid var(--line);margin:0 -1px -1px 0;display:flex;flex-direction:column}
.card-media{aspect-ratio:4/3;display:grid;place-items:center;background:#f5f8f8;color:#9fb3b9;border-bottom:1px solid var(--line)}
.card-media svg{width:64px;height:64px}
.card-media img{width:100%;height:100%;object-fit:contain;padding:.75rem}
.card-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.card-code{margin:0;font-weight:600;color:var(--teal-700)}
.card-name{font-size:1.15rem;margin:.1rem 0 .3rem}
.card-group{margin:0 0 .3rem;font-size:.92rem}
.card-prices{display:flex;gap:1.25rem;margin:.5rem 0}
.card-prices dt{font-size:.85rem;color:var(--muted)}
.card-prices dd{margin:0;font:600 1.3rem/1.2 var(--display)}
.card-pack{font-size:.92rem;color:var(--muted);margin:0 0 .9rem}
.btn-add{margin-top:auto;font:600 .95rem/1 var(--font);padding:.65rem .8rem;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:var(--r);cursor:pointer}
.btn-add:hover{background:var(--porcelain)}
.btn-add[aria-pressed=true]{background:var(--ink);color:#fff}
.btn-add-inline{margin-top:1rem}

/* Plates */
.plate-show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem;align-items:center;margin-bottom:2.5rem}
.plate-photo{aspect-ratio:3/2;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--teal-700)}
.plate-photo svg{width:120px;height:120px}
.plate-photo img{width:100%;height:100%;object-fit:contain}
.swatches{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem 1.25rem}
.swatches li{display:flex;align-items:center;gap:.6rem}
.swatches span{width:30px;height:30px;border-radius:var(--r);border:1px solid #9fb0b5;flex:none}
@media (max-width:700px){.plate-show{grid-template-columns:1fr}}

/* Tables */
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);margin-bottom:1rem}
.spec{border-collapse:collapse;width:100%;min-width:520px}
.spec th,.spec td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.spec td:nth-child(2){white-space:normal}
.spec thead th{background:var(--teal-900);color:#fff;font-weight:500}
.spec tbody tr:last-child>*{border-bottom:0}
.spec .r{text-align:right}
.spec-matrix{min-width:860px}
.spec-matrix td:nth-child(2){white-space:nowrap}
.spec-matrix tbody th{font-weight:500;background:#f5f8f8}
.spec-matrix .price-row td{font-weight:600}
.pl-cat + .pl-cat{margin-top:3.5rem}
.pl-cat h2{margin-bottom:.1em}
.pl-cat h2 a{color:inherit}
.pl-cat h3{margin-top:1.75rem}
.pl-series{color:var(--muted)}

/* Quality and about */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;margin:1.5rem 0;border-top:1px solid var(--ink)}
.parts>div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.parts dt{font:600 1.1rem/1.3 var(--display)}
.parts dd{margin:0}
.photo-grid{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.photo-grid img{width:100%;border:1px solid var(--line);background:#fff}
.about-grid,.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.about-grid h2:not(:first-child){margin-top:1.5em}
.fact-box{background:var(--porcelain);border:1px solid var(--line);border-top:4px solid var(--brass);padding:1.5rem}
.fact-box dl{margin:0 0 1.25rem}
.fact-box dl>div{padding:.6rem 0;border-bottom:1px solid var(--line)}
.fact-box dt{font-size:.9rem;color:var(--muted)}
.fact-box dd{margin:0}
@media (max-width:860px){.parts,.about-grid,.contact-grid{grid-template-columns:1fr}.parts>div{grid-template-columns:1fr;gap:.2rem}}

/* Forms */
.search-form{max-width:36rem;margin-top:1rem}
.search-row{display:flex;gap:.5rem;margin-top:.3rem}
label{font-weight:500}
input,select,textarea{font:inherit;color:var(--ink);padding:.65rem .75rem;border:1px solid #9fb0b5;border-radius:var(--r);background:#fff;width:100%}
[aria-invalid=true]{border-color:#b3121a}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;margin-top:1rem}
.field{display:grid;gap:.3rem;align-content:start}
.field-wide{grid-column:1/-1}
.error{color:#b3121a;font-size:.95rem;margin:0}
.hp{position:absolute;left:-9999px}
.notice{padding:1rem 1.25rem;border-radius:var(--r);margin-bottom:1.5rem;border:1px solid}
.notice p:last-child{margin-bottom:0}
.notice-ok{border-color:#1d7a4c;background:#eaf6ef}
.notice-error{border-color:#b3121a;background:#fdeeee}
.enquiry-box{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.enquiry-list{list-style:none;padding:0;margin:0 0 1rem}
.enquiry-list li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.link-btn{font:inherit;background:none;border:0;padding:0;color:var(--teal-700);text-decoration:underline;cursor:pointer;flex:none}
.link-btn:hover{color:var(--red)}
@media (max-width:600px){.form{grid-template-columns:1fr}}

.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}

/* Footer */
.site-footer{background:var(--teal-900);color:#c9d8dc;border-top:6px solid var(--brass)}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--brass)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:2.5rem;padding-block:3rem 2rem}
.footer-brand{font:600 1.5rem var(--display);color:#fff}
.footer-head{font:600 1.1rem var(--display);color:#fff;margin-bottom:.6rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:.18rem 0}
.footer-terms li{font-size:.95rem}
.footer-base{border-top:1px solid rgba(255,255,255,.15);padding-block:1.1rem}
.footer-base p{margin:0;font-size:.95rem}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}
@media print{
  .site-header,.site-footer,.btn,.btn-add,.jump,.tabs,.pager,.skip{display:none!important}
  body{background:#fff;font-size:11pt}
  .page-head,.section{padding-block:.5rem;border:0}
  .table-wrap{overflow:visible;border:0}
  .spec,.spec-matrix{min-width:0;font-size:9pt}
  .spec thead th{background:#fff;color:#000;border-bottom:2px solid #000}
  .pl-cat{break-inside:avoid-page}
}