/* =========================================================
   PLUGTECH ELECTRONICS — Design System
   Premium, minimal, product-first. Glass used as an accent only.
   ========================================================= */

@font-face{
  font-family:"Plugtech Sans";
  src:url("/assets/fonts/InterVariable.woff2") format("woff2-variations"),
      url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand neutrals */
  --black:#0a0a0b;
  --near-black:#121214;
  --ink:#1b1b1e;
  --grey-900:#232326;
  --grey-700:#4a4a50;
  --grey-500:#6b6b72;
  --grey-300:#c9c9cf;
  --grey-200:#e4e3e3ff;
  --grey-100:#f1efed;
  --off-white:#faf8f6;
  --white:#ffffff;

  /* Brand accent — from the Plugtech mark */
  --plug-red:#e5383b;
  --plug-red-dark:#b5222a;
  --plug-red-light:#ff8577;
  --accent-grad: linear-gradient(135deg, var(--plug-red-dark) 0%, var(--plug-red) 54%, var(--plug-red-light) 100%);

  /* Functional */
  --whatsapp:#0f7a36;
  --whatsapp-dark:#0b5e29;
  --success:#15703c;
  --warning:#7a5107;
  --error:#c92a2a;

  /* Surfaces */
  --surface-dark: var(--black);
  --surface-light: var(--white);
  --surface-muted: var(--off-white);
  --border-soft: rgba(10,10,11,0.08);
  --border-soft-dark: rgba(255,255,255,0.12);

  /* Glass */
  --glass-bg: rgba(255,255,255,0.65);
  --glass-bg-dark: rgba(18,18,20,0.55);
  --glass-border: rgba(255,255,255,0.35);
  --glass-border-dark: rgba(255,255,255,0.08);
  --glass-blur: 18px;

  /* Radius */
  --r-xs:6px; --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Motion easing (matched to reference) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-apple:cubic-bezier(.32,.72,0,1);

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,10,11,0.06), 0 1px 1px rgba(10,10,11,0.04);
  --shadow-md: 0 8px 24px rgba(10,10,11,0.08);
  --shadow-lg: 0 20px 48px rgba(10,10,11,0.14);
  --shadow-glow: 0 0 0 1px rgba(229,56,59,0.15), 0 12px 32px rgba(229,56,59,0.18);

  /* Type */
  --font-sans: "Plugtech Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1240px;
  --nav-h: 72px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; appearance:none; -webkit-appearance:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:16px; }
ul{ list-style:none; margin:0; padding:0; }

:focus-visible{ outline:2px solid var(--plug-red); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-5); }
@media (max-width:640px){ .container{ padding:0 var(--sp-4); } }

/* Typography */
.eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--plug-red-dark); }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.02em; margin:0 0 var(--sp-3); line-height:1.08; }
h1{ font-size:clamp(2.2rem, 2rem + 2.6vw, 4.2rem); }
h2{ font-size:clamp(1.7rem, 1.4rem + 1.6vw, 2.75rem); }
h3{ font-size:clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }
p{ margin:0 0 var(--sp-4); color:var(--grey-700); }
.lede{ font-size:clamp(1.05rem,1rem + .3vw,1.25rem); color:var(--grey-700); max-width:60ch; }
.on-dark p, .on-dark .lede{ color:rgba(255,255,255,0.72); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--white); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border-radius:var(--r-sm); font-weight:600; font-size:15px; letter-spacing:-0.005em;
  border:1px solid transparent; transition:transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn:active{ transform:scale(0.98); }

/* Gradient accent text, matched to reference's .accent-line treatment */
.accent-line{ background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-primary{ background:var(--black); color:var(--white); }
.btn-primary:hover{ background:var(--plug-red-dark); }
.btn-outline{ background:transparent; color:var(--black); border-color:rgba(10,10,11,0.18); }
.btn-outline:hover{ border-color:var(--black); }
.on-dark .btn-outline{ color:var(--white); border-color:rgba(255,255,255,0.3); }
.on-dark .btn-outline:hover{ border-color:var(--white); }
.on-dark .btn-primary{ background:var(--white); color:var(--black); }
.on-dark .btn-primary:hover{ background:var(--grey-200); }
.on-dark .eyebrow{ color:var(--plug-red-light); }
.btn-ghost{ background:transparent; color:var(--black); padding:10px 4px; }
.btn-whatsapp{ background:var(--whatsapp); color:#063; color:#fff; }
.btn-whatsapp:hover{ background:var(--whatsapp-dark); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Glass surfaces — used sparingly */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md);
}
.glass-dark{
  background:var(--glass-bg-dark);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-border-dark);
}

/* =========================================================
   Utility bar + Navigation
   ========================================================= */
.utility-bar{ background:#c22e2e; color:#fff; font-size:12.5px; }
.utility-bar .container{ display:flex; justify-content:space-between; align-items:center; height:36px; gap:var(--sp-4); }
.utility-bar a{ color:#fff; }
.utility-bar a:hover{ color:rgba(255,255,255,0.8); }
.utility-bar .u-links{ display:flex; align-items:center; gap:var(--sp-5); }
.utility-bar .u-badges{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.utility-bar .u-badges .ic{ flex:0 0 auto; }
.utility-bar .u-show-mobile{ display:none; }
.utility-bar .u-phone-mobile{ font-weight:800; }
@media (max-width:760px){
  .utility-bar .u-hide-mobile{ display:none; }
  .utility-bar .container{ justify-content:center; }
  .utility-bar .u-show-mobile{ display:inline-flex; }
}

header.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--nav-h);
}
.nav-inner{
  position:absolute; inset:0;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-row{
  max-width:var(--container); margin:0 auto; padding:0 var(--sp-5);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:38px; width:auto; }
.brand-name{ font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--white); }
.brand-name small{ display:block; font-weight:500; font-size:10px; letter-spacing:.16em; color:rgba(255,255,255,0.6); }

.primary-nav{ display:flex; align-items:center; justify-content:center; gap:2px; flex:1; min-width:0; }
.primary-nav a{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.82); padding:9px 12px; border-radius:8px; white-space:nowrap; position:relative; }
.primary-nav a:hover{ color:var(--white); background:rgba(255,255,255,0.06); }
.primary-nav a.active{ color:var(--plug-red); font-weight:700; }
.primary-nav a.active:hover{ color:var(--plug-red); }

.nav-actions{ display:flex; align-items:center; gap:var(--sp-3); }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#fff; position:relative; }
.icon-btn:hover{ background:rgba(255,255,255,0.1); }
.cart-badge{ position:absolute; top:2px; right:2px; background:var(--plug-red-dark); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.cart-badge[hidden]{ display:none; }

.menu-toggle{ display:none; }
@media (max-width:1180px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  /* The inline header CTA is redundant once the hamburger menu (with its own
     WhatsApp CTA) takes over; hiding it here is what actually stops the header
     from overflowing the viewport on tablet/mobile widths. */
  .nav-actions .u-hide-mobile{ display:none; }
}
@media (max-width:420px){
  .brand-name small{ display:none; }
}

/* mobile menu sheet */
.mobile-sheet{
  position:fixed; inset:0; z-index:90; display:none;
}
.mobile-sheet.open{ display:block; }
.mobile-sheet .scrim{ position:absolute; inset:0; background:rgba(10,10,11,0.5); }
.mobile-sheet .sheet{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 360px);
  background:var(--black); color:#fff; padding:var(--sp-6) var(--sp-5) var(--sp-7);
  display:flex; flex-direction:column; gap:var(--sp-5);
  transform:translateX(100%); transition:transform 280ms cubic-bezier(.4,0,.2,1);
  overflow-y:auto; padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom));
}
.mobile-sheet.open .sheet{ transform:translateX(0); }
.mobile-sheet .sheet-top{ display:flex; justify-content:space-between; align-items:center; }
.mobile-sheet .close-btn{ background:none; border:none; color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mobile-sheet nav a{ display:block; padding:14px 0; font-size:20px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.08); }
.mobile-sheet .sheet-cta{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; background:var(--black); color:#fff; overflow:hidden;
  padding:var(--sp-9) 0 var(--sp-8);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(229,56,59,0.22), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, rgba(229,56,59,0.10), transparent 60%);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--sp-8); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:var(--sp-6); } }
.hero h1{ font-size:clamp(2.4rem,2rem + 3.6vw,4.6rem); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--sp-5); }
.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual svg{ width:100%; max-width:380px; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }

/* =========================================================
   Hero orbiting device carousel
   ========================================================= */
.device-orbit{
  position:relative; width:100%; max-width:460px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.orbit-ring{
  position:absolute; top:4%; left:4%; right:4%; aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,0.08); border-radius:50%;
  pointer-events:none;
}
.orbit-ring::before{
  content:""; position:absolute; inset:9%;
  border:1px solid rgba(255,255,255,0.05); border-radius:50%;
}
.orbit-label{
  position:absolute; z-index:6;
  background:rgba(15,15,17,0.92); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-md); padding:10px 16px; max-width:210px;
  box-shadow:var(--shadow-lg); line-height:1.3;
}
.orbit-label strong{ display:block; color:#fff; font-size:13px; }
.orbit-label span{ color:rgba(255,255,255,0.55); font-size:11.5px; }
.orbit-label-top{ top:-4px; left:-6px; }
.orbit-label-side{ bottom:12%; right:-10px; }

.orbit-stage{
  position:relative; width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.orbit-device{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:40%; aspect-ratio:3/4;
  opacity:0; transform:scale(0.7); pointer-events:none;
  transition:transform 520ms cubic-bezier(.4,0,.2,1), opacity 420ms ease, filter 420ms ease;
  z-index:1;
}
.orbit-device img, .orbit-device svg{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(0,0,0,0.5)); }
.orbit-device.is-active{
  opacity:1; pointer-events:auto; z-index:4;
  width:56%; transform:translateX(0) scale(1);
}
.orbit-device.is-prev{
  opacity:0.9; pointer-events:auto; z-index:3;
  transform:translate(-78%,6%) scale(0.72);
  filter:brightness(0.82);
}
.orbit-device.is-next{
  opacity:0.9; pointer-events:auto; z-index:3;
  transform:translate(78%,6%) scale(0.72);
  filter:brightness(0.82);
}
.orbit-device.is-hidden{ opacity:0; transform:scale(0.55); }

.orbit-caption{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:var(--sp-4); }
.orbit-arrow{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.orbit-arrow:hover{ background:rgba(255,255,255,0.16); }
.orbit-caption-text{ text-align:center; min-width:150px; }
.orbit-caption-text strong{ display:block; color:#fff; font-size:15px; font-weight:800; }
.orbit-caption-text span{ display:block; color:rgba(255,255,255,0.48); font-size:11.5px; margin-top:2px; text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:900px){
  .device-orbit{ max-width:340px; margin-top:var(--sp-6); }
  .orbit-label{ display:none; }
}
@media (max-width:420px){
  .device-orbit{ max-width:280px; }
}

/* =========================================================
   Sections
   ========================================================= */
.section{ padding:var(--sp-8) 0; }
.section-tight{ padding:var(--sp-7) 0; }
.section-dark{ background:var(--black); color:#fff; }
.section-muted{ background:var(--off-white); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-5); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.section-head h2{ margin-bottom:6px; }

/* Tighter vertical rhythm on small screens: same content, less dead air
   between sections so the page reads as compact rather than a long scroll. */
@media (max-width:620px){
  .section{ padding:var(--sp-6) 0; }
  .section-tight{ padding:var(--sp-5) 0; }
  .section-head{ margin-bottom:var(--sp-5); }
  .hero{ padding:var(--sp-7) 0 var(--sp-6); }
  .cta-band{ padding:var(--sp-6) var(--sp-4); }
  .form-card{ padding:var(--sp-5); }
}

/* =========================================================
   Product grid & cards
   ========================================================= */
.grid{ display:grid; gap:var(--sp-5); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

/* Product-card grids stay compact (2-up) even on small phones so the
   catalogue reads as a tidy grid instead of one giant scroll of full-width
   rows. Scoped to grids that actually contain product cards so feature/
   info grids (icon + text rows) keep their single-column stack. */
@media (max-width:620px){
  .grid:has(> .product-card){ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
}
@media (max-width:380px){
  .grid:has(> .product-card){ gap:8px; }
}

.product-card{
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:10px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.thumb{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-card .thumb{ aspect-ratio:1/1; background:linear-gradient(180deg,var(--grey-100),var(--off-white)); border-radius:var(--r-md); padding:var(--sp-4); }
.thumb img, .thumb svg{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.product-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.product-name{ font-weight:700; font-size:16px; }
.product-sub{ font-size:13px; color:var(--grey-500); }
.product-price{ font-weight:800; font-size:15px; }
.chip{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); background:var(--grey-100); color:var(--grey-700); }
.chip-dark{ background:var(--black); color:#fff; }
.chip-new{ background:#eaf6ee; color:var(--success); }
.chip-refurb{ background:#fff4e0; color:var(--warning); }
.card-actions{ display:flex; gap:8px; margin-top:4px; }
.card-actions .btn{ padding:11px 10px; font-size:13px; }
.card-actions .btn-outline{ flex:1; }
.card-actions .btn-primary{ flex:0 0 auto; padding:11px 14px; }

/* Compact mobile card: smaller type/padding so a 2-up grid stays tidy. */
@media (max-width:620px){
  .product-card{ padding:12px; gap:8px; border-radius:var(--r-md); }
  .product-card .thumb{ padding:8px; }
  .product-name{ font-size:13.5px; line-height:1.25; }
  .product-sub{ font-size:11px; }
  .product-price{ font-size:13.5px; }
  .badge-row{ gap:6px; }
  .product-card .chip{ font-size:9.5px; padding:3px 8px; }
  .card-actions{ gap:6px; }
  .card-actions .btn-outline{ flex:1; padding:9px 4px; font-size:12px; }
  .card-actions .btn-primary{ flex:0 0 38px; padding:9px; }
  .product-card .product-meta{ flex-direction:column; align-items:flex-start; gap:2px; }
  .product-card .product-meta > .product-sub{ white-space:nowrap; }
}

/* =========================================================
   Generation browser
   ========================================================= */
.gen-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.gen-pill{
  flex:0 0 auto; padding:12px 22px; border-radius:var(--r-pill); border:1px solid var(--border-soft);
  font-weight:700; font-size:14px; color:var(--grey-700); background:#fff; transition:all var(--transition);
}
.gen-pill:hover{ border-color:var(--black); color:var(--black); }
.gen-pill.active{ background:var(--black); color:#fff; border-color:var(--black); }
.on-dark .gen-pill{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:rgba(255,255,255,0.75); }
.on-dark .gen-pill.active{ background:var(--plug-red-dark); border-color:var(--plug-red-dark); color:#fff; }
@media (max-width:620px){
  .gen-strip{ gap:8px; }
  .gen-pill{ padding:9px 16px; font-size:12.5px; }
}
@media (max-width:380px){
  .gen-pill{ padding:8px 13px; font-size:12px; }
}

/* =========================================================
   Filters (glass accent)
   ========================================================= */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px;
  border-radius:var(--r-lg); margin-bottom:var(--sp-6); position:sticky; top:calc(var(--nav-h) + 12px); z-index:20;
}
.filter-bar select, .filter-bar input[type="search"]{
  border:1px solid var(--border-soft); background:rgba(255,255,255,0.7); border-radius:var(--r-pill);
  padding:10px 16px; font-size:14px; color:var(--ink);
}
.filter-bar input[type="search"]{ flex:1; min-width:180px; }
@media (max-width:620px){
  .filter-bar{ padding:12px; gap:8px; }
  .filter-bar input[type="search"]{ flex:1 1 100%; min-width:0; }
  .filter-bar select{ flex:1 1 calc(50% - 4px); min-width:0; padding:10px 12px; }
  .filter-bar .btn{ flex:1 1 100%; }
}

/* =========================================================
   Forms
   ========================================================= */
.form-card{ background:#fff; border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:var(--sp-6); box-shadow:var(--shadow-md); }
.field{ margin-bottom:var(--sp-4); }
.field label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.field .hint{ font-size:12px; color:var(--grey-500); margin-top:4px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--grey-200); border-radius:var(--r-md); background:#fff; transition:border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--plug-red); }
.field input[type="file"]{ padding:10px 12px; font-size:13px; color:var(--grey-700); cursor:pointer; }
.field input[type="file"]::file-selector-button{
  margin-right:12px; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--grey-200);
  background:var(--grey-100); font-weight:600; font-size:13px; color:var(--ink); cursor:pointer; transition:background var(--transition);
}
.field input[type="file"]::file-selector-button:hover{ background:var(--grey-200); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-alert{ padding:14px 16px; border-radius:var(--r-md); font-size:14px; margin-bottom:var(--sp-4); }
.form-alert.success{ background:#eaf6ee; color:var(--success); }
.form-alert.error{ background:#fdecec; color:var(--error); }
fieldset{ border:none; padding:0; margin:0 0 var(--sp-4); }
.radio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; }
.radio-chip span{ display:block; text-align:center; padding:10px 8px; border-radius:var(--r-md); border:1px solid var(--grey-200); font-size:13px; font-weight:600; }
.radio-chip input:checked + span{ border-color:var(--black); background:var(--black); color:#fff; }

/* =========================================================
   Why Plugtech / feature grid
   ========================================================= */
.feature{ display:flex; gap:14px; align-items:flex-start; }
.feature .icon{ width:44px; height:44px; border-radius:12px; background:var(--grey-100); display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--plug-red); }
.on-dark .feature .icon{ background:rgba(255,255,255,0.08); }
.feature h3{ font-size:16px; margin-bottom:4px; }
.feature p{ font-size:14px; margin-bottom:0; }

/* =========================================================
   FAQ accordion
   ========================================================= */
.accordion-item{ border-bottom:1px solid var(--border-soft); }
.accordion-item summary{ list-style:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:16px; }
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary .plus{ transition:transform var(--transition); }
.accordion-item[open] summary .plus{ transform:rotate(45deg); }
.accordion-item .a-body{ padding:0 4px 20px; color:var(--grey-700); }

/* =========================================================
   Final CTA band
   ========================================================= */
.cta-band{ background:var(--black); color:#fff; border-radius:var(--r-xl); padding:var(--sp-8) var(--sp-6); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(229,56,59,0.25), transparent 70%); }
.cta-band > *{ position:relative; }

/* =========================================================
   Footer
   ========================================================= */
footer.site-footer{ background:var(--near-black); color:rgba(255,255,255,0.7); padding:var(--sp-8) 0 var(--sp-5); }
footer.site-footer p{ color:rgba(255,255,255,0.68); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--sp-6); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.footer-grid a{ display:block; padding:6px 0; font-size:14px; color:rgba(255,255,255,0.65); }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,0.08); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; font-size:13px; }
.footer-bottom > span:first-child{ text-align:left; }
.footer-bottom > span:last-child{ text-align:right; }
.footer-credit{ text-align:center; color:rgba(255,255,255,0.55); }
.footer-credit a{ color:rgba(255,255,255,0.78); text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:#fff; }
@media (max-width:640px){
  .footer-bottom{ grid-template-columns:1fr; text-align:center; }
  .footer-bottom > span:first-child, .footer-bottom > span:last-child{ text-align:center; }
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--plug-red); }

/* =========================================================
   Sticky mobile WhatsApp CTA
   ========================================================= */
.sticky-whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:flex; align-items:center; gap:10px; background:var(--whatsapp); color:#fff;
  padding:14px 20px; border-radius:var(--r-pill); box-shadow:0 12px 28px rgba(37,211,102,0.4); font-weight:700; font-size:14px;
}
.sticky-whatsapp:hover{ background:var(--whatsapp-dark); }
@media (max-width:640px){ .sticky-whatsapp span.label{ display:none; } .sticky-whatsapp{ padding:14px; bottom:calc(18px + env(safe-area-inset-bottom)); } }

/* =========================================================
   Cookie consent
   ========================================================= */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:95; max-width:560px; margin:0 auto;
  border-radius:var(--r-lg); padding:18px 20px; display:none; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-bar.show{ display:flex; }
.cookie-bar p{ margin:0; font-size:13px; color:var(--grey-700); flex:1; min-width:220px; }
.cookie-actions{ display:flex; gap:8px; }

/* =========================================================
   Promo popup (18 series / Duo)
   ========================================================= */
.promo-overlay{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:clamp(14px,3vw,32px); }
.promo-overlay.show{ display:flex; }
.promo-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.promo-modal{
  position:relative; z-index:1; display:grid; gap:18px;
  width:min(640px,100%); max-height:min(92vh,760px); overflow:hidden auto;
  padding:clamp(26px,3.4vw,34px) clamp(22px,3vw,32px) clamp(20px,2.6vw,26px);
  border-radius:var(--r-xl); border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(100% 70% at 12% 0%, rgba(229,56,59,0.28) 0%, transparent 58%),
    radial-gradient(90% 60% at 92% 8%, rgba(255,133,119,0.2) 0%, transparent 55%),
    #0b0b0e;
  box-shadow:0 50px 120px -40px rgba(0,0,0,0.95);
  color:#fff;
}
.promo-glow{ position:absolute; inset:-30% 30% auto -20%; height:70%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,95,109,0.3), transparent 70%); filter:blur(60px); pointer-events:none; }
.promo-close{
  position:absolute; top:12px; right:12px; z-index:4; display:grid; place-items:center;
  width:36px; height:36px; border:1px solid rgba(255,255,255,0.18); border-radius:50%;
  background:rgba(10,10,13,0.6); color:rgba(255,255,255,0.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:var(--transition);
}
.promo-close:hover{ color:#fff; background:rgba(255,255,255,0.12); }

.promo-head{ display:grid; gap:9px; max-width:46ch; padding-right:40px; }
.promo-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--plug-red-light); }
.icon-xs{ width:14px; height:14px; flex:none; }
.promo-title{ font-size:clamp(1.5rem,3.2vw,2rem); font-weight:800; letter-spacing:-0.03em; line-height:1.08; margin:0; color:#fff; }
.promo-text{ font-size:14px; line-height:1.55; color:rgba(255,255,255,0.68); margin:0; }

.promo-devices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; margin:0; padding:0; }
.promo-device{ min-width:0; }
.promo-device-link{
  display:grid; gap:6px; justify-items:center; height:100%; padding:14px 10px 12px;
  border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));
  text-align:center; transition:var(--transition); text-decoration:none;
}
.promo-device-link:hover{ border-color:rgba(255,255,255,0.28); transform:translateY(-2px); }
.promo-device-shot{ position:relative; width:100%; height:clamp(90px,15vw,130px); display:flex; align-items:center; justify-content:center; }
.promo-device-shot img{ max-width:100%; max-height:100%; object-fit:contain; }
.promo-device-name{ font-size:14px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; color:#fff; }
.promo-device-tag{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.promo-device-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:6px;
  min-height:36px; width:100%; padding:0 10px; border-radius:var(--r-sm);
  background:var(--accent-grad); color:#fff; font-size:13px; font-weight:700;
}

.promo-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.promo-timer{
  display:grid; gap:4px; flex:1 1 200px; padding:10px 14px; border-radius:var(--r-sm);
  background:linear-gradient(#101014,#101014) padding-box, var(--accent-grad) border-box;
  border:1px solid transparent;
}
.promo-timer-label{ font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:0; }
.promo-clock{ display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; }
.promo-unit{ display:inline-flex; align-items:baseline; gap:3px; }
.promo-unit b{ font-size:18px; font-weight:800; color:#fff; }
.promo-unit i{ font-size:10px; font-style:normal; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; }
.promo-sep{ font-size:16px; font-weight:700; color:rgba(255,255,255,0.4); transform:translateY(-1px); }
.promo-ask{ flex:1 1 220px; justify-content:center; }

@media (max-width:640px){
  .promo-devices{ gap:7px; }
  .promo-device-link{ padding:10px 6px; gap:4px; }
  .promo-device-shot{ height:clamp(70px,22vw,100px); }
  .promo-device-name{ font-size:12px; }
  .promo-device-tag{ display:none; }
  .promo-device-cta{ min-height:32px; font-size:12px; padding:0 6px; }
  .promo-ask{ flex:1 1 100%; }
  .promo-title{ font-size:1.4rem; }
  .promo-text{ font-size:13px; }
}


/* =========================================================
   Cart drawer
   ========================================================= */
.cart-overlay{ position:fixed; inset:0; background:rgba(8,8,9,0.5); z-index:92; display:none; }
.cart-overlay.open{ display:block; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(92vw,420px); background:#fff; z-index:93;
  transform:translateX(100%); transition:transform 280ms cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.cart-overlay.open .cart-drawer{ transform:translateX(0); }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-soft); }
.cart-items{ flex:1; overflow-y:auto; padding:12px 20px; }
.cart-line{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
.cart-line .thumb{ width:64px; height:64px; border-radius:10px; background:var(--grey-100); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cart-line .thumb svg{ width:70%; }
.cart-line .meta{ flex:1; }
.cart-line .meta .name{ font-weight:700; font-size:14px; }
.cart-line .meta .opts{ font-size:12px; color:var(--grey-500); }
.qty-control{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.qty-control button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--grey-200); background:#fff; }
.cart-foot{ padding:18px 20px; border-top:1px solid var(--border-soft); }
.cart-foot .subtotal{ display:flex; justify-content:space-between; font-weight:800; margin-bottom:12px; }
.cart-empty{ padding:60px 20px; text-align:center; color:var(--grey-500); }
.remove-link{ font-size:12px; color:var(--grey-500); text-decoration:underline; margin-left:10px; }

/* =========================================================
   Misc utility
   ========================================================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.divider{ height:1px; background:var(--border-soft); border:none; margin:var(--sp-6) 0; }
.breadcrumbs{ font-size:13px; color:var(--grey-500); margin-bottom:var(--sp-5); }
.breadcrumbs a:hover{ color:var(--black); }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:200; }
.skip-link:focus{ left:16px; top:16px; }
.empty-state{ text-align:center; padding:var(--sp-9) var(--sp-5); color:var(--grey-500); }